/* Premier Travel Options - rebuilt site stylesheet.
   Palette and type taken from the live site's own brand variables (2026-10-16):
   brand-0 #0f524c  brand-1 #c9942f  brand-2 #3f8f8b  brand-3 #e8dfd3
   brand-4 #6f6a64  brand-5 #cb8279  brand-6 #395c7a  brand-7 #ffffff
   Type: Bodoni Moda (headings, uppercase), Antic Didone (subheads),
   Red Hat Display (body) - the same three Google families the live site loads. */

:root {
  --teal-deep: #0f524c;
  --teal: #3f8f8b;
  --gold: #c9942f;
  --blush: #cb8279;
  --sand: #e8dfd3;
  --stone: #6f6a64;
  --slate: #395c7a;
  --ink: #1d211f;
  --paper: #fdfbf8;
  --max: 1180px;
  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --didone: "Antic Didone", Georgia, serif;
  --sans: "Red Hat Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
}

h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 .5em; }
h3 { font-size: 1.25rem; margin: 0 0 .35em; }
p { margin: 0 0 1.1em; }
a { color: var(--teal-deep); }

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

/* --- the draft strip: nobody should mistake this for the live site --- */
.draftbar {
  background: var(--gold);
  color: #2a1f06;
  font-size: 13px;
  text-align: center;
  padding: 7px 14px;
  letter-spacing: .02em;
}

/* --- top contact bar --- */
.topbar { background: var(--teal-deep); color: #eaf3f1; font-size: 14px; }
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.topbar a:hover { border-bottom-color: #fff; }

/* --- header with the nav AT THE TOP (it was 2,474px down the old page) --- */
.sitehead {
  background: #fff;
  border-bottom: 1px solid var(--sand);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sitehead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.brand { text-decoration: none; color: var(--teal-deep); }
.brand b {
  display: block;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.brand small {
  display: block;
  font-family: var(--didone);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
nav.main { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
nav.main a { text-decoration: none; color: var(--ink); font-size: 14.5px; letter-spacing: .02em; }
nav.main a:hover, nav.main a.active { color: var(--teal); }
nav.main a.active { border-bottom: 2px solid var(--gold); padding-bottom: 2px; }

.btn {
  display: inline-block;
  background: var(--teal-deep);
  color: #fff;
  text-decoration: none;
  padding: 13px 24px;
  font-family: var(--sans);
  font-size: 13.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--teal); }
.btn.gold { background: var(--gold); color: #2a1f06; }
.btn.ghost { background: transparent; color: var(--teal-deep); border: 1px solid var(--teal-deep); }
.btn.ghost.light { color: #fff; border-color: rgba(255,255,255,.8); }
.btn.ghost.light:hover { background: rgba(255,255,255,.14); }

/* --- hero: a real photograph, left bright and sunny ---
   Measured 2026-10-16: the live site's own photographs are already bright
   (frame mean 89-205 of 255), so it was the dark veil - rgba(8,44,41,.44) to
   .70 - that made the top of every page look dim, not the pictures. The veil is
   now an IVORY one that lightens instead of darkens, and it is a left-to-right
   wash: strong where the words sit, gone by the right edge, so most of the
   photograph is shown bright and untouched. The words are dark teal on that
   wash, not white on a dim photograph - white text over these pictures fails
   wherever a bright highlight passes behind it (blog-band runs to 205 of 255).
   --hero-img is set per page (see the .page-* rules at the foot of this file). */
.hero {
  position: relative;
  color: var(--teal-deep);
  padding: clamp(84px, 13vw, 165px) 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg,
      rgba(253,251,248,.96) 0%,
      rgba(253,251,248,.92) 30%,
      rgba(253,251,248,.62) 52%,
      rgba(253,251,248,.16) 74%,
      rgba(253,251,248,0) 100%),
    var(--hero-img, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
/* a soft ivory halo - the words sit on light now, not on a dark veil */
.hero h1, .hero h2, .hero .lede, .hero .eyebrow { text-shadow: 0 1px 16px rgba(255,255,255,.92); }
.hero .eyebrow {
  font-family: var(--didone);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #98690f;
  margin-bottom: 18px;
}
.hero h1 {
  color: var(--teal-deep);
  text-transform: uppercase;
  letter-spacing: .015em;
  max-width: 22ch;
}
.hero .lede { font-size: 1.1rem; max-width: 56ch; color: #24413d; }
.hero .actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
/* the white-outlined button vanishes on a light hero - teal outline on a
   translucent white panel instead */
.hero .btn.ghost { background: rgba(255,255,255,.78); color: var(--teal-deep); border-color: var(--teal-deep); }
.hero .btn.ghost:hover { background: #fff; }

/* --- sections --- */
section { padding: 62px 0; }
section.tight { padding: 44px 0; }
.kicker {
  font-family: var(--didone);
  font-size: 12.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.lead { font-size: 1.08rem; max-width: 68ch; color: #333; }
.center { text-align: center; }
.center .lead, .center h2 { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: #fff;
  border: 1px solid var(--sand);
  border-top: 3px solid var(--gold);
  padding: 26px 24px;
}
.card h3 { color: var(--teal-deep); }
.card p { margin: 0; color: #444; font-size: 15.5px; }

/* --- a card that is a link (2026-10-16): the six specialty boxes now open
   their own page, so the whole box is the tap target, not a word inside it --- */
a.card, a.pcard {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
a.card:hover, a.pcard:hover {
  border-color: var(--teal);
  box-shadow: 0 10px 26px rgba(15,82,76,.12);
  transform: translateY(-2px);
}
a.card:focus-visible, a.pcard:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
/* the cue that says "this box opens something". A design review on 2026-10-16
   read the boxes as flat tiles, so the cue is now a darker gold with an arrow
   and a rule under it, and the heading turns teal on hover. */
.more {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--didone);
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a5f0d;
  border-bottom: 1px solid rgba(201,148,47,.5);
  padding-bottom: 3px;
}
.more::after { content: " \2192"; }
a.card:hover .more, a.pcard:hover .more { color: var(--teal-deep); border-bottom-color: var(--teal-deep); }
a.card:hover h3, a.pcard:hover h3 { color: var(--teal); }

/* --- a specialty subpage's breadcrumb and its row of sibling links --- */
.crumb {
  font-family: var(--didone);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #47615c;
  margin: 0 0 16px;
}
.crumb a { color: var(--teal-deep); }
.related { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.related a {
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--sand);
  border-left: 3px solid var(--gold);
  padding: 16px 18px;
  color: var(--teal-deep);
  font-size: 15.5px;
}
.related a:hover { border-left-color: var(--teal); background: #f6f2ec; }

.band { background: var(--teal-deep); color: #eaf3f1; }
.band h2, .band h1 { color: #fff; }
.band a { color: #f0dcb4; }
.sandband { background: var(--sand); }

/* a band whose background is a photograph - lightened the same way as the hero.
   Its words are centred, so the ivory veil here runs top-to-bottom and is
   strongest across the middle where they sit; the photograph shows brighter at
   the top and bottom edges. Same dark teal text, same reason as the hero. */
.band-photo {
  position: relative;
  color: var(--teal-deep);
  background-color: var(--sand);
  background-image:
    linear-gradient(rgba(253,251,248,.46) 0%,
      rgba(253,251,248,.82) 32%,
      rgba(253,251,248,.82) 68%,
      rgba(253,251,248,.46) 100%),
    var(--band-img, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.band-photo h2, .band-photo h1 { color: var(--teal-deep); }
.band-photo .kicker { color: #98690f; }
.band-photo .lead { color: #24413d; }
.band-photo a { color: var(--teal-deep); }
.specialties-photo { --band-img: url("/img/specialties-band.webp"); }
.testimonials-photo { --band-img: url("/img/testimonial-band.webp"); }
.cta-photo { --band-img: url("/img/cta.webp"); }
.groups-photo { --band-img: url("/img/groups-band.webp"); }
.guide-photo { --band-img: url("/img/guide.webp"); }

/* --- photographs --- */
.photoband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.photoband img { width: 100%; height: 360px; object-fit: cover; display: block; }
.photoband.two { grid-template-columns: repeat(2, 1fr); }
.photoband.two img { height: 300px; }

.split { display: grid; gap: 44px; grid-template-columns: 1.02fr .98fr; align-items: center; }
.split.flip > :first-child { order: 2; }
.split img.portrait { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; }

.pcard {
  background: #fff;
  border: 1px solid var(--sand);
  display: flex;
  flex-direction: column;
}
.pcard img { width: 100%; height: 250px; object-fit: cover; display: block; }
.pcard .body { padding: 22px 22px 26px; }
.pcard h3 { color: var(--teal-deep); }
.pcard p { margin: 0; font-size: 15.5px; color: #444; }
.pcard .meta {
  font-family: var(--didone);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

.quote {
  background: #fff;
  border-left: 4px solid var(--blush);
  padding: 26px 28px;
  font-family: var(--serif);
  font-size: 1.18rem;
}
.quote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--didone);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
  font-style: normal;
}
.quote.on-photo {
  background: rgba(255,255,255,.94);
  border-left-color: var(--gold);
  font-size: 1.35rem;
}

ul.check { list-style: none; padding: 0; margin: 0 0 1.2em; }
ul.check li { padding-left: 26px; position: relative; margin-bottom: 9px; }
ul.check li::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

.steps { counter-reset: step; }
.steps .card { border-top-color: var(--teal); }
.steps .card h3::before {
  counter-increment: step;
  content: counter(step) ". ";
  color: var(--gold);
}

/* --- forms --- */
form.stack { max-width: 560px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-family: var(--didone);
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #cfc6b8;
  background: #fff;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input {
  flex: 1 1 260px;
  padding: 13px;
  border: 1px solid #cfc6b8;
  font: inherit;
  font-size: 16px;
}
.note {
  font-size: 14px;
  color: var(--stone);
  border-left: 3px solid var(--gold);
  padding: 10px 0 10px 14px;
  margin: 20px 0;
  background: rgba(201,148,47,.06);
}

/* --- the honest "to confirm" marker --- */
.tbd {
  border-bottom: 1px dashed var(--gold);
  color: var(--teal-deep);
  font-style: italic;
}

/* --- footer --- */
footer.site { background: #0b3f3a; color: #cfe2df; padding: 48px 0 26px; font-size: 15px; }
footer.site a { color: #eaf3f1; text-decoration: none; }
footer.site a:hover { border-bottom: 1px solid var(--gold); }
footer.site h4 {
  font-family: var(--didone);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  font-weight: 400;
}
.footgrid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: 8px; }
.footstrip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 30px; }
.footstrip img { width: 100%; height: 190px; object-fit: cover; display: block; opacity: .92; }
.legal {
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 34px;
  padding-top: 18px;
  font-size: 13px;
  color: #9dbfba;
}

/* --- per-page hero photographs (the live site's own pictures, same slots) --- */
.page-home .hero { --hero-img: url("/img/hero.webp"); }
.page-about .hero { --hero-img: url("/img/about-band.webp"); }
.page-specialties .hero { --hero-img: url("/img/specialties-band2.webp"); }
.page-services .hero { --hero-img: url("/img/services-band.webp"); }
.page-groups .hero { --hero-img: url("/img/groups-band.webp"); }
.page-contact .hero { --hero-img: url("/img/contact-band.webp"); }
.page-blog .hero { --hero-img: url("/img/blog-band.webp"); }
.page-freebie .hero { --hero-img: url("/img/freebie-band.webp"); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split.flip > :first-child { order: 0; }
  .photoband { grid-template-columns: 1fr 1fr; }
  .photoband img { height: 240px; }
  .photoband img:last-child { grid-column: 1 / -1; height: 220px; }
}

@media (max-width: 720px) {
  /* on a phone the headline fills the width, so the wash has to cover it:
     strong across most of the frame, letting the photograph through at the
     right edge only */
  .hero {
    padding: 62px 0 66px;
    background-image:
      linear-gradient(90deg,
        rgba(253,251,248,.96) 0%,
        rgba(253,251,248,.94) 60%,
        rgba(253,251,248,.40) 88%,
        rgba(253,251,248,.12) 100%),
      var(--hero-img, none);
  }
  section { padding: 44px 0; }
  nav.main { gap: 14px; }
  .photoband, .photoband.two { grid-template-columns: 1fr; }
  .photoband img, .photoband.two img, .photoband img:last-child { height: 230px; }
  .pcard img { height: 220px; }
  .footstrip img { height: 140px; }
}