/* Travenza · page-service.css — responsive layout for page-service.php (8 service pages) and the .svc-* components.
   Uses the shared tokens/utilities from style.css (--gutter, --section-y, --container-wide, --radius-card, --glass-*).

   Structure
     1. Page tokens
     2. Hero (photo + scrim)
     3. Stats strip
     4. Flight enquiry form
     5. Page body  — the post_content of each service page is hand-tagged HTML with inline styles
                     (it is edited in the WP editor, so the markup stays as authored). Everything
                     below re-flows it responsively from the outside, scoped to .svc-body, using
                     attribute selectors + !important to beat the inline declarations.
     6. CTA band
     7. Form status toast (.tr-notice) hardening
   Breakpoints: 1100 (tablet landscape) · 820 (tablet portrait) · 560 (phones) · 400 (small phones). */

/* ───────────────────────── 1. Tokens ───────────────────────── */
.svc-page {
  --svc-y: clamp(48px, 5vw, 72px);          /* vertical rhythm between content bands */
  --svc-w: var(--container-wide, 1500px);   /* content width cap */
  --svc-muted: #5e5e57;                     /* body-copy grey, AA on white / ivory */
  --svc-line: var(--gray-light, #e0ded6);
  --svc-measure: 74ch;                      /* comfortable line length for long paragraphs */
  display: block;
}

/* ───────────────────────── 2. Hero ───────────────────────── */
.svc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(480px, 66vh, 740px);
  min-height: clamp(480px, 66svh, 740px);
  padding: calc(var(--nav-h, 72px) + clamp(40px, 7vw, 88px)) var(--gutter) clamp(48px, 6vw, 80px);
  background: #0d0d0d; color: #fff;
}
.svc-hero__img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
/* Three stacked gradients: a nav-side darkener, a bottom darkener and a left-weighted one
   under the copy. Together they keep white text >= 4.5:1 even on pale sky / paper photos.
   The nav-side one is deliberately strong and tall (.74 -> 0 over 200px): bright photo detail
   (printed ticket text, camera-strap lettering) must not sit behind the logo / nav links.
   (Measured on the rendered hero of all 8 pages at 390/768/1366/1920 — see report.) */
.svc-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(8,8,8,.74) 0, rgba(8,8,8,.5) 96px, rgba(8,8,8,0) 200px),
    linear-gradient(to top, rgba(8,8,8,.62) 0, rgba(8,8,8,0) 55%),
    linear-gradient(90deg, rgba(8,8,8,.8) 0%, rgba(8,8,8,.62) 42%, rgba(8,8,8,.4) 100%);
}
@media (max-width: 1100px) {
  /* copy spans the full width on tablets/phones: a vertical wash instead of the left-weighted one */
  .svc-hero__scrim { background: linear-gradient(to bottom, rgba(8,8,8,.76) 0, rgba(8,8,8,.64) 24%, rgba(8,8,8,.68) 42%, rgba(8,8,8,.78) 70%, rgba(8,8,8,.88) 100%); }
}

/* Per-photo framing. Keyed on the photo's own URL (img[src*=…]) so each rule applies only while that
   exact picture is the page hero and cannot mis-crop a replacement chosen later in the editor. */
/* 81 customized vacation (flat-lay: map, camera lens, strap lettering): on portrait crops start from the left edge, which pushes the lettered camera strap out of the logo / hamburger band */
.svc-hero__img[src*="photo-1488646953014"] { object-position: 0% 50%; }
@media (max-width: 820px) { .svc-hero__img[src*="photo-1488646953014"] { transform: scale(1.12); transform-origin: 0 100%; } }   /* …and a 12% push-in clears the last bit of strap from the hamburger corner */
/* 85 tourist visa (passports + boarding passes): anchor bottom-right so the printed ticket text drops out from behind the logo / nav links
   (bottom on laptop crops, right on portrait phone crops) */
.svc-hero__img[src*="photo-1655722724447"] { object-position: 100% 100%; }
/* 86 corporate travel (handshake): frame both hands on narrow screens instead of the dark left edge, and let more of the photo through */
.svc-hero__img[src*="photo-1521791136064"] { object-position: 70% 50%; }
@media (max-width: 1100px) {
  .svc-hero:has(.svc-hero__img[src*="photo-1521791136064"]) .svc-hero__scrim { background: linear-gradient(to bottom, rgba(8,8,8,.76) 0, rgba(8,8,8,.58) 24%, rgba(8,8,8,.58) 42%, rgba(8,8,8,.72) 72%, rgba(8,8,8,.88) 100%); }
}
/* 87 currency exchange: STOP-GAP for the current laptop photo (its screen shows an unrelated web page that collides with
   the headline). Keeps the laptop screen out of the copy zone and darkens the wash. Applies only while that photo is in use. */
@media (max-width: 1100px) {
  .svc-hero__img[src*="photo-1559526324"] { object-position: 100% 50%; }
  .svc-hero:has(.svc-hero__img[src*="photo-1559526324"]) .svc-hero__scrim { background: linear-gradient(to bottom, rgba(8,8,8,.8) 0, rgba(8,8,8,.78) 40%, rgba(8,8,8,.82) 70%, rgba(8,8,8,.9) 100%); }
}
@media (min-width: 1101px) {
  .svc-hero__img[src*="photo-1559526324"] { object-position: 100% 40%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* phones held sideways: don't force a screen-tall hero, let the copy set the height */
  .svc-hero { min-height: 0; padding-top: calc(var(--nav-h, 72px) + 24px); padding-bottom: 32px; }
}
.svc-hero__inner { width: 100%; max-width: var(--svc-w); margin-inline: auto; }
.svc-hero__copy { max-width: 780px; }

.svc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 18px; margin-bottom: 22px;
  /* deeper ink-orange fill: white 11px caps on the bright #d58e4a was 2.7:1, on --orange-ink it is 4.6:1 (AA) */
  background: var(--orange-ink, #a8631f); color: #fff; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; line-height: 1.2;
}
.svc-eyebrow .svc-ico { flex: none; }

.svc-h1 {
  font-family: var(--f-display); font-weight: 900; color: #fff;
  font-size: clamp(38px, 5.2vw + 22px, 90px);
  line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 20px;
  text-shadow: 0 2px 28px rgba(0,0,0,.4);
}
.svc-lede {
  font-size: clamp(16px, .5vw + 14.5px, 19px); line-height: 1.6; font-weight: 400;
  color: rgba(255,255,255,.92); max-width: 58ch; margin: 0 0 30px; text-wrap: pretty;
  text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
/* The global .reveal hides its element until main.js marks it visible. Keep the hero readable if JS is
   off or never runs, and fall back to showing it after 3s if the observer somehow never fires. */
html:not(.js) .svc-page .reveal { opacity: 1; transform: none; }
.svc-hero .reveal:not(.visible) { animation: svcRevealFallback .6s ease 3s forwards; }
@keyframes svcRevealFallback { to { opacity: 1; transform: none; } }
.svc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.svc-hero__actions .btn-primary, .svc-hero__actions .btn-outline-light { white-space: nowrap; }
.svc-hero__actions .btn-outline-light { background: rgba(0,0,0,.18); }

/* ───────────────────────── 3. Stats strip ───────────────────────── */
.svc-stats { background: var(--dark-green); padding: clamp(28px, 4vw, 44px) var(--gutter); }
.svc-stats__grid {
  max-width: var(--svc-w); margin-inline: auto;
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
}
.svc-stat { text-align: center; padding: 4px clamp(10px, 2vw, 20px); min-width: 0; }
.svc-stat + .svc-stat { border-left: 1px solid rgba(255,255,255,.16); }
/* nowrap + lining numerals + a size that fits the widest value ("Same Day", "50,000+") in a quarter-width cell,
   so every cell is one line tall and the numerals share a baseline with the text stat */
.svc-stat__num {
  font-family: var(--f-display); font-weight: 900; line-height: 1.1;
  font-size: clamp(26px, 3.1vw, 44px); color: var(--orange-light, #e8a86e); margin-bottom: 8px;
  white-space: nowrap; font-variant-numeric: lining-nums;
}
.svc-stat__num .num-plus { font-family: var(--f-body); font-weight: 800; font-size: .84em; line-height: 1; margin-left: .02em; vertical-align: .03em; }
.svc-stat__label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.8); line-height: 1.4; text-wrap: balance; }
@media (max-width: 640px) {
  .svc-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .svc-stat + .svc-stat { border-left: 0; }
  .svc-stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.16); }
  .svc-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ───────────────────────── 4. Flight enquiry form ───────────────────────── */
.svc-formsec { background: var(--ivory); padding: var(--svc-y) var(--gutter); }
.svc-formsec__wrap {
  max-width: 760px; margin-inline: auto;
  background: #fff; border: 1px solid var(--svc-line); border-radius: var(--radius-card, 20px);
  padding: clamp(22px, 4.5vw, 44px);
  box-shadow: 0 10px 40px rgba(40,30,10,.06);
}
.svc-formsec .section-heading { max-width: none; font-size: clamp(30px, 2.4vw + 18px, 46px); margin-bottom: clamp(20px, 3vw, 28px); }

.svc-form { display: flex; flex-direction: column; gap: clamp(16px, 2.4vw, 22px); }
.svc-form__row { display: grid; gap: clamp(14px, 2vw, 18px); }
.svc-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc-form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.svc-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--svc-muted); line-height: 1.35; }
.svc-input {
  display: block; width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1.5px solid var(--svc-line); border-radius: 12px;
  background: var(--ivory-2); color: var(--black);
  font: 400 16px/1.4 var(--f-body); text-align: left;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.svc-input::placeholder { color: #8c8c84; opacity: 1; }
.svc-input:focus { outline: none; border-color: var(--orange); background-color: #fff; box-shadow: 0 0 0 4px rgba(213,142,74,.2); }
.svc-input:user-invalid { border-color: #c2410c; }
.svc-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.svc-input[type="number"]::-webkit-inner-spin-button, .svc-input[type="number"]::-webkit-outer-spin-button { opacity: 1; }
.svc-select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%237a7a72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 14px 9px;
}
.svc-textarea { min-height: 112px; resize: vertical; }

/* radio "chips" (Trip Type) — real inputs stay in the DOM, visually hidden but focusable */
.svc-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-choice { position: relative; display: inline-flex; }
.svc-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.svc-choice span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px;
  border: 1.5px solid var(--svc-line); border-radius: 999px; background: var(--ivory-2);
  font-size: 14px; font-weight: 600; color: var(--black-soft); line-height: 1.2;
  transition: background-color .2s, border-color .2s;
}
.svc-choice span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #b5b3a8; background: #fff; transition: border-color .2s, background .2s;
}
.svc-choice input:checked + span { background: var(--orange-pale); border-color: var(--orange); color: var(--black); }
.svc-choice input:checked + span::before { border-color: var(--orange); background: radial-gradient(circle, var(--orange) 0 4.5px, #fff 5.5px); }
.svc-choice input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }

.svc-submit { width: 100%; justify-content: center; min-height: 56px; padding: 16px 28px; font-size: 15px; margin-top: 4px; }

@media (max-width: 560px) {
  .svc-form__row--2 { grid-template-columns: minmax(0, 1fr); }
  .svc-choice { flex: 1 1 calc(50% - 5px); }
  .svc-choice span { width: 100%; justify-content: center; padding-inline: 14px; }
}

/* ───────────────────────── 5. Page body (post_content) ───────────────────────── */
.svc-body { font-size: 15px; line-height: 1.7; color: var(--black-soft); }

/* 5a. Bands: every top-level <section> is a full-bleed coloured band with a centred inner container */
.svc-body > section[style*="padding:64px 80px"] { padding: var(--svc-y) var(--gutter) !important; }
.svc-body > section[style*="padding:64px 80px"] > div { max-width: var(--svc-w) !important; margin-inline: auto !important; }

/* 5b. Flow pages (currency exchange): content has no bands of its own, so give it a centred, padded column */
.svc-body--flow { max-width: calc(var(--svc-w) + 2 * var(--gutter)); margin-inline: auto; padding: var(--svc-y) var(--gutter) calc(var(--svc-y) * 1.1); }
.svc-body--flow > section[style*="margin-top"] { margin-top: clamp(40px, 5vw, 64px) !important; }
/* the intro paragraph is bare content (no band, no class): same grey / size / rhythm as the copy on every other service page */
.svc-body--flow > p { max-width: var(--svc-measure) !important; color: var(--svc-muted) !important; font-size: 15px !important; line-height: 1.8 !important; margin-bottom: 0 !important; }
/* ≥1100: it sits under the centred stats strip, so centre it as a lead-in instead of leaving the right half blank */
@media (min-width: 1100px) {
  .svc-body--flow > p:first-child { margin-inline: auto !important; text-align: center; font-size: 17px !important; line-height: 1.75 !important; max-width: 64ch !important; text-wrap: balance; }
}
.svc-body--flow > section[style*="padding:40px;border-radius:20px"] { padding: clamp(24px, 4vw, 40px) !important; }
/* phones: a tinted panel holding white cards (a card inside a card) wasted ~a quarter of the width — let it run edge to edge so the cards get the full column */
@media (max-width: 560px) {
  .svc-body--flow > section[style*="padding:40px;border-radius:20px"] { margin-inline: calc(var(--gutter) * -1) !important; padding: 28px var(--gutter) 16px !important; border-radius: 0 !important; }   /* cards and heading share the page's side gutter */
}
.svc-body--flow > section[style*="padding:48px 40px"] { padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 40px) !important; }
.svc-body--flow > section[style*="padding:48px 40px"] > p[style*="max-width:640px"] { color: rgba(255,255,255,.82) !important; }
.svc-body--flow > section[style*="padding:48px 40px"] div[style*="color:rgba(255,255,255,.6)"] { color: rgba(255,255,255,.82) !important; }

/* 5c. Type */
.svc-body h2 {
  font-size: clamp(28px, 1.1vw + 24px, 36px) !important; line-height: 1.18 !important;
  letter-spacing: -.4px; margin-bottom: clamp(18px, 2.2vw, 26px) !important;
}
.svc-body h2[style*="margin-bottom:0"] { margin-bottom: 0 !important; }
.svc-body h2 em { font-style: italic; color: var(--orange); }
.svc-body h3, .svc-body h4 { line-height: 1.3 !important; }
.svc-body p[style*="font-size:13px"] { font-size: 14px !important; }
.svc-body p[style*="font-size:14px"] { font-size: 15px !important; }
.svc-body p[style*="font-size:10px"] { font-size: 11px !important; }
.svc-body li[style*="font-size:14px"] { font-size: 15px !important; }
.svc-body span[style*="font-size:13px"] { font-size: 14px !important; }
.svc-body div[style*="font-size:13px"] { font-size: 14px !important; }
.svc-body div[style*="font-size:12px"] { font-size: 13px !important; }
.svc-body div[style*="font-size:11px"] { font-size: 12px !important; }
.svc-body div[style*="font-size:10px"] { font-size: 11px !important; }
.svc-body [style*="color:var(--gray)"] { color: var(--svc-muted) !important; }
/* long running text: cap the line length so wide screens stay readable */
.svc-body section > div > p { max-width: var(--svc-measure); }
.svc-body section > div > p[style*="text-align:center"] { max-width: none; }
/* balanced headings: no one-word last lines (".dg-faq-q" is a <summary>, so the global h1–h4 balance doesn't reach it) */
.svc-body h2, .svc-body .dg-faq-q { text-wrap: balance; }
/* inline stat/step numerals set in Playfair keep the same lining figures as the headings */
.svc-body [style*="var(--f-display)"] { font-variant-numeric: lining-nums; }

/* Bands that open with a heading + copy ("Planning Off-Beat Trips", "Travel, Made Personal", the "Where Can You Set Sail" intro…):
   on wide screens the 74ch copy cap left the right half of the band blank. Heading left / copy right fills the width;
   anything after the copy (card grids, buttons) spans the full row. Portrait tablets and phones keep the single column. */
@media (min-width: 1000px) {
  .svc-body > section > div:has(> h2 + p) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .svc-body > section > div:has(> h2 + p) > h2 { grid-column: 1; margin-bottom: 0 !important; }
  .svc-body > section > div:has(> h2 + p) > p { grid-column: 2; }
  .svc-body > section > div:has(> h2 + p) > :not(h2):not(p) { grid-column: 1 / -1; }
  .svc-body > section > div:has(> h2 + p) > p:last-child { margin-bottom: 0 !important; }
  .svc-body > section > div:has(> h2 + p) > p:has(+ :not(p)) { margin-bottom: 28px !important; }
}
@media (min-width: 1280px) {
  .svc-body > section > div:has(> h2 + p) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* 5d. Cards: visible edge + soft shadow even when white sits on white */
.svc-body div[style*="background:#fff;border-radius:14px;padding:24px"] {
  padding: clamp(20px, 2.4vw, 24px) !important;
  border: 1px solid rgba(26,26,26,.07); box-shadow: 0 6px 22px rgba(40,30,10,.045);
}
.svc-body a[style*="border-left:3px solid var(--orange)"],
.svc-body div[style*="border-left:3px solid var(--orange)"] { box-shadow: 0 4px 16px rgba(40,30,10,.05); }
.svc-body a[style*="border-left:3px solid var(--orange)"] { transition: transform .25s, box-shadow .25s; }
.svc-body a[style*="border-left:3px solid var(--orange)"]:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(40,30,10,.1); }
.svc-body a[style*="overflow:hidden;background:#fff"] { transition: transform .25s, box-shadow .25s; box-shadow: 0 6px 22px rgba(40,30,10,.06); }
.svc-body a[style*="overflow:hidden;background:#fff"]:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(40,30,10,.12); }
.svc-body div[style*="background:#fff;border-radius:10px;overflow:hidden"],
.svc-body div[style*="border-radius:14px;overflow:hidden;background:#fff"] { box-shadow: 0 4px 18px rgba(40,30,10,.06); }
.svc-chip { flex: none; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 16px; background: var(--orange-pale); color: var(--orange); display: flex; align-items: center; justify-content: center; }
.svc-body div[style*="width:52px;height:52px"] svg { flex: none; }
/* shared icon-chip sizes stay crisp on any screen */
.svc-body h3 { text-wrap: balance; }

/* testimonial cards (one design for every service page: .dg-testi-card markup in the content).
   Reviews range from 3 lines to 16, so cards keep their OWN height (grid align-items:start) instead of stretching
   to the tallest: stretching left 190-445px of empty space above the author row of the short ones.
   The author row sits right under the review behind a hairline. */
.svc-body .dg-testi-card {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 28px);
  border: 1px solid rgba(26,26,26,.07); box-shadow: 0 6px 22px rgba(40,30,10,.045);
}
/* the quote glyph is a 48px Playfair “ in a 1-line box: collapse that box so it doesn't leave a hole above the stars */
.svc-body .dg-testi-quote { font-size: 44px; line-height: 1; height: 24px; margin-bottom: 10px; overflow: visible; }
.svc-body .dg-testi-card .travenza-stars { margin-bottom: 12px; }
.svc-body .dg-testi-text { color: var(--svc-muted); margin-bottom: 22px; }
.svc-body .dg-testi-author { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--svc-line); }
/* testimonial grid: same balance as the other card grids (no orphans: 4 → 4/2/1 columns, 3 → 3/2+1/1) */
.svc-body .dg-testi-grid { margin-top: 0; gap: 20px; align-items: start; }
.svc-body .dg-testi-card .dg-testi-text { text-wrap: pretty; }
@media (min-width: 1100px) {
  .svc-body .dg-testi-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-body .dg-testi-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 561px) and (max-width: 1099px) {
  .svc-body .dg-testi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-body .dg-testi-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .svc-body .dg-testi-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-body .dg-testi-grid:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; }
}
/* 700–1699: three or four reviews of very different lengths (3 lines … 16) read best as two balanced columns (CSS columns, cards never split):
   a row of 3–4 narrow cards beside one long review left slabs of blank space under the short ones. ≥1700 the cards are wide enough for a row. */
@media (min-width: 700px) and (max-width: 1699px) {
  .svc-body .dg-testi-grid:has(> :nth-child(3)) { display: block; column-count: 2; column-gap: 20px; margin-bottom: -20px; }
  .svc-body .dg-testi-grid:has(> :nth-child(3)) > .dg-testi-card { break-inside: avoid; margin-bottom: 20px; }
}
@media (max-width: 560px) { .svc-body .dg-testi-grid { grid-template-columns: minmax(0, 1fr); } }

/* 5e. Two-column rows (image + text, flex-wrap) — they wrap by themselves; tidy the gaps and fixed heights */
/* copy beside a photo, under a section heading, starts on the photo's top edge (centring left a hole under the heading and made the alternating bands
   uneven). Rows that carry their own heading inside the text column (cruise "Romantic Cruises for Couples") stay centred beside the photo. */
.svc-body h2 + div[style*="gap:32px;flex-wrap:wrap;align-items:center"] { align-items: flex-start !important; }
.svc-body div[style*="min-width:280px"], .svc-body div[style*="min-width:240px"] { min-width: min(280px, 100%) !important; }
.svc-body div[style*="flex:1 1 260px"] { min-height: clamp(220px, 40vw, 320px); }
.svc-body .auto-slider { min-height: 220px; }

/* 5f. Process steps: 2 columns on desktop instead of a long thin list */
.svc-body div:has(> div[style*="padding:20px 0"]) { max-width: none !important; }
.svc-body div[style*="padding:20px 0"] { padding: clamp(18px, 2.2vw, 22px) 0 !important; border-bottom: 1px solid var(--svc-line) !important; }
@media (min-width: 900px) {
  .svc-body div:has(> div[style*="padding:20px 0"]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 6vw, 88px); }
}

/* 5g. Check list (visa page) */
.svc-body ul[style*="list-style:none"] { gap: 12px !important; }
.svc-body li[style*="display:flex"] { line-height: 1.5; }

/* 5h. Itinerary carousel row (customized vacation): deliberate swipe row with a visible next-card peek */
.svc-body div[style*="overflow-x:auto"] { scrollbar-width: thin; scrollbar-color: var(--orange) transparent; padding-bottom: 18px !important; }
.svc-body div[style*="flex:0 0 280px"] { flex-basis: clamp(240px, 74vw, 300px) !important; }
.svc-body .view-all-link { min-height: 44px; }
.svc-body .itin-region { font-size: 11px; }
/* inline text links get a generous (layout-neutral) hit area */
.svc-body p > a[style*="text-decoration:underline"] { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* Fixed 280px cards left a 10–30px cut-off sliver of the next card at 1024–1366 (it read as a rendering glitch).
   Size the cards from the row instead, so the edge is always a deliberate peek or a clean fit:
   821–1099  three cards + a 40% peek of the fourth · 1100–1499  four cards + a 40% peek of the fifth
   ≥1500  all five fit exactly (the row has 5 cards, so there is nothing left to scroll to). */
@media (min-width: 821px) { .svc-body div[style*="flex:0 0 280px"] { flex-basis: calc((100% - 60px) / 3.4) !important; } }
@media (min-width: 1100px) { .svc-body div[style*="flex:0 0 280px"] { flex-basis: calc((100% - 80px) / 4.4) !important; } }
@media (min-width: 1500px) { .svc-body div[style*="flex:0 0 280px"] { flex-basis: calc((100% - 80px) / 5) !important; } }

/* Hover fill: the orange label used to sit at .92 alpha over the card text, so the eyebrow / title / meta ghosted through ("double print").
   Fade the card text out as the label fades in; the fill itself becomes opaque. Touch devices never show the label (style.css), so they keep the text. */
.svc-body .itin-hover { background: var(--orange); }
@media (hover: hover) {
  .svc-body .itin-content { transition: opacity .25s ease; }
  .svc-body .itin-card:hover .itin-content, .svc-body .itin-card:focus-within .itin-content { opacity: 0; }
  .svc-body .itin-card:focus-within .itin-hover { opacity: 1; }
}

/* Scroll affordance for the itinerary row (wrapped by the script at the foot of page-service.php): prev / next buttons and an edge fade
   that appears on whichever side still has cards. Without JS the row keeps its native scrollbar and the card peek. */
.svc-scroll { position: relative; }
.svc-scroll__btn { display: none; }
@media (min-width: 821px) {
  .svc-scroll::before, .svc-scroll::after {
    content: ""; position: absolute; top: 0; bottom: 18px; width: 72px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .25s;
  }
  .svc-scroll::before { left: 0; background: linear-gradient(to right, #fff 12%, rgba(255,255,255,0)); }
  .svc-scroll::after  { right: 0; background: linear-gradient(to left, #fff 12%, rgba(255,255,255,0)); }
  .svc-scroll.can-prev::before, .svc-scroll.can-next::after { opacity: 1; }
  .svc-scroll__btn {
    position: absolute; top: calc(50% - 31px); z-index: 4; width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--black); border: 1px solid rgba(26,26,26,.14); box-shadow: 0 6px 18px rgba(40,30,10,.16);
    cursor: pointer; transition: opacity .25s, background .2s, color .2s, transform .2s;
  }
  .svc-scroll__btn--prev { left: 6px; }
  .svc-scroll__btn--next { right: 6px; }
  .svc-scroll__btn:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
  .svc-scroll__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  .svc-scroll__btn:disabled { opacity: 0; pointer-events: none; }
  .svc-scroll:not(.can-prev):not(.can-next) .svc-scroll__btn { display: none; }
}

/* 5i. Grids — card/tile grids are auto-fit in the content, which leaves orphan holes (4+2, 5+1…).
       Balance them by child count using :has(); unsupported browsers fall back to the natural auto-fit. */
/* desktop ≥1100 */
@media (min-width: 1100px) {
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(3):last-child):not([style*="flex:1.6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(4):last-child):not([style*="flex:1.6"]):not(:has(> div > div[style*="background:url"])) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(6):last-child):not(:has(> div > div[style*="background:url"])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  /* 5 items: three on top, two wider underneath */
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> [style*="padding:24px"]),
  .svc-body div[style*="repeat(3,1fr)"]:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> [style*="padding:24px"]) > :nth-child(-n+3),
  .svc-body div[style*="repeat(3,1fr)"]:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> [style*="padding:24px"]) > :nth-child(n+4),
  .svc-body div[style*="repeat(3,1fr)"]:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  /* 5 plain icon items (cruise): one row */
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):not(:has(> [style*="padding:24px"])):not(:has(> div > div[style*="background:url"])) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  /* photo tiles: keep a compact single row */
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> div > div[style*="background:url"]) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(6):last-child):has(> div > div[style*="background:url"]) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  /* 7 photo cards (off-beat destinations): 3 + 4 */
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(7):last-child) > :nth-child(-n+3) { grid-column: span 4; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(7):last-child) > :nth-child(n+4) { grid-column: span 3; }
  /* forex services (cards next to a photo) */
  .svc-body div[style*="flex:1.6"]:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* tablets 561–1099 */
@media (min-width: 561px) and (max-width: 1099px) {
  .svc-body div[style*="repeat(auto-fit"], .svc-body div[style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"] > :last-child:nth-child(odd), .svc-body div[style*="repeat(3,1fr)"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* photo tiles read better in threes */
  .svc-body div[style*="repeat(auto-fit"]:has(> div > div[style*="background:url"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> div > div[style*="background:url"]) > :last-child:nth-child(odd) { grid-column: auto; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> div > div[style*="background:url"]) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> div > div[style*="background:url"]) > :nth-child(-n+3) { grid-column: span 2; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(5):last-child):has(> div > div[style*="background:url"]) > :nth-child(n+4) { grid-column: span 3; }
}
/* an odd last photo card (off-beat destinations: 7 cards) spans the full row on tablets — give its photo more height so a 5:1 sliver doesn't slice the subject */
@media (min-width: 561px) and (max-width: 1099px) {
  .svc-body div[style*="repeat(auto-fit"] > a:last-child:nth-child(odd) > div[style*="height:180px"] { height: 260px !important; background-position: center 14% !important; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(3):last-child),
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(3):last-child) > :last-child,
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(9):last-child) > :last-child { grid-column: auto; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(6):last-child):not(:has(> div > div[style*="background:url"])) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> :nth-child(6):last-child):not(:has(> div > div[style*="background:url"])) > :last-child { grid-column: auto; }
}
/* phones ≤560 */
@media (max-width: 560px) {
  .svc-body div[style*="repeat(auto-fit"], .svc-body div[style*="repeat(3,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  .svc-body div[style*="repeat(auto-fit"] > *, .svc-body div[style*="repeat(3,1fr)"] > * { grid-column: auto !important; }
  /* photo-tile galleries stay 2-up (small tiles), 5th tile spans */
  .svc-body div[style*="repeat(auto-fit"]:has(> div > div[style*="background:url"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .svc-body div[style*="repeat(auto-fit"]:has(> div > div[style*="background:url"]) > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}
/* 4-up stat grids (currency "success stories" box) collapse to 2×2 */
@media (max-width: 820px) {
  .svc-body div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 28px !important; }
}
.svc-body div[style*="repeat(4,1fr)"] > div[style*="text-align:center"] { padding-inline: 12px !important; }

/* 5j. Fixed-height photo blocks: shorter once stacked so a phone never shows a full-screen photo */
@media (max-width: 672px) {
  .svc-body div[style*="height:340px"], .svc-body div[style*="height:320px"],
  .svc-body div[style*="height:300px"], .svc-body div[style*="height:280px"] { height: clamp(210px, 62vw, 320px) !important; }
  .svc-body div[style*="gap:32px"], .svc-body div[style*="gap:40px"] { row-gap: 22px !important; gap: 22px !important; }
}

/* 5k. Tablet / phone type & spacing */
@media (max-width: 820px) {
  .svc-body h3[style*="font-size:16px"] { font-size: 17px !important; }
  /* carousel bleeds to the screen edge so the next card visibly peeks in */
  .svc-body div[style*="overflow-x:auto"] { margin-inline: calc(var(--gutter) * -1) !important; padding-inline: var(--gutter) !important; scroll-padding-inline: var(--gutter); }
}
@media (max-width: 560px) {
  /* icon-only feature lists (no card): chip on the left, text on the right — half the height of stacking */
  .svc-body div[style*="repeat(auto-fit"] > div:not([style]):has(> div[style*="width:52px"]) { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .svc-body div[style*="repeat(auto-fit"] > div:not([style]) > div[style*="width:52px"] { grid-row: 1 / span 2; margin-bottom: 0 !important; }
  .svc-body div[style*="repeat(auto-fit"] > div:not([style]):has(> div[style*="width:52px"]) > :is(h3, p) { grid-column: 2; }
  .svc-body div[style*="repeat(auto-fit"] > div:not([style]):has(> div[style*="width:52px"]) > h3 { margin-bottom: 4px !important; align-self: end; }
  .svc-body a.btn-primary, .svc-body a.btn-outline-dark { max-width: 100%; }
  .svc-body a[class*="btn-"] { padding-block: 15px; }
  .svc-body div[style*="display:flex;flex-wrap:wrap;gap:14px"] > div { flex: 1 1 100%; }   /* service pills: one per row */
  .svc-body div[style*="border-radius:40px;padding:12px 20px"] { padding: 12px 18px !important; min-height: 48px; }
}

/* 5l. FAQ + testimonial blocks (shared .dg-* components, tuned for these pages) */
.svc-body .dg-faq-item { padding: 2px clamp(16px, 2.4vw, 24px); }
.svc-body .dg-faq-q { min-height: 56px; font-size: clamp(15.5px, .4vw + 14.5px, 17px); line-height: 1.35; padding: 14px 0; }
.svc-body .dg-faq-toggle { width: 30px; height: 30px; }
.svc-body .dg-faq-a { font-size: 15px; line-height: 1.75; color: var(--svc-muted); }
.svc-body .dg-testi-text { font-size: 15px; }
.svc-body .dg-testi-name { font-size: 14px; }
.svc-body .dg-testi-trip { font-size: 12px; }

/* ───────────────────────── 6. CTA band ───────────────────────── */
.svc-cta { background: var(--dark-green); text-align: center; padding: clamp(56px, 6vw, 88px) var(--gutter); }
.svc-cta__inner { max-width: 720px; margin-inline: auto; }
.svc-cta__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.72); margin: 0 0 18px; }
.svc-cta__title { font-family: var(--f-display); font-weight: 900; color: #fff; font-size: clamp(30px, 3.4vw + 8px, 52px); line-height: 1.15; margin: 0 0 16px; }
/* the accent phrase on the green band: brand orange is only ~2.3:1 here, this lighter tint is ~3.7:1 (AA for large type) and keeps the italic-orange signature */
.svc-cta__title em { font-style: italic; color: #f2c28a; }
.svc-cta__text { font-size: clamp(15px, .3vw + 14px, 17px); line-height: 1.65; color: rgba(255,255,255,.84); max-width: 500px; margin: 0 auto 36px; }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.svc-cta__actions .btn-outline-light { background: rgba(0,0,0,.14); }
@media (max-width: 560px) {
  .svc-hero__actions .btn-primary, .svc-hero__actions .btn-outline-light,
  .svc-cta__actions .btn-primary, .svc-cta__actions .btn-outline-light { width: 100%; max-width: 360px; justify-content: center; }
  .svc-cta__actions { flex-direction: column; align-items: center; }
}
@media (max-width: 400px) {
  .svc-eyebrow { letter-spacing: 2px; padding: 7px 14px; }
}

/* ───────────────────────── 7. Form status toast ─────────────────────────
   .tr-notice is injected by inc/trip-requests.php (fixed, left:50% + translateX(-50%)), which makes the
   box shrink to half the viewport on phones and leaves it tappable after it fades. Harden it here. */
body .tr-notice#trNotice {
  width: max-content; max-width: min(580px, calc(100vw - 32px)); box-sizing: border-box;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  padding: 14px 20px; font-size: 15px; line-height: 1.45;
  animation: slideUp .5s ease, svcNoticeGone 0s linear 5.4s forwards;
}
@keyframes svcNoticeGone { to { visibility: hidden; pointer-events: none; } }