/* ==========================================================================
   Cruises to Galapagos Islands — "Pacific Deep / Frigatebird Coral"
   Deep Pacific blue on a pale shell-white paper, with a coral accent reserved
   for actions. Same component vocabulary as the rest of the pipeline; only the
   palette, the display face and the ship-card layer are this site's own.
   No webfonts (CWV), no framework. Mobile-first.
   ========================================================================== */

:root {
  --teal-900: #0d2b3e;
  --teal-700: #14506e;
  --teal:     #1d7fa8;
  --teal-200: #b9dcea;
  --teal-050: #eaf4f9;
  --glacier:  #63c9c2;   /* shallow-water turquoise, kept var name for reuse */

  --larch:     #d9582f;   /* frigatebird coral, actions only */
  --larch-700: #b13f1d;

  --ink:    #14202a;
  --ink-2:  #364a58;
  --stone:  #5f7280;
  --line:   #dce5ea;
  --sand:   #f4f8fa;
  --paper:  #ffffff;

  --s1: .375rem; --s2: .75rem; --s3: 1.125rem; --s4: 1.75rem;
  --s5: 2.75rem; --s6: 4rem; --s7: 5.5rem;

  --r:   14px;
  --r-s: 9px;
  --shadow:    0 1px 2px rgba(13,43,62,.07), 0 6px 20px rgba(13,43,62,.08);
  --shadow-lg: 0 2px 6px rgba(13,43,62,.08), 0 18px 44px rgba(13,43,62,.14);

  --wrap: 1180px;
  --narrow: 76ch;
}

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

/* Root type scale. Everything else is in rem, so this single clamp moves the whole system:
   ~18px on a phone up to ~19.5px on a wide screen, comfortably above the 16px floor that
   made the imported long-form copy feel cramped. */
html {
  font-size: clamp(18px, 17px + .3vw, 19.5px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.68 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.16; letter-spacing: -.018em; margin: 0 0 var(--s2);
  color: var(--teal-900); font-weight: 700;
  /* Tour titles carry unbreakable runs like "Calgary/Canmore/Banff". Without this they set a
     min-content width wider than a phone and drag the whole grid past the viewport edge. */
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.35rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.15rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); }
p  { margin: 0 0 var(--s3); }

a { color: var(--teal-700); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--larch-700); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal-900); color: #fff; padding: .7rem 1rem; border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 3px solid var(--larch); outline-offset: 2px; border-radius: 3px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--s6); }
/* Headings run the full width of their container. Capping them by character count forced
   short titles onto two lines while the row beside them sat empty. */
h1, h2 { max-width: none; text-wrap: pretty; }
.sec-blurb { color: var(--ink-2); max-width: 68ch; font-size: 1.06rem; margin-bottom: var(--s4); }

/* A band is FULL-BLEED and holds its own .wrap. Putting a background straight on a .wrap
   element paints it only as wide as the text column, which reads as a stray grey slab. */
.band { width: 100%; }
.band > .wrap { padding-block: var(--s6); }
.band-soft { background: var(--sand); border-block: 1px solid var(--line); }
.band-tl { background: linear-gradient(170deg, var(--teal-900), #0b5560 65%, var(--teal-700)); color: #dceff0; }
.band-tl h2 { color: #fff; }
.band-tl .sec-blurb { color: #a9d4d8; }
.band-cta  { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #eaf6f6; border-radius: var(--r); padding: var(--s5) var(--s4); margin-bottom: var(--s6); }
.band-cta h2, .band-cta a:not(.btn) { color: #fff; }
.band-cta p { color: #cfe8ea; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--teal); --btn-fg: #fff;
  display: inline-block; background: var(--btn-bg); color: var(--btn-fg);
  padding: .78rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: .97rem; line-height: 1.25; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  box-shadow: 0 1px 2px rgba(13,43,62,.14);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); }
.btn-primary { --btn-bg: var(--larch); }
.btn-primary:hover { --btn-bg: var(--larch-700); }
.btn-brand { --btn-bg: var(--teal-700); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--teal-700); border-color: var(--teal-200); box-shadow: none; }
.btn-hero-ghost { --btn-bg: rgba(255,255,255,.12); --btn-fg: #fff; border-color: rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-hero-ghost:hover { --btn-bg: rgba(255,255,255,.22); --btn-fg: #fff; }
.btn-lg { padding: .95rem 1.6rem; font-size: 1.04rem; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(9px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: var(--s3); min-height: 60px; padding-block: 6px; }
.brand { display: inline-flex; align-items: center; margin-right: auto; line-height: 0; }
.brand img { width: 120px; height: auto; display: block; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; font-size: 1.25rem;
  background: var(--teal-050); color: var(--teal-900);
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.nav-links { list-style: none; margin: 0; padding: 0; display: none; }
.nav-links[data-open="true"] {
  display: flex; flex-direction: column; gap: .1rem;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: var(--s2) 1rem var(--s3); box-shadow: var(--shadow);
  max-height: calc(100vh - 100%); overflow-y: auto;
}
.nav-links > li > a:not(.btn), .nav-trigger {
  display: block; width: 100%; text-align: left; padding: .65rem .2rem;
  color: var(--ink); text-decoration: none; font: inherit; font-weight: 550;
  background: none; border: 0; cursor: pointer;
}
.nav-links > li > a:not(.btn):hover, .nav-trigger:hover { color: var(--teal); }
.nav-trigger { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.nav-trigger::after {
  content: ""; width: .42rem; height: .42rem; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -.25rem; opacity: .6; transition: transform .16s ease;
}
.has-mega[data-open="true"] > .nav-trigger::after { transform: rotate(225deg); margin-top: .15rem; }
.nav-cta .btn { display: block; text-align: center; margin: var(--s2) 0; color: #fff; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; color: #fff; display: grid; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(13,43,62,.74) 0%, rgba(13,43,62,.55) 45%, rgba(13,43,62,.82) 100%);
}
.hero-inner { padding-block: clamp(3.5rem, 9vw, 7rem); max-width: 46rem; }
.hero h1 { color: #fff; text-wrap: balance; }
.hero-sub { font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem); font-weight: 600; color: var(--teal-200); margin-bottom: var(--s3); }
.hero .lede { color: rgba(255,255,255,.92); font-size: 1.05rem; }
.hero-proof { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: .45rem .95rem; border-radius: 999px; font-size: .95rem; }
.hero-proof b { font-size: 1.05rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); margin-bottom: 0; }
.star { color: #f6c445; }

/* ---------- tour cards ---------- */
.tgrid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 40em) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tgrid { grid-template-columns: repeat(3, 1fr); } }

.tcard {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tcard-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--teal-050); }
.tcard-media img { width: 100%; height: 100%; object-fit: cover; }
.tcard-badges { position: absolute; top: .7rem; left: .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.badge {
  background: var(--teal-900); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px;
}
.tcard-body { display: flex; flex-direction: column; flex: 1; padding: var(--s3); }
.tcard-title { font-size: 1.09rem; margin-bottom: var(--s2); }
.tcard-title a { color: var(--teal-900); text-decoration: none; }
.tcard-title a:hover { color: var(--teal); }
.tcard-desc {
  color: var(--ink-2); font-size: .945rem; margin-bottom: var(--s3);
  display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tcard-meta {
  list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .85rem;
  margin: 0 0 var(--s3); padding: 0; font-size: .875rem; color: var(--stone);
}
.tcard-meta .m-rating { color: var(--ink); font-weight: 650; }
.tcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.price { font-size: 1.5rem; font-weight: 750; color: var(--teal-900); letter-spacing: -.02em; }
.price .cur { font-size: .95rem; vertical-align: .35em; margin-right: .05em; }
.tcard-foot .btn { padding: .6rem 1rem; font-size: .88rem; }

/* ---------- why / feature cards ---------- */
.wgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 44em) { .wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68em) { .wgrid { grid-template-columns: repeat(4, 1fr); } }
.wcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3); }
.wcard h3 { margin-bottom: var(--s2); }
.wcard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
.wicon {
  width: 46px; height: 46px; padding: 9px; margin-bottom: var(--s3);
  background: var(--teal-050); border-radius: 50%;
}

/* ---------- team ---------- */
.team-grid { display: grid; gap: var(--s4); align-items: center; }
@media (min-width: 56em) { .team-grid { grid-template-columns: 5fr 6fr; gap: var(--s5); } }
.team-media img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; }
.team-body p { color: var(--ink-2); }

/* ---------- page head / stats / sitemap / contact ---------- */
.page-head { padding-bottom: var(--s3); }
.page-head h1 { margin-bottom: var(--s2); }

.stat-row {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(2, 1fr); text-align: center;
}
@media (min-width: 52em) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-row li { display: flex; flex-direction: column; gap: .2rem; }
.stat-row b { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); color: var(--teal); font-weight: 750; letter-spacing: -.03em; }
.stat-row span { color: var(--stone); font-size: .9rem; }

.sitemap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem var(--s4); }
@media (min-width: 44em) { .sitemap-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70em) { .sitemap-list { grid-template-columns: repeat(3, 1fr); } }
.sitemap-list li { border-bottom: 1px solid var(--line); padding: .5rem 0; }

.contact-dl { margin: 0; }
.contact-dl dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.contact-dl dd { margin: .2rem 0 0; color: var(--ink-2); }

/* ---------- awards ---------- */
.award-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .award-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 68em) { .award-list { grid-template-columns: repeat(5, 1fr); } }
.award {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  border: 2px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s2);
  transition: border-color .18s ease;
}
.award:hover { border-color: var(--teal-200); }
.award img { width: 34px; height: 34px; }
.aw-name { font-weight: 700; font-size: .86rem; color: var(--ink); }
.aw-year { font-size: .78rem; color: var(--stone); font-weight: 600; }

/* ---------- FAQ ---------- */
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); margin-bottom: var(--s2); overflow: hidden;
}
.faq details[open] { border-color: var(--teal-200); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s3);
  font-weight: 650; color: var(--teal-900); display: flex; justify-content: space-between; gap: var(--s2);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { background: var(--teal-050); }
.faq-body { padding: 0 var(--s3) var(--s2); color: var(--ink-2); }
.faq-body > :last-child { margin-bottom: var(--s3); }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size: .855rem; color: var(--stone); padding-top: var(--s3); }
.crumbs a { color: var(--stone); }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- article / prose ---------- */
.art-head { padding-block: var(--s4) var(--s3); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.article { padding-bottom: var(--s6); }
.lede { font-size: 1.1rem; color: var(--ink-2); }

/* A plain-text email/URL/long compound word (contact-info lists are common in imported
   pages) has no natural break point and otherwise overflows a narrow phone column. */
.prose { font-size: 1.02rem; overflow-wrap: anywhere; }
/* Full-width prose sections (homepage, tour pages) still need a readable measure, while
   tables, figures and maps stay wide. Article pages already sit in .wrap-narrow. */
.section.prose > * { max-width: var(--narrow); }
.section.prose > .table-wrap,
.section.prose > figure,
.section.prose > iframe,
.section.prose > img { max-width: 100%; }
.prose h2 { margin-top: var(--s5); }
.prose h3 { margin-top: var(--s4); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 var(--s3); }
.prose li { margin-bottom: .4rem; }
.prose li > ul, .prose li > ol { margin-top: .4rem; }
.prose img { border-radius: var(--r); margin-block: var(--s4); box-shadow: var(--shadow); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s5); }
.prose dl { margin: 0 0 var(--s3); }
.prose dt { font-weight: 700; color: var(--teal-900); margin-top: var(--s3); }
.prose iframe { border: 0; border-radius: var(--r); width: 100%; aspect-ratio: 16 / 10; margin-block: var(--s4); }
.prose blockquote {
  margin: var(--s4) 0; padding: var(--s2) var(--s4);
  border-left: 4px solid var(--teal-200); background: var(--sand);
  border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-2);
}
.prose strong { color: var(--ink); }

.fig { margin: var(--s4) 0; }
.fig img { margin: 0; }
.fig figcaption { font-size: .86rem; color: var(--stone); padding-top: .6rem; }

.table-wrap { overflow-x: auto; margin-block: var(--s4); border: 1px solid var(--line); border-radius: var(--r); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; background: var(--paper); }
caption { caption-side: top; text-align: left; padding: var(--s2) var(--s3); font-weight: 650; color: var(--teal-900); }
th, td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--teal-050); color: var(--teal-900); font-weight: 700; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fbfaf8; }

.small { font-size: .85rem; color: var(--stone); }
.disc { margin-top: var(--s2); }

/* ---------- tour page ---------- */
.tour-hero { display: grid; gap: var(--s4); padding-block: var(--s4) var(--s5); }
.tour-hero > * { min-width: 0; }
@media (min-width: 58em) { .tour-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5); align-items: center; } }
.th-media img { border-radius: var(--r); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.th-body .lede { margin-bottom: var(--s3); }
.th-stats { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s3) 0; border-block: 1px solid var(--line); margin-bottom: var(--s4); }
.th-stat { font-size: .93rem; color: var(--stone); }
.th-stat b { color: var(--ink); font-size: 1.12rem; font-weight: 750; }
.th-price b { color: var(--teal-900); font-size: 1.5rem; letter-spacing: -.02em; }
.th-cta { margin-bottom: 0; }

.incl-grid { display: grid; gap: var(--s3); }
@media (min-width: 48em) { .incl-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } }
.incl { list-style: none; margin: 0; padding: 0; }
.incl li { position: relative; padding-left: 1.75rem; margin-bottom: .55rem; color: var(--ink-2); }
.incl li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; font-size: 1.05rem; }
.incl.yes li::before { content: "\2713"; color: var(--teal); }
.incl.no  li::before { content: "\2715"; color: #b4553f; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding-left: 3.1rem;
  margin-bottom: var(--s4); color: var(--ink-2);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 2.15rem; height: 2.15rem; display: grid; place-items: center;
  background: var(--teal-050); color: var(--teal-700); border: 1px solid var(--teal-200);
  border-radius: 50%; font-weight: 750; font-size: .95rem;
}

/* ---------- footer ---------- */
.site-footer { background: var(--teal-900); color: #cfe4e6; margin-top: var(--s6); padding-block: var(--s6) var(--s4); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--glacier); text-decoration: underline; }
.foot-grid { display: grid; gap: var(--s4); }
@media (min-width: 48em) { .foot-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s5); } }
.foot-brand { font-size: 1.25rem; font-weight: 750; color: #fff; margin-bottom: var(--s2); }
.foot-h { font-size: 1rem; color: #fff; letter-spacing: .01em; }
.site-footer address { font-style: normal; margin-bottom: var(--s2); }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: .45rem; }
.foot-legal { border-top: 1px solid rgba(255,255,255,.16); margin-top: var(--s5); padding-top: var(--s3); }
.foot-legal p { font-size: .82rem; color: #9dbcbf; }
.copy { margin-bottom: 0; }

/* GetYourGuide widget placeholders keep their own sizing; just give them breathing room. */
[data-gyg-widget] { margin-block: var(--s4); }

.updated { font-size: .87rem; color: var(--stone); margin: 0; }
.rev-line { font-size: .93rem; margin-bottom: 0; }
.band-cta .rev-line a { color: #fff; }

/* ---------- contact form ---------- */
.cform { margin-bottom: var(--s3); }
.f-row { display: flex; flex-direction: column; gap: .35rem; margin-bottom: var(--s3); }
.f-row label { font-weight: 650; font-size: .92rem; color: var(--teal-900); }
.cform input, .cform textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--paper); width: 100%;
}
.cform input:focus, .cform textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
/* `.cform input { width: 100% }` above targets the text/email fields; a checkbox is also an
   <input> and inherited it, and because `flex: 0 0 auto` leaves flex-basis at "auto" it falls
   back to the element's own `width` property — so every checkbox stretched to fill its flex
   row, shoving its label text (0 width left for it) off past the edge of the viewport. This
   was the actual cause of the quote-form horizontal-overflow bug, not the label/span sizing. */
.cform input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.cform textarea { resize: vertical; min-height: 9rem; }
.cform button[disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .93rem; padding: .7rem .9rem; border-radius: var(--r-s); margin-bottom: 0; }
.form-status.is-ok  { background: var(--teal-050); color: var(--teal-900); border: 1px solid var(--teal-200); }
.form-status.is-err { background: #fdf0ec; color: #8c3b26; border: 1px solid #f0c8bb; }

/* ==========================================================================
   Engagement components: timeline, link cards, video grid, article TOC.
   The imported bodies are 4,000+ word slabs; these give a reader somewhere to
   land, something to scan, and a way out that is not the back button.
   ========================================================================== */

/* ---------- interactive timeline ---------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: .6rem; bottom: .6rem;
  width: 2px; background: linear-gradient(180deg, var(--glacier), rgba(126,207,214,.15));
}
.tl-item {
  position: relative; padding: .85rem 1rem .85rem 2.4rem;
  border-radius: var(--r-s); display: grid; gap: .15rem;
  transition: background-color .18s ease, transform .18s ease;
  opacity: 0; transform: translateY(10px);
}
.tl-item.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
.tl-item::before {
  content: ""; position: absolute; left: 3px; top: 1.35rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--glacier); border: 2px solid var(--teal-900);
  transition: transform .18s ease, background-color .18s ease;
}
.tl-item:hover, .tl-item:focus-within { background: rgba(255,255,255,.08); transform: translateX(3px); }
.tl-item:hover::before { transform: scale(1.35); background: #fff; }
.tl-time {
  font-variant-numeric: tabular-nums; font-weight: 750; font-size: .82rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--glacier);
}
.tl-text { color: #e6f4f5; font-size: 1.02rem; }
.tl-note { margin-top: var(--s4); color: #cfe6e8; }
.tl-note a { color: #fff; }
@media (min-width: 46em) {
  .tl-item { grid-template-columns: 7.5rem 1fr; gap: var(--s3); align-items: baseline; }
  .tl-time { text-align: right; }
  .timeline::before { left: 8.9rem; }
  .tl-item::before { left: 8.4rem; }
  .tl-item { padding-left: 0; padding-right: 1rem; }
  .tl-text { padding-left: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) { .tl-item { opacity: 1; transform: none; } }

/* ---------- internal link cards ---------- */
.lgrid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40em) { .lgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66em) { .lgrid { grid-template-columns: repeat(3, 1fr); } }
.lcard {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: var(--s3); color: var(--teal-900); text-decoration: none; font-weight: 600;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.lcard::after { content: "\2192"; color: var(--teal); transition: transform .18s ease; }
.lcard:hover { border-color: var(--teal-200); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--teal-900); }
.lcard:hover::after { transform: translateX(4px); }

/* ---------- why cards, now clickable ---------- */
a.wcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
a.wcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); color: inherit; }
a.wcard h3 { transition: color .18s ease; }
a.wcard:hover h3 { color: var(--teal); }
.wcard-go { margin-top: auto; padding-top: var(--s3); font-weight: 650; font-size: .9rem; color: var(--teal); }
a.wcard:hover .wcard-go span { display: inline-block; transform: translateX(4px); transition: transform .18s ease; }

/* ---------- video grid ---------- */
.vgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 52em) { .vgrid { grid-template-columns: repeat(2, 1fr); } }
.vid { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: var(--teal-900); }
.vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }

/* ---------- article layout + table of contents ---------- */
.art-head { padding-block: var(--s5) var(--s3); }
.art-head .lede { max-width: 62ch; }
.art-layout { display: block; }
.art-body { max-width: var(--narrow); }
@media (min-width: 68em) {
  .art-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .art-body { max-width: 70ch; }
}

.toc { margin-bottom: var(--s4); }
.toc details {
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--sand); padding: var(--s2) var(--s3);
}
.toc summary {
  cursor: pointer; font-weight: 700; color: var(--teal-900);
  font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
  list-style: none; padding: .35rem 0;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: " +"; color: var(--teal); }
.toc details[open] summary::after { content: " \2212"; }
.toc-list { list-style: none; margin: .5rem 0 .3rem; padding: 0; counter-reset: toc; }
.toc-list li { counter-increment: toc; }
.toc-list a {
  display: block; padding: .38rem 0 .38rem 1.6rem; position: relative;
  font-size: .91rem; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  border-left: 2px solid transparent; transition: color .16s ease, border-color .16s ease;
}
.toc-list a::before {
  content: counter(toc); position: absolute; left: .35rem; top: .42rem;
  font-size: .72rem; font-weight: 700; color: var(--stone);
}
.toc-list a:hover { color: var(--teal); }
.toc-list a.is-current { color: var(--teal-900); font-weight: 650; border-left-color: var(--teal); background: rgba(13,125,136,.06); }

@media (min-width: 68em) {
  .toc { position: sticky; top: 5.2rem; margin-bottom: 0; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .toc details { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 0 0 0 var(--s3); }
  .toc summary { pointer-events: none; }
  .toc summary::after { content: ""; }
}

/* Anchor targets must clear the sticky header when jumped to. */
.prose h2 { scroll-margin-top: 5.5rem; }

/* ---------- TL;DR callout ---------- */
.tldr {
  background: var(--teal-050); border: 1px solid var(--teal-200);
  border-left: 4px solid var(--teal); border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}
.tldr-h {
  font-size: .76rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal-700); margin-bottom: .4rem;
}
.tldr p:last-child { margin-bottom: 0; }

/* ---------- reading progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 50;
  background: transparent; pointer-events: none;
}
.progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--glacier));
  transition: width .1s linear;
}

/* ---------- sticky conversion bar (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: .6rem .9rem; background: rgba(13,43,62,.97); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.14);
  transform: translateY(110%); transition: transform .25s ease;
}
.sticky-cta.visible { transform: none; }
.sticky-cta .sc-proof { color: #cfe8ea; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { white-space: nowrap; padding: .6rem 1rem; font-size: .9rem; }
@media (min-width: 62em) {
  .sticky-cta { justify-content: center; gap: var(--s4); padding: .7rem 1.5rem; }
  .sticky-cta .sc-proof { font-size: .95rem; }
}

/* ---------- timeline layout + featured aside ---------- */
.tl-layout { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 62em) { .tl-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--s6); } }
.tl-aside {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); overflow: hidden; backdrop-filter: blur(4px);
}
.tl-aside img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tl-aside-body { padding: var(--s3); }
.tl-aside h3 { color: #fff; font-size: 1.05rem; margin-bottom: var(--s2); }
.tl-kicker {
  font-size: .7rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
  color: var(--glacier); margin-bottom: .45rem;
}
.tl-meta { color: #bcdcdf; font-size: .88rem; margin-bottom: var(--s3); }
@media (min-width: 62em) { .tl-aside { position: sticky; top: 5.5rem; } }

/* Article header aligns with the content grid, not the page centre. */
.art-head { max-width: none; }
.art-head .lede { max-width: 64ch; }

/* ==========================================================================
   Interactive data blocks: sortable price tables, step cards, map panel.
   ========================================================================== */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- sortable price tables ---------- */
.table-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2); margin-bottom: var(--s3);
}
.tfilter { flex: 1 1 16rem; max-width: 26rem; }
.tfilter input {
  font: inherit; font-size: .95rem; width: 100%;
  padding: .6rem .85rem .6rem 2.1rem; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2361716f' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center / 1.05rem;
}
.tfilter input:focus { border-color: var(--teal); outline: 2px solid var(--teal-200); outline-offset: 1px; }
.tfilter-hint { margin: 0; }

table.sortable thead th { padding: 0; }
.th-sort {
  display: flex; align-items: center; gap: .35rem; width: 100%;
  font: inherit; font-weight: 700; font-size: .93rem; color: var(--teal-900);
  background: none; border: 0; padding: .7rem .85rem; cursor: pointer; text-align: left;
}
.th-sort:hover { color: var(--teal); }
.th-arrow { width: .6rem; height: .6rem; opacity: .35; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease, opacity .15s ease; }
th[aria-sort="ascending"] .th-arrow { opacity: 1; transform: rotate(135deg); }
th[aria-sort="descending"] .th-arrow { opacity: 1; transform: rotate(-45deg); }
th[aria-sort]:not([aria-sort="none"]) { background: var(--teal-200); }
table.sortable tbody tr.is-hidden { display: none; }
table.sortable tbody tr { transition: background-color .15s ease; }
table.sortable tbody tr:hover { background: var(--teal-050); }
.table-empty { padding: var(--s3); color: var(--stone); font-size: .95rem; }

/* ---------- step cards ---------- */
.sec-intro { margin-bottom: var(--s4); max-width: var(--narrow); }
.scards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: none; }
@media (min-width: 60em) { .scards { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
.scard {
  display: flex; gap: var(--s3); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4) var(--s3);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--teal-200); }
.scard-n {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-050); color: var(--teal-700);
  border: 1px solid var(--teal-200); font-weight: 750; font-size: 1rem;
}
.scard h3 { font-size: 1.02rem; margin-bottom: var(--s2); }
.scard p { color: var(--ink-2); font-size: .95rem; margin: 0; }
@media (min-width: 60em) { .scard { flex-direction: column; } }

/* ---------- map panel ---------- */
.map-layout { display: grid; gap: var(--s4); align-items: start; }
/* Grid/flex items default to min-width:auto, so a child that contains a wide intrinsic
   image (a WordPress photo with width="1024" height="683" attributes) can force its whole
   track wider than the viewport even though the image itself has max-width:100% — the
   track grows to fit the content FIRST, then the image fills that now-oversized track.
   Real bug, measured at 1024/1140px on a 390px phone on imported hotel-review posts. */
.map-layout > *, .tl-layout > *, .team-grid > *, .tour-hero > *, .incl-grid > * { min-width: 0; }
@media (min-width: 62em) { .map-layout { grid-template-columns: 1fr 1.15fr; gap: var(--s5); } }
.map-copy .prose { font-size: 1rem; }
.map-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-lg); background: var(--teal-050);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
.map-facts { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46em) { .map-facts { grid-template-columns: repeat(3, 1fr); } }
.map-facts li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
  padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: .1rem;
}
.map-facts b { color: var(--teal-900); font-size: 1.02rem; font-weight: 750; line-height: 1.2; }
.map-facts span { color: var(--stone); font-size: .8rem; }

/* ---------- brand mark + socials ---------- */
.foot-brand { display: flex; align-items: center; gap: .6rem; }

.socials { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; }
.socials a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem .45rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #dceff0; font-size: .87rem; font-weight: 600; text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.socials a:hover { background: rgba(255,255,255,.16); border-color: var(--glacier); color: #fff; transform: translateY(-1px); text-decoration: none; }
.socials svg { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* Tour content blocks (Overview / What's Included / Itinerary) sit in the page column and
   keep a readable measure; the include/exclude grid and the steps still use the full width. */
.tour-block > p { max-width: var(--narrow); }
.tour-block > h2 { margin-bottom: var(--s3); }
.tour-block .steps li { max-width: 92ch; }

/* ==========================================================================
   Tour booking panel. The decision drivers — rating, volume, price, the reason
   to act, and the button — sit together in one block instead of being spread
   below a wall of description.
   ========================================================================== */

.tour-hero { align-items: start; }
.th-media img { aspect-ratio: 4 / 3; }

.th-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
}
.th-panel h1 { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin-bottom: var(--s3); }

.th-proof {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .92rem; color: var(--stone);
}
.th-proof b { color: var(--ink); font-weight: 750; }
.th-proof .th-rating b { font-size: 1.05rem; }

.th-urgency {
  background: #fdf4ea; border: 1px solid #f0d9bd; border-left: 4px solid var(--larch);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  padding: var(--s2) var(--s3); margin-bottom: var(--s3);
  font-size: .92rem; color: #7a4a16; line-height: 1.5;
}

.th-buy { border-top: 1px solid var(--line); padding-top: var(--s3); }
.th-price { display: flex; align-items: baseline; gap: .4rem; margin-bottom: var(--s3); }
.th-price b { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); color: var(--teal-900); font-weight: 750; letter-spacing: -.03em; }
.th-from { font-size: .85rem; color: var(--stone); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; }
.th-per { font-size: .88rem; color: var(--stone); }

/* The primary action: full width, larger type, and the only larch element in view. */
.btn-buy {
  display: block; width: 100%; text-align: center;
  padding: 1.05rem 1.4rem; font-size: 1.12rem; font-weight: 750;
  border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(217,123,35,.28), 0 10px 26px rgba(217,123,35,.24);
}
.btn-buy:hover { box-shadow: 0 4px 8px rgba(217,123,35,.32), 0 14px 34px rgba(217,123,35,.3); }

.th-next { font-size: .87rem; color: var(--stone); margin: var(--s2) 0 0; line-height: 1.5; }
.th-lede { max-width: var(--narrow); margin-top: var(--s2); font-size: 1.02rem; }

@media (min-width: 58em) {
  /* Two explicit columns: the photo and the description stack in the left column, the booking
     panel spans both rows on the right. Letting the description span the full width instead
     stranded it below the panel with a column of dead space under the photo. */
  .tour-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: start; }
  .th-media { grid-column: 1; grid-row: 1; }
  .th-lede  { grid-column: 1; grid-row: 2; margin-top: 0; }
  .th-panel { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 5.5rem; }
}

/* On a phone the button has to be reachable without hunting: cap the photo so the panel
   (and therefore the CTA) starts inside the first screenful. */
@media (max-width: 57.99em) {
  .th-media img { aspect-ratio: 16 / 10; max-height: 25vh; object-fit: cover; }
  .tour-hero { gap: var(--s3); padding-top: var(--s2); padding-bottom: var(--s4); }
  .th-panel { padding: var(--s3); display: flex; flex-direction: column; }
  .th-panel h1 { font-size: 1.35rem; margin-bottom: var(--s2); }
  .th-proof { margin-bottom: var(--s3); font-size: .88rem; }
  /* Price and button before the reason-to-act: the CTA has to be reachable without
     scrolling, and the justification still reads immediately underneath it. */
  .th-panel h1 { order: 1; }
  .th-proof   { order: 2; }
  .th-buy     { order: 3; border-top: 0; padding-top: 0; }
  .th-urgency { order: 4; margin: var(--s3) 0 0; }
  .th-price { margin-bottom: var(--s2); }
  .crumbs { font-size: .8rem; padding-top: var(--s2); }
}

.sticky-cta .sc-price { color: #fff; font-weight: 750; font-size: .95rem; white-space: nowrap; }

/* Short phones (iPhone SE and friends): trim the photo and title further so the button
   still lands inside the first screen rather than a few pixels under it. */
@media (max-width: 57.99em) and (max-height: 730px) {
  .th-media img { max-height: 19vh; }
  .th-panel h1 { font-size: 1.22rem; line-height: 1.2; }
  .th-proof { margin-bottom: var(--s2); }
  .th-price b { font-size: 1.75rem; }
  .btn-buy { padding: .92rem 1.2rem; font-size: 1.05rem; }
}

/* ==========================================================================
   In-article conversion blocks (guide pages). These sit INSIDE the prose
   column, so nothing here is full-bleed: a `.band` in this position would be
   clipped to the text measure and read as a stray slab.
   ========================================================================== */

.cta-box {
  background: var(--teal-050);
  border: 1px solid var(--teal-200);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s4);
  margin: var(--s5) 0;
}
.cta-box .cb-h {
  font-size: 1.06rem; font-weight: 750; color: var(--teal-900);
  margin-bottom: var(--s2); line-height: 1.25;
}
.cta-box p { color: var(--ink-2); margin-bottom: var(--s3); }
.cta-box p:last-child { margin-bottom: 0; }
.cta-box .btn { box-shadow: 0 1px 2px rgba(217,123,35,.2), 0 6px 16px rgba(217,123,35,.18); }

/* Mid-article tour picks: auto-fit so it works in the narrow article column too. */
.tour-picks { margin: var(--s5) 0; }
.tour-picks > h2 { margin-bottom: var(--s3); }
.tour-picks .tgrid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s3); }
.tour-picks .tcard-body { padding: var(--s3); }
.tour-picks .tcard-title { font-size: 1rem; }
.tour-picks .tcard-desc { font-size: .9rem; -webkit-line-clamp: 5; line-clamp: 5; }

/* The closing block is already a rounded card, not a full-bleed band. */
.article .band-cta { margin: var(--s5) 0 0; }

/* ---------- CTA box with imagery: photo left, copy right; photo on top on mobile ---------- */
.cta-box.has-media { display: grid; gap: 0; padding: 0; overflow: hidden; position: relative; }
.cta-media { background: var(--teal-050); }
.cta-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.cta-body { padding: var(--s4); }
.cta-body > :last-child { margin-bottom: 0; }

@media (min-width: 40em) {
  .cta-box.has-media { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: stretch; }
  .cta-media img { height: 100%; aspect-ratio: auto; min-height: 100%; }
}
@media (min-width: 60em) {
  .cta-box.has-media { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}

/* Whole box clickable, with the button still the only anchor: no nested links, no duplicate
   crawlable URL, and text inside the box stays selectable. */
.cta-box.has-media .cta-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cta-box.has-media:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.cta-box.has-media { transition: border-color .18s ease, box-shadow .18s ease; }
.cta-box.has-media .cta-stretch { position: relative; z-index: 2; }

/* Footer brand links home with the company name as its anchor text. */
.foot-brand a { color: #fff; text-decoration: none; }
.foot-brand a:hover { color: var(--glacier); text-decoration: underline; }

/* ==========================================================================
   Additions carried from the pipeline's shared component system: nav, footer,
   form field groups. Rules for a mega-menu and a language switcher are kept
   because the component system shares one stylesheet; this site uses neither.
   ========================================================================== */

/* ---------- mega menu (accordion below 1024px, panels from 1024px) ---------- */
.mega { display: none; }
.has-mega[data-open="true"] > .mega { display: block; }
.no-js .has-mega:hover > .mega, .no-js .has-mega:focus-within > .mega { display: block; }
.mega-inner { padding: .1rem 0 .5rem .6rem; }
.mega-title { font-size: .74rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--stone); margin: .3rem 0 .3rem; }
.mega-cols { display: grid; grid-template-columns: 1fr; gap: .1rem var(--s4); }
.mega-col { min-width: 0; }
.mega-h { margin: .45rem 0 .1rem; }
.mega-h, .mega-h a { font-weight: 750; color: var(--teal-900); text-decoration: none; }
.mega-h a { display: block; padding: .2rem 0; }
.mega ul { list-style: none; margin: 0 0 .25rem; padding: 0 0 0 .65rem; }
.mega li a { display: block; padding: .26rem 0; font-size: .9rem; line-height: 1.35; color: var(--ink-2); text-decoration: none; }
.mega li a:hover, .mega-h a:hover { color: var(--teal); }
.mega-all { margin: .45rem 0 0; }
.mega-all a { font-weight: 650; font-size: .92rem; color: var(--teal-700); text-decoration: none; }
.mega-all a:hover { color: var(--larch-700); text-decoration: underline; }

/* ---------- language switcher: three chips in the footer, one compact menu in the header ---------- */
.lang-switch { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.lang-switch a, .lang-list a, .lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2rem; padding: .3rem .55rem; border-radius: 999px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--teal-700); border: 1px solid var(--line); text-decoration: none; background: var(--paper);
}
.lang-switch a.is-current { background: var(--teal-050); border-color: var(--teal-200); color: var(--teal-900); }
.lang-switch a:hover, .lang-list a:hover, .lang-btn:hover { border-color: var(--teal); color: var(--teal); }
.site-footer .lang-switch a { color: #dceff0; border-color: rgba(255,255,255,.24); background: transparent; }
.site-footer .lang-switch a.is-current { background: rgba(255,255,255,.12); color: #fff; }
.lang-menu { position: relative; display: inline-block; }
.lang-btn { font: inherit; font-size: .8rem; font-weight: 700; gap: .35rem; cursor: pointer; color: var(--teal-900); }
.lang-btn::after {
  content: ""; width: .36rem; height: .36rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -.2rem; opacity: .6;
}
.lang-list { list-style: none; margin: .3rem 0 0; padding: 0; display: none; gap: .3rem; }
.lang-menu[data-open="true"] .lang-list { display: flex; }
.no-js .lang-menu:hover .lang-list, .no-js .lang-menu:focus-within .lang-list { display: flex; }
.nav-links .nav-lang { padding: .5rem .2rem; }

@media (min-width: 1024px) {
  .nav { min-height: 68px; padding-block: 7px; }
  .brand img { width: 151px; }
  .nav-toggle { display: none; }
  .nav-links { display: flex; align-items: center; gap: .2rem var(--s3); flex: 0 1 auto; margin-left: auto; }
  .nav-links > li { flex: 0 0 auto; }
  .nav-links > li > a:not(.btn), .nav-trigger { width: auto; padding: .45rem .1rem; font-size: .95rem; white-space: nowrap; }
  .nav-trigger { justify-content: flex-start; gap: .35rem; }
  .nav-links .nav-lang { order: 98; padding: 0; margin-left: .25rem; }
  .nav-links .nav-cta { order: 99; }
  .nav-cta .btn { margin: 0; padding: .55rem 1rem; white-space: nowrap; font-size: .95rem; }
  .has-mega { position: static; }
  .has-mega[data-cols="1"], .has-mega[data-cols="2"] { position: relative; }
  .mega {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
  }
  .has-mega[data-cols="1"] > .mega, .has-mega[data-cols="2"] > .mega {
    right: auto; min-width: 17rem; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--r-s) var(--r-s);
  }
  .has-mega[data-cols="2"] > .mega { min-width: 33rem; }
  .mega-inner {
    width: min(100% - 2rem, var(--wrap)); margin-inline: auto;
    padding: var(--s3) 0 var(--s4); max-height: calc(100vh - 6rem); overflow-y: auto;
  }
  .has-mega[data-cols="1"] .mega-inner, .has-mega[data-cols="2"] .mega-inner { width: auto; padding: var(--s3) var(--s4) var(--s3); }
  .mega-title { margin: 0 0 .5rem; }
  .mega-cols { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s2) var(--s4); }
  .mega-col.is-wide { grid-column: span 2; }
  .mega-col.is-wide ul { column-count: 2; column-gap: var(--s4); }
  .mega-col.is-wide li { break-inside: avoid; }
  .mega-h { margin: 0 0 .1rem; }
  .mega-h:not(:first-child) { margin-top: .7rem; }
  .lang-menu[data-open="true"] .lang-list {
    position: absolute; top: calc(100% + .3rem); right: 0; flex-direction: column; gap: .25rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-s);
    box-shadow: var(--shadow); padding: .3rem; z-index: 61; margin: 0;
  }
}

/* ---------- quote / lead-gen form ---------- */
/* <fieldset> is one of the few elements whose spec default is min-width: min-content rather
   than the usual auto/shrinks-to-fit — it refuses to shrink below its widest child's
   intrinsic width unless told to, which pushed the quote form (and the whole page) past a
   390px viewport. */
.qform fieldset { border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s3); margin: 0 0 var(--s3); min-width: 0; }
.qform legend { font-weight: 700; color: var(--teal-900); padding: 0 .4rem; font-size: .95rem; }
.qform .f-grid { display: grid; gap: var(--s3); }
@media (min-width: 40em) { .qform .f-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.qform select {
  font: inherit; font-size: 1rem; color: var(--ink); width: 100%;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper);
}
.qform .checks { display: grid; gap: .4rem; margin: .3rem 0 0; }
/* One more level of the same intrinsic-sizing cascade: .checks is ALSO a grid, so each
   check-row LABEL is itself a grid item that needed min-width:0, on top of the span inside
   it needing the same thing one level down. */
.qform .checks > * { min-width: 0; }
/* Flex items default to min-width:auto, so long unbroken text in the span next to the
   checkbox pushed the whole row (and the page) wider than the viewport instead of wrapping —
   the same intrinsic-sizing overflow as a grid item, just the flex version of it. */
.qform .check-row { display: flex; align-items: flex-start; gap: .5rem; font-size: .92rem; color: var(--ink-2); }
.qform .check-row input { margin-top: .25rem; flex: 0 0 auto; }
.qform .check-row > *:last-child { min-width: 0; }
.qform .consent { display: flex; align-items: flex-start; gap: .55rem; font-size: .87rem; color: var(--stone); margin: var(--s3) 0; }
.qform .consent input { margin-top: .2rem; flex: 0 0 auto; }
.qform .consent > *:last-child { min-width: 0; }
.qform .consent a { color: var(--teal-700); }

/* ---------- CTA to the consultation funnel, reused at the end of every article ---------- */
.cta-box { border-left-color: var(--larch); }
.cta-box .btn { --btn-bg: var(--larch); }
.cta-box .btn:hover { --btn-bg: var(--larch-700); }

/* ==========================================================================
   CRO pass 2026-09-16: hero photo on posts, lead CTA cards, author box, rebuilt
   quote page (form first on phones, two columns wide), homepage hero, card thumbs.
   ========================================================================== */

/* ---------- post hero figure (the real featured photo, under the H1) ---------- */
.art-hero { margin: var(--s3) 0 0; }
.art-hero img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 40%;
  border-radius: var(--r); box-shadow: var(--shadow); max-height: 62vh;
}
.art-hero.is-portrait img { aspect-ratio: 4 / 3; object-position: center 30%; }
.art-head { padding-bottom: var(--s4); }

/* ---------- article column: body + author box share one column next to the TOC ---------- */
.art-col { min-width: 0; }
@media (min-width: 68em) { .art-col { max-width: 70ch; } }

/* ---------- lead CTA cards (early / mid / end) ---------- */
.lead-cta { margin: var(--s5) 0; border-radius: var(--r); }
.lead-cta .lc-h { font-weight: 750; color: var(--teal-900); font-size: 1.12rem; line-height: 1.25; margin-bottom: var(--s2); }
.lead-cta .lc-t { color: var(--ink-2); margin-bottom: var(--s3); }
.lead-cta .lc-a { margin-bottom: 0; }
/* early: the lightest variant, a rule and a line of copy */
.lead-cta-early { border-left: 4px solid var(--teal-200); padding: var(--s2) var(--s4); border-radius: 0 var(--r-s) var(--r-s) 0; }
.lead-cta-early .lc-h { font-size: 1.02rem; }
.lead-cta-early .btn { --btn-bg: transparent; --btn-fg: var(--teal-700); border-color: var(--teal-200); box-shadow: none; }
.lead-cta-early .btn:hover { --btn-bg: var(--teal-050); --btn-fg: var(--teal-900); }
/* mid: a proper card */
.lead-cta-mid { background: var(--sand); border: 1px solid var(--line); border-left: 4px solid var(--larch); padding: var(--s4); border-radius: 0 var(--r) var(--r) 0; }
/* end: the strong band */
.lead-cta-end { background: linear-gradient(160deg, var(--teal-900), var(--teal-700)); color: #eaf6f6; padding: var(--s5) var(--s4); }
.lead-cta-end .lc-h { color: #fff; font-size: 1.35rem; }
.lead-cta-end .lc-t { color: #cfe8ea; }
.lead-cta .btn-primary { --btn-bg: var(--larch); }
.lead-cta .btn-primary:hover { --btn-bg: var(--larch-700); }

/* ---------- author box ---------- */
.author-box {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s3);
  align-items: start; margin: var(--s4) 0 0; padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.author-avatar { width: 5.5rem; height: 5.5rem; border-radius: 50%; object-fit: cover; }
.author-k { font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-700); margin-bottom: .2rem; }
.author-name { font-weight: 750; color: var(--teal-900); font-size: 1.08rem; margin-bottom: var(--s2); }
.author-bio { font-size: .93rem; color: var(--ink-2); }
.author-bio a { color: var(--teal-700); }
@media (max-width: 30em) { .author-box { grid-template-columns: 1fr; } .author-avatar { width: 4.5rem; height: 4.5rem; } }

/* ---------- rebuilt quote page ---------- */
.quote-page { padding-block: var(--s3) var(--s6); }
.quote-head h1 { font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem); margin-bottom: var(--s2); }
.quote-pitch { margin-bottom: var(--s3); max-width: 62ch; }
/* Phones: the first form field must be inside the first screen (375x667), so the header is
   compact and the breadcrumb (repeated in the nav anyway) is hidden until the two-column layout. */
@media (max-width: 959px) {
  .crumbs-quote { display: none; }
  .quote-page { padding-top: var(--s2); }
  .quote-head h1 { font-size: 1.3rem; line-height: 1.2; margin-bottom: .4rem; }
  .quote-pitch { font-size: .95rem; line-height: 1.45; margin-bottom: var(--s2); }
  .quote-layout { gap: var(--s3); }
  .req-legend { margin-bottom: .4rem; }
}
.quote-layout { display: grid; gap: var(--s4); align-items: start; }
.quote-form-col { order: 1; min-width: 0; }
.quote-side { order: 2; min-width: 0; }
.quote-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s3); box-shadow: var(--shadow);
}
.quote-card .cform { margin-bottom: 0; }
.quote-card .f-row { margin-bottom: var(--s2); }
.quote-card .f-row label { font-size: .88rem; }
.quote-card .f-row input, .quote-card .f-row select { padding: .6rem .75rem; }
.quote-card .cform input[type="checkbox"] { width: auto; }
.quote-card .cform textarea { min-height: 7rem; }
.req { color: var(--larch); font-weight: 750; }
.req-legend { font-size: .8rem; color: var(--stone); margin-bottom: var(--s2); }
.req-legend::first-letter { color: var(--larch); font-weight: 750; }
.quote-card .f-grid { display: grid; gap: 0 var(--s3); }
.tour-groups-wrap { margin: var(--s2) 0 var(--s3); }
.group-h { font-weight: 700; color: var(--teal-900); font-size: .95rem; margin-bottom: var(--s2); display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: baseline; }
.max3-count { font-weight: 600; font-size: .8rem; color: var(--teal-700); background: var(--teal-050); border-radius: 999px; padding: .1rem .6rem; }
.tour-groups { display: grid; gap: var(--s2); }
.tour-groups fieldset { margin: 0; padding: var(--s2) var(--s3); }
.tour-groups .checks { gap: .25rem; }
.tour-groups .check-row { font-size: .9rem; }
.tour-groups .check-row input:disabled + span { color: var(--stone); }
.tour-groups.is-full fieldset { border-color: var(--teal-200); }
.max3-msg { grid-column: 1 / -1; font-size: .84rem; color: var(--teal-900); background: var(--teal-050); border: 1px solid var(--teal-200); border-radius: var(--r-s); padding: .45rem .7rem; margin: 0; }
.quote-card .consent { margin: var(--s3) 0 var(--s2); }
.submit-row { margin-bottom: var(--s2); }
.submit-row .btn { width: 100%; text-align: center; }
.after-submit { margin-top: var(--s2); }
.after-submit p { font-size: .84rem; color: var(--stone); margin-bottom: .3rem; }
.quote-side .side-h { font-size: 1.05rem; margin-bottom: var(--s2); }
.quote-intro { font-size: .98rem; }
.trust-block, .talk-block { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4); margin-top: var(--s3); background: var(--sand); }
.trust-badge { width: 100%; max-width: 30rem; height: auto; margin-top: var(--s2); }
.talk-block p:last-child { margin-bottom: 0; }
@media (min-width: 40em) {
  .quote-card .f-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .tour-groups { grid-template-columns: 1fr 1fr; }
  .quote-card { padding: var(--s4); }
}
@media (min-width: 960px) {
  .quote-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); }
  .quote-side { order: 1; }
  .quote-form-col { order: 2; }
  .quote-card .f-row input, .quote-card .f-row select { max-width: 480px; }
  .submit-row .btn { width: auto; }
  .quote-form-col { position: sticky; top: 4.5rem; }
}

/* ---------- Calendly inline embed on /thank-you/ ---------- */
.calendly-inline-widget { min-width: 280px; height: 720px; margin: var(--s3) 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.calendly-fallback.is-secondary { font-size: .86rem; color: var(--stone); }

/* ---------- homepage hero (real Bartolomé photo) ---------- */
.home-hero { min-height: min(72vh, 40rem); }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,40,46,.28), rgba(6,40,46,.72)); }
.home-hero .hero-inner { padding-block: clamp(3rem, 8vw, 6rem); max-width: 44rem; }
.home-hero h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin-bottom: var(--s2); }
.home-hero .hero-sub { color: #fff; font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); font-weight: 650; line-height: 1.25; text-wrap: balance; margin-bottom: var(--s2); }
.home-hero .lede { max-width: 58ch; margin-bottom: var(--s3); }
.home-hero .hero-cta { margin-top: 0; margin-bottom: var(--s3); }
.home-lede { padding-top: var(--s5); }

/* ---------- homepage guide cards with real thumbnails ---------- */
.lcard.has-thumb { padding: 0; overflow: hidden; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.lcard.has-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 0; box-shadow: none; }
.lcard.has-thumb span { display: block; padding: var(--s2) var(--s3); }
.lcard.has-thumb::after { display: none; }

/* ---------- nav: the quote button is the first item in the mobile menu, last on desktop ---------- */

/* ---------- post vertical rhythm (2026-09-16) ---------- */
.art-head { padding-block: var(--s3) 0; border-bottom: 0; margin-bottom: 0; }
.art-head h1 { margin-bottom: .5rem; }
.art-head .lede { margin: .3rem 0 0; }
/* posts without a hero: the header's last element carries no bottom margin, so H1/lede to the
   first paragraph is the same 26/36px stack as hero to first paragraph */
.art-head > h1:last-child, .art-head > .lede:last-child { margin-bottom: 0; }
.art-hero { margin: .9rem 0 0; }
.art-body > .section:first-child { padding-top: 26px; }
.art-body > .section { padding-block: var(--s4); }
.art-body > .section + .section { padding-top: var(--s3); }
.art-body > .lead-cta { margin-block: var(--s4); }
@media (min-width: 62em) {
  .art-hero { margin-top: 1rem; }
  .art-body > .section:first-child { padding-top: 36px; }
}
.home-lede { padding-top: var(--s4); padding-bottom: 0; }
.trust-block .trust-badge { margin-top: var(--s2); }


/* ==========================================================================
   Ship cards (homepage)
   The WordPress homepage carried 75 three-column blocks, one per ship: photo,
   the paragraph the site wrote about it, and its two buttons. Rendered as a
   card so the list is browsable instead of a single 15,000-word column.
   ========================================================================== */
.shipgrid { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s5); }
.shipcard {
  display: grid; gap: var(--s3); align-items: start;
  grid-template-columns: 1fr;
  padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); box-shadow: var(--shadow);
}
.shipcard-media { display: block; border-radius: var(--r-s); overflow: hidden; }
.shipcard-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shipcard-body > h3 { margin: 0 0 var(--s2); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.shipcard-body > h3 a { color: inherit; text-decoration: none; }
.shipcard-body > h3 a:hover { color: var(--larch-700); text-decoration: underline; }
.shipcard-body p { margin: 0 0 var(--s2); }
.shipcard-body p:last-child { margin-bottom: 0; }
.shipcard-cta { display: flex; flex-wrap: wrap; gap: var(--s2); }
.shipcard-cta .btn { flex: 1 1 10rem; justify-content: center; }


/* Footer: the site's own ship-class columns. */
.foot-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: repeat(4, 1fr); } }
/* min-width: 0 matters: a grid item defaults to min-content width, and one long ship name
   is enough to push the whole footer wider than a phone screen. */
.foot-col { min-width: 0; }
.foot-col .foot-links { list-style: none; margin: 0; padding: 0; min-width: 0; }
.foot-col .foot-links li { margin: 0 0 .3rem; overflow-wrap: break-word; }


/* ==========================================================================
   Imported article bodies
   The shape renderers emit each H2 section as `.section .wrap` (the page-level
   vocabulary). Inside an article column that would re-apply the page gutter and
   a 1180px cap to an 800px column, so those are neutralised here and a tinted
   band becomes a rounded panel: it cannot be full-bleed inside a column, and a
   background painted only as wide as the text reads as a stray slab.
   ========================================================================== */
.art-body > .section, .art-body > .band { padding-left: 0; padding-right: 0; }
.art-body .wrap, .art-body .wrap-narrow { max-width: none; width: auto; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
.art-body > .band { border-radius: var(--r); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.art-body > .band > .wrap { padding: 0; }
.art-body > .section:first-child { padding-top: 0; }
.art-body > .section > h2:first-child { margin-top: 0; }

/* Header: the site's own square logo mark, sized so the bar stays a bar. */
.brand img { width: auto; height: 3rem; border-radius: var(--r-s); }
@media (min-width: 64em) { .brand img { height: 3.4rem; } }

/* Ship cards lay out by the width of their own container, not the viewport:
   on the homepage they sit inside an article column next to the contents rail. */
.shipgrid { container-type: inline-size; }
@container (min-width: 560px) {
  .shipcard { grid-template-columns: minmax(170px, 30%) 1fr; grid-template-areas: "media body" "cta cta"; }
  .shipcard-media { grid-area: media; }
  .shipcard-body { grid-area: body; }
  .shipcard-cta { grid-area: cta; flex-direction: row; }
  .shipcard-cta .btn { flex: 1 1 10rem; width: auto; }
}


/* Brand lockup: the logo is a square mark, so the wordmark sits beside it and steps out of
   the way on the narrowest phones rather than wrapping across the mark. */
.brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; }
.brand span { line-height: 1.15; white-space: nowrap; }
@media (max-width: 26em) { .brand span { display: none; } }


/* Hamburger: three bars drawn from the button's own span, which turn into a cross when the
   menu is open. The donor markup used a text glyph here; this one has a real control. */
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--teal-900); transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Homepage redesign (2026-09-22)
   ========================================================================== */
.kicker { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-weight: 700; margin-bottom: var(--s2); }
.btn-link { font-weight: 650; color: var(--teal-700); text-decoration: none; }
.btn-link:hover { color: var(--larch-700); text-decoration: underline; }
.btn-sm { padding: .45rem .85rem; font-size: .9rem; }

/* Hero: copy left, our own photo right, the intro paragraph under both. */
.home-hero { padding: var(--s5) 0 var(--s4); background: linear-gradient(180deg, var(--teal-050) 0%, var(--paper) 100%); }
.hero-grid { display: grid; gap: var(--s4); align-items: center; }
.home-hero h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); margin-bottom: var(--s3); }
.home-hero .lede { font-size: 1.12rem; color: var(--ink-2); max-width: 36rem; }
.home-hero .hero-cta { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.hero-photo figcaption { font-size: .82rem; color: var(--stone); margin-top: .5rem; }
.hero-intro { margin-top: var(--s4); max-width: var(--narrow); }
.hero-intro p { margin: 0; color: var(--ink-2); }
@media (min-width: 60em) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; gap: var(--s6); }
  .home-hero { padding-top: var(--s6); }
}

/* Proof strip */
.proof-band { background: var(--teal-900); color: #fff; }
.proof-strip { list-style: none; margin: 0 auto; padding: var(--s3) var(--s3); display: grid; gap: var(--s3); grid-template-columns: repeat(2, 1fr); }
.proof-strip li { display: flex; flex-direction: column; gap: .15rem; }
.proof-strip b { font-size: 1.8rem; line-height: 1; color: var(--glacier); }
.proof-strip span { font-size: .9rem; color: #cfe3ec; }
@media (min-width: 48em) { .proof-strip { grid-template-columns: repeat(4, 1fr); } }

/* Picker: three chip rows */
.picker { display: grid; gap: var(--s2); margin: var(--s3) 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--sand); }
.picker-row { display: grid; gap: .5rem; }
.picker-q { font-weight: 700; font-size: .92rem; color: var(--teal-900); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font: inherit; font-size: .9rem; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.chip:hover { border-color: var(--teal); }
.chip.is-on { background: var(--teal-900); border-color: var(--teal-900); color: #fff; }
@media (min-width: 48em) { .picker-row { grid-template-columns: 14rem 1fr; align-items: center; } }

.finder-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s2); }
.finder-count { margin: 0; color: var(--stone); }
.finder-count b { color: var(--teal-900); font-size: 1.1rem; }
.finder-sort { margin-left: auto; font-size: .9rem; color: var(--stone); display: flex; gap: .5rem; align-items: center; }
.finder-sort select { font: inherit; font-size: .9rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--paper); }

/* Finder rows */
.finder { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); }
.frow { border-top: 1px solid var(--line); }
.frow:first-child { border-top: 0; }
.frow-main { display: grid; gap: .4rem var(--s2); padding: var(--s2) var(--s3); align-items: center;
  grid-template-columns: 72px 1fr auto; grid-template-areas: "media name toggle" "media tier toggle" "cells cells cells"; }
.frow-media { grid-area: media; display: block; border-radius: var(--r-s); overflow: hidden; }
.frow-media img { width: 72px; height: 54px; object-fit: cover; }
.frow-name { grid-area: name; display: flex; flex-direction: column; min-width: 0; }
.frow-name a { font-weight: 700; color: var(--teal-900); text-decoration: none; }
.frow-name a:hover { color: var(--larch-700); text-decoration: underline; }
.frow-type { font-size: .82rem; color: var(--stone); text-transform: capitalize; }
.frow-tier { grid-area: tier; }
.frow-main > .frow-cell:not(.frow-tier) { display: none; }
.frow-cell { font-size: .92rem; }
.frow-price { color: var(--ink-2); font-size: .85rem; }
.frow-toggle { grid-area: toggle; font: inherit; font-size: .85rem; font-weight: 650; color: var(--teal-700); background: var(--teal-050); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .8rem; cursor: pointer; }
.frow-toggle[aria-expanded="true"] { background: var(--teal-900); color: #fff; }
.frow-more { padding: 0 var(--s3) var(--s3); }
.frow-more .prose { max-width: var(--narrow); }
.frow-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0 0; }
.frow-head { display: none; }
.badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px; background: var(--teal-050); color: var(--teal-900); }
.badge-budget { background: #e8f3e6; color: #245c2a; }
.badge-classic { background: var(--teal-050); color: var(--teal-700); }
.badge-premium { background: #eee9fb; color: #4a3a8f; }
.badge-luxury { background: #fbeee6; color: var(--larch-700); }
.finder-empty { padding: var(--s3); margin: 0; color: var(--stone); }
@media (min-width: 64em) {
  .frow-head { display: block; background: var(--sand); }
  .frow-head .frow-main { grid-template-areas: none; padding-top: .55rem; padding-bottom: .55rem; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--stone); font-weight: 700; }
  .frow-main, .frow-head .frow-main { grid-template-columns: 72px minmax(10rem, 1.4fr) 6.5rem 4.5rem 5rem 6.5rem minmax(9rem, 1.6fr) 5.5rem; grid-template-areas: none; }
  .frow-media, .frow-name, .frow-tier, .frow-toggle { grid-area: auto; }
  .frow-main > .frow-cell:not(.frow-tier) { display: block; }
  .frow-price { font-size: .8rem; }
  .frow-toggle { justify-self: end; }
}
@media (max-width: 63.99em) {
  .frow-main > .frow-cell:not(.frow-tier) { display: inline; }
  .frow-main > .frow-cell:not(.frow-tier)::before { content: attr(data-label) ": "; color: var(--stone); }
  .frow-cell:not(.frow-tier) { grid-area: auto; }
  .frow-main { grid-template-areas: "media name toggle" "media tier toggle" "c c c"; }
  .frow-main > .frow-cell:not(.frow-tier) { grid-column: 1 / -1; font-size: .85rem; }
  .frow-main > .frow-cell:not(.frow-tier) + .frow-cell:not(.frow-tier) { margin-top: -.3rem; }
}

/* Class cards */
.cgrid { display: grid; gap: var(--s3); }
.ccard { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow); }
.ccard-media img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r-s); }
.ccard h3 { margin-bottom: .3rem; font-size: 1.1rem; }
.ccard-meta { color: var(--stone); font-size: .9rem; margin-bottom: .6rem; }
.ccard-meta b { color: var(--teal-900); }
.ccard-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; }
@media (min-width: 48em) { .cgrid { grid-template-columns: repeat(2, 1fr); } }

/* Comparisons + guides */
.lgrid-3 { grid-template-columns: 1fr; }
@media (min-width: 40em) { .lgrid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .lgrid-3 { grid-template-columns: repeat(3, 1fr); } }
.ggrid { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 40em) { .ggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .ggrid { grid-template-columns: repeat(4, 1fr); } }
.gcard { display: flex; flex-direction: column; gap: .3rem; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: var(--ink); }
.gcard-k { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.gcard-t { font-weight: 650; line-height: 1.3; }

/* What's included */
.inc-grid { display: grid; gap: var(--s3); margin-top: var(--s3); }
.inc-col { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: var(--s3); }
.band-tl .inc-col h3 { color: var(--glacier); font-size: 1rem; }
.band-tl .inc-col .prose, .band-tl .sec-intro { color: #e6eef2; }
.band-tl .inc-col strong, .band-tl .inc-col b { color: #fff; }
.band-tl .inc-col .prose a { color: #fff; }
@media (min-width: 48em) { .inc-grid { grid-template-columns: repeat(3, 1fr); } }

/* Consultation block on the homepage */
#consultation .quote-side h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }

/* ==========================================================================
   Header rework: contact bar, brand mark only, mega menus
   ========================================================================== */
.topbar { background: var(--teal-900); color: #cfe3ec; font-size: .82rem; }
.topbar-inner { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; padding-top: .4rem; padding-bottom: .4rem; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--glacier); }
.topbar span { color: #9dbcbf; }
@media (max-width: 40em) { .topbar span { display: none; } }
.brand-mark img { height: 44px; width: 44px; border-radius: 50%; }
.brand-mark:hover img { transform: rotate(-6deg); transition: transform .2s; }
@media (min-width: 64em) {
  .mega-cols[style*="--cols: 3"] { grid-template-columns: repeat(3, minmax(11rem, 1fr)); }
  .mega-cols[style*="--cols: 4"] { grid-template-columns: repeat(4, minmax(11rem, 1fr)); }
  .has-mega[data-cols="3"] > .mega, .has-mega[data-cols="4"] > .mega { left: 0; right: 0; }
}

/* Comparisons collage */
.collage { margin: var(--s3) 0 var(--s4); }
.collage img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.collage figcaption { font-size: .85rem; color: var(--stone); margin-top: .6rem; }

/* Photo decision cards */
.pgrid { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 40em) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.pcard-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.pcard-body { padding: var(--s3); }
.pcard-body h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.pcard-body p { font-size: .95rem; color: var(--ink-2); }
.pcard-body p:last-child { margin-bottom: 0; }
.sec-cta { margin: var(--s4) 0 0; text-align: center; }

/* What's included, reworked */
.inc-lists { display: grid; gap: var(--s3); margin-top: var(--s3); }
@media (min-width: 48em) { .inc-lists { grid-template-columns: 1fr 1fr; } }
.inc-list { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: var(--s3); }
.inc-list h3 { color: #fff; font-size: 1rem; margin-bottom: var(--s2); }
.inc-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.inc-list li { position: relative; padding-left: 1.7rem; color: #e6eef2; line-height: 1.45; }
.inc-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 62%; }
.inc-yes li::before { background-color: var(--glacier); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%230d2b3e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.inc-no li::before { background-color: var(--larch); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.itiles { display: grid; gap: var(--s3); margin-top: var(--s3); }
@media (min-width: 48em) { .itiles { grid-template-columns: 1fr 1fr; } }
.itile { border-radius: var(--r); overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.itile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.itile-body { padding: var(--s3); color: #e6eef2; }
.itile-body h3 { color: var(--glacier); font-size: 1rem; margin-bottom: .4rem; }
.itile-body p { margin: 0; font-size: .95rem; }
.inc-quote { display: grid; grid-template-columns: 72px 1fr; gap: var(--s3); align-items: start; margin-top: var(--s4); padding: var(--s3); border-left: 4px solid var(--larch); background: rgba(255,255,255,.06); border-radius: 0 var(--r) var(--r) 0; color: #e6eef2; }
.inc-quote img { width: 72px; height: 72px; object-fit: cover; border-radius: 50%; }
.inc-quote-h { font-weight: 750; color: #fff; margin-bottom: .4rem; }
.inc-quote p:last-child { margin-bottom: 0; }

/* Footer: five columns, all four classes plus planning */
.foot-lead { color: #fff; font-weight: 650; margin-bottom: var(--s3); }
.foot-grid-5 { grid-template-columns: 1fr; }
@media (min-width: 40em) { .foot-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .foot-grid-5 { grid-template-columns: repeat(5, 1fr); } }
.foot-h a { color: inherit; text-decoration: none; }
.foot-h a:hover { color: var(--glacier); }
.foot-n { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px; background: rgba(255,255,255,.14); margin-left: .3rem; vertical-align: middle; }
.foot-col-plan .foot-h + .foot-h { margin-top: var(--s3); }

.mega-h { padding: .2rem 0; }
.mega-h a { padding: 0; }