/* 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;
  border-radius: 6px;
  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;
  /* v9: the home hero now names who the site is for in one line, which is
     longer than a slogan. 24ch lets it break over two or three clean lines
     instead of four narrow ones. */
  max-width: 24ch;
}
.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; }
/* v9: the small proof line under the hero buttons - one advisor, where she is
   based, who she works with. Quiet, and not a second call to action. */
.hero .trustline {
  margin-top: 22px;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2c4a46;
  text-shadow: 0 1px 12px rgba(255,255,255,.9);
  max-width: 66ch;
}

/* --- 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; }

/* 320px, not 250px: at the 1180px wrap that is three columns, so the six
   specialty cards sit 3x2 instead of 4+2 with a hole in the second row
   (design review, 2026-10-16). */
.grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* --- cards, softened (2026-10-16) ---
   The owner's note: the specialty boxes read harsh - "classy, but not just
   square boxes". A hard square edge with a 3px gold bar straight across the
   top became a rounded, softly-shadowed panel: a warm ivory surface, a thin
   gold keyline, a soft two-part shadow for depth, and a short gold rule under
   each heading in place of the heavy top bar. The heading rule is a ::after on
   the h3, so the copy inside the cards did not have to change. */
.card {
  background: linear-gradient(180deg, #ffffff 0%, #fdfaf6 100%);
  border: 1px solid rgba(201, 148, 47, .26);
  border-radius: 18px;
  padding: 30px 28px 28px;
  box-shadow: 0 10px 26px rgba(15, 82, 76, .06), 0 2px 6px rgba(15, 82, 76, .04);
}
.card h3 { color: var(--teal-deep); margin-bottom: 16px; }
.card h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-top: 13px;
  background: var(--gold);
  opacity: .85;
}
.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: rgba(63, 143, 139, .5);
  box-shadow: 0 20px 42px rgba(15, 82, 76, .15), 0 3px 10px rgba(15, 82, 76, .06);
  transform: translateY(-4px);
}
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: linear-gradient(180deg, #ffffff 0%, #fdfaf6 100%);
  border: 1px solid rgba(201, 148, 47, .26);
  border-left: 2px solid var(--gold);
  border-radius: 14px;
  padding: 16px 20px;
  color: var(--teal-deep);
  font-size: 15.5px;
  box-shadow: 0 8px 20px rgba(15, 82, 76, .05);
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.related a:hover {
  border-left-color: var(--teal);
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 82, 76, .11);
  transform: translateY(-2px);
}

.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"); }

/* --- "text in a picture" (2026-10-16) ---
   Kimberly's own free-guide band, the one she likes, built the way her site
   designs it: the words sit IN the photograph with a solid teal button under
   them. Read off her live page (the hidden freebie canvas on
   premiertraveloptions.com): heading Antic Didone 43px, pure white,
   text-shadow none - flat white words, no 3D of any kind in her CSS. Flat
   white fails over a bright photograph, so the depth comes from the two things
   that read as lifted off the page without a bevel: a soft scrim that deepens
   only where the words sit (the top of the frame stays bright and sunny), and
   a wide low-opacity halo behind the letters. The button carries a real
   shadow, so it sits IN the picture instead of printed flat on it. --band-img
   is the same photograph as the screenshot: her freebie background.
   A design review the same day read the first version as having no scrim at
   all - white words straight on bright sky - so the veil is now centre-
   weighted: a radial that is strongest where the words are and gentlest in the
   corners, plus a light vertical wash. The frame stays sunny at the edges; the
   type reads in the middle.

   The owner read it as still too dark (2026-10-16) and asked for the overlay
   off the picture. Measured first, on the live page: the veil over the guide
   band was compositing to .58-.68 across the copy, and the mean brightness of
   the band was 79 of 255 - a dim frame over an already bright photograph
   (its own mean is 139). The veil is now thinned by roughly a third at the
   centre (.60 -> .38) and by three quarters at the edges (.27-.35 -> .07), so
   the bungalows, the water and the sky read sunny and the frame brightens to
   ~100 of 255. White words lose contrast as the veil comes off, so their own
   halo got stronger (the tight shadow behind the letters) - see the note on
   the text-shadow below for the measured numbers. Two things were tried and
   rejected on measurement: an ivory wash (bright, mean 216, but it milks the
   photograph grey and drops the gold kicker to 2.3:1) and a feathered plate
   behind the copy (the copy is as wide as the band here, so the plate covered
   the whole frame and bought no brightness at all). */
.phototext {
  position: relative;
  color: #fff;
  background-color: #0d453f;
  background-image:
    radial-gradient(120% 95% at 50% 44%,
      rgba(8, 44, 41, .38) 0%,
      rgba(8, 44, 41, .31) 45%,
      rgba(8, 44, 41, .17) 80%,
      rgba(8, 44, 41, .07) 100%),
    linear-gradient(180deg,
      rgba(8, 44, 41, .09) 0%,
      rgba(8, 44, 41, .07) 40%,
      rgba(8, 44, 41, .11) 100%),
    var(--band-img, none);
  background-size: cover, cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.phototext .kicker { color: #f0dcb4; }
.phototext h2, .phototext h1, .phototext .lead, .phototext li, .phototext p {
  color: #fff;
  /* Measured with the thinner veil (2026-10-16), across every line of the
     copy: band mean 100 of 255 (was 79), 97.2% of the words' area at 3:1 or
     better against the photograph, 60.8% at the AA 4.5:1, worst single pixel
     2.42:1, 5th percentile 3.59:1. So the picture is a quarter brighter and
     the type still reads - but this band no longer meets AA everywhere, which
     is the price of taking the veil off a white-on-photo band. The tight ring
     here is what carries the letters over the bright water, so it is stronger
     than the wide, soft one. A fully compliant white-on-photo version needs
     the v6 veil back; dark-on-ivory is the bright AND compliant option. */
  text-shadow: 0 1px 3px rgba(6, 32, 30, .62), 0 2px 26px rgba(6, 32, 30, .58);
}
.phototext h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.phototext .lead { max-width: 62ch; margin-left: auto; margin-right: auto; }
.phototext ul.check {
  display: grid;
  gap: 4px 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 780px;
  margin: 24px auto 0;
  text-align: left;
}
.phototext ul.check li { margin-bottom: 6px; }
.phototext ul.check li::before { background: #f0dcb4; }
.phototext .btn { box-shadow: 0 14px 32px rgba(4, 26, 24, .45), 0 2px 6px rgba(4, 26, 24, .3); }
.phototext .btn:hover { box-shadow: 0 18px 38px rgba(4, 26, 24, .5); }
.phototext .inline-form { justify-content: center; }

/* --- 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 rgba(201, 148, 47, .22);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 82, 76, .07), 0 2px 6px rgba(15, 82, 76, .04);
  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: 3px solid var(--blush);
  border-radius: 16px;
  padding: 26px 30px;
  box-shadow: 0 12px 30px rgba(15, 82, 76, .07);
  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;
  border-radius: 8px;
  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; }
/* the placeholder was faint on white (design review, 2026-10-16) */
.inline-form input::placeholder, .field input::placeholder { color: #6b6560; opacity: 1; }
.inline-form input {
  flex: 1 1 260px;
  padding: 13px;
  border: 1px solid #cfc6b8;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
}
/* The "Draft copy" callout used inside page bodies. It is deliberately NOT
   called `.note`: that name belongs to the floating square message box
   (note.css), and while both shared it this rule leaked onto the floating box -
   a gold left edge, a gold tint, 20px of padding and a 20px margin that pushed
   the box up off its corner. See docs/DECISIONS.md. */
.callout {
  font-size: 14px;
  color: var(--stone);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 12px 16px;
  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"); }
/* v9: the new "why an advisor" page reuses the coastal photograph - a picture
   already on the site, so no new licensing question is opened by adding it. */
.page-why .hero { --hero-img: url("/img/coast.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; }
  /* the photo-text band on a phone (design review, 2026-10-16): the crop lands
     on busy foliage and the words span the full width, so the veil is stronger
     and the benefit list is bigger and looser than on desktop. */
  .phototext {
    background-image:
      radial-gradient(150% 100% at 50% 45%,
        rgba(8, 44, 41, .44) 0%,
        rgba(8, 44, 41, .36) 55%,
        rgba(8, 44, 41, .22) 100%),
      linear-gradient(180deg,
        rgba(8, 44, 41, .11) 0%,
        rgba(8, 44, 41, .08) 40%,
        rgba(8, 44, 41, .14) 100%),
      var(--band-img, none);
  }
  .phototext ul.check { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  /* v8: a design review at 390px read the bullets as "smaller and less
     comfortable than on desktop" over the bright water, so they get size and
     air rather than more overlay - the owner asked for LESS overlay, and the
     letters are what carry the legibility here. */
  .phototext ul.check li { font-size: 18px; line-height: 1.7; margin-bottom: 11px; }
  /* softened cards, phone: roomier type and a real tap target on EXPLORE */
  .card { padding: 26px 22px 24px; }
  .card p { font-size: 16.5px; }
  .more { padding: 9px 2px; }
}