/* =========================================================
   Please Go Away Travel — Component Stylesheet
   Ported from prototype. Tokens are sourced from theme.json;
   the :root block below aliases prototype custom-property names
   to WP preset variables so the body of this stylesheet works
   without per-rule rewrites.
   ========================================================= */

:root {
  /* Color aliases → WP preset palette (see theme.json) */
  --navy-900: var(--wp--preset--color--navy-900);
  --navy-700: var(--wp--preset--color--navy-700);
  --navy-500: var(--wp--preset--color--navy-500);
  --navy-200: var(--wp--preset--color--navy-200);
  --sand-300: var(--wp--preset--color--sand-300);
  --sand-500: var(--wp--preset--color--sand-500);
  --sand-700: var(--wp--preset--color--sand-700);
  --cream-50: var(--wp--preset--color--cream-50);
  --ink-900:  var(--wp--preset--color--ink-900);
  --ink-700:  var(--wp--preset--color--ink-700);
  --ink-500:  var(--wp--preset--color--ink-500);
  --ink-300:  var(--wp--preset--color--ink-300);
  --line:     var(--wp--preset--color--line);
  --white:    var(--wp--preset--color--base);

  /* Font aliases → WP preset families */
  --font-serif: var(--wp--preset--font-family--serif);
  --font-sans:  var(--wp--preset--font-family--sans);

  /* Spacing aliases → WP preset spacing scale */
  --space-1: var(--wp--preset--spacing--20);   /* 0.5rem  / 8px  */
  --space-2: var(--wp--preset--spacing--40);   /* 1rem    / 16px */
  --space-3: var(--wp--preset--spacing--50);   /* 1.5rem  / 24px */
  --space-4: var(--wp--preset--spacing--60);   /* 2rem    / 32px */
  --space-5: var(--wp--preset--spacing--70);   /* 3rem    / 48px */
  --space-6: var(--wp--preset--spacing--80);   /* 4.5rem  / 72px */
  --space-7: var(--wp--preset--spacing--90);   /* 6rem    / 96px */

  /* Local utility tokens not carried by theme.json */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --container: 1200px;
  --container-narrow: 880px;

  --shadow-sm: 0 1px 3px rgba(15, 42, 74, 0.08), 0 1px 2px rgba(15, 42, 74, 0.04);
  --shadow-md: 0 6px 18px rgba(15, 42, 74, 0.10), 0 2px 6px rgba(15, 42, 74, 0.06);
  --shadow-lg: 0 18px 40px rgba(15, 42, 74, 0.14);

  --transition: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset / Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--cream-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--navy-700);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--sand-700); }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--navy-900);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  line-height: 1.15;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--font-sans); font-weight: 600; color: var(--navy-700); }

p { margin: 0 0 var(--space-2); color: var(--ink-700); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--sand-700);
  font-weight: 600;
  margin-bottom: var(--space-2);
  display: inline-block;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-6);
}
.section--tight { padding-block: var(--space-5); }
.section--navy {
  background: var(--navy-900);
  color: var(--cream-50);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--cream-50); }
.section--navy p { color: rgba(251, 247, 241, 0.85); }
.section--navy .eyebrow { color: var(--sand-500); }

.section--cream { background: var(--cream-50); }
.section--paper { background: var(--white); }
.section--tint  { background: var(--navy-200); }

.section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--sand-300);
  color: var(--navy-900);
}
.btn--primary:hover {
  background: var(--sand-500);
  color: var(--navy-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--ghost {
  background: transparent;
  color: var(--cream-50);
  border-color: rgba(251, 247, 241, 0.5);
}
.btn--ghost:hover {
  background: var(--cream-50);
  color: var(--navy-900);
}
.btn--outline {
  background: transparent;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.btn--outline:hover {
  background: var(--navy-700);
  color: var(--cream-50);
}

/* ---------- WP block-style mapping for core/button ----------
   So patterns built from native wp:button blocks render with the prototype's
   button treatment. Admin picks the variant from the block's Styles panel. */
.wp-block-button.is-style-pga-primary .wp-block-button__link,
.wp-block-button.is-style-pga-ghost   .wp-block-button__link,
.wp-block-button.is-style-pga-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background-image: none;
}
.wp-block-button.is-style-pga-primary .wp-block-button__link {
  background-color: var(--sand-300);
  color: var(--navy-900);
}
.wp-block-button.is-style-pga-primary .wp-block-button__link:hover,
.wp-block-button.is-style-pga-primary .wp-block-button__link:focus {
  background-color: var(--sand-500);
  color: var(--navy-900);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.wp-block-button.is-style-pga-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--cream-50);
  border-color: rgba(251, 247, 241, 0.5);
}
.wp-block-button.is-style-pga-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-pga-ghost .wp-block-button__link:focus {
  background-color: var(--cream-50);
  color: var(--navy-900);
}
.wp-block-button.is-style-pga-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--navy-700);
  border-color: var(--navy-700);
}
.wp-block-button.is-style-pga-outline .wp-block-button__link:hover,
.wp-block-button.is-style-pga-outline .wp-block-button__link:focus {
  background-color: var(--navy-700);
  color: var(--cream-50);
}

/* ---------- Utility bar ---------- */
.utility {
  background: var(--navy-900);
  color: var(--cream-50);
  font-size: 0.82rem;
  padding-block: 0.4rem;
}
.utility .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.utility a { color: var(--cream-50); }
.utility a:hover { color: var(--sand-500); }
.utility__left, .utility__right {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}
.utility__tag {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--sand-500);
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--cream-50);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-block: var(--space-2);
  gap: var(--space-2);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.brand__mark {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  object-fit: contain;
  background: var(--cream-50);
  padding: 4px;
}
@media (min-width: 900px) {
  .brand__mark { width: 84px; height: 84px; }
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--navy-900);
  font-weight: 500;
}
@media (min-width: 900px) {
  .brand__name { font-size: 1.55rem; }
}
.brand__tag {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}

.nav {
  display: none;
}
.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}
.nav__link {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-900);
  position: relative;
  padding: 0.25rem 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--sand-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--navy-900);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { display: none; }

.nav-toggle {
  background: none;
  border: 1.5px solid var(--navy-700);
  border-radius: var(--radius-sm);
  height: 44px;
  padding: 0 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  color: var(--navy-700);
  font-family: var(--font-sans);
  margin-left: auto;
}
.nav-toggle__label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

/* Drawer backdrop — z-index sits BELOW the sticky header (z:50) so the drawer
   panel (rendered inside the header's stacking context) paints above it. */
body.nav-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 42, 74, 0.55);
  z-index: 49;
  animation: drawer-fade 200ms ease;
}
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Drawer panel (right-side slide-out) */
body.nav-open .nav {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 50%;
  min-width: 320px;
  max-width: 500px;
  background: var(--cream-50);
  z-index: 100;
  padding: var(--space-4);
  overflow-y: auto;
  box-shadow: -16px 0 40px rgba(15, 42, 74, 0.25);
  animation: drawer-slide 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (max-width: 599px) {
  body.nav-open .nav { width: 100%; max-width: none; min-width: 0; }
}

.nav__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.nav__promise {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--navy-700);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.nav__promise::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--sand-500);
  margin-bottom: var(--space-2);
}
.nav__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.nav__brand-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--navy-900);
  font-weight: 500;
}
.nav__brand-tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 0.3rem;
}

body.nav-open .nav__list {
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}
body.nav-open .nav__link {
  font-size: 1.25rem;
  font-family: var(--font-serif);
  color: var(--navy-900);
  padding: 0.4rem 0;
  width: 100%;
}

.nav-close {
  position: static;
  background: none;
  border: 1.5px solid var(--navy-700);
  border-radius: var(--radius-sm);
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--navy-700);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
body.nav-open .nav-close { display: inline-flex; }

.nav__contact {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-700);
}
.nav__contact p { margin: 0 0 var(--space-2); }
.nav__contact p:last-child { margin-bottom: 0; }
.nav__contact a { color: var(--navy-700); }
.nav__contact strong { color: var(--navy-900); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--cream-50);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,42,74,0.45) 0%, rgba(15,42,74,0.25) 45%, rgba(15,42,74,0.80) 100%),
    linear-gradient(90deg, rgba(15,42,74,0.50) 0%, rgba(15,42,74,0.0) 55%);
  z-index: -1;
}
.hero__inner {
  padding-block: var(--space-7) var(--space-6);
  max-width: 720px;
}
.hero__eyebrow {
  color: var(--sand-500);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--cream-50);
  line-height: 1.05;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 28px rgba(15, 42, 74, 0.75), 0 1px 2px rgba(15, 42, 74, 0.6);
}
.hero__sub {
  text-shadow: 0 1px 12px rgba(15, 42, 74, 0.55);
}
.hero__title em {
  font-style: italic;
  color: var(--sand-300);
}
.hero__sub {
  font-size: 1.1rem;
  color: rgba(251, 247, 241, 0.92);
  margin-bottom: var(--space-4);
  max-width: 540px;
}
.hero__cta-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Smaller hero on internal pages */
.hero--internal {
  min-height: 48vh;
}
.hero--internal .hero__inner {
  padding-block: var(--space-6) var(--space-5);
}

/* ---------- Intro band + Trust strip ---------- */
.intro-band {
  text-align: center;
  padding-block: var(--space-5);
}
.intro-band p {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--ink-900);
  max-width: 760px;
  margin-inline: auto;
}

.trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  text-align: center;
  margin-top: var(--space-5);
  padding-block: var(--space-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.trust-strip__item .num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--navy-700);
  line-height: 1;
}
.trust-strip__item .label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-500);
  margin-top: 0.4rem;
}

/* ---------- Three Pillars ---------- */
.pillars {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.pillar {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.pillar__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.pillar__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}
.pillar:hover .pillar__media img { transform: scale(1.04); }
.pillar__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.pillar__num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sand-500);
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.pillar__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--navy-900);
  margin-bottom: var(--space-1);
}
.pillar__tag {
  font-size: 0.95rem;
  color: var(--ink-500);
  font-style: italic;
  margin-bottom: var(--space-2);
}
.pillar__desc {
  font-size: 0.95rem;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
  flex: 1;
}
.pillar__link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy-700);
  letter-spacing: 0.02em;
}
.pillar__link::after {
  content: " →";
  transition: margin-left var(--transition);
  display: inline-block;
}
.pillar__link:hover::after { margin-left: 4px; }
.pillar__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-700);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}
.pillar__pdf:hover { color: var(--navy-700); }

/* ---------- Featured destinations CTA ---------- */
.featured__cta {
  margin-top: var(--space-5);
  text-align: center;
}

/* ---------- Stay In Touch panel (3-up subscription cards) ---------- */
.staytouch-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .staytouch-grid { grid-template-columns: repeat(3, 1fr); } }

.staytouch {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.staytouch:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-500);
}
.staytouch__cadence {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin: 0;
}
.staytouch h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--navy-900);
  margin: 0;
}
.staytouch__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy-700);
  margin: 0;
  line-height: 1.4;
}
.staytouch p { color: var(--ink-700); margin: 0; font-size: 0.95rem; }
.staytouch .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Tour cards (landscape, brochure-driven) ---------- */
.tours-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.tour-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tour-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-500);
}
.tour-card__media {
  background: var(--cream-50);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tour-card--masthead .tour-card__media { aspect-ratio: 222 / 94; }
.tour-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tour-card--pyip .tour-card__media { background: var(--navy-200); }
.tour-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}
.tour-card__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy-900);
  margin: 0;
  line-height: 1.25;
}
.tour-card__date {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-700);
  font-weight: 600;
}
.tour-card__meta {
  font-size: 0.9rem;
  color: var(--ink-500);
  margin: var(--space-1) 0 var(--space-2);
  flex: 1;
}
.tour-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-700);
  padding: 0.45rem 0.85rem;
  background: var(--navy-200);
  border-radius: 999px;
  transition: all var(--transition);
}
.tour-card__cta:hover {
  background: var(--navy-700);
  color: var(--cream-50);
}
.tour-card--pyip .tour-card__cta {
  background: rgba(200, 149, 109, 0.18);
  color: var(--sand-700);
  pointer-events: none;
}

@media (min-width: 700px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .tours-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Notice strip at top of tours page */
.tours-notice {
  background: var(--navy-200);
  border-left: 4px solid var(--navy-700);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--navy-900);
}
.tours-notice strong { color: var(--navy-900); }

/* ---------- Partner / Club pages ---------- */
.partner-hero {
  background: var(--navy-900);
  color: var(--cream-50);
  padding-block: var(--space-6) var(--space-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.partner-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(242, 200, 150, 0.16), transparent 50%),
    radial-gradient(circle at bottom left, rgba(27, 79, 138, 0.35), transparent 50%);
  pointer-events: none;
}
.partner-hero > * { position: relative; }
.partner-hero__logo {
  background: var(--cream-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-md);
}
.partner-hero__logo img {
  max-height: 110px;
  width: auto;
}
.partner-hero h1 {
  color: var(--cream-50);
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--space-2);
}
.partner-hero p {
  color: rgba(251, 247, 241, 0.9);
  max-width: 720px;
  margin-inline: auto;
  font-size: 1.05rem;
}
.partner-hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--sand-300);
  font-size: 1.5rem;
  margin-top: var(--space-3);
}

.benefit-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.benefit-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin-bottom: var(--space-1);
}
.benefit-card__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--navy-900);
  margin-bottom: var(--space-2);
}
.benefit-card p { color: var(--ink-700); }
.benefit-card ul {
  margin: var(--space-2) 0 var(--space-2);
  padding-left: 1.25rem;
  color: var(--ink-700);
}
.benefit-card ul li { margin-bottom: 0.4rem; }
@media (min-width: 800px) {
  .benefit-card { grid-template-columns: 180px 1fr; gap: var(--space-4); align-items: start; }
  .benefit-card__num { font-size: 1.05rem; text-align: right; padding-top: 0.4rem; }
}

.coordinator-card {
  background: var(--navy-200);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border-left: 4px solid var(--navy-700);
}
.coordinator-card h2 {
  margin-bottom: var(--space-2);
  color: var(--navy-900);
}

.members-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 1.5rem;
  column-rule: 1px solid var(--line);
}
.members-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  color: var(--ink-700);
}
.members-list li:last-child { border-bottom: 0; }
@media (min-width: 600px) {
  .members-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .members-list { grid-template-columns: repeat(3, 1fr); }
}

.member-count {
  text-align: center;
  margin-bottom: var(--space-4);
}
.member-count .num {
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  color: var(--navy-700);
  line-height: 1;
}
.member-count .label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 0.5rem;
}

.coordinator-portrait {
  text-align: center;
  margin-top: var(--space-4);
}
.coordinator-portrait img {
  width: 175px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-inline: auto;
}
.coordinator-portrait p {
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--navy-900);
}
.coordinator-portrait small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin-top: 0.25rem;
}

/* ---------- Testimonials wall ---------- */
.testimonials {
  column-count: 1;
  column-gap: var(--space-3);
}
@media (min-width: 700px) {
  .testimonials { column-count: 2; }
}
@media (min-width: 1100px) {
  .testimonials { column-count: 3; }
}
.testimonial-card {
  break-inside: avoid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  position: relative;
  display: inline-block;
  width: 100%;
}
.testimonial-card::before {
  content: "\201C";
  font-family: var(--font-serif);
  font-size: 3rem;
  line-height: 0.5;
  color: var(--sand-500);
  display: block;
  margin-bottom: 0.4rem;
}
.testimonial-card__quote {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
  font-weight: 400;
}
.testimonial-card__byline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.testimonial-card__name {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
}
.testimonial-card__date {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--ink-500);
}
.testimonial-card__location {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--sand-700);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-top: 0.15rem;
}

/* "Read more" link under the homepage testimonial block */
.testimonial__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand-300);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: all var(--transition);
}
.testimonial__more:hover {
  color: var(--sand-500);
  border-bottom-color: var(--sand-500);
}

/* ---------- Featured destinations ---------- */
.destinations {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1fr;
}
.destination {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--cream-50);
  isolation: isolate;
}
.destination img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.destination::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,42,74,0) 30%, rgba(15,42,74,0.55) 55%, rgba(15,42,74,0.92) 100%);
}
.destination__label {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  text-shadow: 0 2px 18px rgba(15, 42, 74, 0.65);
}
.destination__label small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-300);
  margin-bottom: 0.25rem;
  font-weight: 600;
}
.destination:hover img { transform: scale(1.06); }

/* ---------- Why PGA ---------- */
.split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: center;
}
.split__media img {
  border-radius: var(--radius-md);
  width: 100%;
  height: auto;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}
.feature-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-700);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0.85rem;
  color: var(--sand-500);
  font-size: 0.9rem;
}
.feature-list strong { color: var(--navy-900); display: block; font-weight: 600; }

/* ---------- Resources & Preferred Partners ---------- */
.resources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.resource a {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}
.resource a:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-500);
}
.resource__media {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  padding: 8px;
  overflow: hidden;
}
.resource__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.resource__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.resource__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--navy-900);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.resource__sub {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink-500);
  line-height: 1.5;
  margin-bottom: 0.75rem;
  flex: 1;
}
.resource__type {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.resource__type--pdf {
  background: var(--navy-200);
  color: var(--navy-700);
}
.resource__type--link {
  background: rgba(200, 149, 109, 0.15);
  color: var(--sand-700);
}
.resources__note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-500);
  font-style: italic;
}

@media (min-width: 700px) {
  .resources { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .resources { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
  .resource a { flex-direction: column; gap: var(--space-2); }
  .resource__media {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    align-self: center;
  }
  .resource__body { text-align: center; align-items: center; }
  .resource__title { text-align: center; }
  .resource__sub { text-align: center; }
}

/* ---------- Brochure Rack callout ---------- */
.brochure-rack {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.brochure-rack::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(200, 149, 109, 0.10), transparent 50%),
    radial-gradient(circle at bottom left, rgba(27, 79, 138, 0.06), transparent 45%);
  pointer-events: none;
}
.brochure-rack > * { position: relative; z-index: 1; }

.brochure-rack__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  border: 1px solid var(--line);
}
.brochure-rack__media img {
  max-width: 180px;
  width: 100%;
  height: auto;
}
.brochure-rack__body h2 {
  margin-bottom: var(--space-2);
}
.brochure-rack__body p {
  font-size: 1rem;
  color: var(--ink-700);
  margin-bottom: var(--space-3);
  max-width: 60ch;
}
.brochure-rack__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.brochure-rack__note {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin: 0;
}

@media (min-width: 800px) {
  .brochure-rack {
    grid-template-columns: 280px 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
  }
  .brochure-rack__media { padding: var(--space-5); }
}

/* ---------- Tagline band ---------- */
.tagline-band {
  background: var(--cream-50);
  padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.tagline-band__inner {
  max-width: 820px;
  margin-inline: auto;
  position: relative;
  padding-inline: var(--space-4);
}
.tagline-band__inner::before,
.tagline-band__inner::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--sand-500);
  margin: 0 auto var(--space-3);
}
.tagline-band__inner::after {
  margin: var(--space-3) auto 0;
}
.tagline-band p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--navy-700);
  font-weight: 300;
  margin: 0;
}

/* ---------- Testimonial ---------- */
.testimonial {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.testimonial blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: italic;
  color: var(--cream-50);
  margin: 0 0 var(--space-3);
  line-height: 1.4;
  font-weight: 300;
}
.testimonial blockquote::before {
  content: "“";
  display: block;
  font-size: 4rem;
  color: var(--sand-500);
  line-height: 0.5;
  margin-bottom: 1rem;
  font-family: var(--font-serif);
}
.testimonial cite {
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-500);
}

/* ---------- Newsletter ---------- */
.newsletter {
  text-align: center;
  max-width: 540px;
  margin-inline: auto;
}
.newsletter h2 { color: var(--navy-900); }
.newsletter p { color: var(--ink-500); }
.newsletter form {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.newsletter input[type="email"] {
  flex: 1 1 200px;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--white);
  color: var(--ink-900);
}
.newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--navy-700);
}

/* Override the .secure-form grid for the inline newsletter signup */
.newsletter .secure-form.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-3);
  align-items: center;
}
.newsletter .secure-form .form-group {
  margin: 0;
  flex-direction: row; /* override the default column form-group so internal flex props don't become heights */
}
.newsletter .newsletter__email {
  flex: 1 1 220px;
  min-width: 0;
}
.newsletter .newsletter__email .form-control {
  flex: 1 1 auto;            /* defeat the legacy `.newsletter input[type=email] { flex: 1 1 200px }` height bug */
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 1rem;
  background: var(--white);
  color: var(--ink-900);
  height: auto;
}
.newsletter .newsletter__email .form-control:focus {
  outline: none;
  border-color: var(--navy-700);
}
.newsletter .newsletter__submit { flex: 0 0 auto; }
.newsletter .newsletter__turnstile {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: rgba(251, 247, 241, 0.85);
  padding-block: var(--space-5) var(--space-3);
  font-size: 0.9rem;
}
.site-footer p { color: rgba(251, 247, 241, 0.85); }
.footer-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-4);
}
.site-footer h4 {
  color: var(--sand-500);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  margin-bottom: var(--space-2);
}
.site-footer a { color: rgba(251, 247, 241, 0.8); }
.site-footer a:hover { color: var(--sand-500); }
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { padding: 0.25rem 0; }
.footer__legal {
  border-top: 1px solid rgba(251, 247, 241, 0.15);
  padding-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.82rem;
  color: rgba(251, 247, 241, 0.6);
}
.footer__brand {
  font-family: var(--font-serif);
  color: var(--cream-50);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

/* ---------- About page bits ---------- */
.story-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.story-grid > div > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.5rem;
  float: left;
  line-height: 0.9;
  padding-right: 0.5rem;
  padding-top: 0.25rem;
  color: var(--sand-500);
  font-weight: 400;
}

.team {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.team__card {
  text-align: center;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.team__photo {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-2);
  border-radius: 50%;
  background: var(--navy-200);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-700);
  font-family: var(--font-serif);
  font-size: 2.5rem;
}
.team__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--navy-900);
  margin-bottom: 0.25rem;
}
.team__role {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin-bottom: var(--space-2);
}
.team__photo--img { background: var(--white); padding: 0; overflow: hidden; }
.team__photo--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team__card--featured {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--cream-50);
  position: relative;
  overflow: hidden;
  grid-column: 1 / -1;
}
@media (min-width: 700px) {
  .team__card--featured {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    align-items: center;
    text-align: left;
    padding: var(--space-4);
  }
  .team__card--featured .team__photo { margin: 0; }
}
.team__card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(242, 200, 150, 0.18), transparent 55%),
    radial-gradient(circle at bottom left, rgba(27, 79, 138, 0.35), transparent 50%);
  pointer-events: none;
}
.team__card--featured > * { position: relative; }
.team__card--featured .team__name { color: var(--cream-50); }
.team__card--featured .team__role { color: var(--sand-300); }
.team__card--featured p { color: rgba(251, 247, 241, 0.85); }
.team__card--featured .team__photo {
  background: var(--cream-50);
  color: var(--navy-700);
  box-shadow: 0 0 0 4px rgba(242, 200, 150, 0.35);
}
.team__badge {
  display: block;
  margin-top: var(--space-3);
}
.team__badge img {
  display: block;
  width: 101px;
  height: 100px;
  margin: 0 auto;
}

.pillar-deep {
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-4);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  align-items: start;
}
.pillar-deep:last-child { border-bottom: 0; }
.pillar-deep__pct {
  font-family: var(--font-serif);
  font-size: 3rem;
  color: var(--sand-500);
  line-height: 1;
  font-weight: 300;
}
.pillar-deep__title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--navy-900);
  margin-bottom: var(--space-1);
}
.pillar-deep small {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-500);
  margin-bottom: var(--space-2);
}

.clubs {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
.club {
  text-align: center;
  padding: var(--space-3);
  border: 1px solid var(--line);
  background: var(--cream-50);
  border-radius: var(--radius-md);
}
.club .num {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  color: var(--navy-700);
  line-height: 1;
}
.club .name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--navy-900);
  margin-top: var(--space-1);
}
.club .desc {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin-top: var(--space-1);
}

.pullquote {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
  padding-block: var(--space-5);
}
.pullquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.4;
  color: var(--navy-900);
  font-weight: 300;
}
.pullquote p em { color: var(--sand-500); font-style: italic; }

.cta-band {
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--space-2); }
.cta-band__phone {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--sand-500);
  margin-bottom: var(--space-3);
  display: block;
}

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .destinations { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .clubs { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .header__cta { display: inline-flex; }
  .trust-strip { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .destinations { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .story-grid { grid-template-columns: 5fr 4fr; gap: var(--space-5); }
  .team { grid-template-columns: repeat(4, 1fr); }
  .clubs { grid-template-columns: repeat(4, 1fr); }
  .pillar-deep { grid-template-columns: 1fr 3fr; gap: var(--space-4); }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (min-width: 1100px) {
  .hero__title { font-size: 4.5rem; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 280px 1fr; gap: var(--space-5); }
}
@media (min-width: 1100px) {
  .contact-grid { grid-template-columns: 300px 1fr; gap: var(--space-6); }
}
.contact-info__intro {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-900);
  margin-bottom: var(--space-4);
}
.contact-info__block {
  margin-bottom: var(--space-4);
}
.contact-info__block h3 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin: 0 0 0.5rem;
}
.contact-info__block p { margin: 0 0 0.4rem; color: var(--ink-700); font-size: 0.95rem; }
.contact-info__link-big {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  color: var(--navy-700);
  font-weight: 400;
  text-decoration: none;
  line-height: 1.1;
}
.contact-info__link-big:hover { color: var(--sand-700); }
.contact-info__link {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--navy-700);
  word-break: break-word;
}
.contact-info__partners {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-700);
}
.contact-info__partners li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.contact-info__partners li:last-child { border-bottom: 0; }
.contact-info__partners a { color: var(--navy-700); }

.contact-form-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
@media (min-width: 700px) {
  .contact-form-wrap { padding: var(--space-4); }
}
@media (min-width: 1100px) {
  .contact-form-wrap { padding: var(--space-5); }
}
.contact-form-wrap > .eyebrow + h2 { margin-bottom: var(--space-2); }
.contact-form-wrap__intro {
  color: var(--ink-700);
  margin-bottom: var(--space-4);
}
.contact-form-wrap__note {
  margin-top: var(--space-4);
  font-size: 0.82rem;
  color: var(--ink-500);
  font-style: italic;
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* ---------- SecureForms form styling ---------- */
.secure-form {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
  margin: 0;
}
.secure-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  grid-column: span 12;
  margin: 0;
}
@media (min-width: 600px) {
  .secure-form .form-group-half    { grid-column: span 6; }
  .secure-form .form-group-third   { grid-column: span 4; }
  .secure-form .form-group-quarter { grid-column: span 3; }
  /* new-row variants must restate the span — otherwise grid-column-start: 1
     overrides the span and collapses the cell to a single column wide. */
  .secure-form .form-group.form-group-new-row { grid-column: 1 / -1; }
  .secure-form .form-group-half.form-group-new-row    { grid-column: 1 / span 6; }
  .secure-form .form-group-third.form-group-new-row   { grid-column: 1 / span 4; }
  .secure-form .form-group-quarter.form-group-new-row { grid-column: 1 / span 3; }
}

.secure-form label {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--navy-900);
  text-transform: uppercase;
}
.secure-form .required { color: var(--sand-700); margin-left: 0.15rem; }

.secure-form .form-control {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-900);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.4;
}
.secure-form .form-control:focus {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.15);
}
.secure-form textarea.form-control {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-sans);
}
.secure-form select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy-700) 50%),
    linear-gradient(135deg, var(--navy-700) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.secure-form .radio-inline {
  display: flex;
  gap: var(--space-3);
  padding-top: 0.45rem;
  flex-wrap: wrap;
}
.secure-form .form-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.secure-form .form-check-input {
  accent-color: var(--navy-700);
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
}
.secure-form .form-check-label {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink-700);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  margin: 0;
}

.secure-form .repeating-section {
  grid-column: span 12;
  background: var(--cream-50);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.secure-form .repeating-section-header h4 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--navy-900);
  margin: 0 0 var(--space-3);
}
.secure-form .repeating-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.secure-form .repeating-item {
  padding: var(--space-3);
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-3);
  position: relative;
}
.secure-form .repeating-item-header {
  grid-column: span 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.secure-form .repeating-item-header h5 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--ink-500);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}
.secure-form .repeating-item-header h5::before { content: "Traveler "; }
.secure-form .remove-item {
  background: none;
  border: none;
  color: var(--sand-700);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 0;
}
.secure-form .remove-item:hover { color: var(--sand-500); }
.secure-form .repeating-section-controls {
  margin-top: var(--space-3);
}
.secure-form .add-repeating-item {
  background: var(--white);
  border: 1.5px dashed var(--sand-500);
  color: var(--sand-700);
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--transition);
}
.secure-form .add-repeating-item:hover {
  background: var(--cream-50);
  border-color: var(--sand-700);
  color: var(--navy-700);
}

.secure-form button[type="submit"],
.secure-form .btn-primary {
  background: var(--sand-300);
  color: var(--navy-900);
  border: 1.5px solid transparent;
  padding: 0.95rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}
.secure-form button[type="submit"]:hover,
.secure-form .btn-primary:hover {
  background: var(--sand-500);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.secure-form .cf-turnstile { margin: var(--space-2) auto; }

/* ---------- A11y helpers ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--navy-900);
  color: var(--cream-50);
  padding: 0.5rem 1rem;
  z-index: 200;
}
.skip-link:focus { top: 0; }

/* ============================================================
   WP block-wrapper normalize
   Native blocks (wp:image, wp:group, wp:paragraph, wp:list,
   wp:buttons) introduce wrapper elements with WordPress's
   default margins and gap. Inside the prototype's card/media
   containers those wrappers leak through and break the layout.
   These rules reset wrappers so the prototype's container CSS
   continues to own the rhythm. Added when patterns were
   converted from wp:html to native blocks (v1.2.0).
   ============================================================ */

/* Images inside any prototype media container — kill figure margin,
   force img to fill via object-fit. Specificity beats .wp-block-image img. */
.pillar__media .wp-block-image,
.tour-card__media .wp-block-image,
.destination .wp-block-image,
.team__photo .wp-block-image,
.resource__media .wp-block-image,
.hero__media .wp-block-image,
.split__media .wp-block-image,
.brochure-rack__media .wp-block-image,
.coordinator-portrait .wp-block-image,
.partner-hero__logo .wp-block-image {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
}

.pillar__media .wp-block-image,
.pillar__media .wp-block-image > a,
.tour-card__media .wp-block-image,
.tour-card__media .wp-block-image > a,
.destination .wp-block-image,
.destination .wp-block-image > a,
.team__photo .wp-block-image,
.team__photo .wp-block-image > a,
.resource__media .wp-block-image,
.resource__media .wp-block-image > a,
.hero__media .wp-block-image,
.hero__media .wp-block-image > a,
.split__media .wp-block-image,
.split__media .wp-block-image > a,
.brochure-rack__media .wp-block-image,
.brochure-rack__media .wp-block-image > a {
  height: 100%;
}

.pillar__media .wp-block-image img,
.tour-card__media .wp-block-image img,
.destination .wp-block-image img,
.team__photo .wp-block-image img,
.resource__media .wp-block-image img,
.hero__media .wp-block-image img,
.split__media .wp-block-image img,
.brochure-rack__media .wp-block-image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Coordinator portrait + partner-hero logo aren't object-fit covers —
   they want their natural aspect ratio, just no figure margin. */
.coordinator-portrait .wp-block-image img,
.partner-hero__logo .wp-block-image img {
  margin: 0 auto;
}

/* Strip WP block-group wrappers when they sit between a prototype
   media container and its inner figure (we use a wp:group for the
   .X__media wrapper so the className applies). */
.pillar > .wp-block-group.pillar__media,
.tour-card > .wp-block-group.tour-card__media,
.destination > .wp-block-group.destination .wp-block-image,
.team__card > .wp-block-group.team__photo,
.resource > .wp-block-group.resource__media,
.hero > .wp-block-group.hero__media,
.split > .wp-block-group.split__media,
.brochure-rack > .wp-block-group.brochure-rack__media {
  padding: 0;
  margin: 0;
}

/* Card bodies — kill the default blockGap WP injects into
   flex-column groups, and reset paragraph margins so the
   prototype's .X__num / .X__title / .X__desc margins win. */
.pillar__body,
.tour-card__body,
.resource__body,
.staytouch,
.team__card,
.testimonial-card,
.coordinator-card,
.contact-info,
.contact-info__block,
.contact-form-wrap,
.brochure-rack__body,
.hero__inner {
  gap: 0;
}

.pillar__body > *,
.tour-card__body > *,
.resource__body > *,
.staytouch > *,
.team__card > *,
.testimonial-card > *,
.coordinator-card > *,
.brochure-rack__body > * {
  margin-block: 0;
}

/* Re-apply the prototype's specific child margins (these are the
   ones that establish the card's vertical rhythm). The selectors
   above zero everything, so we need to restore them explicitly. */
.pillar__num   { margin-bottom: 0.25rem; }
.pillar__title { margin-bottom: var(--space-1); }
.pillar__tag   { margin-bottom: var(--space-2); }
.pillar__desc  { margin-bottom: var(--space-3); }
.pillar__pdf   { margin-top: var(--space-2); }

.tour-card__date  { margin-bottom: 0.4rem; }
.tour-card__title { margin-bottom: var(--space-2); }
.tour-card__meta  { margin-bottom: var(--space-3); }

.resource__title  { margin-bottom: 0.35rem; }
.resource__sub    { margin-bottom: var(--space-2); }
.resource__type   { margin-top: auto; }

.staytouch__cadence { margin-bottom: 0.25rem; }
.staytouch__lead    { margin-bottom: var(--space-2); }

.team__name { margin-bottom: 0.25rem; }
.team__role { margin-bottom: var(--space-2); }

.contact-info__intro          { margin-bottom: var(--space-4); }
.contact-info__block          { margin-bottom: var(--space-3); }
.contact-form-wrap__intro     { margin-bottom: var(--space-3); }

/* Hero inner — also a flex column with its own gap rules in prototype CSS */
.hero__inner > .wp-block-group { margin: 0; }

/* Headings inside wp-block-* wrappers — neutralize WP's default heading margin
   when the heading is the direct child of one of our typed wrappers. */
.pillar__body .wp-block-heading.pillar__title,
.tour-card__body .wp-block-heading.tour-card__title,
.staytouch .wp-block-heading,
.team__card .wp-block-heading,
.coordinator-card .wp-block-heading,
.brochure-rack__body .wp-block-heading,
.section-head .wp-block-heading,
.cta-band .wp-block-heading,
.testimonial .wp-block-heading,
.hero__inner .wp-block-heading {
  margin-top: 0;
}

/* Section-head — the prototype expects centered text + auto margins,
   and the wp:group wrapper now lives here, so make sure spacing stays. */
.section-head > p,
.section-head > .wp-block-heading {
  margin-block: 0;
}
.section-head > p.eyebrow { margin-bottom: var(--space-2); }
.section-head > .wp-block-heading { margin-bottom: var(--space-2); }
.section-head > p:not(.eyebrow) { margin-top: 0; }

/* Pillar-deep rows — kill block-group gap so the prototype's grid spacing wins */
.pillar-deep { gap: 0; }
.pillar-deep > .wp-block-group { margin: 0; }
.pillar-deep__title { margin-bottom: var(--space-2); }

/* Buttons inside hero__cta-row — the prototype's CSS already styles the row;
   make sure the wp:buttons wrapper doesn't double-margin. */
.hero__cta-row.wp-block-buttons { margin-top: var(--space-3); margin-bottom: 0; gap: var(--space-2); }
.hero__cta-row .wp-block-button { margin: 0; }

/* Trust-strip items — the prototype uses spans; native paragraphs now render <p>.
   Reset their margin so the .num + .label sit tight. */
.trust-strip__item > * { margin: 0; }
.trust-strip__item .num   { margin-bottom: 0.25rem; }

/* Member count — same span-to-p fix */
.member-count > * { margin: 0; }
.member-count .num { margin-bottom: 0.25rem; }

/* Utility bar — paragraphs inside the navy bar */
.utility .wp-block-group > p { margin: 0; }
.utility__left > p,
.utility__right > p { margin: 0; }

/* CTA-band — phone link uses native paragraph now; restore its display block */
.cta-band__phone { display: block; margin: var(--space-3) auto; }
/* ============================================================
   WP block-wrapper normalize — fixes round 2
   ============================================================ */

/* Force media containers to fill their parent cell so aspect-ratio
   computes height correctly. wp-block-group defaults to display:flow-root
   which can leave the .pillar__media (etc.) shrunk to natural content. */
.pillar__media,
.tour-card__media,
.team__photo,
.resource__media,
.hero__media,
.destination,
.split__media,
.brochure-rack__media,
.coordinator-portrait,
.partner-hero__logo {
  width: 100%;
  display: block;
}

/* Destination cards — fix layering + label color
   The figure now needs to be absolutely positioned inside the .destination
   so it fills the aspect-ratio box and sits under the gradient + label. */
.destination {
  position: relative;
}
.destination .wp-block-image,
.destination .wp-block-image > a {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.destination .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.destination::after {
  z-index: 1;
  pointer-events: none;
}
.destination__label {
  z-index: 2;
}

/* Defeat WP's global text color on the destination card —
   the wp-block-group color inheritance was washing the label
   text dark. Specificity (0,2,0) beats both .wp-block-group
   global styles and .destination on its own. */
.destination.wp-block-group,
.destination.wp-block-group > p,
.destination.wp-block-group > .destination__label,
p.destination__label {
  color: var(--cream-50);
}

/* Same fix for the small inside the label — was inheriting WP body color */
p.destination__label small {
  color: var(--sand-300);
}

/* Featured CTA — center via the wp:buttons wrapper */
.featured__cta .wp-block-buttons { justify-content: center; }
/* ============================================================
   WP block-wrapper normalize — round 3
   ============================================================ */

/* Resources tiles — original prototype wrapped each tile in <a>,
   so the layout rules lived on `.resource a`. Native blocks broke
   that wrapper (the link now sits on the image only). Re-apply the
   same flex layout to .resource itself so the media+body sit
   side-by-side as in the prototype. */
.resources .resource {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--ink-900);
  transition: all var(--transition);
  text-decoration: none;
}
.resources .resource:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-500);
}
.resources .resource > .resource__media {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-50);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 6px;
}
.resources .resource > .resource__media .wp-block-image,
.resources .resource > .resource__media .wp-block-image > a,
.resources .resource > .resource__media figure {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
}
.resources .resource > .resource__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.resources .resource > .resource__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0;
}

/* First-card spacing issue — WP's layout system adds margin-top:0 to
   :first-child via `:where(.is-layout-default) > *:first-child`. This
   creates an implicit margin difference between first and subsequent
   children. Normalize: zero margin-top on every direct child of every
   card grid, so the grid `gap` is the only source of vertical rhythm. */
.pillars > *,
.tours-grid > *,
.destinations > *,
.staytouch-grid > *,
.team > *,
.resources > *,
.footer-grid > *,
.contact-grid > *,
.split > *,
.story-grid > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Same fix for nested wp-block-group inside cards — first child of
   any prototype card body shouldn't inherit WP layout's first-child
   margin reset (which conflicts with the prototype's margin-on-prev
   pattern). */
.pillar__body > *:first-child,
.tour-card__body > *:first-child,
.resource__body > *:first-child,
.staytouch > *:first-child,
.team__card > *:first-child,
.testimonial-card > *:first-child {
  margin-top: 0;
}

/* Resource title / sub / type — vertical stack inside .resource__body */
.resources .resource .resource__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--navy-900);
  margin: 0 0 0.35rem;
  font-weight: 500;
}
.resources .resource .resource__sub {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
}
.resources .resource .resource__type {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-700);
  margin: auto 0 0;
}
.resources .resource .resource__type--pdf { color: var(--navy-700); }
.resources .resource .resource__type--link { color: var(--sand-700); }
/* ============================================================
   Resource tiles — vertical layout fix
   The previous append wrote rules assuming `.resource a` flex-row
   wrapper. With the new pattern (no anchor wrapper, tile is a
   wp:group with vertical layout), reset and rewrite from scratch.
   Matches the prototype's desktop layout: 96px centered logo on
   top, centered title/sub/badge below.
   ============================================================ */

.resources .resource {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--ink-900);
  transition: all var(--transition);
  text-decoration: none;
}
.resources .resource:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-500);
}

/* Media box — 96px square, centered in the tile, with the image
   filling it via object-fit:contain. The flex centering inside
   handles cases where the image's intrinsic aspect doesn't fill. */
.resources .resource > .resource__media {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-50);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
}
.resources .resource > .resource__media .wp-block-image,
.resources .resource > .resource__media .wp-block-image > a,
.resources .resource > .resource__media figure {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: static;
}
.resources .resource > .resource__media .wp-block-image img,
.resources .resource > .resource__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

/* Body — vertical flex, centered, text-align center */
.resources .resource > .resource__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  gap: 0;
}
.resources .resource .resource__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--navy-900);
  margin: 0 0 0.5rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.resources .resource .resource__sub {
  font-size: 0.88rem;
  color: var(--ink-500);
  margin: 0 0 var(--space-2);
  line-height: 1.5;
  text-align: center;
}
.resources .resource .resource__type {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: auto;
  margin-bottom: 0;
  text-align: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--cream-50);
}
.resources .resource .resource__type--pdf {
  color: var(--navy-700);
  background: var(--navy-200);
}
.resources .resource .resource__type--link {
  color: var(--sand-700);
  background: rgba(200, 149, 109, 0.16);
}
/* ============================================================
   core/navigation styling — header drawer + footer columns
   The prototype's .nav__list / .nav__link / .footer-nav rules
   target `<ul>` and `<a>` elements. wp:navigation renders its own
   markup (`.wp-block-navigation`, `.wp-block-navigation__container`,
   `.wp-block-navigation-item__content`). These rules apply the
   prototype's link styling to the WP block markup so admin can
   manage menu items via the block sidebar.
   ============================================================ */

/* Header drawer menu — vertical list inside the .nav drawer */
.nav .wp-block-navigation,
.nav .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}
.nav .wp-block-navigation-item {
  position: relative;
}
.nav .wp-block-navigation-item__content,
.nav .wp-block-navigation a {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--navy-900);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  transition: all var(--transition);
}
.nav .wp-block-navigation-item__content:hover,
.nav .wp-block-navigation a:hover,
.nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  background: var(--navy-200);
  color: var(--navy-900);
}

/* Footer nav columns — vertical lists in each column */
.site-footer .wp-block-navigation,
.site-footer .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: flex-start;
}
.site-footer .wp-block-navigation-item__content,
.site-footer .wp-block-navigation a {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--ink-700);
  text-decoration: none;
  padding: 0.2rem 0;
  transition: color var(--transition);
  display: inline-block;
}
.site-footer .wp-block-navigation-item__content:hover,
.site-footer .wp-block-navigation a:hover {
  color: var(--navy-700);
}

/* Defeat WP block-library default gap/padding that might inject
   inline styles via wp-container-* classes. */
.nav .wp-block-navigation.is-vertical,
.site-footer .wp-block-navigation.is-vertical {
  gap: 0.5rem;
}
.nav .wp-block-navigation > ul,
.site-footer .wp-block-navigation > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* ============================================================
   Editor-only: unhide the .nav drawer in the Site Editor canvas
   On the frontend .nav is display:none until a click toggles the
   body.nav-open drawer. That keeps admin guessing where the nav
   block lives in the editor — they end up using List View to
   reach it. These rules render the drawer inline (with a hint
   border) inside the Site Editor iframe only. Targets the iframe
   body classes WP adds in the editor context.
   ============================================================ */

.editor-styles-wrapper .nav,
.is-root-container .nav,
.block-editor-iframe__body .nav {
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  background: var(--cream-50) !important;
  padding: var(--space-3) !important;
  border: 1px dashed var(--ink-300) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  overflow: visible !important;
  animation: none !important;
  margin: var(--space-3) 0 !important;
}

/* Editor-only label so admin understands this drawer is hidden
   until the hamburger is tapped on the frontend. */
.editor-styles-wrapper .nav::before,
.is-root-container .nav::before,
.block-editor-iframe__body .nav::before {
  content: "Mobile drawer (hidden on frontend until ☰ Menu is tapped)";
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

/* Inside the editor, the nav__contact block is also visible so
   admin can edit it — match the drawer's intent (cream bg, navy
   text) so it doesn't look like an error. */
.editor-styles-wrapper .nav .nav__contact,
.is-root-container .nav .nav__contact,
.block-editor-iframe__body .nav .nav__contact {
  color: var(--navy-900) !important;
}
/* ============================================================
   Fixes round 4 — newsletter inline + footer link colors
   ============================================================ */

/* Newsletter signup — force the 3 form-groups onto a single row
   (email + Subscribe button), with the Turnstile widget wrapping
   to its own row below. Higher specificity + !important defeats
   any earlier block-normalize rules that touch direct children. */
.newsletter .secure-form.newsletter__form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: stretch !important;
  margin-top: var(--space-3);
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}
.newsletter .secure-form.newsletter__form .form-group {
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 !important;
}
.newsletter .secure-form.newsletter__form .form-group.newsletter__email {
  flex: 1 1 220px !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.newsletter .secure-form.newsletter__form .form-group.newsletter__submit {
  flex: 0 0 auto !important;
}
.newsletter .secure-form.newsletter__form .form-group.newsletter__turnstile {
  flex: 1 1 100% !important;
  display: flex !important;
  justify-content: center !important;
  margin-top: var(--space-2) !important;
}
.newsletter .secure-form.newsletter__form .newsletter__email .form-control {
  width: 100% !important;
  height: auto !important;
  flex: 1 1 auto !important;
}

/* Footer link colors — the site footer has a dark navy background;
   previous nav-block rules used ink-700/navy-700 which are both
   navy/dark and invisible. Use cream-50 with sand-500 on hover. */
.site-footer a,
.site-footer .wp-block-navigation a,
.site-footer .wp-block-navigation-item__content {
  color: rgba(251, 247, 241, 0.85) !important;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer .wp-block-navigation a:hover,
.site-footer .wp-block-navigation-item__content:hover,
.site-footer .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: var(--sand-500) !important;
  background: transparent !important;
}

/* Defeat the earlier round's nav-block hover background (navy-200)
   which would render on the dark footer as a navy-200 pill on navy. */
.site-footer .wp-block-navigation .wp-block-navigation-item__content {
  background: transparent !important;
  padding-inline: 0 !important;
}
/* ============================================================
   Fixes round 5 — contact form input widths
   The "Departure Airport" input (and likely others) rendered at
   natural width (~100px) instead of filling its grid cell because
   `width: 100%` on `.form-control` was getting beaten by some
   earlier wp-block layout reset. Lock it down.
   ============================================================ */

.secure-form .form-group .form-control,
.secure-form input.form-control,
.secure-form textarea.form-control,
.secure-form select.form-control {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block;
  max-width: 100%;
}

/* Make sure the form-group itself stretches its children */
.secure-form .form-group {
  align-items: stretch;
}

/* Radio rows inside a form-group — keep them inline within
   the third-column width; if they don't fit they wrap. */
.secure-form .form-group .radio-inline {
  width: 100%;
}
/* ============================================================
   Fixes round 6 — form-group label alignment
   Labels of different lengths wrap to different line counts (e.g.
   "Include Travel Insurance?" → 2 lines, "Include Airfare?" → 1
   line), so inputs/radios end up at different Y positions across
   columns. Reserve 2 lines of label space everywhere with the
   text anchored to the bottom — that way every input/radio area
   starts at the same baseline within a row.
   ============================================================ */

.secure-form .form-group > label {
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
  line-height: 1.2;
}
/* ============================================================
   Fix round 7 — team photos back to 120×120 circles
   Earlier normalize rounds added `.team__photo { width: 100% }`
   to fix figure-margin issues in card media containers, but the
   team avatars are supposed to stay at a fixed 120px square so
   border-radius:50% produces an actual circle (not an ellipse).
   ============================================================ */

.team__card .team__photo,
.team__card .team__photo--img {
  width: 120px !important;
  height: 120px !important;
  flex: 0 0 120px !important;
  border-radius: 50% !important;
  overflow: hidden;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-2) !important;
  padding: 0 !important;
  background: var(--white);
}

/* Featured card (Marilyn) — keeps the 200px square layout from
   the prototype's @media min-width 700 rule. */
@media (min-width: 700px) {
  .team__card--featured .team__photo,
  .team__card--featured .team__photo--img {
    width: 200px !important;
    height: 200px !important;
    flex: 0 0 200px !important;
    margin: 0 !important;
  }
}

.team__card .team__photo .wp-block-image,
.team__card .team__photo .wp-block-image > a,
.team__card .team__photo figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: static;
}
.team__card .team__photo .wp-block-image img,
.team__card .team__photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block;
}
/* ============================================================
   Fix round 8 — resources tile clickable card
   The prototype wrapped each tile in <a>, so the entire card
   navigated on click. Native blocks can't nest a wp:group in an
   anchor, so the link only lives on the image. Standard fix:
   give the image's <a> an `::after` overlay that extends across
   the whole `.resource` container, making the whole tile a hit
   target.
   ============================================================ */

.resources .resource { position: relative; }
.resources .resource .wp-block-image > a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.resources .resource > .resource__body {
  position: relative;
  z-index: 0;
}
.resources .resource > .resource__body a {
  position: relative;
  z-index: 2;
}
.resources .resource { cursor: pointer; }
/* ============================================================
   Fix round 9 — partner-hero logo box back to inline-flex
   Round 2 normalize had `.partner-hero__logo { width: 100%; display: block }`
   to fix figure-margin in card media wrappers, but the partner
   hero logo is supposed to be a small inline-flex pill around
   the logo (cream box, rounded, shadow). Restore inline-flex.
   ============================================================ */

.partner-hero .partner-hero__logo {
  display: inline-flex !important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--cream-50);
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-3) !important;
  box-shadow: var(--shadow-md);
}
.partner-hero .partner-hero__logo .wp-block-image,
.partner-hero .partner-hero__logo .wp-block-image > a,
.partner-hero .partner-hero__logo figure {
  margin: 0;
  padding: 0;
  width: auto !important;
  height: auto !important;
  display: block;
  position: static;
}
.partner-hero .partner-hero__logo .wp-block-image img,
.partner-hero .partner-hero__logo img {
  max-height: 110px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  display: block;
}

/* The partner-hero .container needs to center the inline logo box. */
.partner-hero .container { text-align: center; }
/* ============================================================
   Fix round 10 — resource badge as inline-block pill + anchor
   The badge was rendering as a full-width <p>, so its pill
   background stretched across the whole tile (the yellow band).
   Wrap the badge text in <a> (pattern updated) and style the
   pill as an inline-block sized to its content.
   ============================================================ */

.resources .resource .resource__type {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
  padding: 0.4rem 0.85rem !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  align-self: center;
}
.resources .resource .resource__type a {
  color: inherit !important;
  text-decoration: none;
  display: block;
  position: relative;
  z-index: 2;
}
.resources .resource .resource__type a:hover {
  text-decoration: none;
}
/* ============================================================
   Fix round 11 — badge pill on the anchor, not the paragraph
   The previous round put pill styling (background, padding,
   border-radius) on the <p>, then made the <a> a block inside.
   Result: two concentric pills (the <p>'s pill + the <a>'s
   inner block with its own rendered shape). Move everything to
   the <a> so the <p> becomes a transparent wrapper.
   ============================================================ */

.resources .resource .resource__type {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: auto 0 0 !important;
  text-align: center;
}
.resources .resource .resource__type a {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cream-50);
  color: var(--ink-700);
  transition: all var(--transition);
  position: relative;
  z-index: 2;
}
.resources .resource .resource__type--pdf a {
  background: var(--navy-200);
  color: var(--navy-700);
}
.resources .resource .resource__type--link a {
  background: rgba(200, 149, 109, 0.18);
  color: var(--sand-700);
}
.resources .resource .resource__type a:hover {
  filter: brightness(0.95);
  text-decoration: none;
}