/* ============================================================
   YWAM Ships — global stylesheet (2026 rebrand palette)
   Blue #0f5374 · Wave blue #0f4b6c · Teal #007472 · Soft teal #9bc5c4
   ============================================================ */

@font-face {
  font-family: 'Pilcrow';
  src: url('pilcrow-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Pilcrow';
  src: url('pilcrow-bold.woff2') format('woff2');
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: 'Jendral';
  src: url('jendral-writing-pro.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Fallback';
  src: local('Arial');
  ascent-override: 101.03%;
  descent-override: 27.69%;
  line-gap-override: 0%;
  size-adjust: 106.25%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial');
  ascent-override: 81.85%;
  descent-override: 21.21%;
  line-gap-override: 0%;
  size-adjust: 113.6%;
}

:root {
  --blue: #0f5374;
  --tribal-ink: #0f4b6c;
  /* Vertical spacing system — always use these for section padding.
     Rule: whitespace between two adjacent sections (their adjacent paddings summed)
     should land between 64px and 90px. Never 0, never over 100. */
  --gap-band: 40px;                       /* padding inside tinted/patterned bands (story-band, newsletter, whatwedo) */
  --gap-cta: 48px;                        /* symmetric padding around standalone CTA/button rows on white */
  --gap-content: clamp(40px, 6vw, 64px);  /* article/content block top & bottom */
  --gap-after-grid: 44px;                 /* below card/button grids before the next section */
  --blue-dark: #0f4b6c;
  --teal: #007472;
  --soft: #9bc5c4;
  --ink: #282828;
}

/* Smooth cross-document navigation — cross-fades old→new page so the
   brief blank frame before JS renders is masked. Same-origin only;
   browsers without support fall back to normal navigation. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.12s; }

html, body { margin: 0; padding: 0; background: #ffffff; }
/* Reserve the scrollbar gutter always, so a short page (or a filtered/tabbed view that
   loses its scrollbar) doesn't shift the layout sideways. */
html { scrollbar-gutter: stable; }
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Pilcrow', 'Open Sans Fallback', Arial, sans-serif; color: var(--ink); }
strong, b { font-weight: 700; }

/* Text links */
a { color: var(--teal); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--blue); }
.body-link { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
  /* Single-line labels only look centred because the text fills the box; a
     wrapped label (long translations, German/Norwegian compounds) renders
     left-aligned without this. */
  text-align: center;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Two standard buttons, mirror rollovers.
   Filled: teal bg / white text  -> hover white bg / teal text
   Ghost:  white bg / teal text   -> hover teal bg / white text */
.btn--primary, .btn--cta, .btn--outline-accent, .btn--subscribe, .btn--outline-light {
  font-size: 14px; padding: 11px 28px; border: 2px solid var(--blue);
}
.btn--primary, .btn--cta {
  background: var(--blue); color: #ffffff;
}
.btn--primary:hover, .btn--cta:hover {
  background: #ffffff; color: var(--blue);
}
.btn--outline-accent, .btn--subscribe, .btn--outline-light {
  background: #ffffff; color: var(--blue);
}
.btn--outline-accent:hover, .btn--subscribe:hover, .btn--outline-light:hover {
  background: var(--blue); color: #ffffff;
}

/* ---------- Header ---------- */
.top-bar {
  background: var(--blue);
  color: #ffffff;
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 14px 24px; font-size: 14px; text-align: center; position: relative; flex-wrap: wrap;
}
/* The tribal SVG's own fill definitions are missing, so painting it as a
   background renders it solid black. Use it as a MASK instead and paint the
   pattern in the site's subtle darker blue. */
.top-bar::before, .banner-strip::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--tribal-ink, #0f4b6c);
  -webkit-mask: url('../images/cl_tribal-pattern-dark-blue-v2.svg') center / cover no-repeat;
  mask: url('../images/cl_tribal-pattern-dark-blue-v2.svg') center / cover no-repeat;
}
.top-bar > *, .banner-strip > * { position: relative; z-index: 1; }
@media (max-width: 640px) { .top-bar span:first-child { display: none; } }
.top-bar__link { color: #ffffff; font-weight: 700; text-decoration: underline; transition: opacity 0.2s ease; }
.top-bar__link:hover { color: #ffffff; opacity: 0.8; }
.top-bar__clock { opacity: 0.85; font-weight: 600; }
@media (max-width: 640px) { .top-bar__clock { display: none; } }
.lang-toggle { position: absolute; right: clamp(16px, 4vw, 40px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.lang-toggle__link { color: #ffffff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; opacity: 0.72; transition: opacity 0.2s ease; }
.lang-toggle__link:hover { color: #ffffff; opacity: 1; }
.lang-toggle__link--active { opacity: 1; font-weight: 700; }
.lang-toggle__flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(255,255,255,0.25); }
.lang-toggle__sep { color: rgba(255,255,255,0.5); }
@media (max-width: 860px) { .lang-toggle { position: static; transform: none; margin-left: 6px; } }

.site-header {
  background: #ffffff;
  border-bottom: 1px solid #e8ecee;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px); height: 100px; position: relative;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 78px; width: auto; display: block; }

.main-nav { display: flex; align-items: center; gap: 28px; }
.nav-item { position: relative; padding: 32px 0; }
.nav-item__link {
  color: var(--ink); font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 16px; font-weight: 700;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.02em; display: flex; align-items: center; gap: 6px; transition: color 0.2s ease;
}
.nav-item__link:hover { color: var(--blue); }
.nav-caret { font-size: 9px; opacity: 0; }
.nav-item--has-children .nav-caret { opacity: 0.55; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #ffffff; min-width: 280px; box-shadow: 0 10px 30px rgba(15,83,116,0.22);
  border-top: 3px solid var(--blue); z-index: 50; display: none; flex-direction: column; padding: 8px 0;
}
.nav-item--has-children:hover .dropdown,
.nav-item--has-children:focus-within .dropdown { display: flex; }
.dropdown a {
  display: block; padding: 11px 22px; font-size: 14px; color: var(--ink);
  white-space: nowrap; transition: background 0.2s ease, color 0.2s ease;
}
.dropdown a:hover { background: #eef4f5; color: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none; background: none; border: 2px solid var(--blue); border-radius: 4px;
  color: var(--blue); font-size: 20px; line-height: 1; padding: 8px 12px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.nav-toggle:hover { background: var(--blue); color: #ffffff; }

.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--blue); z-index: 100; flex-direction: column; padding: 12px 0 20px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 15px; transition: background 0.2s ease; }
.mobile-menu a:hover { background: rgba(255,255,255,0.08); }
.mobile-menu__link { color: #ffffff; font-weight: 700; padding: 11px 24px; }
.mobile-menu__sublink { color: var(--soft); font-weight: 400; padding: 11px 24px 11px 44px; }
.mobile-menu__actions { display: flex; gap: 12px; padding: 16px 24px 0; }

@media (max-width: 1060px) {
  .main-nav, .header-actions { display: none; }
  .nav-toggle { display: block; }
}

/* ---------- Banner ---------- */
.banner {
  aspect-ratio: 2560 / 918;
  background-image: url('../images/cl_banner-our-story.webp');
  background-size: cover; background-position: center;
}
/* Per-page banner modifiers (.banner--<page>) live in assets/site.css,
   NOT here — this file is synced from the Design System and would wipe them. */
/* Reusable text-card grid: any number of heading+copy cards, auto-fit by default */
.info-grid { max-width: 1080px; margin: 8px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; padding: 0 24px; }
.info-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .info-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .info-grid--cols-4 { grid-template-columns: 1fr; } }
.info-grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-top: 32px; margin-bottom: 32px; }
@media (max-width: 560px) { .info-grid--cols-2 { grid-template-columns: 1fr; } }
.info-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .info-grid--cols-3 { grid-template-columns: 1fr; } }
.stat-callout__badge { width: 64px; height: 64px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.stat-callout__badge img { width: 32px; height: 32px; object-fit: contain; display: block; }
/* Plain photo grid: evenly-spaced images with no caption/copy, e.g. a facility photo set */
.photo-grid { max-width: 1080px; margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 0 24px; }
.photo-grid__item { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; display: block; }
.photo-grid img { width: 100%; height: auto; aspect-ratio: 400 / 284; object-fit: cover; border-radius: 6px; display: block; transition: transform 0.4s ease, opacity 0.3s ease; }
.photo-grid__item:hover img { transform: scale(1.06); opacity: 0.9; }
.photo-grid__item::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
  background: rgba(15,83,116,0.28) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="20" y1="20" x2="15.5" y2="15.5"/><line x1="10.5" y1="8" x2="10.5" y2="13"/><line x1="8" y1="10.5" x2="13" y2="10.5"/></svg>') center / 34px no-repeat;
}
.photo-grid__item:hover::after { opacity: 1; }
/* Portrait photo set: the grid's own 400/284 landscape crop beheads standing subjects,
   so a portrait grid opts into 3/4 (this rule must out-specify .photo-grid img). */
.photo-grid.photo-grid--3x4 img { aspect-ratio: 3 / 4; }
.photo-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.photo-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) { .photo-grid, .photo-grid--cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .photo-grid, .photo-grid--cols-2, .photo-grid--cols-4 { grid-template-columns: 1fr; } }
/* Full-screen photo lightbox, triggered by clicking a photo-grid (or similar) image */
.lightbox { position: fixed; inset: 0; background: rgba(10,20,26,0.9); z-index: 200; display: none; align-items: center; justify-content: center; }
.lightbox__img { max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: 4px; cursor: default; }
.lightbox__close { position: absolute; top: 20px; right: 28px; background: none; border: 0; color: #fff; font-size: 36px; line-height: 1; cursor: pointer; }
.lightbox__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: 0; color: #fff; font-size: 30px; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox__arrow--prev { left: 20px; }
.lightbox__arrow--next { right: 20px; }
.lightbox__arrow:hover, .lightbox__close:hover { background: rgba(255,255,255,0.22); }
.text-card { border-radius: 6px; padding: 28px 26px; text-align: left; display: flex; flex-direction: column; }
.text-card__cta { margin-top: auto; align-self: center; }
.text-card image-slot { display: block; width: 100%; height: 160px; margin-bottom: 16px; }
.text-card > img { display: block; width: 100%; height: auto; margin-bottom: 16px; }
.text-card h3 { margin: 0 0 10px; padding-bottom: 12px; border-bottom: 1px solid var(--blue); font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; color: var(--blue); font-size: 19px; }
/* Photo card modifier: text-card with an image/image-slot as its first child gets centered text and no divider under the heading */
.text-card:has(> img:first-child), .text-card:has(> image-slot:first-child) { text-align: center; }
.text-card:has(> img:first-child) h3, .text-card:has(> image-slot:first-child) h3 { border-bottom: none; padding-bottom: 0; }
.text-card p { margin: 0 0 20px; font-size: 18px; line-height: 1.75; }
.text-card p:last-child { margin-bottom: 0; }
.text-card ul { margin: 0; padding-left: 1.2em; text-align: left; }
.text-card li { font-size: 18px; line-height: 1.75; margin-bottom: 4px; }
/* Display-heading modifier: swap a text-card's h3 for a large centered Jendral treatment (date/number callouts) */
.text-card--display h3 { font-family: 'Jendral', 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 400; font-size: 46px; text-align: center; border-bottom-color: var(--blue); }
/* Reusable stat callout: big number + caption, centered */
.stat-callout { text-align: center; margin: 0 0 32px; }
.stat-callout__amount { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 34px; font-weight: 800; color: var(--blue); display: block; }
.stat-callout__sub { font-size: 18px; color: var(--ink); }
.quote-grid { max-width: 1080px; margin: 8px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; padding: 0 24px; }
.quote-card { background: #f4f8fa; border-radius: 6px; padding: 24px 22px; text-align: left; }
.quote-card p { margin: 0 0 10px; font-size: 17px; line-height: 1.75; font-style: italic; }
.quote-card span { font-size: 14px; font-weight: 700; color: var(--blue); }
.testimonial-slider { max-width: 640px; margin: 8px auto 0; text-align: center; }
.testimonial-avatar { width: 96px; height: 96px; margin: 0 auto 20px; }
.testimonial-slide p { margin: 0 0 16px; font-size: 18px; line-height: 1.75; font-style: italic; font-weight: 400; }
.testimonial-slide span { font-size: 18px; font-weight: 700; color: var(--blue); }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 28px; }
.slider-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-arrow:hover { background: var(--blue); color: #fff; }
.slider-dots { display: flex; gap: 8px; }
.cta-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.article .cta-row { margin-top: 24px; }
/* Inline jump-nav links to same-page anchors, distinct from buttons */
.jump-links { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e2e8ec; }
.jump-links a { font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--blue); border-bottom: 2px solid transparent; padding-bottom: 4px; transition: border-color 0.2s ease; }
.jump-links a:hover { border-bottom-color: var(--blue); }
/* Reusable alternating image+text rows (zigzag feature list) */
.feature-rows { max-width: 1080px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 32px; padding: 0 24px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; text-align: left; }
.feature-row > * { min-width: 0; }
.feature-row--reverse .feature-row__media { order: 1; }
.feature-row--reverse div:not(.feature-row__media) { order: 2; }
.feature-row h3 { margin: 0 0 8px; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; color: var(--blue); font-size: 19px; }
.feature-row p { margin: 0; font-size: 18px; line-height: 1.75; }
.feature-row p + p { margin-top: 16px; }
.feature-row ul { text-align: left; list-style: disc; padding-left: 1.4em; margin: 0 0 16px; }
.feature-row li { font-size: 17px; line-height: 1.5; margin-bottom: 8px; }
.feature-row li:last-child { margin-bottom: 0; }
.feature-row__media { display: flex; flex-direction: column; gap: 8px; }
.feature-row__caption { font-size: 14px; color: var(--ink); text-align: center; font-style: italic; }
@media (max-width: 560px) { .feature-row, .feature-row--reverse { grid-template-columns: 1fr; text-align: center; } .feature-row--reverse image-slot, .feature-row--reverse div { order: initial; } .feature-row__media { align-items: center; } }
.article__figure { width: 100%; max-width: 860px; margin: 12px auto 8px; border-radius: 6px; overflow: hidden; }
.article__figure img { width: 100%; height: auto; display: block; }
/* Loc cards + CTA cards share one rule set (cta-cards is the semantic alias for photo+button pairs) */
.loc-cards, .cta-cards { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 0 24px var(--gap-after-grid); }
.loc-cards--cols-4, .cta-cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .loc-cards, .cta-cards { grid-template-columns: 1fr; max-width: 420px; } .loc-cards--cols-4, .cta-cards--cols-4 { grid-template-columns: repeat(2, 1fr); max-width: 640px; } }
@media (max-width: 440px) { .loc-cards--cols-4, .cta-cards--cols-4 { grid-template-columns: 1fr; max-width: 420px; } }
.loc-card, .cta-card { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loc-card a:not(.btn), .cta-card a:not(.btn) { display: block; width: 100%; overflow: hidden; border-radius: 4px; }
.loc-card image-slot { box-sizing: border-box; border: 1px solid #d7e0e3; }
.loc-card img, .cta-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; display: block; transition: transform 0.4s ease, opacity 0.3s ease; }
.loc-card a:not(.btn):hover img, .cta-card a:not(.btn):hover img { transform: scale(1.05); opacity: 0.92; }
.loc-apply { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding: var(--gap-cta) 24px; }
.article__subhead { font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue); margin: 40px 0 12px; }
.article h1 + .article__subhead { margin-top: 0; font-size: 19px; }
/* Small-print footnote under a grid/table, centered in the article column */
.footnote { max-width: 640px; margin: 24px auto 0; font-size: 18px; color: var(--ink); text-align: center; }
.accordion { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.accordion__item { border: 1px solid #dbe4e9; border-radius: 4px; overflow: hidden; }
.accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 28px; background: #f4f8fa; border: 0; cursor: pointer; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 400; font-size: 1.3rem; color: var(--blue); text-align: left; transition: background 0.2s ease; }
.accordion__header:hover { background: #e8f1f5; }
/* The header keeps its colour when open — the flip to blue/white read as a
   glitch mid-animation. Open state is carried by the rotated icon. */
.accordion__icon { font-size: 1.75rem; line-height: 1; flex: 0 0 auto; transition: transform 0.25s ease; }
.accordion__item.is-open .accordion__icon { transform: rotate(45deg); }
.accordion__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.accordion__item.is-open .accordion__body { grid-template-rows: 1fr; }
/* Horizontal padding is constant (so the copy never re-wraps mid-animation) and
   the vertical padding transitions in step with the row, or it snaps in on open
   and out on close while the height is still easing. */
.accordion__inner { overflow: hidden; text-align: left; padding: 0 24px; transition: padding-top 0.3s ease, padding-bottom 0.3s ease; }
.accordion__inner > *:first-child { margin-top: 0; }
.article ul { text-align: left; list-style: disc; max-width: 640px; margin: 0 auto 24px; padding-left: 1.4em; }
.article li { font-size: 18px; line-height: 1.75; margin-bottom: 8px; }
.article li:last-child { margin-bottom: 0; }
.accordion__item.is-open .accordion__inner { padding-top: 20px; padding-bottom: 24px; }
.banner-img { display: block; width: 100%; height: auto; }
.flipbook-embed { margin: 32px 0; }
.flipbook-embed iframe { display: block; width: 100%; height: 700px; border: 0; }
/* Blue tribal-pattern strip under the banner, hosting the About menu */
.banner-strip {
  min-height: clamp(48px, 6vw, 90px);
  background: var(--blue);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
.about-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: clamp(16px, 2.5vw, 34px); row-gap: 18px;
  max-width: 1180px;
}
.about-nav__title {
  color: #ffffff; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  padding-right: clamp(8px, 1.5vw, 18px); border-right: 1px solid rgba(255,255,255,0.4);
}
.about-nav__link {
  color: #ffffff; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  transition: color 0.2s ease;
}
.about-nav__link:hover { color: var(--soft); }
.about-nav__link--active { color: var(--soft); font-weight: 700; }

/* ---------- Content ---------- */
.content {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr;
  padding: var(--gap-content) 24px;
}
/* Children stretch to the single column (the viewport) and center themselves via their own
   max-width + auto margins. Avoids justify-items:center sizing them to max-content, which
   let auto-fit grids / flex rows overflow narrow screens. */
.content > * { min-width: 0; width: 100%; }

.article { max-width: 860px; width: 100%; margin: 0 auto; text-align: center; }
.article h1 { font-family: 'Jendral', 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: clamp(52px, 8vw, 84px); font-weight: 400; color: var(--blue); margin: 0 0 24px; }
.article p { font-size: 18px; line-height: 1.75; margin: 0 0 20px; }

/* Personalized note (personalized subsites only): a warm, tailored aside that
   addresses the recruit by name. Sits inside the .article column under the h1. */
.personal-note { background: #eef4f7; border-radius: 8px; padding: 26px 30px; margin: 4px auto 32px; text-align: left; max-width: 860px; }
.personal-note p { font-size: 18px; line-height: 1.7; margin: 0 0 14px; }
.personal-note p:last-child { margin-bottom: 0; }

/* ---------- Icon values row ---------- */
.icon-values { max-width: 1080px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 16px 24px 0; }
.icon-value { display: flex; flex-direction: column; align-items: center; text-align: center; }
.icon-value__badge { width: 110px; height: 110px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; overflow: hidden; }
.icon-value__badge img { width: 58px; height: 58px; object-fit: contain; display: block; }
.icon-value__badge--wide img { width: 66px; height: 46px; }
.icon-value__badge--transparent { background: none; }
.icon-value__badge--transparent img { width: 90px; height: 90px; }
.icon-value h3 { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 24px; font-weight: 800; color: var(--blue); margin: 0 0 16px; }
.icon-value p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; }
.icon-value p:last-child { margin-bottom: 0; }
.content-logo { display: flex; justify-content: center; padding: 72px 24px 8px; }
.content-logo img { max-width: 520px; width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .icon-values { grid-template-columns: 1fr; gap: 40px; }
}
.band-heading { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 28px; font-weight: 400; color: var(--blue); margin: 20px 0 20px; }
.story-band { background: #ffffff url('../images/cl_tribal-light-grey.png') center / cover no-repeat; padding: var(--gap-band) 24px; margin: 30px 0 40px; text-align: center; }
.story-band .band-heading { margin: 0; }
.story-band + .loc-apply, .story-band + .loc-cards, .story-band + .content { padding-top: 0; }
.content:has(+ .story-band) { padding-bottom: 0; }
.video-frame { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,83,116,0.18); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-full { aspect-ratio: 16 / 9; overflow: hidden; }
.video-full iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Newsletter ---------- */
.newsletter { background: #ffffff url('../images/cl_tribal-light-grey.png') center / cover no-repeat; padding: var(--gap-band) 24px; text-align: center; }
.newsletter h2 { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 30px; font-weight: 400; color: var(--blue); margin: 0 auto 28px; max-width: 760px; }
.newsletter__fineprint { font-size: 14px; color: var(--ink); margin: 28px 0 0; line-height: 2; }
.newsletter__fineprint a { color: #16608a; }

/* ---------- What we do ---------- */
.whatwedo { background: #ffffff; padding: var(--gap-band) 24px; text-align: center; }
.pillars { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(36px, 7vw, 90px); margin-bottom: 48px; }
.pillar { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pillar__icon { height: 72px; width: 72px; background-size: contain; background-position: center; background-repeat: no-repeat; }
.pillar--care .pillar__icon { background-image: url('../images/cl_icon-pillar-care.webp'); }
.pillar--connect .pillar__icon { background-image: url('../images/cl_icon-pillar-connect.png'); }
.pillar--serve .pillar__icon { background-image: url('../images/cl_icon-pillar-serve.png'); }
.pillar--build .pillar__icon { background-image: url('../images/cl_icon-pillar-build.webp'); }
.pillar__label { color: #000000; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.04em; }
.whatwedo h2 { font-family: 'Jendral', 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: clamp(48px, 7vw, 72px); font-weight: 400; color: var(--teal); margin: 0; }

/* ---------- Info cards ---------- */
.info-cards {
  border-top: 1px solid rgba(15,83,116,0.14);
  max-width: 1180px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; padding: 32px 24px;
}
@media (max-width: 380px) { .info-cards { grid-template-columns: 1fr; } }
.info-card { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 28px; }
.info-card img { width: 240px; flex-shrink: 0; height: auto; aspect-ratio: 536 / 644; display: block; border-radius: 4px; object-fit: cover; }
@media (max-width: 900px) { .info-card { flex-direction: column; align-items: flex-start; gap: 18px; } .info-card img { width: 220px; } }
.info-card__body { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.info-card h3 { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 24px; font-weight: 400; color: var(--blue); margin: 0; }
.info-card p { font-size: 15px; line-height: 1.7; margin: 0; }
.info-card__actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.info-card .btn { align-self: flex-start; }

/* ---------- Footer ---------- */
.site-footer { background: var(--teal); color: #eef7f6; padding: 44px 40px 40px; }
@media (max-width: 600px) { .site-footer { padding: 40px 22px 36px; } }
.site-footer__nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 32px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.18); margin-bottom: 44px;
}
.site-footer__nav a { color: #ffffff; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 0.08em; transition: color 0.2s ease; }
.site-footer__nav a:hover { color: #b9dbda; }
.footer-cols { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr 1.15fr; gap: 56px; }
@media (max-width: 1080px) { .footer-cols { gap: 36px; } }
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr; gap: 40px; } }
.footer-col h5 { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; color: #ffffff; font-size: 16px; font-weight: 400; margin: 0 0 18px; }
.footer-col p { font-size: 14px; line-height: 1.8; margin: 0 0 16px; }
.footer-col p:last-child { margin-bottom: 0; }
.footer-col strong { color: #ffffff; }
.footer-col a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.footer-col a:hover { color: #d7ebea; }
.footer-col img { max-width: 100%; height: auto; display: block; margin-bottom: 20px; }
.footer-col--legal p { font-size: 13px; margin: 0 0 14px; }
.socials { display: flex; gap: 10px; }
.social {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.14); color: #ffffff;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease;
}
.social:hover { background: rgba(255,255,255,0.3); }
.social::before {
  content: ''; width: 16px; height: 16px; background: #ffffff;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.social--facebook::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E"); }
.social--instagram::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E"); }
.social--youtube::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E"); }
.social--twitter::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z'/%3E%3C/svg%3E"); }
.social--pinterest::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath d='M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z'/%3E%3C/svg%3E"); }

/* ============================================================
   In-page forms (contact / apply / enquiry — sit inside .content)
   ============================================================ */
.form { max-width: 720px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 22px; text-align: left; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__label { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.form__label .form__opt { font-weight: 400; color: #64737a; font-size: 13px; }
.form__req { color: var(--teal); margin-left: 3px; }
.form__hint { font-size: 13.5px; line-height: 1.55; color: #6a787e; margin: -4px 0 0; }
.form__control {
  width: 100%; font-family: 'Pilcrow', 'Open Sans Fallback', Arial, sans-serif;
  font-size: 16px; color: var(--ink); background: #fbfcfd;
  border: 1.5px solid #d3dee2; border-radius: 8px; padding: 13px 15px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
textarea.form__control { resize: vertical; min-height: 128px; line-height: 1.6; }
select.form__control { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%237a8b91' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 16px; padding-right: 42px; }
/* button.form__control drives the custom dropdowns (Nationality, Enquiring about). Browsers
   apply their own appearance + shading to <button> that <input>/<textarea> never get, so
   without this reset a dropdown trigger can look subtly different from a text field at rest,
   on hover and while focused even though both share .form__control. */
button.form__control { appearance: none; -webkit-appearance: none; font: inherit; }
.form__control:focus, .form__control:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,83,116,0.12); background: #fff; }
.form__control::placeholder { color: #67767e; }
.form__field--invalid .form__control { border-color: #c0392b; }
.form__error { color: #c0392b; font-size: 13px; font-weight: 600; }
.form__checks { display: flex; flex-direction: column; gap: 12px; }
.form__check { display: flex; align-items: flex-start; gap: 11px; font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.form__check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); cursor: pointer; }
.form__actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.form__note { font-size: 13px; color: #5f7480; margin: 0; }

/* ============================================================
   Callout / notice — tinted message box (info · success · warning)
   ============================================================ */
.callout { max-width: 860px; margin: 24px auto; border: 1px solid #dbe6ea; border-radius: 6px; padding: 22px 26px; background: #f4f8fa; }
.callout__title { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 800; font-size: 17px; color: var(--blue); margin: 0 0 8px; }
.callout p { margin: 0 0 10px; font-size: 16px; line-height: 1.7; }
.callout p:last-child { margin-bottom: 0; }
.callout--info { background: #eef4f7; border-color: #cfe0e8; }
.callout--info .callout__title { color: var(--blue); }
.callout--success { background: #e6f2f0; border-color: #c2ddd8; }
.callout--success .callout__title { color: var(--teal); }
.callout--warning { background: #fdf6ec; border-color: #f0e2c6; }
.callout--warning .callout__title { color: #8a5e00; }

/* ============================================================
   Data table — reference/data tables (country lists, fee tables,
   schedules). Single consolidated definition: white-on-blue header,
   hairline rows, striping + row hover on by default.
   --split flows rows into 2 balanced columns on wide screens.
   .table-tools is the optional search + filter-chip bar above it.
   ============================================================ */
.table-wrap { max-width: 1080px; margin: 24px auto; padding: 0 24px; overflow-x: auto; }
.data-table { max-width: 1180px; width: 100%; margin: 0 auto; border-collapse: collapse; font-size: 16px; text-align: left; }
.data-table th { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 14px 20px; white-space: nowrap; }
.data-table td { font-size: 17px; padding: 11px 20px; border-bottom: 1px solid #e6edf1; vertical-align: top; line-height: 1.6; }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* Striping is now default; --striped is kept as a harmless alias for existing markup. */
.data-table tbody tr:nth-child(even), .data-table--striped tbody tr:nth-child(even) { background: #f6fafb; }
.data-table tbody tr:hover { background: #e8f1f5; }
.data-table th:last-child, .data-table td:last-child { text-align: right; width: 1%; white-space: nowrap; }
@media (min-width: 900px) {
  .data-table--split { display: block; column-count: 2; column-gap: 40px; }
  .data-table--split thead { display: none; }
  .data-table--split tbody { display: block; }
  .data-table--split tr { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; break-inside: avoid; }
  .data-table--split td { display: block; border-bottom: 1px solid #e6edf1; }
  .data-table--split td:last-child { width: auto; }
}
/* Optional search + filter-chip bar above a data table */
.table-tools { max-width: 1180px; margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.table-tools__search { flex: 0 1 340px; font-family: inherit; font-size: 17px; color: var(--ink); padding: 12px 18px; border: 1px solid #cdd9df; border-radius: 4px; background: #fff; }
.table-tools__search:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,83,116,0.12); }
.table-tools__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.table-tools__chip { font-family: inherit; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; padding: 11px 22px; border: 2px solid var(--blue); border-radius: 4px; background: #fff; color: var(--blue); transition: background 0.2s ease, color 0.2s ease; }
.table-tools__chip:hover, .table-tools__chip.is-active { background: var(--blue); color: #fff; }
/* Legend line above a data table, explaining its coded values */
.table-legend { max-width: 1180px; margin: 0 auto 20px; text-align: center; font-size: 16px; color: var(--ink); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
/* Category badge (A/B/C) used inside data-table cells */
.cat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 700; font-size: 14px; padding: 3px 10px; border-radius: 3px; color: #fff; background: var(--blue); }
.cat-badge--b { background: var(--teal); }
.cat-badge--c { background: #4f6a78; }

/* ============================================================
   Pull-quote — large display quote inside article flow
   ============================================================ */
.pullquote { max-width: 780px; margin: 36px auto; text-align: center; border: 0; padding: 0; }
.pullquote p { font-family: 'Jendral', 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 400; font-size: clamp(36px, 6vw, 65px); line-height: 1.3; color: var(--blue); margin: 0; }
.pullquote__cite { display: block; margin-top: 16px; font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal); font-style: normal; }

/* ============================================================
   Added July 2026 — generic components
   ============================================================ */

/* .logo-wall — evenly spaced grid of partner/member logos on white, contain-fitted
   so no logo is cropped or stretched. 6 across by default. */
.logo-wall { max-width: 1180px; margin: 40px auto; padding: 0 24px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 34px; align-items: center; }
.logo-wall--cols-4 { grid-template-columns: repeat(4, 1fr); }
.logo-wall--cols-5 { grid-template-columns: repeat(5, 1fr); }
.logo-wall__item { display: flex; align-items: center; justify-content: center; height: 92px; }
.logo-wall img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.logo-wall a.logo-wall__item[href] { transition: opacity 0.2s ease; }
.logo-wall a.logo-wall__item[href]:hover { opacity: 0.7; }
@media (max-width: 1000px) { .logo-wall, .logo-wall--cols-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .logo-wall, .logo-wall--cols-4, .logo-wall--cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .logo-wall, .logo-wall--cols-4, .logo-wall--cols-5 { grid-template-columns: repeat(2, 1fr); } .logo-wall__item { height: 74px; } }

/* .roster — grid of names + roles with no photos (advisors, committees, credits). */
.roster { max-width: 1080px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 34px; }
.roster--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.roster__name { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; color: var(--blue); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.roster__role { font-size: 16px; line-height: 1.6; margin: 0; color: var(--ink); }
@media (max-width: 860px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roster, .roster--cols-2 { grid-template-columns: 1fr; } }

/* .photo-ring — circular photo with white inner padding and a hairline brand ring. */
.photo-ring { border-radius: 50%; border: 1px solid var(--blue); padding: 5px; background: #ffffff; }

/* ============================================================
   Added 29 July 2026 — generic components
   ============================================================ */

/* .media — global photo sizing for images inside cards, feature rows and grids.
   Replaces the per-page inline width/aspect-ratio/object-fit styles. Pick an aspect
   modifier; the radius adapts to the component the image sits in (4px in cards,
   6px elsewhere). Never inline photo sizing on a page again. */
.media { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 6px; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x4 { aspect-ratio: 3 / 4; }
.media--400x284 { aspect-ratio: 400 / 284; }
.media--portrait { aspect-ratio: 536 / 644; }
/* .media--contain — logos/graphics that must not be cropped. */
.media--contain { object-fit: contain; }
.text-card > img.media, .loc-card img.media, .cta-card img.media { border-radius: 4px; }

/* Guards: .media is a single-class utility, so it silently beats any component rule
   that sets the same property with equal specificity and sits earlier in this sheet.
   Keep this list next to .media and extend it whenever a new image rule is added.
   Audited 29 Jul 2026 — these already out-specify .media (class + type) and need no
   guard: .photo-grid img, .loc-card/.cta-card img, .info-card img, .article__figure img,
   .stat-callout__badge img, .icon-value__badge img, .footer-col img, .site-header__logo img.
   Note their fixed aspect-ratios also win over .media--* inside those components — that
   is intended; use .media on plain content images, not to reshape a card photo. */
img.photo-ring, .photo-ring.media { border-radius: 50%; }
.logo-wall img.media { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* Images inside a .feature-row (with or without the __media wrapper) are always
   full-width with the standard 6px radius. */
.feature-row__media > img, .feature-row > img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* .video-grid — grid of labelled video embeds (blue label above each 16:9 .video-frame).
   Use when a section presents several named videos; 2 across by default. */
.video-grid { max-width: 1180px; margin: 0 auto; padding: var(--gap-band) 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 32px; }
.video-grid--cols-1 { grid-template-columns: 1fr; max-width: 900px; }
.video-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.video-grid__label { font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 20px; font-weight: 800; color: var(--blue); margin: 0 0 14px; text-align: center; text-wrap: pretty; }
.story-band + .video-grid { padding-top: 0; }
.video-grid:has(+ .story-band) { padding-bottom: 0; }
@media (max-width: 900px) { .video-grid, .video-grid--cols-3 { grid-template-columns: 1fr; } }

/* .link-grid — grid of document/download text links (resource libraries, manuals,
   policy lists). Solid blue tiles that invert on hover, matching the filled button. */
.link-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px var(--gap-after-grid); display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.link-grid--cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.link-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.link-grid__item { display: flex; align-items: center; min-height: 64px; padding: 16px 22px; border: 2px solid var(--blue); border-radius: 4px; background: var(--blue); font-family: 'Pilcrow', 'Montserrat Fallback', Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.45; text-wrap: pretty; color: #fff; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.link-grid__item:hover { background: #fff; color: var(--blue); }
.story-band + .link-grid { padding-top: 0; }
@media (max-width: 700px) { .link-grid, .link-grid--cols-2, .link-grid--cols-3 { grid-template-columns: 1fr; } }

/* ---------- New modifiers on existing components ---------- */

/* .info-grid--cols-5 — locks the card grid to 5 columns; collapses to 3 then 2. */
.info-grid--cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .info-grid--cols-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .info-grid--cols-5 { grid-template-columns: repeat(2, 1fr); } }

/* .info-grid--heads-2 — reserves two lines for every card heading so the copy below
   all cards starts on the same baseline, whatever the title length. */
.info-grid--heads-2 .text-card h3 { line-height: 1.3; min-height: calc(2 * 1.3em + 13px); }
@media (max-width: 700px) { .info-grid--heads-2 .text-card h3 { min-height: 0; } }

/* CTA/loc cards: a single centered card (one photo + button pair) */
.loc-cards--cols-1, .cta-cards--cols-1 { grid-template-columns: minmax(0, 420px); max-width: 420px; justify-content: center; }
/* CTA/loc cards: two centered, wider cards */
.loc-cards--cols-2, .cta-cards--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; justify-content: center; }
@media (max-width: 700px) { .loc-cards--cols-2, .cta-cards--cols-2 { grid-template-columns: 1fr; max-width: 420px; } }
/* 5-card CTA grid: 3 across, trailing row of 2 centered */
.cta-cards--center-last { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cta-cards--center-last > * { grid-column: span 2; }
.cta-cards--center-last > *:nth-child(4) { grid-column: 2 / span 2; }
@media (max-width: 860px) { .cta-cards--center-last { grid-template-columns: 1fr; max-width: 420px; } .cta-cards--center-last > *, .cta-cards--center-last > *:nth-child(4) { grid-column: auto; } }

/* .stat-callout--panel — tinted card behind a compact stat, for a set of callouts. */
.stat-callout--panel { background: #f4f8fa; border-radius: 6px; padding: 20px 16px; }
/* .stat-callout--compact — tighter stat for a row of several figures inside a grid. */
.stat-callout--compact { margin-bottom: 0; }
.stat-callout--compact .stat-callout__amount { font-size: 26px; }

/* .form__actions--center — centers a form's submit row, matching .cta-row. */
.form__actions--center { justify-content: center; }
/* .article p (higher specificity, declared later) was giving the note a 20px
   bottom margin, so align-items:center parked it ~10px above the button's
   centre line. Zero it at matching specificity. */
.article p.form__note, .form p.form__note { margin: 0; }

/* Two-column disc list for long simple lists inside .article */
.article ul.list-cols-2 { columns: 2; column-gap: 48px; max-width: 760px; }
.article ul.list-cols-2 li { break-inside: avoid; }
@media (max-width: 560px) { .article ul.list-cols-2 { columns: 1; } }

/* ---------- Component fixes ---------- */

/* .article p (higher specificity) was zeroing .footnote's auto side margins, so the
   640px footnote sat left instead of centered. */
.article p.footnote { margin: 24px auto 0; }

/* A .cta-row inside a card needs its own top gap (the .article .cta-row rule doesn't
   reach it) and bottom-aligns so buttons line up across a grid row. */
.text-card:has(> .cta-row), .loc-card:has(> .cta-row) { display: flex; flex-direction: column; }
.text-card > .cta-row, .loc-card > .cta-row { margin-top: auto; padding-top: 18px; }

/* ============================================================
   YWAM Ships design system — additions to append to assets/styles.css
   Prepared 31 July 2026 from the live site's assets/site.css.
   ADDITIVE: paste this whole block at the END of assets/styles.css.
   Two things must ALSO be edited in place first — see the brief
   (design-system-sync-2026-07-31.md), section "1. Edits in place".
   ============================================================ */

/* ------------------------------------------------------------
   1. Accessibility foundations (Lighthouse a11y 100)
   ------------------------------------------------------------ */

/* Visually-hidden text that stays available to screen readers. Used for the
   skip link and for headings carried visually by imagery (e.g. a hero). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Skip-to-content link: hidden until focused, then pinned top-left.
   Pages put it as the first child of <body>, pointing at <main id="main-content">. */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  padding: 10px 18px; background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border-radius: 0 0 4px 4px; transition: top .15s ease;
}
.skip-link:focus { top: 0; }

/* Keyboard focus was invisible on every link and button outside forms.
   :focus-visible keeps mouse clicks clean. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0f5374;
  outline-offset: 2px;
  border-radius: 2px;
}
/* On the teal footer / blue bands a dark outline disappears — go light. */
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.top-bar a:focus-visible,
.top-bar button:focus-visible,
.story-band a:focus-visible,
.btn--primary:focus-visible,
.btn--cta:focus-visible {
  outline-color: #ffffff;
  outline-offset: 3px;
}

/* Respect the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .post-card:hover .post-card__media img,
  .cta-card a:not(.btn):hover img,
  .loc-card a:not(.btn):hover img { transform: none !important; }
}

img { max-width: 100%; }

/* Tap targets (WCAG 2.2 AA): the slider dots were 9px hit areas 8px apart.
   Keep the 9px visual dot, grow the button to a 24px target.
   ⚠ Delete the older `.slider-dot` / `.slider-dot.is-active` rules further up
   the sheet when pasting this in. */
.slider-dots { gap: 0; }
.slider-dot {
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.slider-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: #cfd9de;
}
.slider-dot.is-active { background: transparent; }
.slider-dot.is-active::before { background: var(--blue); }

/* Links inside body copy carried colour as their only cue (2.6:1 against the
   surrounding text). Underline them; buttons and the .jump-links nav row are
   excluded because those read as controls. */
.article p:not(.jump-links) a:not(.btn),
.text-card p:not(.jump-links) a:not(.btn),
.feature-row p:not(.jump-links) a:not(.btn),
.footnote a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Round avatar crop lives here so no page has to inline it. */
img.testimonial-avatar { display: block; border-radius: 50%; object-fit: cover; }

/* ------------------------------------------------------------
   2. CLS: reserve shared-component space before hydration
   ------------------------------------------------------------
   <dc-import> is an unknown element at first paint (0px tall), so the header
   mounted late and pushed <main> down ~157px — desktop CLS 0.378 on its own.
   :empty scopes the reservation to the pre-mount state, so it leaves no
   whitespace once the real header renders. Any shared component imported
   ABOVE THE FOLD needs an equivalent rule; hint-size can't help, JS hasn't run. */
dc-import[name="Header"]:empty,
.sc-host[data-sc-name="Header"]:empty { display: block; min-height: 157px; }

/* ------------------------------------------------------------
   3. Click-to-play video facades
   ------------------------------------------------------------
   A live YouTube iframe costs ~1 MB of third-party script and blocks
   back/forward cache, so .video-frame / .video-full now hold a poster +
   play button and a small script swaps in the real player on click.
   Nothing about .video-frame / .video-full itself changes. */
.video-facade {
  position: relative;
  width: 100%; height: 100%;
  padding: 0; margin: 0; border: 0;
  background: #0b2733;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.video-facade img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .4s ease, opacity .25s ease;
}
.video-facade:hover img { transform: scale(1.03); opacity: .9; }

/* Play button: a rounded blue lozenge with a CSS triangle — no SVG, no icon
   font, so it costs nothing and can't fail to load. */
.video-facade__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 54px;
  border-radius: 12px;
  background: rgba(15, 83, 116, .88);
  display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
  pointer-events: none;
}
.video-facade__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.video-facade:hover .video-facade__play,
.video-facade:focus-visible .video-facade__play {
  background: #0f5374;
  transform: translate(-50%, -50%) scale(1.06);
}
.video-facade:focus-visible { outline: 3px solid #0f5374; outline-offset: 2px; }

/* --plain: for embeds whose URL is built at runtime (no self-hosted poster) —
   a titled brand panel stands in for the still. */
.video-facade--plain { background: #0f5374; display: grid; place-items: center; }
.video-facade--plain .video-facade__play {
  position: static; transform: none;
  background: rgba(255, 255, 255, .16);
  border: 2px solid rgba(255, 255, 255, .7);
}
.video-facade--plain:hover .video-facade__play,
.video-facade--plain:focus-visible .video-facade__play {
  transform: scale(1.06); background: rgba(255, 255, 255, .28);
}
.video-facade__label {
  position: absolute; left: 0; right: 0; bottom: 22px;
  color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {
  .video-facade:hover img { transform: none; }
}

/* ------------------------------------------------------------
   4. Mobile / tablet fixes (responsive audit, 390px & 820px)
   ------------------------------------------------------------ */

/* Sibling strips wrap into a long list of 14px links on phones, giving 16px-tall
   tap targets. Trade the big row-gap for per-link vertical padding so each link
   is ~38px tall and still ~40px apart. */
@media (max-width: 700px) {
  .about-nav { row-gap: 2px; column-gap: 18px; }
  .about-nav__link { padding: 10px 0; }
  .about-nav__title { padding-bottom: 4px; }
}

/* The mobile menu is ~1300px tall on a phone (every section + sublinks), so the
   bottom items sat far below the fold. Let the panel scroll inside the viewport. */
@media (max-width: 1060px) {
  .mobile-menu { max-height: calc(100dvh - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}

/* Touch devices can't hover, so a hover-zoom sticks after a tap. */
@media (hover: none) {
  .post-card:hover .post-card__media img,
  .cta-card a:not(.btn):hover img,
  .loc-card a:not(.btn):hover img { transform: none; }
}

/* ------------------------------------------------------------
   5. New generic components
   ------------------------------------------------------------ */

/* .post-grid / .post-card — dated-article listing cards (photo + headline +
   date + excerpt); the whole card is one link. Generic: reuse for any
   news/blog/story feed. */
.post-grid { max-width: 1180px; margin: 0 auto; padding: 0 24px var(--gap-after-grid); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 36px; }
.post-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; } }
@media (max-width: 600px) { .post-grid, .post-grid--cols-2 { grid-template-columns: 1fr; max-width: 460px; } }
.post-card { display: flex; flex-direction: column; text-align: left; text-decoration: none; color: inherit; }
.post-card:hover { text-decoration: none; }
.post-card__media { display: block; width: 100%; overflow: hidden; border-radius: 4px; background: #eef2f5; }
.post-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.4s ease; }
/* Placeholder so a post with no featured image keeps its row's baseline. */
.post-card__media-empty { display: block; width: 100%; aspect-ratio: 3 / 2; background: #eef2f5; }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__title { margin: 18px 0 0; font-family: 'Pilcrow', 'Open Sans Fallback', Arial, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ink); text-wrap: pretty; transition: color 0.2s ease; }
.post-card:hover .post-card__title { color: var(--blue); }
.post-card__date { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue); }
.post-card__excerpt { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: #5b6b74; text-wrap: pretty; }

/* .pager — numbered pagination for any paginated listing. */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 24px var(--gap-cta); }
.pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid #d7e0e3; border-radius: 4px; background: #fff; color: var(--blue); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.pager__btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }
.pager__btn--active { background: var(--blue); border-color: var(--blue); color: #fff; }
.pager__btn:disabled { opacity: 0.4; cursor: default; }
.pager__gap { padding: 0 4px; color: #64737a; }   /* AA-corrected (was #9aa8b0, 2.7:1) */
.pager__count { width: 100%; text-align: center; margin: 0 0 14px; font-size: 14px; color: #5b6b74; }

/* .article--news — long-form prose modifier for .article: articles read
   left-aligned with a sentence-scale headline, unlike the centered marketing
   pages. Everything below is generic to long-form, not to one site section. */
.article--news { text-align: left; }
.article--news h1 { font-family: 'Pilcrow', 'Open Sans Fallback', Arial, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.2; margin-bottom: 14px; }
.article--news ul, .article--news ol { max-width: none; margin-left: 0; margin-right: 0; }
.article--news ol { list-style: decimal; }
.article--news p.footnote { max-width: none; margin: 32px 0 0; padding-top: 20px; border-top: 1px solid #e2e8ec; font-size: 15px; line-height: 1.7; color: #5b6b74; text-align: left; }
.article--news .article__figure { margin-bottom: 32px; }

/* Published-date line under a headline */
.news-meta { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); font-weight: 700; margin: 0 0 28px; }
.article--news p.news-meta { font-size: 14px; margin: 0 0 28px; }

/* .news-topbar — date on the left, Newer/Older story links on the right. */
.news-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 0 0 28px; }
.news-topbar .news-meta, .article--news .news-topbar p.news-meta { margin: 0; }
.news-pager { display: flex; gap: 24px; flex-wrap: wrap; }
.news-pager__link { font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--blue); padding-bottom: 2px; }
.news-pager__link[rel="next"]::before { content: "\2190"; display: inline-block; margin-right: 8px; transition: transform 0.18s ease; }
.news-pager__link[rel="prev"]::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform 0.18s ease; }
.news-pager__link[rel="next"]:hover::before { transform: translateX(-4px); }
.news-pager__link[rel="prev"]:hover::after { transform: translateX(4px); }
@media (max-width: 560px) { .news-topbar { gap: 12px; } .news-pager { width: 100%; justify-content: space-between; } }

/* Caption directly below an .article__figure image (generic, reusable). */
.article__caption, .article p.article__caption { max-width: 860px; margin: 0 auto 24px; font-size: 14px; font-style: italic; color: var(--ink); text-align: center; }
.article--news p.article__caption { text-align: left; }

/* Pull-quote inside long-form prose (smaller sibling of .pullquote). */
.news-quote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--blue); font-size: 21px; line-height: 1.6; font-style: italic; color: var(--blue); }
.news-quote p { margin: 0; font-size: inherit; line-height: inherit; }

/* Loading skeleton for content fetched after first paint. */
.news-skeleton { display: flex; flex-direction: column; gap: 16px; padding: 8px 0 40px; min-height: 1200px; }
.news-skeleton span { display: block; height: 22px; border-radius: 4px; background: #eef2f5; animation: news-pulse 1.4s ease-in-out infinite; }
.news-skeleton span:nth-child(1) { height: 52px; width: 78%; }
.news-skeleton span:nth-child(2) { width: 30%; height: 16px; }
.news-skeleton span:nth-child(3) { height: 280px; }
.news-skeleton span:nth-child(4) { width: 96%; }
.news-skeleton span:nth-child(5) { width: 88%; }
@keyframes news-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* .footer-legal-bar — copyright line + reference links at the very bottom of
   the footer. Sits inside .site-footer, so it inherits the teal ground. */
.footer-legal-bar {
  max-width: 1180px; margin: 36px auto 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px;
  font-size: 13px; letter-spacing: 0.04em;
}
.footer-legal-bar a { color: #eef7f6; text-decoration: underline; }   /* AA-corrected on teal */
.footer-legal-bar a:hover { color: #ffffff; }

/* ------------------------------------------------------------
   6. New modifiers on existing components
   ------------------------------------------------------------ */

/* .band-sub — a centered supporting line under a .band-heading in .story-band. */
.story-band .band-sub { max-width: 720px; margin: 10px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink); }

/* Per-card photo aspect modifiers for .cta-card / .loc-card (default is 4/5). */
.cta-card--3x2 img, .loc-card--3x2 img { aspect-ratio: 3 / 2; }
.cta-card--1x1 img, .loc-card--1x1 img { aspect-ratio: 1 / 1; }
.cta-card--16x9 img, .loc-card--16x9 img { aspect-ratio: 16 / 9; }

/* 7-card CTA grid: a row of 3 then a row of 4, both full grid width
   (12-col base: the 3-up cards span 4 tracks, the 4-up cards span 3). */
.cta-cards--3-then-4 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.cta-cards--3-then-4 > *:nth-child(-n+3) { grid-column: span 4; }
.cta-cards--3-then-4 > *:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 860px) { .cta-cards--3-then-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; } .cta-cards--3-then-4 > *:nth-child(-n+3), .cta-cards--3-then-4 > *:nth-child(n+4) { grid-column: auto; } }
@media (max-width: 440px) { .cta-cards--3-then-4 { grid-template-columns: 1fr; max-width: 420px; } }