/* ==========================================================================
   DMC TOURS — design system
   Deep teal-ink base, brass accent. Flat surfaces, hairline rules,
   no gradients — the contrast does the work instead of decoration.
   ========================================================================== */

:root{
  --ink:        #0e1b1a;   /* page background */
  --ink-2:      #142524;   /* raised surface (cards, header rows) */
  --ink-3:      #1a2f2d;   /* table head / hover surface */
  --line:       #25403c;   /* hairline border */
  --line-soft:  #1d3230;   /* quieter internal divider */
  --gold:       #c9a24a;   /* primary brass accent */
  --gold-light: #e6cd93;   /* light gold for emphasis text */
  --gold-dim:   #7d6835;   /* muted gold */
  --ivory:      #f1ede3;   /* primary text */
  --muted:      #9db2ad;   /* secondary text */
  --ink-on-gold:#101d1c;

  --serif: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --sans: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 6px;
  --container: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: var(--gold-light); text-decoration: none; }
a:hover{ color: var(--gold); }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 44px;
}

/* The wide desktop gutter would eat too much of a phone screen, so it steps
   down — but never far enough for the logo and menu button to touch the edge. */
@media (max-width: 1000px){
  .container{ padding: 0 28px; }
}
@media (max-width: 380px){
  .container{ padding: 0 22px; }
}

/* Header gutters are set on their own so the logo and the menu button keep
   these exact distances from the screen edge at every width below 1000px,
   including the narrowest phones where .container steps down to 22px. */
@media (max-width: 1000px){
  .site-header .container{
    padding-left: 40px;
    padding-right: 30px;
  }
}

h1, h2, h3{
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  color: var(--ivory);
  margin: 0 0 .5em;
}

h1{ font-size: clamp(1.95rem, 4.2vw, 2.9rem); letter-spacing: -.01em; }
h2{ font-size: clamp(1.45rem, 2.8vw, 2rem); }
h3{ font-size: 1.25rem; }

p{ margin: 0 0 1em; color: var(--ivory); }
.lede{ color: var(--muted); font-size: 1.06rem; max-width: 62ch; }

.eyebrow{
  color: var(--gold);
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .9em;
}

/* focus visibility */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible{
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------- header / navigation ------------------------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 18px 0;
}

.brand{
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ivory);
  letter-spacing: .02em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.brand img{ width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.brand:hover{ color: var(--gold-light); }
.brand small{
  display: block;
  font-family: var(--sans);
  font-size: .55rem;
  line-height: 1.4;
  letter-spacing: .2em;
  color: var(--gold);
  font-weight: 600;
  margin-top: 3px;
}

.nav-toggle{
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ivory);
  width: 44px; height: 42px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover{ border-color: var(--gold-dim); color: var(--gold-light); }

.nav-links{
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-links a{
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}
.nav-links li:last-child{ margin-left: 8px; }
.nav-links .cta{
  color: var(--ink-on-gold);
  background: var(--gold);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  border-bottom: none;
}
.nav-links .cta:hover{ background: var(--gold-light); color: var(--ink-on-gold); border-bottom-color: transparent; }

@media (max-width: 1080px){
  .nav{ gap: 28px; }
  .nav-links{ gap: 22px; }
}

/* --- mobile menu -------------------------------------------------------
   A dropdown anchored to the header rather than a fixed-position overlay:
   it needs no JavaScript to work out where the top edge goes, so it cannot
   end up mispositioned if the script is slow, blocked or fails.           */

@media (max-width: 1000px){
  .nav{ gap: 20px; }
  .nav-toggle{ display: block; }

  .site-header{ position: sticky; }

  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px 0 20px;
    background: var(--ink);
    border-bottom: 1px solid var(--line);
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-links.open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links li{ width: 100%; margin-left: 0; }
  .nav-links a{
    display: block;
    padding: 15px 30px 15px 40px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }
  .nav-links li:last-child a{ border-bottom: none; }
  .nav-links .cta{
    margin: 16px 30px 0 40px;
    padding: 15px 18px;
    text-align: center;
  }
}

/* No script? Show the links inline rather than hiding them behind a button
   that would never respond. */
@media (max-width: 1000px){
  .no-js .nav-toggle{ display: none; }
  .no-js .nav-links{
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: none;
  }
}

@media (max-width: 420px){
  .brand{ font-size: 1.05rem; gap: 11px; }
  .brand img{ width: 38px; height: 38px; }
}

/* ------------------------------- buttons -------------------------------- */

.btn{
  display: inline-block;
  background: var(--gold);
  color: var(--ink-on-gold);
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover{ background: var(--gold-light); border-color: var(--gold-light); color: var(--ink-on-gold); }
.btn-outline{
  background: transparent;
  color: var(--gold-light);
  border: 1px solid var(--line);
}
.btn-outline:hover{ background: transparent; border-color: var(--gold); color: var(--gold-light); }
.btn-block{ display:block; text-align:center; }

/* -------------------------------- hero ---------------------------------- */

.hero{
  padding: 78px 0 58px;
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.hero h1{ max-width: 17ch; }
.hero.text-center h1{ max-width: none; }
.hero .lede{ margin-bottom: 1.6em; }

/* --------------------------- service picker grid ------------------------ */

.service-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 36px;
}
.service-card{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: left;
  transition: border-color .15s ease;
}
.service-card{ transition: border-color .15s ease; }
.service-card:hover{ border-color: var(--gold-dim); }
.service-card .ic{ transition: color .15s ease; }
@media (hover: hover){ .service-card:hover .ic{ color: var(--gold-light); } }
.card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.service-card .ic{
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--gold);
  overflow: visible;
}
/* Two columns: cards are narrower, so the icon comes down with them. */
@media (max-width: 900px){
  .service-card .ic{ width: 34px; height: 34px; flex-basis: 34px; }
}
/* Single column on a phone: a smaller mark reads better beside the heading. */
@media (max-width: 540px){
  .service-card .ic{ width: 28px; height: 28px; flex-basis: 28px; }
  .card-top{ margin-bottom: 13px; }
}
.service-card .num{
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--gold-dim);
}
.service-card h3{ margin-bottom: 6px; font-size: 1.15rem; }
.service-card p{ color: var(--muted); font-size: .89rem; margin-bottom: 14px; }
.service-card a.go{ color: var(--gold-light); font-size: .84rem; font-weight: 600; }

.service-card.corporate{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--ink-2);
  flex-wrap: wrap;
}
.service-card.corporate p{ margin: 0; }
.service-card.corporate .card-top{ margin-bottom: 12px; justify-content: flex-start; gap: 14px; }

@media (max-width: 900px){
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .service-grid{ grid-template-columns: 1fr; }
}

/* ------------------------------- sections -------------------------------- */

section{ padding: 60px 0; }
.section-alt{ background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head{ max-width: 640px; margin-bottom: 34px; }

/* ------------------------------ pricing tables --------------------------- */

.price-block{ margin-top: 4px; }

.price-caption{
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ivory);
  margin: 0 0 14px;
}

.price-wrap{
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-2);
  -webkit-overflow-scrolling: touch;
}
table.price{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: .9rem;
}
table.price caption{
  text-align: left;
  caption-side: top;
  padding: 18px 20px 6px;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--ivory);
}
table.price th, table.price td{
  padding: 13px 16px;
  text-align: center;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.price tbody tr:last-child th,
table.price tbody tr:last-child td{ border-bottom: none; }
table.price thead th{
  background: var(--ink-2);
  color: var(--gold-light);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: bottom;
  border-bottom: 1px solid var(--line);
}
table.price thead th small{
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: none;
  margin-top: 3px;
}

/* Vehicle-class photo in the column header. Injected by main.js from the
   data-veh attribute; if the file is missing the image removes itself, so
   the table degrades to text-only without breaking. */
table.price thead th .veh{
  width: 108px;
  height: 63px;
  margin: 0 auto 9px;
  object-fit: cover;
  border-radius: 7px;
  background: #f2f1ed;
  border: 1px solid var(--line-soft);
}
table.price td.price-val{ color: var(--ivory); font-variant-numeric: tabular-nums; }
table.price td.request{ color: var(--muted); font-size: .84rem; }
table.price tbody th{
  text-align: left;
  color: var(--ivory);
  font-weight: 500;
  background: var(--ink-2);
}
table.price th:first-child, table.price td:first-child{
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--ink-2);
}
table.price thead th:first-child{ z-index: 2; }
table.price tbody tr:hover th,
table.price tbody tr:hover td{ background: var(--ink-3); }

.price-note{ margin-top: 16px; font-size: .86rem; color: var(--muted); max-width: 78ch; }
.price-note strong{ color: var(--gold-light); font-weight: 600; }

/* -------- mobile pricing: expandable rows instead of sideways scroll ----- */

.price-cards{ display: none; }

@media (max-width: 820px){
  .price-block.has-cards .price-wrap{ display: none; }
  .price-block.has-cards .price-cards{
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--ink-2);
    overflow: hidden;
  }
}

.price-card{ border-bottom: 1px solid var(--line-soft); }
.price-card:last-child{ border-bottom: none; }

.price-card-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  color: var(--ivory);
  font-family: var(--sans);
  font-size: .97rem;
  text-align: left;
  padding: 16px 18px;
  cursor: pointer;
  line-height: 1.4;
}
.price-card-toggle .pc-name{ flex: 1; font-weight: 500; }
.price-card-toggle .pc-from{
  color: var(--gold-light);
  font-size: .88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-card-toggle .pc-from em{
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.price-card-toggle .pc-ic{
  width: 26px; height: 26px;
  flex: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold);
  font-size: 1rem;
  line-height: 24px;
  text-align: center;
  transition: transform .18s ease, border-color .15s ease;
}
.price-card-toggle[aria-expanded="true"]{ background: var(--ink-3); }
.price-card-toggle[aria-expanded="true"] .pc-ic{ transform: rotate(45deg); border-color: var(--gold-dim); }

.price-card-body{ padding: 2px 18px 16px; }
.price-card-body dl{ margin: 0; }
.price-card-body .pc-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}
.price-card-body .pc-row:last-child{ border-bottom: none; }
.price-card-body dt{
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  font-size: .87rem;
  min-width: 0;
}
.price-card-body dt .veh{
  width: 60px;
  height: 35px;
  flex: 0 0 60px;
  object-fit: cover;
  border-radius: 5px;
  background: #f2f1ed;
  border: 1px solid var(--line-soft);
}
.price-card-body dt .pc-label{ min-width: 0; }
.price-card-body dt span{
  display: block;
  font-size: .72rem;
  color: var(--gold-dim);
  letter-spacing: .04em;
}
.price-card-body dd{
  margin: 0;
  color: var(--ivory);
  font-size: .92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-card-body dd.request{ color: var(--muted); font-weight: 500; font-size: .85rem; }

/* ------------------------------ advantages -------------------------------- */

.adv-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 30px;
}
.adv-item{
  background: var(--ink-2);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  color: var(--ivory);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.adv-item:nth-child(3n){ border-right: none; }
.adv-item:nth-last-child(-n+3){ border-bottom: none; }
.adv-item .dot{ color: var(--gold-dim); font-size: .7rem; line-height: 1; }
@media (max-width: 700px){
  .adv-grid{ grid-template-columns: 1fr; }
  .adv-item{ border-right: none; border-bottom: 1px solid var(--line-soft); }
  .adv-item:last-child{ border-bottom: none; }
}

.included-line{
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  color: var(--muted);
  font-size: .88rem;
}
.included-line span::first-letter{ color: var(--gold); }

/* ------------------------------ stat strip -------------------------------- */

.stat-strip{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.stat{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-align: center;
  background: var(--ink-2);
}
.stat .n{ font-family: var(--serif); color: var(--ivory); font-size: 1.5rem; display:block; margin-bottom: 4px; }
.stat .l{ color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 700px){ .stat-strip{ grid-template-columns: 1fr; } }

/* -------------------------------- trip cards ------------------------------ */

.trip-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 10px;
}
@media (max-width: 980px){ .trip-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){ .trip-grid{ grid-template-columns: minmax(0, 1fr); } }

.trip-card{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}
.trip-card:hover{ border-color: var(--gold-dim); }

/* Ratio box: padding-top instead of aspect-ratio so the thumb can never be
   squashed by the column flexbox, and the card height is stable before the
   image loads. Sources are 1.12:1, so 5:4 crops only a sliver. */
.trip-card .thumb{
  position: relative;
  width: 100%;
  padding-top: 56.25%;       /* 16 : 9, the ratio the photos are cropped to */
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--ink-3);
}
.trip-card .trip-from{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: rgba(14, 27, 26, .84);
  color: var(--gold-light);
  font-size: .98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 5px 11px;
  border-radius: 4px;
}
.trip-card .trip-from em{
  font-style: normal;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.trip-pp{
  margin: 9px 0 0;
  font-size: .8rem;
  color: var(--muted);
}
.trip-pp strong{ color: var(--gold-light); font-weight: 600; }
.trip-card .trip-num{
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  background: rgba(14, 27, 26, .82);
  color: var(--gold-light);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: 4px 9px;
  border-radius: 3px;
}
/* contain, not cover: the whole photo is shown, scaled down to fit. The box
   above matches the source ratio, so there are no letterbox bars in practice
   -- but an odd-sized photo added later shrinks rather than gets cropped. */
.trip-card .thumb img{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.trip-card .body{
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.trip-card h3{ font-size: 1.08rem; margin-bottom: 2px; }

/* --- seasons ------------------------------------------------------------ */
.trip-seasons{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trip-seasons li{
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.trip-seasons li.on{ color: var(--gold-light); border-color: var(--gold-dim); }
.trip-seasons li.off{ color: #5c6f6b; text-decoration: line-through; }

/* --- pickup / duration -------------------------------------------------- */
.trip-meta{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.trip-meta > div{ background: var(--ink-2); padding: 9px 12px; }
.trip-meta dt{
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.trip-meta dd{ margin: 0; font-size: .86rem; color: var(--ivory); }

/* --- bonus stops -------------------------------------------------------- */
.trip-bonus h4,
.trip-prices h4{
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 7px;
}
.trip-bonus ul{ list-style: none; margin: 0; padding: 0; }
.trip-bonus li{
  position: relative;
  padding-left: 17px;
  font-size: .86rem;
  color: var(--ivory);
  margin-bottom: 3px;
}
.trip-bonus li::before{
  content: "+";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 600;
}
.trip-tag{
  align-self: flex-start;
  margin: 0;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  padding: 5px 11px;
}

/* --- price per car ------------------------------------------------------ */
.trip-prices h4{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.trip-prices h4 span{
  color: var(--gold-light);
  font-size: .82rem;
  letter-spacing: 0;
  text-transform: none;
}
.trip-prices dl{
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.trip-prices .pr{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.trip-prices .pr:last-child{ border-bottom: none; }
.trip-prices dt{ font-size: .84rem; color: var(--ivory); }
.trip-prices dt span{ color: var(--muted); font-size: .72rem; margin-left: 6px; }
.trip-prices dd.request{
  color: var(--muted);
  font-weight: 500;
  font-size: .8rem;
}
.trip-prices dd{
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gold-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- itinerary disclosure ----------------------------------------------- */
.trip-more{ font-size: .85rem; color: var(--muted); }
.trip-more summary{
  cursor: pointer;
  color: var(--gold-light);
  font-weight: 600;
  font-size: .82rem;
  list-style: none;
  padding: 6px 0;
}
.trip-more summary::-webkit-details-marker{ display: none; }
.trip-more summary::after{ content: " +"; }
.trip-more[open] summary::after{ content: " \2013"; }
.trip-more ul{ margin: 4px 0 10px; padding-left: 16px; line-height: 1.55; }
.trip-more li{ margin-bottom: 5px; }
.trip-more li::marker{ color: var(--gold-dim); }
.trip-more p{ color: var(--muted); font-size: .84rem; }
.trip-more b{ color: var(--gold-light); font-weight: 600; }

.trip-card .btn{ margin-top: auto; text-align: center; }

/* -------------------------------- contact -------------------------------- */

.contact-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 620px;
  margin: 40px auto 0;
}
.contact-card{
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  transition: border-color .15s ease;
}
.contact-card:hover{ border-color: var(--gold-dim); }
.contact-card img{ width: 42px; height: 42px; margin: 0 auto 14px; }
.contact-card h3{ margin-bottom: 4px; font-size: 1.15rem; }
.contact-card p{ color: var(--muted); font-size: .87rem; margin: 0; }
@media (max-width: 560px){ .contact-grid{ grid-template-columns: 1fr; } }

/* -------------------------------- FAQ accordion ---------------------------- */

.faq-list{ max-width: 760px; margin: 0 auto; }
.faq-item{ border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child{ border-top: 1px solid var(--line-soft); }
.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 20px 4px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .ic{ color: var(--gold); font-size: 1.15rem; flex-shrink:0; transition: transform .18s ease; }
.faq-item[open] summary .ic{ transform: rotate(45deg); }
.faq-item .a{ padding: 0 4px 22px; color: var(--muted); font-size: .94rem; max-width: 68ch; }
.faq-item .a p{ color: var(--muted); }
.faq-item .a p:last-child{ margin-bottom: 0; }

/* -------------------------------- footer --------------------------------- */

.site-footer{
  border-top: 1px solid var(--line);
  padding: 36px 0;
  background: var(--ink);
}
.site-footer .foot-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer p{ color: var(--muted); font-size: .8rem; margin: 0; line-height: 1.65; }
.site-footer .foot-brand{ font-family: var(--serif); color: var(--ivory); font-size: 1.02rem; letter-spacing: .04em; }

/* -------------------------------- misc utility ---------------------------- */

.text-center{ text-align: center; }
.mt-lg{ margin-top: 40px; }
.important-note{
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold-dim);
  background: var(--ink-2);
  color: var(--ivory);
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: 24px;
}