/* ==========================================================================
   swa-ds.css — Sea Wolf Adventures website design system (WordPress port)
   --------------------------------------------------------------------------
   Ported 1:1 from the Claude Design export `system/swa.css` (2026-09).
   EVERY rule is scoped under the `.swa` root class — including the token
   block, which the source declares on :root. `.swa` is the isolation
   boundary on the live Astra/Elementor site (the equivalent of the Matt
   Shannon page's #ms-workshop): nothing here can reach outside it, and no
   bare element selector exists outside it.

   Enqueued ONLY on page templates that opt in (see inc/gbw-tour.php). The
   Matt Shannon page keeps its own ms-workshop.css and is not affected.

   Rules of the road (unchanged from the design system):
   • Never hard-code a hex on a page — read a token.
   • Never re-derive a component on a page — compose a class here.
   • New component → add it here + a row in terms-of-reference.md.
   Component names match terms-of-reference.md exactly.
   ========================================================================== */

/* ============================================================
   1. TOKENS
   ============================================================ */
.swa {
  /* --- brand colour families --- */
  --green:            #5c8a38;   /* primary CTA / action green */
  --green-hover:      #4a7329;
  --green-deep:       #3f6126;   /* text on white-over-green */
  --green-soft:       #a9c98e;   /* inline-link underline */

  --gold:             #cf9b2a;   /* accent rules, numerals, markers */
  --gold-deep:        #b3851f;   /* eyebrow on light surfaces */
  --gold-light:       #f1c14e;   /* eyebrow / accent on dark surfaces */

  --amber:            #f9b81d;   /* site header utility bar */
  --nav-blue:         #15619e;   /* header nav links */
  --book-blue:        #1668c4;   /* "Book Now" pill */
  --book-blue-hover:  #1257a8;
  --wordmark-red:     #b21f2b;   /* SWA logo wordmark */

  /* --- surfaces --- */
  --paper:            #fcfaf6;   /* default page background (warm white) */
  --sand:             #f0eadd;   /* alternating section background */
  --card:            #ffffff;   /* card / panel surface */
  --ink-band:         #21302a;   /* dark spruce section band */
  --footer-ink:       #1a241e;

  /* --- ink (text) --- */
  --ink:              #21302a;   /* headings / primary text (deep spruce) */
  --ink-2:            #4d5751;   /* body text */
  --ink-soft:         #58635b;   /* softer body (card copy) */
  --ink-strong:       #39443d;   /* emphasised list text */
  --ink-3:            #7a847c;   /* muted / captions / provisional */

  /* on dark bands */
  --on-dark:          #ffffff;
  --on-dark-2:        rgba(255,255,255,.92);
  --on-dark-3:        rgba(255,255,255,.70);

  /* --- lines --- */
  --line:             rgba(33,48,42,.10);
  --line-2:           rgba(33,48,42,.20);
  --line-dark:        rgba(255,255,255,.13);

  /* --- excludes / neutral chip --- */
  --neutral-bg:       #d9cdb6;
  --neutral-ink:      #8a7a55;

  /* --- radius --- */
  --r-btn:   5px;
  --r-card:  8px;
  --r-lg:    10px;
  --r-sm:    6px;
  --r-pill:  999px;

  /* --- elevation --- */
  --shadow-card:  0 1px 2px rgba(33,48,42,.04);
  --shadow-lift:  0 18px 44px rgba(33,48,42,.22);
  --shadow-cta:   0 6px 20px rgba(0,0,0,.28);
  --shadow-plate: 0 4px 14px rgba(0,0,0,.14);

  /* --- type --- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-h1:    clamp(38px, 5.6vw, 68px);
  --fs-h2:    clamp(30px, 4vw, 46px);
  --fs-h2-sm: clamp(28px, 3.6vw, 42px);
  --fs-h2-xs: clamp(24px, 3vw, 32px);
  --fs-lead:  clamp(22px, 2.9vw, 30px);
  --fs-h3:    21px;
  --fs-body:  17px;

  --eyebrow-tracking: .3em;

  /* --- layout --- */
  --container:        1180px;
  --container-wide:   1240px;
  --container-narrow: 840px;
  --container-bio:    1100px;
  --gutter:           clamp(18px, 5vw, 48px);
  --section-y:        clamp(60px, 8vw, 104px);
  --section-y-sm:     clamp(48px, 6vw, 76px);
}

/* ============================================================
   2. BASE — element defaults for any page that opts into `.swa`
   (Next.js: apply these to <body>; keep .swa here so the library
   chrome, which has its own font, is never affected.)
   ============================================================ */
.swa {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.swa *, .swa *::before, .swa *::after { box-sizing: border-box; }
.swa img { display: block; max-width: 100%; }
.swa a { text-decoration: none; color: var(--green); }
.swa a:hover { color: var(--green-hover); }
.swa ::selection { background: #cde3b4; }
.swa h1, .swa h2, .swa h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }

/* ============================================================
   3. LAYOUT PRIMITIVES
   ============================================================ */
.swa .section { padding: var(--section-y) 0; }
.swa .section-sm { padding: var(--section-y-sm) 0; }
.swa .section-paper { background: var(--paper); }
.swa .section-sand { background: var(--sand); }
.swa .section-dark { background: var(--ink-band); color: var(--on-dark); }
.swa .section-green { background: var(--green); color: var(--on-dark); }

.swa .container { max-width: var(--container);        margin: 0 auto; padding: 0 var(--gutter); }
.swa .container-wide { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--gutter); }
.swa .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.swa .container-bio { max-width: var(--container-bio);    margin: 0 auto; padding: 0 var(--gutter); }

/* ============================================================
   4. ATOMS
   ============================================================ */

/* --- eyebrow / kicker --- */
.swa .eyebrow {
  font-size: 13px; font-weight: 800; letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--gold-deep);
}
.swa .eyebrow-light { color: var(--gold-light); }   /* on dark bands */

/* --- buttons (size to content; primary green is the default CTA) --- */
.swa .btn {
  display: inline-block; font-family: var(--font-body); font-weight: 800;
  font-size: 15px; letter-spacing: .03em; padding: 15px 30px; border-radius: var(--r-btn);
  border: 0; cursor: pointer; text-align: center; line-height: 1; transition: background .15s, color .15s, border-color .15s;
}
.swa .btn-primary { background: var(--green); color: #fff; box-shadow: var(--shadow-cta); }
.swa .btn-primary:hover { background: var(--green-hover); color: #fff; }
.swa .btn-outline { background: rgba(255,255,255,.10); border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.swa .btn-outline:hover { background: rgba(255,255,255,.20); color: #fff; }
.swa .btn-white { background: #fff; color: var(--green-deep); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.swa .btn-white:hover { background: var(--sand); color: var(--green-deep); }
.swa .btn-book { background: var(--book-blue); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: var(--r-pill); box-shadow: none; }
.swa .btn-book:hover { background: var(--book-blue-hover); color: #fff; }
.swa .btn-social { background: transparent; border: 1px solid var(--line-2); color: var(--ink-strong); font-weight: 700; font-size: 14px; padding: 9px 16px; box-shadow: none; }
.swa .btn-social:hover { border-color: var(--green); color: var(--green); }

/* --- chips / pills --- */
.swa .chip {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  padding: 8px 15px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink);
}
.swa .chip-glass {   /* over hero imagery */
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.30);
  backdrop-filter: blur(4px); color: #fff;
}

/* --- provisional / to-confirm value treatment (brief §1.7) --- */
.swa .provisional { border-bottom: 1.5px dashed var(--gold); }
.swa .tag-confirm {
  display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
  border: 1px solid var(--gold); border-radius: var(--r-sm); padding: 2px 7px; vertical-align: middle;
}

/* --- gold divider rule --- */
.swa .rule-gold { width: 54px; height: 3px; background: var(--gold); border: 0; margin: 0 auto; }

/* --- big serif numeral (highlights) --- */
.swa .num-lora { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--gold); line-height: 1; }

/* --- day label (itinerary) --- */
.swa .day-label { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--green); }

/* --- tick / cross bullets --- */
.swa .tick, .swa .cross {
  flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 2px;
}
.swa .tick { background: var(--green); color: #fff; }
.swa .cross { background: var(--neutral-bg); color: var(--neutral-ink); }

/* --- inline text link (green, soft underline) --- */
.swa .link-inline { color: var(--green); border-bottom: 1px solid var(--green-soft); font-weight: 600; }
.swa .link-inline:hover { color: var(--green-hover); }
.swa .link-policy { color: var(--book-blue); }
.swa .link-policy:hover { color: var(--book-blue-hover); }

/* --- image placeholder (drop-a-photo stand-in) --- */
.swa .ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--ink-3); font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(33,48,42,.05) 0 8px, transparent 8px 16px), var(--sand);
  border: 1px solid var(--line); border-radius: var(--r-card); min-height: 120px; padding: 12px;
}

/* ============================================================
   5. MOLECULES
   ============================================================ */

/* --- section heading block (eyebrow + h2 [+ sub]) --- */
.swa .section-head { text-align: center; margin-bottom: 54px; }
.swa .section-head .eyebrow { display: block; margin-bottom: 14px; }
.swa .section-head h2 { font-size: var(--fs-h2); letter-spacing: -.01em; text-wrap: balance; }
.swa .section-head .sub { margin: 14px 0 0; font-style: italic; color: var(--ink-3); font-size: 14.5px; }

/* --- highlight card (number + title + text) --- */
.swa .highlight-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 34px 30px; box-shadow: var(--shadow-card);
}
.swa .highlight-card .num-lora { margin-bottom: 14px; }
.swa .highlight-card h3 { font-size: var(--fs-h3); color: var(--ink); margin: 0 0 10px; }
.swa .highlight-card p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* --- itinerary card (green top border + day label + title) --- */
.swa .itin-card {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--green);
  border-radius: var(--r-sm); padding: 30px;
}
.swa .itin-card .day-label { display: block; margin-bottom: 10px; }
.swa .itin-card h3 { font-size: 22px; color: var(--ink); margin: 0; }

/* --- fact list (dt/dd) --- */
.swa .factlist { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; font-size: 15px; }
.swa .factlist dt { font-weight: 800; letter-spacing: .02em; color: var(--gold-light); }
.swa .factlist dd { margin: 0; color: var(--on-dark-2); }
.swa .factlist.on-light dt { color: var(--gold-deep); }
.swa .factlist.on-light dd { color: var(--ink-2); }

/* --- pricing card --- */
.swa .price-card { background: var(--card); border-radius: var(--r-lg); padding: 26px 24px; color: var(--ink); }
.swa .price-card .price-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.swa .price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 34px; color: var(--ink); line-height: 1.1; }
.swa .price-card .price-sub { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

/* --- include / exclude item --- */
.swa .list-check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; }
.swa .list-check li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; }
.swa .list-check.incl li { color: var(--ink-strong); }
.swa .list-check.excl li { color: var(--ink-3); }

/* --- amenity list (arrow bullets, 2-col) --- */
.swa .amenity-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.swa .amenity-list li { color: var(--ink-strong); font-size: 15px; font-weight: 600; padding-left: 20px; position: relative; }
.swa .amenity-list li::before { content: "\203A"; position: absolute; left: 0; color: var(--green); font-weight: 800; }

/* --- portrait with name plate --- */
.swa .portrait { position: relative; }
.swa .portrait img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); }
.swa .portrait .name-plate {
  position: absolute; left: 18px; bottom: 18px; background: rgba(252,250,246,.95);
  padding: 9px 16px; border-radius: var(--r-sm); font-family: var(--font-display);
  font-weight: 600; color: var(--ink); font-size: 15px; box-shadow: var(--shadow-plate);
}

/* --- nav link (header) --- */
.swa .nav-link { display: inline-flex; align-items: center; gap: 5px; color: var(--nav-blue); font-weight: 700; font-size: 15px; }
.swa .nav-link .caret { width: 11px; height: 11px; }

/* --- pull quote (over image) --- */
.swa .pullquote { margin: 0; max-width: 540px; }
.swa .pullquote p {
  font-family: var(--font-display); font-style: italic; font-weight: 500; color: #fff;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.4; margin: 0; text-wrap: balance;
}

/* --- checkfront booking-widget placeholder (fixed embed slot) --- */
.swa .checkfront-ph {
  background: #16181a; border: 2px dashed #41474a; border-radius: var(--r-card);
  min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 30px 22px;
}
.swa .checkfront-ph .cf-icon { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--green); display: flex; align-items: center; justify-content: center; color: #7fb24f; font-size: 20px; margin-bottom: 18px; }
.swa .checkfront-ph .cf-title { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .04em; margin-bottom: 8px; }
.swa .checkfront-ph .cf-note { color: #9aa0a2; font-size: 13px; line-height: 1.5; max-width: 240px; }

/* --- tour card (anticipated: tour listings) --- */
.swa .tour-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.swa .tour-card .tour-media { aspect-ratio: 16/10; }
.swa .tour-card .tour-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.swa .tour-card h3 { font-size: 22px; color: var(--ink); }
.swa .tour-card .tour-meta { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.swa .tour-card p { color: var(--ink-soft); font-size: 15px; margin: 0; }
.swa .tour-card .tour-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.swa .tour-card .tour-price { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--ink); }

/* --- testimonial (anticipated) --- */
.swa .testimonial { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 30px 32px; box-shadow: var(--shadow-card); }
.swa .testimonial .stars { color: var(--gold); font-size: 15px; letter-spacing: 3px; margin-bottom: 14px; }
.swa .testimonial blockquote { margin: 0 0 16px; font-family: var(--font-display); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink); }
.swa .testimonial .cite { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }

/* ============================================================
   6. ORGANISMS
   ============================================================ */

/* --- site header (amber bar + nav + social + book now) --- */
.swa .site-header { background: var(--amber); position: relative; z-index: 5; }
.swa .site-header .header-inner { max-width: var(--container-wide); margin: 0 auto; padding: 14px var(--gutter); display: flex; align-items: center; justify-content: center; gap: 16px 28px; flex-wrap: wrap; }
.swa .site-header nav { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.swa .site-header .social-row { display: flex; align-items: center; gap: 13px; color: #111; }

/* --- hero --- */
.swa .hero { position: relative; background-size: cover; background-position: center 38%; min-height: 90vh; display: flex; align-items: flex-end; }
.swa .hero .hero-inner { max-width: var(--container-wide); margin: 0 auto; width: 100%; padding: 0 var(--gutter) clamp(48px,7vw,88px); }
.swa .hero .hero-content { max-width: 760px; }
.swa .hero .eyebrow { display: block; color: var(--gold-light); margin-bottom: 22px; }
.swa .hero h1 { color: #fff; font-size: var(--fs-h1); line-height: 1.04; margin: 0 0 22px; letter-spacing: -.01em; text-wrap: balance; }
.swa .hero h1 .accent { color: var(--gold-light); font-style: italic; font-weight: 500; }
.swa .hero .lead { color: var(--on-dark-2); font-size: clamp(17px,2vw,21px); font-weight: 400; margin: 0 0 30px; max-width: 600px; }
.swa .hero .chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.swa .hero .btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
/* standard gradient scrim for legible text over a hero photo */
.swa .hero-scrim { background-image: linear-gradient(180deg, rgba(15,22,16,.20) 0%, rgba(15,22,16,.30) 45%, rgba(13,20,14,.86) 100%); }

/* --- highlights grid --- */
.swa .highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }

/* --- itinerary grid --- */
.swa .itinerary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }

/* --- interstitial quote band (full-bleed image + pull quote) --- */
.swa .quote-band { position: relative; background-size: cover; background-position: center 60%; min-height: clamp(360px,52vh,560px); display: flex; align-items: center; }
.swa .quote-band .quote-band-inner { max-width: var(--container); margin: 0 auto; width: 100%; padding: 0 var(--gutter); }
.swa .quote-band-scrim { background-image: linear-gradient(90deg, rgba(13,20,14,.74) 0%, rgba(13,20,14,.30) 60%, rgba(13,20,14,.10) 100%); }

/* --- feature split (image + text two-column; alternate with .reverse) --- */
.swa .feature-split { display: flex; flex-wrap: wrap; gap: clamp(36px,5vw,64px); align-items: center; }
.swa .feature-split.reverse { flex-wrap: wrap-reverse; }
.swa .feature-split .fs-text { flex: 1 1 320px; }
.swa .feature-split .fs-text h2 { font-size: var(--fs-h2-sm); letter-spacing: -.01em; margin: 0 0 22px; }
.swa .feature-split .fs-text .eyebrow { display: block; margin-bottom: 14px; }
.swa .feature-split .fs-text p { color: var(--ink-2); font-size: 16.5px; margin: 0 0 18px; }
.swa .feature-split .fs-media { flex: 1 1 360px; max-width: 420px; }
.swa .feature-split .fs-gallery { flex: 1 1 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.swa .feature-split .fs-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.swa .feature-split .fs-gallery .span-2 { grid-column: 1 / span 2; }
.swa .social-label { font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 8px 0 12px; }
.swa .social-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* --- reserve band (dark: quick facts + pricing + booking) --- */
.swa .reserve-panel { background: rgba(255,255,255,.05); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(26px,3vw,38px); }
.swa .reserve-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 22px; }
.swa .reserve .booking-card { background: #fff; border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-cta); }
.swa .reserve .booking-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin: 0 0 6px; }
.swa .reserve .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }

/* --- final CTA band (green) --- */
.swa .cta-band { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.swa .cta-band h2 { color: #fff; font-size: clamp(24px,3vw,34px); margin: 0 0 6px; }
.swa .cta-band p { color: var(--on-dark-2); font-size: 16px; margin: 0; }

/* --- site footer (partner badges + copyright links) --- */
.swa .site-footer { background: #fff; }
.swa .site-footer .partner-row { display: flex; flex-wrap: wrap; gap: 32px 54px; align-items: center; justify-content: center; padding: var(--section-y-sm) var(--gutter); }
.swa .site-footer .partner { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.swa .site-footer .partner .partner-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; line-height: 1.15; }
.swa .site-footer .footer-legal { border-top: 1px solid #e4e4e4; }
.swa .site-footer .footer-legal-inner { max-width: 1200px; margin: 0 auto; padding: 22px var(--gutter); text-align: center; font-size: 15px; color: #3a3a3a; }

/* ============================================================
   7. RESPONSIVE — the site stacks columns below ~820px
   ============================================================ */
@media (max-width: 820px) {
  .swa .amenity-list { grid-template-columns: 1fr; }
}

/* ============================================================
   8. WORDPRESS PORT ADDITIONS (2026-09, Grizzly day tour build)
   Reusable components that the design export did not yet carry.
   Each has a row in terms-of-reference.md (app-folder copy).
   ============================================================ */

/* --- host reset: neutralise Astra element styles that would show
       through where a component does not set the property itself --- */
.swa p { margin: 0 0 1em; }
.swa p:last-child { margin-bottom: 0; }
.swa ul, .swa ol, .swa dl { margin: 0; padding: 0; }
.swa blockquote { padding: 0; border: 0; background: none; color: inherit; quotes: none; margin: 0; }
.swa blockquote::before, .swa blockquote::after { content: none; }
.swa h1, .swa h2, .swa h3 { line-height: 1.2; }
.swa button.btn { -webkit-appearance: none; appearance: none; }
.swa .section-dark .section-head h2 { color: var(--on-dark); }
.swa .section-dark .section-head .sub { color: var(--on-dark-3); }

/* --- full-bleed band image hook: set `--band-image: url(...)` inline on a
       .hero-scrim / .quote-band-scrim element; the scrim gradient stays in
       CSS and the photo is never hard-coded into the stylesheet --- */
.swa .hero-scrim {
  background-image: linear-gradient(180deg, rgba(15,22,16,.20) 0%, rgba(15,22,16,.30) 45%, rgba(13,20,14,.86) 100%), var(--band-image, none);
}
.swa .quote-band-scrim {
  background-image: linear-gradient(90deg, rgba(13,20,14,.74) 0%, rgba(13,20,14,.30) 60%, rgba(13,20,14,.10) 100%), var(--band-image, none);
}

/* --- pull quote attribution --- */
.swa .pullquote cite {
  display: block; margin-top: 16px; font-style: normal; font-family: var(--font-body);
  font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3);
}

/* --- itinerary card body copy (variant: card with a short description) --- */
.swa .itin-card p { color: var(--ink-soft); font-size: 15px; margin: 10px 0 0; }

/* --- waitlist prompt (sits above the booking widget) --- */
.swa .waitlist-prompt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 18px; margin: 0 0 18px;
}
.swa .waitlist-prompt p { flex: 1 1 180px; max-width: 230px; margin: 0; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.swa .waitlist-prompt .btn { padding: 11px 18px; font-size: 14px; }

/* --- checkfront embed: frame for the REAL widget (.checkfront-ph is the
       mockup stand-in). Black box — never restyle the widget's internals --- */
.swa .checkfront-embed { position: relative; min-height: 120px; }
.swa .checkfront-embed > * { max-width: 100%; }

/* --- video embed (16:9 responsive iframe frame) --- */
.swa .video-embed {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-card); background: var(--ink-band); box-shadow: var(--shadow-card);
}
.swa .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- modal (overlay + card + close). Hidden via the `hidden` attribute;
       becomes a full-screen sheet below 720px --- */
.swa .modal {
  position: fixed; inset: 0; z-index: 100000; background: rgba(13,20,14,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vw, 40px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.swa .modal[hidden] { display: none; }
.swa .modal-card {
  position: relative; width: 100%; max-width: 640px; margin: auto;
  background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-lift);
  padding: clamp(22px, 3vw, 32px) clamp(16px, 2.5vw, 28px);
}
.swa .modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--card);
  color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: none;
}
.swa .modal-close:hover, .swa .modal-close:focus-visible { border-color: var(--green); color: var(--green); background: var(--card); }
.swa .modal-head { padding-right: 44px; margin-bottom: 18px; }
.swa .modal-head .eyebrow { display: block; margin-bottom: 12px; }
.swa .modal-head h2 { font-size: var(--fs-h2-xs); margin: 0 0 10px; }
.swa .modal-head p { color: var(--ink-2); font-size: 15.5px; margin: 0; }
.swa .modal-embed { width: 100%; min-height: 320px; }
.swa .modal-embed iframe { display: block; width: 100%; max-width: 100%; }

/* The .swa wrapper that holds the modal is empty apart from the fixed
   overlay, so it must not paint the design-system paper background. */
.swa.swa-modal-root { background: transparent; }
/* The ONE body-level rule in this file: scroll lock while the modal is open.
   Toggled only by swa-waitlist.js, only on opted-in templates. */
body.swa-modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .swa .modal { padding: 0; }
  .swa .modal-card {
    max-width: none; min-height: 100%; margin: 0; border-radius: 0; box-shadow: none;
    padding: 64px 16px 28px;
  }
  .swa .modal-close { position: fixed; top: 12px; right: 12px; z-index: 1; box-shadow: var(--shadow-plate); }
}