/* =============================================================
   Bluewater Maritime Partners
   Built from bluewater-desktop.psd (1920 × 4333 @1x)

   Contents
   01. Tokens
   02. Base
   03. Slick core (vendored so the page needs no extra stylesheet)
   04. Elements ....... .btn-gold .rule .eyebrow .section-title .prose
   05. site-header
   06. hero
   07. band  (+ --light --navy --statement --features)
   08. split
   09. feature / features carousel
   10. promo + showmark
   11. cta
   12. site-footer
   13. Responsive
   ============================================================= */


/* 01. TOKENS ================================================== */

:root {
  /* palette — sampled from the PSD */
  --bw-navy:        #012342;
  --bw-navy-deep:   #011a31;
  --bw-gold:        #E0B36D;   /* buttons */
  --bw-gold-hover:  #d2a257;
  --bw-rule:        #C69A55;   /* hairlines, eyebrow */
  --bw-bronze:      #6F440E;   /* hero second line */
  --bw-white:       #ffffff;

  /* type */
  --bw-font: "Noto Serif", Georgia, "Times New Roman", serif;
  --bw-w-medium:   500;
  --bw-w-semi:     600;
  --bw-w-bold:     700;

  --fs-h1:         clamp(2.5rem, 4.70vw, 5.625rem);   /* 40 → 90 */
  --fs-hero-sub:   clamp(1.5rem, 2.60vw, 3.125rem);   /* 24 → 50 */
  --fs-hero-tag:   clamp(1.125rem, 1.88vw, 2.25rem);  /* 18 → 36 */
  --fs-statement:  clamp(1.25rem, 1.56vw, 1.875rem);  /* 20 → 30 */
  --fs-title:      clamp(1.625rem, 1.88vw, 2.25rem);  /* 26 → 36 */
  --fs-lead:       clamp(1rem, 1.13vw, 1.125rem);     /* 16 → 18 */
  --fs-body:       clamp(0.9375rem, 0.90vw, 0.9375rem);
  --fs-eyebrow:    0.9375rem;

  /* layout */
  --bw-shell:      1488px;    /* content measure from the PSD */
  --bw-shell-wide: 1600px;    /* hero only */
  --bw-gutter:     24px;
  --bw-header-h:   80px;
  --bw-pill:       999px;

  --ease: cubic-bezier(.22,.61,.36,1);
}


/* 02. BASE ==================================================== */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bw-white);
  color: var(--bw-navy);
  font-family: var(--bw-font);
  font-weight: var(--bw-w-medium);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, p { margin: 0; }

/* Bootstrap container, widened to the PSD measure */
.container {
  width: 100%;
  max-width: var(--bw-shell);
  margin-inline: auto;
  padding-inline: var(--bw-gutter);
}
@media (min-width: 1400px) {
  .container, .container-xxl, .container-xl,
  .container-lg, .container-md, .container-sm { max-width: var(--bw-shell); }
}

:focus-visible {
  outline: 2px solid var(--bw-gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--bw-gold); color: var(--bw-navy);
  padding: 10px 18px; font-weight: var(--bw-w-semi);
}
.skip-link:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* 03. SLICK CORE ============================================== */
/* Vendored from slick-carousel 1.8.1 (slick.css). The themed
   arrows/dots live in section 09 so no second stylesheet is needed. */

.slick-slider {
  position: relative; display: block; box-sizing: border-box;
  -webkit-touch-callout: none; user-select: none;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; }
.slick-slider .slick-track,
.slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track {
  position: relative; top: 0; left: 0; display: block;
  margin-left: auto; margin-right: auto;
}
.slick-track::before, .slick-track::after { display: table; content: ''; }
.slick-track::after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }


/* 04. ELEMENTS ================================================ */

/* --- .btn-gold ------------------------------------------------ */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 6px 26px;
  border: 0;
  border-radius: var(--bw-pill);
  background: var(--bw-gold);
  color: var(--bw-navy);
  font-family: var(--bw-font);
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-semi);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.btn-gold:hover,
.btn-gold:focus-visible { background: var(--bw-gold-hover); color: var(--bw-navy); }
.btn-gold:active { transform: translateY(1px); }

/* wide variant — the PSD pads these buttons well past the label */
.btn-gold--wide { padding-inline: 58px; text-transform: uppercase; }

/* --- .rule ---------------------------------------------------- */
.rule {
  display: block;
  width: 341px;
  max-width: 100%;
  height: 2px;
  background: var(--bw-rule);
  border: 0;
}
.rule--center { margin-inline: auto; }
.rule--short   { width: 93px; }

/* --- .eyebrow -------------------------------------------------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--bw-w-bold);
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--bw-rule);
}

/* --- .section-title -------------------------------------------- */
.section-title {
  font-size: var(--fs-title);
  font-weight: var(--bw-w-bold);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bw-navy);
}
.section-title--lg { line-height: 1.39; max-width: 690px; }

/* --- .prose ---------------------------------------------------- */
.prose p { margin-bottom: 1.6em; }
.prose p:last-child { margin-bottom: 0; }
.prose__lead { font-weight: var(--bw-w-bold); }


/* 05. SITE HEADER ============================================= */

.site-header {
  position: relative;
  z-index: 50;
  background: var(--bw-navy);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--bw-header-h);
}

.site-nav__brand img { width: 212px; height: auto; }

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 52px;
  margin-left: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  color: var(--bw-white);
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-semi);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--bw-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav__link:hover::after,
.site-nav__link:focus-visible::after { transform: scaleX(1); }

/* burger */
.site-nav__toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  cursor: pointer;
}
.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--bw-white);
  transition: transform .3s var(--ease), opacity .2s linear;
}
.site-nav__bars::before,
.site-nav__bars::after { content: ''; position: relative; }
.site-nav__bars::before { top: -6px; }
.site-nav__bars::after  { top: 4px; }

.is-open .site-nav__bars { background: transparent; }
.is-open .site-nav__bars::before { transform: translateY(6px) rotate(45deg); }
.is-open .site-nav__bars::after  { transform: translateY(-4px) rotate(-45deg); }


/* 06. HERO ==================================================== */

.hero { position: relative; background: var(--bw-navy); }

/* the PSD lets the hero copy sit further right than the body shell */
.hero .container { max-width: var(--bw-shell-wide); }

.hero__slide {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 881px;
  padding-block: 74px 60px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__slide > .container { position: relative; z-index: 1; }

.hero__content {
  max-width: 790px;
  margin-left: auto;
  text-align: center;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--bw-w-bold);
  line-height: 1.205;          /* Photoshop auto-leading */
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bw-navy);
}

.hero__subtitle {
  margin-top: .26em;
  font-size: var(--fs-hero-sub);
  font-weight: var(--bw-w-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--bw-bronze);
}

.hero__rule { margin-top: 24px; }

.hero__tagline {
  margin-top: 16px;
  font-size: var(--fs-hero-tag);
  font-weight: var(--bw-w-semi);
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--bw-navy);
}


/* 07. BAND ==================================================== */

.band { padding-block: clamp(52px, 5.99vw, 115px) clamp(56px, 6.98vw, 134px); }

.band--light { background: var(--bw-white); }

.band--navy {
  background: var(--bw-navy);
  color: var(--bw-white);
  padding-block: clamp(44px, 3.07vw, 59px) clamp(50px, 3.49vw, 67px);
}

.band__title {
  font-size: var(--fs-title);
  font-weight: var(--bw-w-bold);
  line-height: 1.2;
  text-align: center;
  color: var(--bw-white);
}

/* --- band--statement ------------------------------------------ */
.statement {
  max-width: 800px;
  margin-inline: auto;
  font-size: var(--fs-statement);
  font-weight: var(--bw-w-semi);
  line-height: 1.67;
  text-align: center;
  text-transform: uppercase;
}


/* 08. SPLIT =================================================== */

.split {
  display: flex;
  align-items: stretch;
  background: var(--bw-white);
}

.split__media { flex: 0 0 50%; max-width: 50%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body {
  flex: 1 1 50%;
  display: flex;
  padding: 173px 40px 60px 200px;
}

.split__inner { max-width: 460px; }

.split__inner .section-title { margin-top: 18px; }
.split__inner .prose { margin-top: 65px; }

/* flip the media to the right */
.split--reverse { flex-direction: row-reverse; }
.split--reverse .split__body { padding: 178px 200px 60px 40px; }
.split--reverse .split__inner { margin-left: auto; }


/* 09. FEATURES ================================================ */

.band--features .band__title { margin-bottom: 86px; }

/* Pre-init / no-JS fallback: the row lays out without Slick, then Slick
   takes over the same markup once it initialises. */
.features { display: flex; flex-wrap: wrap; }
.features > .feature { flex: 1 1 25%; }
.features.slick-initialized { display: block; }
.features.slick-initialized > .feature { flex: none; }
.features .slick-track { display: flex; }
.features .slick-slide { height: auto; }

.feature {
  padding-inline: 16px;
  text-align: center;
}

.feature__icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 107px;
  margin-bottom: 22px;
}
.feature__icon img { width: auto; max-height: 107px; }

.feature__title,
.feature__text { max-width: 280px; margin-inline: auto; }

.feature__title {
  margin-bottom: 24px;
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-bold);
  line-height: 1.33;
  text-transform: uppercase;
  color: var(--bw-white);
}

.feature__text {
  font-size: var(--fs-body);
  font-weight: var(--bw-w-medium);
  line-height: 1.6;
  color: var(--bw-white);
}

/* slider chrome — shared by every .js-slider on the page */
.slick-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.slick-dots li { line-height: 0; }
.slick-dots:has(> li:only-child) { display: none; }
.slick-dots li:only-child { display: none; }
.slick-dots button {
  width: 9px; height: 9px;
  padding: 0;
  border: 1px solid var(--bw-gold);
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .25s var(--ease);
}
.slick-dots .slick-active button { background: var(--bw-gold); }

.hero .slick-dots { position: absolute; left: 0; right: 0; bottom: 34px; margin: 0; }


/* 10. PROMO =================================================== */

.promo {
  position: relative;
  padding-block: clamp(60px, 9.79vw, 188px) clamp(64px, 12.97vw, 249px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.promo > .container { position: relative; z-index: 1; }

.promo__content { max-width: 690px; }

.promo__content .prose { margin-top: 39px; }
.promo__cta   { margin-top: 46px; }
.promo__rule  { width: 581px; margin-top: 57px; }

.promo__dates {
  margin-top: 15px;
  font-weight: var(--bw-w-medium);
  text-transform: uppercase;
}

/* --- showmark: the FL Boat Show lockup -------------------------
   .showmark__logo (FL + show name) is the brand mark and stays
   intact at every width; only the pillar list re-flows. */
.showmark {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 55px;
  color: var(--bw-navy);
}
.showmark__logo {
  display: flex;
  align-items: center;
  gap: 17px;
}
.showmark__abbr {
  font-size: clamp(3rem, 3.9vw, 4.6875rem);   /* 48 → 75 */
  font-weight: var(--bw-w-bold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.showmark__divider {
  flex: none;
  align-self: center;
  width: 1px;
  height: 63px;
  background: var(--bw-navy);
}
.showmark__name,
.showmark__pillars {
  font-size: var(--fs-body);
  font-weight: var(--bw-w-medium);
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.showmark__name strong {
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-bold);
}
.showmark__pillars { margin: 0; padding: 0; list-style: none; }


/* 11. CTA ===================================================== */

.cta {
  /* Symmetrical. The PSD had a much deeper bottom (up to 160px) because the
     section ended on a button with nothing beneath it; now that it can hold a
     form and a footnote, the lopsided gap read as a mistake. */
  padding-block: clamp(50px, 4.01vw, 77px);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--bw-white);
  text-align: center;
}

.cta__content { max-width: 720px; margin-inline: auto; }

.cta__title {
  font-size: var(--fs-title);
  font-weight: var(--bw-w-bold);
  line-height: 1.2;
  text-transform: uppercase;
}

.cta__text {
  margin-top: 40px;
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-bold);
  line-height: 1.33;
}

.cta .btn-gold { margin-top: 57px; }


/* 12. SITE FOOTER ============================================= */

.site-footer {
  background: var(--bw-navy);
  color: var(--bw-white);
}

.site-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 126px;
}

.site-footer__brand img { width: 212px; }

.site-footer__strap {
  font-size: 1rem;
  font-weight: var(--bw-w-bold);
  text-transform: uppercase;
  text-align: center;
}

.site-footer__location {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-semi);
  white-space: nowrap;
}


/* 13. RESPONSIVE ============================================== */

/* The PSD bakes a white fade into the hero and boat-show photos that
   only reads at desktop proportions. Below that the crop tightens, so
   the same job is done with a scrim instead. */
.hero__slide::before,
.promo::before { content: none; }

@media (max-width: 1399.98px) {
  .hero__slide { min-height: max(600px, 45.9vw); }
  .split__body { padding: clamp(48px, 9vw, 173px) 32px 48px clamp(40px, 10.4vw, 200px); }
  .promo__rule { width: 100%; max-width: 581px; }
}

@media (max-width: 1199.98px) {
  :root { --bw-gutter: 20px; }

  /* header → off-canvas panel */
  .site-nav { position: relative; }
  .site-nav__toggle { display: block; }
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin: 0;
    padding: 24px var(--bw-gutter) 30px;
    background: var(--bw-navy-deep);
    border-top: 1px solid rgba(255,255,255,.12);
    display: none;
  }
  .site-header.is-open .site-nav__menu { display: flex; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 18px; }

  .hero__slide::before,
  .promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 42%,
      rgba(255,255,255,.18) 78%,
      rgba(255,255,255,0) 100%);
  }

  .hero__slide { background-position: 32% center; }
  .hero__content { max-width: 640px; margin-left: 0; text-align: left; }
  .hero__rule { margin-inline: 0; }

  .promo { background-position: 76% center; }
  .promo__content { max-width: 620px; }
}

@media (max-width: 991.98px) {
  .hero__slide {
    min-height: 0;
    padding-block: 64px 72px;
  }

  /* split → stacked */
  .split, .split--reverse { flex-direction: column; }
  .split__media, .split--reverse .split__media { flex: none; max-width: none; width: 100%; }
  .split__media img { aspect-ratio: 4 / 3; }
  .split__body,
  .split--reverse .split__body {
    padding: 56px var(--bw-gutter) 64px;
    justify-content: flex-start;
  }
  .split__inner, .split--reverse .split__inner { max-width: 620px; margin-inline: 0; }
  .split__inner .prose { margin-top: 36px; }

  .band--features .band__title { margin-bottom: 52px; }

  .promo__content .prose { margin-top: 28px; }

  .showmark { margin-top: 44px; }

  .cta__text { margin-top: 32px; }
  .cta .btn-gold { margin-top: 40px; }

  /* footer → stacked and centred */
  .site-footer__row {
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    padding-block: 42px;
  }
  .site-footer__location { justify-content: center; }
}

@media (max-width: 767.98px) {
  :root { --fs-body: 1rem; }

  .hero__slide::before {
    background: linear-gradient(to bottom,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.86) 48%,
      rgba(255,255,255,.30) 100%);
  }
  .promo::before { background: rgba(255,255,255,.90); }

  .hero__slide { padding-block: 52px 60px; background-position: 38% center; }
  .hero__content { max-width: none; }
  .hero__rule { margin-top: 20px; }
  .hero__tagline { margin-top: 14px; }

  /* copy blocks centre up once the columns collapse */
  .hero__content,
  .split__inner,
  .promo__content {
    margin-inline: auto;
    text-align: center;
  }
  .hero__rule,
  .promo__rule { margin-inline: auto; }
  .showmark { justify-content: center; }
  .promo__cta { align-self: center; }
  .promo__content { display: flex; flex-direction: column; }

  .statement { line-height: 1.5; }

  /* the PSD's hard line breaks fight a narrow measure — let these wrap */
  .statement br,
  .feature__text br,
  .cta__text br { display: none; }

  .btn-gold--wide { padding-inline: 28px; }

  .promo { background-position: center center; }
  .promo__rule { margin-top: 40px; }
  .showmark { margin-top: 36px; }
}

/* Below this the horizontal lockup runs out of room. The mark stacks:
   FL + show name stay together, the vertical rule between mark and
   pillars becomes a horizontal one, and the pillars stack and centre
   beneath it. */
@media (max-width: 575.98px) {
  .showmark {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .showmark__logo { gap: 15px; }
  .showmark__divider--split {
    width: min(100%, 230px);
    height: 1px;
    background: rgba(1, 35, 66, .3);
  }
  .showmark__pillars {
    text-align: center;
    line-height: 1.55;
  }

  .site-footer__strap { font-size: var(--fs-body); }
}


/* =============================================================
   14. WORDPRESS ADDITIONS
   Everything below is new to the theme build. The sections above
   are the original PSD translation, untouched, so a design fix
   and a WordPress fix never collide in the same place.
   ============================================================= */


/* 14.1 Section spacing modifiers -------------------------------
   Every section exposes these through the shared "Design" tab. */

/* The background control is shared by every section, so a section that is not
   a .band can still pick up .band--navy. It should take the colour and the
   white text but not the band's vertical padding, because these sections
   space themselves. Written with :where() so it carries no specificity and
   the spacing modifiers below still win. */
:where(.split, .hero, .promo, .cta):where(.band--navy, .band--light) {
  padding-block: 0;
}

.is-space-tight  { padding-block: clamp(32px, 3.4vw, 64px); }
.is-space-roomy  { padding-block: clamp(72px, 9vw, 172px); }
.is-space-flush  { padding-block: 0; }

.split.is-space-flush .split__body { padding-block: 0; }
.hero.is-space-flush  .hero__slide { padding-block: 0; }


/* 14.2 Section variants ---------------------------------------- */

.split.band--navy .split__media { align-self: stretch; }

/* Hero, shortened for interior pages. */
.hero--short .hero__slide { min-height: min(52vh, 520px); }
.hero--short .hero__title { font-size: clamp(2rem, 3.4vw, 3.75rem); }

.hero__cta   { margin-top: 38px; }
.split__cta  { margin-top: 42px; }
.statement__rule { margin-top: 34px; }

/* Promo with the copy on the right. */
.promo--right .promo__content { margin-left: auto; }
.promo--right { background-position: 20% center; }

@media (max-width: 1199.98px) {
  .promo--right::before {
    background: linear-gradient(260deg,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.82) 42%,
      rgba(255,255,255,.18) 78%,
      rgba(255,255,255,0) 100%);
  }
}

/* A feature card that links somewhere. */
.feature__link {
  display: block;
  color: inherit;
  transition: transform .35s var(--ease);
}
.feature__link:hover { transform: translateY(-4px); }

/* The lockup can take a supplied logo instead of the monogram. */
.showmark__logo img { width: auto; max-height: 92px; }

/* Header sitting over a hero rather than above it. */
.site-header--over {
  position: absolute;
  inset-inline: 0;
  background: transparent;
}
.site-header--over + main .hero__slide { padding-top: calc(var(--bw-header-h) + 24px); }
.site-header--over.is-open { background: var(--bw-navy); }


/* 14.3 Rich text band ------------------------------------------ */

.band--richtext .richtext--narrow { max-width: 760px; }
.band--richtext.is-centered .richtext { margin-inline: auto; text-align: center; }
.band--richtext .section-title { margin-bottom: 28px; }
.band--richtext .eyebrow + .section-title { margin-top: 14px; }

.richtext h2, .richtext h3, .richtext h4 {
  font-weight: var(--bw-w-bold);
  margin-top: 1.6em;
  margin-bottom: .6em;
  line-height: 1.3;
}
.richtext h2 { font-size: var(--fs-title); }
.richtext h3 { font-size: var(--fs-lead); text-transform: uppercase; letter-spacing: .04em; }

.richtext ul, .richtext ol { margin: 0 0 1.6em; padding-left: 1.25em; }
.richtext li { margin-bottom: .5em; }

.richtext a:not(.btn-gold) {
  color: var(--bw-rule);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.richtext a:not(.btn-gold):hover { color: var(--bw-gold-hover); }

.richtext blockquote {
  margin: 2em 0;
  padding-left: 28px;
  border-left: 2px solid var(--bw-rule);
  font-style: italic;
  font-size: var(--fs-lead);
}

.richtext table {
  width: 100%;
  margin-bottom: 1.6em;
  border-collapse: collapse;
}
.richtext th, .richtext td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(1, 35, 66, .12);
  text-align: left;
}
.richtext th { font-weight: var(--bw-w-bold); }

.band--navy .richtext a:not(.btn-gold) { color: var(--bw-gold); }
.band--navy .richtext th,
.band--navy .richtext td { border-bottom-color: rgba(255, 255, 255, .18); }


/* 14.4 Blog, archives, search ---------------------------------- */

.archive__header { text-align: center; margin-bottom: 64px; }
.archive__header .rule { margin-top: 24px; }
.archive__header .prose { margin-top: 24px; }

.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px 40px;
}

.post-card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.post-card__body { padding-top: 22px; }
.post-card__title {
  margin: 10px 0 14px;
  font-size: var(--fs-title);
  font-weight: var(--bw-w-bold);
  line-height: 1.25;
}
.post-card__title a:hover { color: var(--bw-rule); }

.entry__inner { max-width: 760px; margin-inline: auto; }
.entry__header { text-align: center; margin-bottom: 44px; }
.entry__media  { margin: 0 0 44px; }
.entry__media img { width: 100%; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 72px;
}
.pagination .page-numbers {
  min-width: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(1, 35, 66, .2);
  text-align: center;
  font-weight: var(--bw-w-semi);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--bw-navy);
  border-color: var(--bw-navy);
  color: var(--bw-white);
}

.search-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.search-form__field {
  min-width: 260px;
  padding: 13px 18px;
  border: 1px solid rgba(1, 35, 66, .25);
  font-family: inherit;
  font-size: var(--fs-body);
  background: var(--bw-white);
  color: var(--bw-navy);
}
.search-form__submit { border: 0; cursor: pointer; }


/* 14.5 Footer extras ------------------------------------------- */

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: var(--fs-body);
}

.site-footer__list,
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer__list a:hover,
.site-footer__social a:hover { color: var(--bw-gold); }

.site-footer__legal { opacity: .72; margin: 0; }

@media (max-width: 767.98px) {
  .site-footer__meta { flex-direction: column; text-align: center; }
  .site-footer__list, .site-footer__social { justify-content: center; }
}


/* 14.6 Editor and core output ---------------------------------- */

.alignleft   { float: left;  margin: .4em 1.6em 1.2em 0; }
.alignright  { float: right; margin: .4em 0 1.2em 1.6em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  margin-top: 10px;
  font-size: .875rem;
  font-style: italic;
  opacity: .75;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.widget { margin-bottom: 40px; }
.widget__title {
  font-size: var(--fs-lead);
  font-weight: var(--bw-w-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}


/* 14.7 Admin-facing safety nets --------------------------------
   A section with a missing image or an empty repeater should never
   collapse the layout while an editor is halfway through a page. */

.hero__slide:not([style*="background-image"]) { background: var(--bw-navy); }
.promo:not([style*="background-image"]),
.cta:not([style*="background-image"])         { background-color: var(--bw-navy); }
.promo:not([style*="background-image"]) .promo__content,
.cta:not([style*="background-image"])   .cta__content { color: var(--bw-white); }


/* =============================================================
   15. FORMS
   Styled against Contact Form 7's real markup, but written so the
   theme's own classes (.bw-row / .bw-field) do the layout. That
   way a form built with any plugin lands in the same shape.

   Base styling is for a light background. Dark and photographic
   sections override at the end of this block.
   ============================================================= */

.bw-form { margin-top: 48px; text-align: left; }

.bw-form__intro,
.bw-form__footnote {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: center;
  opacity: .8;
}
.bw-form__intro    { margin-bottom: 24px; }
.bw-form__footnote { margin-top: 20px; }

.bw-form__warning {
  padding: 14px 18px;
  border: 1px dashed currentColor;
  font-size: .875rem;
  text-align: center;
  opacity: .8;
}


/* 15.1 Layout helpers ------------------------------------------
   Use these inside the Contact Form 7 form editor. The README has
   a ready-made template that produces the design's two-up row. */

.bw-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px 24px;
  align-items: start;
}

.bw-field { display: block; margin-bottom: 20px; }
.bw-row { margin-bottom: 20px; }
.bw-row .bw-field { margin-bottom: 0; }

/* Each field in a row is sized by its own content, not stretched to the tallest
   in the row (align-items: start above). Labels therefore line up along the top
   edge, which is the behaviour you want when one label wraps onto a second line
   and the other does not. */
.bw-row .bw-field { display: flex; flex-direction: column; justify-content: flex-start; }

.bw-field > label,
.bw-form label:not(.bw-inline) {
  display: block;
  margin-bottom: 9px;
  font-size: .75rem;
  font-weight: var(--bw-w-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* CF7 wraps each control in a span; it must not break the grid. */
.bw-form .wpcf7-form-control-wrap { display: block; }

/* CF7's default <p> wrapping, for a form written without the helpers. */
.bw-form .wpcf7-form > p { margin: 0 0 20px; }


/* 15.2 Controls ------------------------------------------------ */

.bw-form input[type="text"],
.bw-form input[type="email"],
.bw-form input[type="tel"],
.bw-form input[type="url"],
.bw-form input[type="date"],
.bw-form input[type="number"],
.bw-form select,
.bw-form textarea {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(1, 35, 66, .28);
  border-radius: 0;
  background: transparent;
  color: var(--bw-navy);
  font-family: var(--bw-font);
  font-size: 1rem;
  font-weight: var(--bw-w-medium);
  line-height: 1.5;
  transition: border-color .3s var(--ease);
  appearance: none;
}

.bw-form textarea { min-height: 128px; resize: vertical; }

.bw-form select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) calc(50% + 2px), calc(100% - 8px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bw-form ::placeholder { color: currentColor; opacity: .45; }

/* The closed select inherits the panel's white text, but the open dropdown is
   drawn by the operating system on its own background -- without this the
   options are white on white and effectively invisible. */
.bw-form option {
  background: var(--bw-white);
  color: var(--bw-navy);
}

.bw-form input:focus,
.bw-form select:focus,
.bw-form textarea:focus {
  outline: 0;
  border-bottom-color: var(--bw-rule);
}

/* Keyboard users still get the theme's focus ring. */
.bw-form input:focus-visible,
.bw-form select:focus-visible,
.bw-form textarea:focus-visible {
  outline: 2px solid var(--bw-gold);
  outline-offset: 4px;
}

/* Checkboxes, radios and the CF7 acceptance box. */
.bw-form .wpcf7-list-item { display: block; margin: 0 0 10px; }
.bw-form .wpcf7-list-item-label { font-size: .9375rem; }

/* Checkbox and acceptance labels wrap their input, so they must not inherit
   the uppercase tracked treatment meant for field labels. */
.bw-form .wpcf7-list-item label,
.bw-form .wpcf7-acceptance label {
  display: inline;
  margin-bottom: 0;
  font-size: .9375rem;
  font-weight: var(--bw-w-medium);
  letter-spacing: 0;
  text-transform: none;
}
.bw-form .wpcf7-acceptance .wpcf7-list-item-label { opacity: .85; }

.bw-form input[type="checkbox"],
.bw-form input[type="radio"] {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  accent-color: var(--bw-gold);
  vertical-align: -2px;
}


/* 15.3 Submit -------------------------------------------------- */

.bw-form input[type="submit"],
.bw-form button[type="submit"],
.bw-form .wpcf7-submit {
  display: inline-block;
  width: auto;
  margin-top: 12px;
  padding: 17px 44px;
  border: 0;
  border-radius: var(--bw-pill);
  background: var(--bw-gold);
  color: var(--bw-navy);
  font-family: var(--bw-font);
  font-size: .8125rem;
  font-weight: var(--bw-w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}

.bw-form .wpcf7-submit:hover { background: var(--bw-gold-hover); transform: translateY(-2px); }
.bw-form .wpcf7-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* The submit row centres, matching the rest of the closing panel. */
.bw-form .bw-actions { margin-top: 12px; text-align: center; }


/* 15.4 Contact Form 7 messages ---------------------------------
   CF7 ships its own stylesheet; these rules are specific enough to
   win without !important, and reuse the theme's own colours. */

.bw-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: #d9534f;
  font-size: .8125rem;
  font-weight: var(--bw-w-semi);
}

.bw-form .wpcf7-not-valid { border-bottom-color: #d9534f; }

/* Contact Form 7 only fills this box once a submission has been answered.
   Left unstyled-for-state it renders as an empty bordered rectangle, so hide
   it in the resting states rather than relying on CF7's own stylesheet being
   loaded. */
.bw-form form.init .wpcf7-response-output,
.bw-form form.resetting .wpcf7-response-output,
.bw-form form.submitting .wpcf7-response-output { display: none; }

.bw-form form .wpcf7-response-output {
  margin: 26px 0 0;
  padding: 14px 18px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .9375rem;
  text-align: center;
}

.bw-form form.sent .wpcf7-response-output          { border-color: var(--bw-rule); }
.bw-form form.invalid .wpcf7-response-output,
.bw-form form.unaccepted .wpcf7-response-output,
.bw-form form.payment-required .wpcf7-response-output { border-color: #d9534f; }
.bw-form form.failed .wpcf7-response-output,
.bw-form form.aborted .wpcf7-response-output       { border-color: #d9534f; }

.bw-form .wpcf7-spinner { background-color: var(--bw-rule); }

/* CF7 hides its own honeypot and quiz fields; make sure nothing
   the theme adds re-exposes them. */
.bw-form .wpcf7-form-control-wrap[data-name^="_wpcf7"] { display: none; }


/* 15.5 On dark and photographic sections -----------------------
   The closing CTA sits on a photograph, so the form gets a quiet
   translucent panel. Without it, thin white rules over a bright
   sky are unreadable and fail contrast. */

.bw-form--on-media,
.band--navy .bw-form,
.promo .bw-form {
  max-width: 620px;
  margin-inline: auto;
  padding: 38px clamp(24px, 4vw, 48px) 40px;
  border-top: 2px solid var(--bw-rule);
  background: rgba(1, 26, 49, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--bw-white);
}

/* Browsers without backdrop-filter get a denser panel instead of an
   unreadable one. */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .bw-form--on-media,
  .band--navy .bw-form,
  .promo .bw-form { background: rgba(1, 26, 49, .9); }
}

.bw-form--on-media input[type="text"],
.bw-form--on-media input[type="email"],
.bw-form--on-media input[type="tel"],
.bw-form--on-media input[type="url"],
.bw-form--on-media select,
.bw-form--on-media textarea,
.band--navy .bw-form input[type="text"],
.band--navy .bw-form input[type="email"],
.band--navy .bw-form input[type="tel"],
.band--navy .bw-form select,
.band--navy .bw-form textarea {
  border-bottom-color: rgba(255, 255, 255, .34);
  color: var(--bw-white);
}

.bw-form--on-media input:focus,
.bw-form--on-media select:focus,
.bw-form--on-media textarea:focus,
.band--navy .bw-form input:focus,
.band--navy .bw-form textarea:focus { border-bottom-color: var(--bw-gold); }

/* Chrome paints autofilled fields pale blue, which destroys the panel. */
.bw-form--on-media input:-webkit-autofill,
.bw-form--on-media input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bw-white);
  transition: background-color 9999s ease-in-out 0s;
}

.cta .bw-form { text-align: left; }
.cta .bw-form__intro,
.cta .bw-form__footnote { text-align: center; }

/* The CTA already has a button style; when a form is present the
   button sits above it with its own breathing room. */
.cta .btn-gold + .bw-form { margin-top: 44px; }


/* 15.6 Narrow screens ------------------------------------------ */

@media (max-width: 575.98px) {
  .bw-form { margin-top: 36px; }
  .bw-form--on-media { padding: 30px 20px 32px; }
  .bw-form .wpcf7-submit { width: 100%; padding-inline: 20px; }
  .bw-row { grid-template-columns: 1fr; }
}


/* 15.7 Placeholder form ----------------------------------------
   Same markup as the recommended Contact Form 7 template, so
   swapping the placeholder for a real form changes nothing that
   is visible. Only the editor note below is new. */

.bw-placeholder-form { margin: 0; }

.bw-form .bw-submit {
  display: inline-block;
  width: auto;
  margin-top: 12px;
  padding: 17px 44px;
  border: 0;
  border-radius: var(--bw-pill);
  background: var(--bw-gold);
  color: var(--bw-navy);
  font-family: var(--bw-font);
  font-size: .8125rem;
  font-weight: var(--bw-w-semi);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s var(--ease), transform .3s var(--ease);
}
.bw-form .bw-submit:hover { background: var(--bw-gold-hover); transform: translateY(-2px); }

/* The editor-only note. Visitors never receive this markup. */
.bw-form--placeholder .bw-form__warning {
  margin-top: 26px;
  border-color: var(--bw-rule);
  opacity: .75;
}

@media (max-width: 575.98px) {
  .bw-form .bw-submit { width: 100%; padding-inline: 20px; }
}