/* Header */
:root {
  --cream: #f7f0e0;
  --olive: #2e3504;
  --amber: #e39a32;
  --divider: #ebc78d;
}

/* Footer */
.site-footer {
  color: var(--olive);
  background: url(../img/vector.png) top right;
  background-repeat: no-repeat;
  background-size: 497px;
  font-family: Inter, Arial, sans-serif;
}
.footer-main {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 0;
}
.footer-container {
  position: relative;
  z-index: 2;
  /* max-width: 700px; */
}
.footer-logo {
  width: 177px;
  height: 208px;
  margin: 9px auto 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1140px;
  margin: 30px auto;
}
.footer-nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav a {
  position: relative;
  padding: 10px 33px;
  color: var(--olive);
  font-size: 20px;
  font-weight: 700;
  line-height: 21px;
  text-decoration: none;
}
.footer-nav a + a::before,
.footer-nav li + li a::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 1px;
  content: "";
  background: linear-gradient(to bottom, rgba(244, 213, 166, 1) 0%, rgba(213, 133, 33, 1) 49%, rgba(244, 220, 183, 1) 100%);
}

/* Hover: a gold underline — same gradient as the dividers — wipes in from
   the left and the label warms to match. */
.footer-nav a::after {
      position: absolute;
    right: 40px;
    bottom: 2px;
    left: 40px;
    height: 2px;
    content: "";
    background: linear-gradient(to right, rgba(244, 213, 166, 1) 0%, rgba(213, 133, 33, 1) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-nav a:hover::after,
.footer-nav a:focus-visible::after,
.footer-nav li.active > a::after,
.footer-nav li.current-menu-item > a::after,
.footer-nav li.current_page_item > a::after,
.footer-nav li.current-menu-ancestor > a::after,
.footer-nav li.current_page_ancestor > a::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

.footer-nav a {
  transition: color 0.35s ease;
  -webkit-transition: color 0.35s ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-nav li.active > a,
.footer-nav li.current-menu-item > a,
.footer-nav li.current_page_item > a,
.footer-nav li.current-menu-ancestor > a,
.footer-nav li.current_page_ancestor > a {
  color: #d58521;
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav a,
  .footer-nav a::after {
    transition: none;
    -webkit-transition: none;
  }
}
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 13px;
}
/* The socials, the wordmark and the amber legal bar read as one connected
   block: strip the trailing row/container spacing under the icons. */
.footer-container {
  padding-bottom: 0;
}
.footer-container > .row:last-child {
  margin-bottom: 0;
}
.footer-container > .row:last-child > [class^="col"],
.footer-container > .row:last-child > [class*=" col"] {
  padding-bottom: 0;
}
.footer-socials a {
  width: 51px;
  height: 51px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.footer-socials a img {
  width: auto;
  height: 20px;
  object-fit: contain;
}
/* Mail / call artwork has inner padding in its 24px viewBox, so it renders
   larger to match the visual weight of the social glyphs. */
.footer-socials a img.footer-contact-icon {
  height: 28px;
}

/* Hover: the olive disc fills with the same gold gradient used by the
   arrow button, and the icon lifts slightly. */
.footer-socials a {
  transition:
    background 0.35s ease,
    border-color 0.35s ease;
  -webkit-transition:
    background 0.35s ease,
    border-color 0.35s ease;
}

.footer-socials a img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
}

.footer-socials a:hover img,
.footer-socials a:focus-visible img {
  transform: translateY(-3px);
  -webkit-transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .footer-socials a,
  .footer-socials a img {
    transition: none;
    -webkit-transition: none;
  }
  .footer-socials a:hover img,
  .footer-socials a:focus-visible img {
    transform: none;
    -webkit-transform: none;
  }
}
/* .footer-socials a:nth-child(2) img,
.footer-socials a:nth-child(3) img {
  width: 62%;
  height: 62%;
}
.footer-socials a:nth-child(5) img {
  width: 50%;
  height: 50%;
  transform: rotate(37deg);
} */
.footer-floral {
  position: absolute;
  z-index: 1;
  top: -7px;
  right: -1px;
  width: 160px;
  opacity: 0.31;
}
.footer-wordmark {
  position: relative;
  z-index: 0;
  bottom: 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: #cbc6ae;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16.4vw;
  font-weight: 500;
  line-height: 0.76;
  letter-spacing: normal;
  white-space: nowrap;
  text-align: center;
  /* Pull the line box up over its empty strip above the capitals (~0.06em)
     so the letter tops meet the social icons with no gap. In em, so it
     scales with the 16.4vw type. (-37px used to overlap the icons.) */
  margin-top: -0.06em;
  /* The line box keeps ~0.055em of empty descender space under the capitals;
     pull the legal bar up over it and a touch further, so the bar tucks over
     the foot serifs with no sliver of cream showing. In em, so it holds at
     every viewport (the type is 16.4vw everywhere). */
  margin-bottom: -0.085em;
  padding-bottom: 0;
}
/* The legal bar paints over the wordmark's empty descender strip. */
.footer-legal {
  position: relative;
  z-index: 1;
}
/* Gold letters get their shade inline from allowance_footer_wordmark(). */
.footer-legal {
  min-height: 101px;
  display: flex;
  align-items: center;
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
  color: var(--olive);
  font-size: 20px;
  font-weight: 700;
}

.footer-legal-links a {
  display: inline-block;
  padding: 0 12px;
  color: inherit;
  text-decoration: none;
}
.footer-legal-links a + a {
  border-left: 1px solid rgba(65, 54, 12, 0.4);
}

/* Hover: same underline wipe as the brand link, inset to clear the
   divider between the two links. */
.footer-legal-links a {
  position: relative;
}

.footer-legal-links a::after {
  position: absolute;
  right: 12px;
  bottom: -2px;
  left: 12px;
  height: 2px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  -webkit-transform: scaleX(0);
  -webkit-transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-legal-links a:hover::after,
.footer-legal-links a:focus-visible::after,
.footer-legal-links a.is-current::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-legal-links a::after {
    transition: none;
    -webkit-transition: none;
  }
}

/* Brand name in the copyright line: an olive underline wipes in from the
   left, matching the footer nav treatment against the gold band. */
.footer-brand {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.footer-brand::after {
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  -webkit-transform: scaleX(0);
  -webkit-transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-brand:hover::after,
.footer-brand:focus-visible::after {
  transform: scaleX(1);
  -webkit-transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .footer-brand::after {
    transition: none;
    -webkit-transition: none;
  }
}

@media (max-width: 767.98px) {
  .footer-main {
    min-height: 305px;
    height: auto;
  }
  .footer-logo {
    margin-bottom: 7px;
  }
  .footer-nav {
    flex-wrap: wrap;
    padding: 0 20px;
  }
  .footer-nav a {
    padding: 0 11px;
  }
  .footer-nav a::after {
    right: 11px;
    left: 11px;
    bottom: -3px;
  }
  .footer-legal {
    padding: 12px 0;
  }
  .footer-legal-links {
    margin-top: 8px;
  }
  .footer-wordmark {
    font-size: 16.4vw;
    bottom: 0;
    padding-bottom: 0;
  }
}

/* Section headings — every H2 on the site shares this class */
.section-title {
  margin: 0 0 11px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  /* Fluid: shrinks on small screens, holds 58px on desktop. */
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}
.section-title span {
  background: linear-gradient(
    to right,
    rgba(213, 133, 33, 1) 0%,
    rgba(246, 199, 128, 1) 23%,
    rgba(213, 133, 33, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #efa443;
}

/* Invitation to connect */
.invitation-section {
  position: relative;
  min-height: 363px;
  overflow: hidden;

  .header-contact {
    width: 336px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.invitation-section::before,
.invitation-section::after {
  position: absolute;
  z-index: 0;
  color: #e7d484;
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1;
}
.invitation-section::before {
  content: "✳\A  ·";
  top: 245px;
  left: 31px;
  white-space: pre;
  font-size: 54px;
}
.invitation-section::after {
  content: "✳";
  top: 53px;
  right: 48px;
  font-size: 63px;
}
.invitation-section .container {
  position: relative;
  z-index: 1;
}

.invitation-content .section-kicker {
  margin-bottom: 13px;
  font-size: clamp(16px, 3vw, 25px);
  padding-right: 0;
  border-right: none;
}
.invitation-content .section-title {
  margin-right: auto;
  margin-left: auto;
}
.invitation-content p {
  max-width: 1185px;
  margin: 0 auto 30px;
  color: #6b6868;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.invitation-content .header-contact {
  width: auto;
  justify-content: center;
  margin: 0 auto;
}
.invitation-content .contact-button {
  max-width: 320px;
  flex: 0 0 320px;
}

@media (max-width: 575.98px) {
  .invitation-content {
    padding: 60px 22px;
  }
  .invitation-content p {
    font-size: 11px;
  }
}

/* Our Journey */
.journey-section {
  .contact-button {
    max-width: 296px;
    flex: 0 0 296px;
  }
  .header-contact {
    width: auto;
    justify-content: flex-start;
    margin-left: 15px;
  }
}
/* Journey collage — proportional so the desktop overlapping layout is kept
   identically at every screen size. The container holds a fixed aspect ratio
   and every child is sized/positioned in % of that box, so the whole collage
   simply scales down together instead of re-stacking. */
.journey-collage {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  aspect-ratio: 580 / 590;
}
.collage-block {
  position: absolute;
  top: 25%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 69.15%;
  border-radius: 7px;
  background: rgb(46, 53, 4, 0.4);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.journey-collage img {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.collage-landscape {
  top: -4.58%;
  left: 0;
  width: 38.79%;
  aspect-ratio: 225 / 227;
}
.collage-people {
  top: 5.42%;
  left: 50%;
  width: 72.41%;
  aspect-ratio: 420 / 583;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.collage-ritual {
  top: 78%;
  right: 0;
  width: 32.24%;
  aspect-ratio: 187 / 227;
}
/* .journey-copy {
  padding-top: 64px;
} */
.section-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 2;
  text-transform: uppercase;
  border-right: 1px solid var(--amber);
  padding-right: 15px;
  line-height: 1.8;
}
/* Journey heading shares a half-width column; at the global 58px its longer
   line (~650px) overflows it and spills to 3 lines. Step it down per container
   width so desktop holds it to 2 balanced lines. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .journey-section .journey-copy .section-title {
    font-size: 38px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .journey-section .journey-copy .section-title {
    font-size: 46px;
  }
}
@media (min-width: 1400px) {
  .journey-section .journey-copy .section-title {
    font-size: 54px;
  }
}
.journey-copy p {
  margin: 0 0 18px;
  color: var(--olive);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.journey-copy blockquote {
  margin: 24px 0 25px 42px;
  color: #dd8d29;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 40px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.12;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-left: 1px solid var(--olive);
}

/* Homepage hero */
.homepage-hero {
  position: relative;
  min-height: calc(100vh + 30vh);
  overflow: hidden;
  .contact-button {
    max-width: 296px;
    flex: 0 0 296px;
  }
}
.hero-content-column {
  position: relative;
  align-items: flex-start;
}
/* Readability overlay: a soft olive wash, strongest behind the copy on the
   left and fading out so the photo stays visible on the right. Sits under
   the copy (z-index 1) and the wordmark (later in the DOM). */
.homepage-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(20, 24, 2, 0.55) 0%,
    rgba(20, 24, 2, 0.35) 45%,
    rgba(20, 24, 2, 0) 75%
  );
}
.hero-content {
  margin-top: 59%;
  position: relative;
  z-index: 1;
}
.hero-content h1 {
  margin: 0 0 40px;
  color: #efa443;
  font-family: "Cormorant Garamond", Georgia, serif;
  /* Fluid: scales down on phones (≈28px at 320px), holds 69px on desktop. */
  font-size: clamp(26px, 8.7vw, 69px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.45px;
  text-wrap: balance;
}
.hero-content h1 span {
  color: #e5a23d;
}
.hero-content h1 span.hero-title-lead {
  color: #ffffff;
}
.hero-content p {
  margin: 0px 30px 20px 0;
  color: rgb(255, 251, 237);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
.hero-wordmark {
  position: absolute;
  right: 0;
  /* Drop the empty descender strip (and the foot serifs) below the hero's
     edge so the letters meet the next section with no gap — same treatment
     as the footer wordmark. In em, so it scales with the 16.4vw type. */
  bottom: -0.085em;
  left: 0;
  z-index: 0;
  color: rgb(247, 240, 224);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16.4vw;
  font-weight: 500;
  line-height: 0.76;
  letter-spacing: normal;
  white-space: nowrap;
  text-align: center;
}
.hero-wordmark .gold {
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 68%
  );

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #dd9a3c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--olive);
  font-family: "Inter", Arial, sans-serif;
}

.site-header {
  width: 100%;
  background: var(--cream);
  height: 100%;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.site-logo-col,
.header-contact-col {
  padding: 20px 0 0;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    opacity: 0.8;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(244, 213, 166, 1) 0%,
      rgba(213, 133, 33, 1) 49%,
      rgba(244, 220, 183, 1) 100%
    );
  }
}
.header-contact-col::before {
  left: 0;
  right: auto;
}

/* Bootstrap grid columns are kept for the document structure; these fixed
   desktop rails reproduce the proportions of the supplied header. */

.site-logo {
  display: flex;
  align-items: center;
  position: relative;
  top: -10px;
  width: 223px;
}

.site-logo img {
  width: 108px;
  object-fit: contain;
}

/* StellarNav takes over below 769px (see its init in footer.php), so the
   bespoke desktop layout below is scoped above that breakpoint. */

.header-contact {
  width: fit-content;
  max-width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* Only the site header reserves a fixed slot for its CTA. Everywhere else the
   row hugs its pill + arrow, so it sits flush with the copy (or truly centred)
   instead of floating inside a 336px box. */
.site-header .header-contact {
  width: 336px;
}
.text-center > .header-contact {
  margin-right: auto;
  margin-left: auto;
}

/* Pills used on their own, without the arrow circle: even padding, and
   centred where the parent centres its content. */
.allowance-load-more.contact-button,
.allowance-search-form .contact-button,
.form-submit .contact-button {
  padding: 0 28px;
}
.allowance-load-more.contact-button {
  margin-right: auto;
  margin-left: auto;
}

.contact-button {
  max-width: 219px;
  flex: 0 0 219px;
  width: 100%;
  height: 80px;
  border: none;
  padding-right: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 140px;
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
  color: #0a0a0a;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  -webkit-border-radius: 140px;
  -moz-border-radius: 140px;
  -ms-border-radius: 140px;
  -o-border-radius: 140px;
}

.arrow-button {
  width: 90px;
  flex: 0 0 90px;
  height: 90px;
  margin-left: -35px;
  display: grid;
  place-items: center;
  border: 1px solid #b68d2e;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
}

.arrow-button svg {
  width: 30px;
  height: 30px;
}
.arrow-button img {
  width: auto;
  height: 30px;
}
.arrow-button path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* Hover: the pair swaps roles — the gold pill goes olive, the olive circle
   goes gold. Colour only, no lift or glow. */
.contact-button,
.arrow-button,
.arrow-button img,
.arrow-button svg {
  transition:
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-transition:
    background 0.4s ease,
    color 0.4s ease,
    -webkit-transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease;
}

.header-contact:hover .contact-button,
.contact-button:hover,
.contact-button:focus-visible {
  background: var(--olive);
  color: var(--cream);
}

.header-contact:hover .arrow-button,
.arrow-button:hover,
.arrow-button:focus-visible {
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
  border-color: #f6c780;
  color: #0a0a0a;
}

.header-contact:hover .arrow-button img,
.header-contact:hover .arrow-button svg,
.arrow-button:hover img,
.arrow-button:hover svg,
.arrow-button:focus-visible img,
.arrow-button:focus-visible svg {
  transform: translateX(5px);
  -webkit-transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  .contact-button,
  .arrow-button,
  .arrow-button img,
  .arrow-button svg {
    transition: none;
    -webkit-transition: none;
  }

  .header-contact:hover .arrow-button img,
  .header-contact:hover .arrow-button svg,
  .arrow-button:hover img,
  .arrow-button:hover svg,
  .arrow-button:focus-visible img,
  .arrow-button:focus-visible svg {
    transform: none;
    -webkit-transform: none;
  }
}

/* Primary navigation */
.main-nav-col {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.main-nav.stellarnav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.main-nav.stellarnav > ul > li > a {
  position: relative;
  padding: 10px 16px;
  color: var(--olive);
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.25s ease-out;
}

.main-nav.stellarnav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 1px;
  background: var(--amber);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

.main-nav.stellarnav > ul > li > a:hover,
.main-nav.stellarnav > ul > li > a:focus-visible,
.main-nav.stellarnav > ul > li.active > a,
.main-nav.stellarnav > ul > li.current-menu-item > a,
.main-nav.stellarnav > ul > li.current_page_item > a,
.main-nav.stellarnav > ul > li.current-menu-ancestor > a,
.main-nav.stellarnav > ul > li.current_page_ancestor > a {
  color: var(--amber);
}

.main-nav.stellarnav > ul > li > a:hover::after,
.main-nav.stellarnav > ul > li > a:focus-visible::after,
.main-nav.stellarnav > ul > li.active > a::after,
.main-nav.stellarnav > ul > li.current-menu-item > a::after,
.main-nav.stellarnav > ul > li.current_page_item > a::after,
.main-nav.stellarnav > ul > li.current-menu-ancestor > a::after,
.main-nav.stellarnav > ul > li.current_page_ancestor > a::after {
  opacity: 1;
  transform: scaleX(1);
}

/* StellarNav mobile drawer, themed to the header palette. */
.main-nav.stellarnav.mobile ul,
.main-nav.stellarnav.mobile.light ul {
  background: var(--cream);
}

.main-nav.stellarnav.mobile > ul {
  display: block;
}

.main-nav.stellarnav.mobile > ul > li > a {
  padding: 15px;
  border-bottom: 1px solid rgba(46, 53, 4, 0.12);
}

/* The amber underline is a desktop hover affordance; in the drawer each item
   already has its own divider, so the extra line just reads as a stray rule. */
.main-nav.stellarnav.mobile > ul > li > a::after {
  display: none;
}

/* The drawer has no underline, so the current page is marked with the amber
   text plus a left bar — otherwise nothing reads as active on mobile. */
.main-nav.stellarnav.mobile > ul > li.active > a,
.main-nav.stellarnav.mobile > ul > li.current-menu-item > a,
.main-nav.stellarnav.mobile > ul > li.current_page_item > a,
.main-nav.stellarnav.mobile > ul > li.current-menu-ancestor > a,
.main-nav.stellarnav.mobile > ul > li.current_page_ancestor > a {
  color: var(--amber);
  box-shadow: inset 3px 0 0 0 var(--amber);
}

.main-nav.stellarnav .menu-toggle,
.main-nav.stellarnav .close-menu {
  color: var(--olive);
}

.main-nav.stellarnav .menu-toggle span.bars span {
  background: var(--olive);
}

/* Writing & Reflections */
.reflections-section {
  .header-contact {
    justify-content: start;
    margin-top: 65px !important;
    float: left;
  }
  .contact-button {
    max-width: 321px;
    flex: 0 0 321px;
  }
}
.reflections-intro {
  margin-bottom: 40px;
}
.reflections-intro .section-title {
  margin: 0;
  font-size: clamp(28px, 5.5vw, 52px);
  line-height: 1.15;
}
/* The right column starts lower so the two columns interlock. */
.reflections-column-offset {
  padding-top: 20px;
  .reflection-card {
    max-width: 531px;
    width: 100%;
    float: right;
  }
}
.reflection-card {
  margin-bottom: 30px;
  max-width: 531px;
  width: 100%;
}
.reflection-card:last-child {
  margin-bottom: 0;
}
.reflection-media {
  display: block;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.reflection-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.reflection-media:hover img {
  transform: scale(1.04);
}
/* Staggered media heights reproduce the collage rhythm of the design. */
.reflections-section
  .col-lg-6:first-child
  .reflection-card:nth-child(2)
  .reflection-media {
  height: 722px;
}
.reflections-section
  .col-lg-6:first-child
  .reflection-card:nth-child(3)
  .reflection-media {
  height: 632px;
}
.reflections-column-offset .reflection-card:nth-child(1) .reflection-media {
  height: 632px;
}
.reflections-column-offset .reflection-card:nth-child(2) .reflection-media {
  height: 632px;
}
.reflections-column-offset .reflection-card:nth-child(2) {
  max-width: 100%;
}
.reflections-section .col-lg-6:first-child .reflection-card:nth-child(3) {
  max-width: 417px;
}
.reflection-title {
  margin: 0 0 8px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
}
.reflection-card p {
  margin: 0 0 14px;
  max-width: 420px;
  color: var(--olive);

  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}
.reflection-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--olive);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease-out;
  font-family: "Cormorant Garamond", Georgia, serif;
}
.reflection-link:hover {
  color: var(--amber);
}
.reflection-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: #b89b5e 2px solid;
  width: 34px;
  height: 34px;
  background: var(--olive);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  transition: transform 0.25s ease-out;
}
.reflection-link:hover .reflection-arrow {
  transform: translateX(4px);
}
.reflection-arrow img {
  width: 20px;
  height: 20px;
}

/* Services & Offerings */
.services-section {
  position: relative;
}
.services-leaf {
  position: absolute;
  z-index: 0;
  width: 380px;
  height: 480px;
  background: url(../img/bg2.png) no-repeat center / contain;
  opacity: 0.22;
  pointer-events: none;
}
.services-leaf-left {
  bottom: -60px;
  left: -90px;
}
.services-leaf-right {
  top: -70px;
  right: -100px;
  transform: scaleX(-1);
}
.services-section .container,
.services-slider-wrap {
  position: relative;
  z-index: 1;
}

.services-intro {
  margin-bottom: 46px;
  /* Lets the title size itself to this column (cqi units below). */
  container-type: inline-size;
}
.services-intro .section-kicker {
  padding-right: 0;
  border-right: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
}
.services-intro .section-title {
  /* Always two lines: "Healing, Connection & Meaningful" / "Experiences".
     The first line is ~14.4em wide, so the type scales with the column
     (6.4cqi) up to the shared 58px, and nowrap keeps each line whole. */
  max-width: none;
  font-size: min(58px, 6.4cqi);
  white-space: nowrap;
  text-wrap: nowrap;
  margin-right: auto;
  margin-left: auto;
  span {
    background: linear-gradient(
      to right,
      rgba(213, 133, 33, 1) 0%,
      rgba(213, 133, 33, 1) 33%,
      rgba(246, 199, 128, 1) 82%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}

/* Slider — cards bleed off both edges, so no container here. */
.services-slider-wrap {
  padding: 0;
}
.services-swiper {
  overflow: visible;
}
.services-swiper .swiper-slide {
  height: auto;
}
/* Staggered rhythm: every other card drops down, as in the design. */
.services-swiper .swiper-slide:nth-child(even) .service-card {
  margin-top: 50px;
}

.service-card {
  display: flex;
  flex-direction: column;
}
.service-media {
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.service-media img {
  display: block;
  width: 100%;
  height: 471px;
  object-fit: cover;

  transition: transform 0.5s ease-out;
}
.service-card:hover .service-media img {
  transform: scale(1.05);
}
.service-title {
  color: var(--olive);
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 1;
}
.service-title a {
  color: var(--olive);
  text-decoration: none;
}
.service-card p {
  margin: 20px 0;
  color: var(--olive);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
}
.service-card .reflection-link {
  margin-top: auto;
  font-size: 16px;
}
.service-card .reflection-arrow {
  width: 26px;
  height: 26px;
}
.service-card .reflection-arrow img {
  width: 14px;
  height: 14px;
}

/* Services page: static grid of the shared service cards. */
.services-listing .service-card {
  height: 100%;
}

/* Pagination: short bars, active one widens and turns amber. */
.services-pagination,
.testimonials-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 46px;
}
.services-pagination .swiper-pagination-bullet,
.testimonials-pagination .swiper-pagination-bullet {
  width: 46px;
  height: 7px;
  margin: 0;
  border-radius: 2px;
  background: #615636;
  opacity: 1;
  transition:
    width 0.3s ease-out,
    background 0.3s ease-out,
    opacity 0.3s ease-out;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.services-pagination .swiper-pagination-bullet-active,
.testimonials-pagination .swiper-pagination-bullet-active {
  width: 52px;
  background: var(--amber);
  opacity: 1;
}

/* ==========================================================================
   Gatherings & Events — olive copy panel on the left, overlapping cards right
   ========================================================================== */
.events-section {
  overflow: hidden;
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 45%,
      rgba(246, 199, 128, 1) 82%,
      rgba(213, 133, 33, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
  .contact-button {
    max-width: 321px;
    flex: 0 0 321px;
  }
  .reflection-arrow img {
    position: static;
  }
}
.events-intro {
  margin-bottom: 34px;
  max-width: 655px;
}
.events-intro .section-kicker {
  margin-bottom: 22px;
}

/* Panel sits under the heading and bleeds right, behind the card stack. */
.events-panel {
  position: relative;
  z-index: 1;
  max-width: 829px;
  padding: 64px 42px;
  background: linear-gradient(
    135deg,
    rgba(46, 53, 4, 1) 56%,
    rgba(170, 166, 134, 1) 100%
  );

  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.events-panel p {
  margin: 0 0 34px;
  max-width: 558px;
  color: var(--cream);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.85;
}
.events-panel .header-contact {
  justify-content: flex-start;
}
.events-panel {
  .header-contact:hover .contact-button,
  .contact-button:hover,
  .contact-button:focus-visible {
    background: #4d580a;
    color: var(--cream);
  }
}

/* Card stack — the back card is offset up and to the right of the front one. */
.events-stack {
  position: relative;
  z-index: 2;
  min-height: 480px;
}
.event-card {
  position: absolute;
  display: flex;
  width: 306px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 20px;
  color: var(--cream);
}
.event-card img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease-out;
  border-radius: 7px;
}
/* Dark wash so the copy stays readable over any photograph. */
.event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 7px;
  background: linear-gradient(
    to bottom,
    rgba(46, 53, 4, 0) 18%,
    rgba(46, 53, 4, 0.95) 62%,
    rgba(46, 53, 4, 0.96) 100%
  );
}
.event-card-body {
  position: relative;
  z-index: 2;
}
.event-card-front {
  top: 107px;
  left: -46%;
  height: 415px;
  &:before {
    position: absolute;
    left: -23px;
    bottom: -23px;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/style.png) no-repeat center / cover;
    background-size: contain;
    z-index: 0;
  }
}
.event-card-back {
  top: -20px;
  right: 0;
  /* left: 300px; */
  height: 446px;
}
.event-date {
  display: block;
  margin-bottom: 8px;
  color: var(--cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.event-title,
.event-title a {
  margin: 0 0 10px;
  /* White so the title reads over the card photo. */
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 1;
}
.event-card p {
  margin: 0 0 16px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.event-card .reflection-link {
  color: var(--cream);
  font-size: 14px;
}
.event-card .reflection-arrow {
  width: 22px;
  height: 22px;
}
.event-card .reflection-arrow img {
  width: 12px;
  height: 12px;
}

/* Gallery — visual journey */
.gallery-section {
  position: relative;
  overflow: hidden;
  .swiper-wrapper {
    padding: 100px 0;
  }
  .contact-button {
    max-width: 321px;
    flex: 0 0 321px;
  }
  .section-kicker {
    border-right: none;
    padding-right: 0;
  }
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.gallery-intro {
  margin-bottom: 40px;
}
.gallery-intro .section-kicker {
  padding-right: 0;
  border-right: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
}
.gallery-intro .section-title {
  max-width: 976px;
  margin-right: auto;
  margin-left: auto;
  span {
    background: linear-gradient(
      to right,
      rgba(213, 133, 33, 1) 1%,
      rgba(244, 184, 93, 1) 40%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}

.gallery-cta {
  margin-top: 10px;
}

/* Gallery — fanned card trio */
.gallery-fan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 90px 20px 60px;
  max-width: 1180px;
}
.gallery-card {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 516px;
  height: 582px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 26px 60px rgba(46, 53, 4, 0.28);
  background: var(--olive, #2e3504);
}
.gallery-card-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}
.gallery-card-link img {
  transition: transform 0.5s ease-out;
}
.gallery-card-link:hover img,
.gallery-card-link:focus-visible img {
  transform: scale(1.05);
}
.gallery-card-link:focus-visible {
  outline: 2px solid var(--amber, #b89b5e);
  outline-offset: -4px;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-card-body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 19px 46px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.45) 55%,
    rgba(0, 0, 0, 0) 100%
  );
}
.gallery-card-title {
  margin: 0 0 8px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 25px);
  line-height: 1.15;
  color: #fff;
}
.gallery-card-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}

/* Fan placement — centre card sits on top, sides tuck behind */
.gallery-card-left {
  transform: rotate(-9.94deg) translate(155px, 18px);
  z-index: 1;
  -webkit-transform: rotate(-9.94deg) translate(155px, 18px);
  -moz-transform: rotate(-9.94deg) translate(155px, 18px);
  -ms-transform: rotate(-9.94deg) translate(155px, 18px);
  -o-transform: rotate(-9.94deg) translate(155px, 18px);
}
.gallery-card-center {
  transform: rotate(-1deg) translateY(-66px);
  z-index: 3;
}
.gallery-card-right {
  transform: rotate(9.94deg) translate(-155px, 18px);
  z-index: 3;
  -webkit-transform: rotate(9.94deg) translate(-155px, 18px);
  -moz-transform: rotate(9.94deg) translate(-155px, 18px);
  -ms-transform: rotate(9.94deg) translate(-155px, 18px);
  -o-transform: rotate(9.94deg) translate(-155px, 18px);
}

.inner-banner .page-Pagination a {
  color: var(--color-fff);
  font-family: var(--font-cormorant-garamond);
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
}

.inner-banner .page-Pagination span {
  color: var(--color-fff);
  font-family: var(--font-cormorant-garamond);
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
}

.inner-banner .page-Pagination {
  background-color: #ffffff3b;
  display: inline-block;
  max-width: 100%;
  padding: 15px;
  border-radius: 7px;
}

.inner-banner .page-Pagination .wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.inner-banner .page-Pagination a,
.inner-banner .page-Pagination span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inner-banner .page-Pagination .bread-arrow {
  flex: 0 0 auto;
  line-height: 0;
}

.inner-banner {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* The banner art is a wide ~2.78:1 landscape. Let the box track that ratio
     so `cover` crops far less across screen sizes, with a height band that
     keeps the heading comfortable. */
  height: auto;
  aspect-ratio: 2.78 / 1;
  min-height: 300px;
  max-height: 597px;
  display: flex;
  align-items: end;
}

.inner-banner .hero-content {
  margin-top: 0;
}

.inner-banner .hero-content h1 {
  margin-bottom: 30px;
}

/* =========================
   CONTACT CARD
   ========================= */

.contact-card {
  background-color: var(--cream);
}

.contact-intro {
  margin-bottom: 83px;
}

.contact-intro .section-kicker {
  padding-right: 0;
  border-right: none;
}

.contact-card-inner {
  position: relative;
  border-radius: 10px;
}

/* Photo panel on the right */
.contact-image {
  position: absolute;
  /* top: -97px; */
  right: 0;
  width: 47%;
  /* height: calc(100% - 20px); */
  overflow: hidden;
  border-radius: 0px 20px 20px 0px;
}

.contact-image img {
  width: 100%;
  height: 1040px;
  object-fit: cover;
  object-position: center;
}

/* .contact-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 52%;
  min-height: 740px;
  flex-direction: column;
  justify-content: space-between;
  padding: 190px 30px 70px 60px;
} */

.contact-info h2 {
  color: #000;
  font-family: var(--font-cormorant-garamond);
  font-size: clamp(24px, 4.5vw, 35px);
  font-weight: 700;
  text-transform: uppercase;
  /* One line: "CONNECT WITH ALLOWANCE" runs ~14em, so where the panel is
     narrower than that at 35px the size steps down (below) instead. */
  white-space: nowrap;
}
@media (max-width: 1199.98px) {
  .contact-info h2 {
    font-size: 31px;
  }
}
@media (max-width: 991.98px) {
  /* Panel spans the viewport minus ~90px of gutters/padding. */
  .contact-info h2 {
    font-size: clamp(16px, calc((100vw - 90px) / 14.5), 35px);
  }
}

.contact-info > p {
  max-width: 488px;
  width: 100%;
  margin: 0;
  font-family: var(--font-cormorant-garamond);
  color: #333333;
  font-size: 20px;
  font-weight: 400;
  margin-top: 34px;
}

.contact-details {
  margin-top: 40px;
  width: 100%;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 29px 0;
  border-bottom: 1px solid rgba(46, 53, 4, 0.18);
}

.contact-detail:first-child {
  border-top: 1px solid rgba(46, 53, 4, 0.18);
}

.contact-detail .icon {
  display: flex;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  border: 2px solid #00000075;
  border-radius: 50%;
}

a.contact-detail:hover .icon {
  background: var(--amber);
  color: var(--cream);
}

.contact-detail p {
  margin: 0;
  font-family: var(--font-cormorant-garamond);
  color: #333333;
  font-size: 20px;
  font-weight: 700;
}

/* Address row (a div, unlike the email/phone links): keep it on one line. */
div.contact-detail p {
  white-space: nowrap;
}
.contact-detail p span {
  color: #333333;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color 0.25s ease,
    text-decoration-color 0.25s ease;
}

/* Email / phone rows are links: highlight the value on hover and focus. */
a.contact-detail:hover p span,
a.contact-detail:focus-visible p span {
  color: var(--amber);
  text-decoration-color: currentColor;
}
a.contact-detail .icon {
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
a.contact-detail:focus-visible .icon {
  background: var(--amber);
  color: var(--cream);
}

/* Social row */
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 149px;
}

.social-links > span {
  margin-right: 4px;
  color: #333333;
  font-size: 20px;
  font-weight: 500;
}

.social-links a {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.social-links a svg{
  height: 30px;
}
.social-links a:hover {
  background: var(--amber);
  transform: translateY(-3px);
}

/* =========================
   FORM CARD
   ========================= */

.contact-form {
  /* position: absolute; */
  z-index: 3;
  top: 70px;
  right: 90px;
  width: 100%;
  max-width: 646px;
  padding: 50px 37px;
  border-radius: 10px;
  background-color: var(--olive);
  box-shadow: 0 24px 50px rgba(46, 53, 4, 0.22);
  margin-right: 113px;
  margin-top: 94px;

  .header-contact {
    width: 336px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .header-contact:hover .contact-button,
  .contact-button:hover,
  .contact-button:focus-visible {
    background: #4d580a;
    color: var(--cream);
  }
}

.contact-form h3 {
  margin: 0 0 22px;
  color: #fff;
  font-family: var(--font-cormorant-garamond);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}

.contact-form .form-group {
  margin-bottom: 16px;
}

.contact-form label {
  display: block;
  margin-bottom: 20px;
  color: #fff;
  font-family: var(--font-cormorant-garamond);
  font-size: 16px;
  font-weight: 600;
}

.contact-form .input-wrapper {
  position: relative;
}

.contact-form .field-optional {
  color: #ffffff99;
  font-size: 13px;
  font-weight: 400;
}

.contact-form .field-error {
  display: none;
  margin-top: 6px;
  color: #ff9a8b;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

.contact-form .form-group.has-error .field-error {
  display: block;
}

.contact-form .form-group.has-error .form-control,
.contact-form .form-group.has-error .form-select {
  border-color: #ff9a8b;
}

/* ---- Submit status banner ---------------------------------------------- */
.contact-form .form-status {
  margin: 4px 0 18px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
/* Plain "Sending…" / error states stay compact. */
.contact-form .form-status.is-error {
  color: #ff9a8b;
  background: rgba(255, 154, 139, 0.12);
  border: 1px solid rgba(255, 154, 139, 0.4);
}
/* Prominent Thank You banner on success. The contact form sits on a dark
   olive panel, so the banner uses a warm cream fill with dark text for strong
   contrast and a clear "card on the panel" feel. */
.contact-form .form-status.is-success {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 28px 22px;
  color: var(--olive);
  background: var(--cream);
  border: 1px solid rgba(227, 154, 50, 0.6);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  animation: formStatusIn 0.4s ease-out both;
}
.contact-form .form-status .form-status-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
}
.contact-form .form-status .form-status-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--olive);
}
.contact-form .form-status .form-status-text {
  font-size: 14px;
  color: #3f3f3f;
}
@keyframes formStatusIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-form .form-status.is-success {
    animation: none;
  }
}

.contact-form .form-control,
.contact-form .form-select {
  height: 50px;
  padding: 10px 42px 10px 18px;
  border: 1px solid #ffffff75;
  border-radius: 17px;
  background: transparent;
  color: var(--cream);
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  box-shadow: none !important;
}

.contact-form .form-control::placeholder {
  color: rgba(247, 240, 224, 0.5);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--divider);
  background: rgba(255, 255, 255, 0.04);
  color: var(--cream);
}

.contact-form .form-select {
  /* Chevron drawn in the cream tint so it reads on the olive card. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f7f0e0'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 13px;
  color: rgba(247, 240, 224, 0.5);
}

.contact-form .form-select option {
  color: #333;
}

.contact-form textarea.form-control {
  height: 88px;
  padding: 14px 18px;
  border-radius: 16px;
  resize: none;
}

.contact-form .input-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  display: flex;
  align-items: center;
  color: var(--divider);
  pointer-events: none;
  transform: translateY(-50%);
}

/* Submit button + arrow, matching the site's primary CTA */
.submit-wrapper {
  display: flex;
  align-items: center;
  margin-top: 51px;
}

.submit-btn {
  height: 52px;
  min-width: 175px;
  padding: 0 34px 0 26px;
  border: none;
  border-radius: 26px;
  background: #f6c780;
  color: #0a0a0a;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.submit-btn:hover {
  background: var(--amber);
}

.submit-arrow {
  display: flex;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  align-items: center;
  justify-content: center;
  margin-left: -18px;
  border: 1px solid var(--divider);
  border-radius: 50%;
  background: var(--olive);
  transition: transform 0.25s ease;
}

.submit-arrow img {
  width: 20px;
  height: 20px;
}

.submit-wrapper:hover .submit-arrow {
  transform: rotate(45deg);
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1199.98px) {
  .contact-content {
    width: 55%;
    padding: 120px 25px 50px 40px;
  }

  .contact-form {
    right: 40px;
    width: 360px;
  }
}

@media (max-width: 991.98px) {
  .contact-card-inner {
    min-height: 0;
    padding-bottom: 40px;
  }

  .contact-image {
    position: relative;
    top: 0;
    width: 100%;
    height: 320px;
    border-radius: 10px 10px 0 0;
  }

  .contact-content {
    width: 100%;
    min-height: 0;
    padding: 40px;
  }

  .contact-form {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    margin: 0 40px;
  }
}

@media (max-width: 575.98px) {
  .contact-content {
    padding: 30px 20px;
  }

  .contact-form {
    margin: 0 20px;
    padding: 26px 20px 24px;
  }

  .contact-image {
    height: 250px;
  }

  .social-links {
    flex-wrap: wrap;
    margin-top: 32px;
  }

  .submit-btn {
    min-width: 0;
    flex: 1;
  }
}

.contact-card .section-kicker {
  color: #000;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  font-family: var(--font-cormorant-garamond);
}

.contact-card .text-center.contact-intro .section-title {
  color: #000;
}

.contact-card .text-center.contact-intro .section-title span {
  background: linear-gradient(to right, #f6c780 0%, #d58521 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #efa443;
}
.contact-card .inner-wrapper {
  display: flex;
  align-items: end;
  justify-content: space-between;
  /* Keeps the one-line heading clear of the form. */
  gap: 48px;
}
.contact-card .section-wrapper {
  background-color: #f6c78028;
  border-radius: 20px;
  padding-left: 22px;
  padding-bottom: 120px;
}

.small-title {
  font-size: 12px;
  letter-spacing: 1px;
}

.gallery-header h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 500;
}

.gallery-header h1 span {
  color: #dca14a;
}

/* Filter */

.filter-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  margin: 30px 0;
}

.filter-btn {
  border: 1px solid transparent;
  background:
    linear-gradient(#f7f0e0, #f7f0e0) padding-box,
    linear-gradient(
        to right,
        rgba(246, 199, 128, 1) 0%,
        rgba(213, 133, 33, 1) 100%
      )
      border-box;
  border-radius: 30px;
  height: 60px;
  padding: 0 70px;
  font-weight: 700;
  font-size: clamp(16px, 3vw, 25px);
  font-family: "Cormorant Garamond", Georgia, serif;
  transition: 0.3s;
}
.filter-btn:first-child {
  padding: 0 40px;
}
.filter-btn:hover,
.filter-btn.active {
  background:
    linear-gradient(
        to right,
        rgba(246, 199, 128, 1) 0%,
        rgba(213, 133, 33, 1) 100%
      )
      padding-box,
    linear-gradient(
        to right,
        rgba(246, 199, 128, 1) 0%,
        rgba(213, 133, 33, 1) 100%
      )
      border-box;
  color: #000;
}

/* Gallery */

.gallery-item a {
  display: block;
  height: 324px;
  overflow: hidden;
  border-radius: 7px;
  transition: 0.4s;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;

  transition: 0.5s;
}

.gallery-img:hover {
  transform: scale(1.08);
}

.gallery-item.hide {
  opacity: 0;
  transform: scale(0.8);
  display: none;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.85);

  display: none;

  align-items: center;
  justify-content: center;

  z-index: 9999;
}

.lightbox.show {
  display: flex;
}

.lightbox img {
  max-width: 85%;
  max-height: 85%;

  border-radius: 10px;

  animation: zoom 0.3s;
}

@keyframes zoom {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.close-btn,
.prev-btn,
.next-btn {
  position: absolute;

  background: white;

  border: none;

  width: 45px;
  height: 45px;

  border-radius: 50%;

  font-size: 28px;

  cursor: pointer;
}

.close-btn {
  top: 30px;
  right: 40px;
}

.prev-btn {
  left: 40px;
}

.next-btn {
  right: 40px;
}

@media (max-width: 768px) {
  .gallery-header h1 {
    font-size: 30px;
  }

  .gallery-item {
    height: 250px;
  }

  .lightbox img {
    max-width: 95%;
  }

  .prev-btn {
    left: 15px;
  }

  .next-btn {
    right: 15px;
  }

  .close-btn {
    right: 15px;
  }
}

/* Common vertical spacing for every content section (not banners/footer) */
.section-padding {
  padding: 100px 0;
}

/* Blog detail article */
.blog-detail-content {
  margin-top: 42px;
}
.blog-detail-article {
  max-width: 100%;
}
.blog-detail-featured-image {
  width: 100%;
  height: 616px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.blog-detail-copy {
  padding-top: 49px;
  color: #000;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.blog-detail-copy p {
  max-width: 100%;
  margin: 0 0 0px;
}
.blog-detail-opening::first-letter {
  float: left;
  margin: -10px 2px -6px 0;
  color: #111;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 992px) {
  .blog-detail-content .col-lg-10 {
    flex: 0 0 84%;
    max-width: 84%;
  }
}

@media (max-width: 767.98px) {
  .blog-detail-featured-image {
    height: auto;
    aspect-ratio: 2.06 / 1;
  }
  .blog-detail-copy {
    font-size: 12px;
  }
}
.blog-section {
  .section-kicker {
    border-right: none;
    padding-right: 0;
  }
  .section-title {
    max-width: 847px;
    width: 100%;
    margin: 0 auto;
    font-size: 50px !important;
  }
}
/* Blog details */
.blog-detail-copy hr {
  height: 1px;
  border: 0;
  margin: 55px 0;
  border-radius: 3px;
  opacity: 0.7;
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 52%,
    rgba(246, 199, 128, 1) 100%
  );
}

/* Continue reading cards */
.continue-reading {
  .reflection-arrow {
    width: 24px;
    height: 24px;
  }
  .reading-card-meta a img {
    width: 14px;
    height: auto;
    object-fit: contain;
    padding: 0;
  }
}

.continue-reading h2 {
  margin: 0 0 11px;
  color: #111;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  line-height: 1;
}
.continue-reading h2 span {
  color: #efa443;
}
.reading-card {
  overflow: hidden;
  border: 1px solid #d4d4d4;
  border-radius: 7px;
  background: #f7f0e0;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.reading-card > a {
  display: block;
}
.reading-card > img,
.reading-card > a > img {
  width: 100%;
  height: 298px;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  overflow: hidden;
}
.reading-card-body {
  min-height: 118px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  color: #000;
}
.reading-card-body > span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  line-height: 1;
  color: var(--amber);
}
.reading-card h3 {
  margin: 14px 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  /* Show the full title: wrap instead of truncating with an ellipsis, and
     reserve two lines so one- and two-line titles keep the cards aligned. */
  text-wrap: balance;
  min-height: 2.4em;
  overflow-wrap: break-word;
}
.reading-card h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.reading-card h3 a:hover,
.reading-card h3 a:focus-visible {
  color: var(--amber);
}
.reading-card p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.26;
  min-height: 84px;
  color: #45464d;
}
.reading-card-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  line-height: 1;
}
.reading-card-meta time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.reading-card-meta time img {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  flex-shrink: 0;
}
.reading-card-meta a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}
.reading-card-meta a img {
  width: 12px;
  height: 12px;
  padding: 2px;
  border-radius: 50%;
  background: var(--olive);
}

@media (max-width: 767.98px) {
  .continue-reading {
    margin-top: 45px;
  }
  .reading-card > img {
    height: 190px;
  }
  .reading-card-body {
    min-height: 160px;
    padding: 16px;
  }
  .reading-card-body > span,
  .reading-card p,
  .reading-card-meta {
    font-size: 11px;
  }
  .reading-card h3 {
    font-size: 20px;
  }
  .reading-card-meta time img {
    width: 13px;
    height: 13px;
  }
}

/* Continue Reading — Swiper */
.continue-swiper {
  overflow: hidden;
}
.continue-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.continue-swiper .swiper-slide .reading-card {
  width: 100%;
  display: flex;
  flex-direction: column;
}
/* Heading + nav arrows share one row at the TOP of the carousel: title on the
   left, prev/next arrows on the right. */
.continue-reading-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.continue-reading-head h2 {
  margin: 0;
}
.continue-swiper-nav {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.continue-pagination {
  position: static;
  order: -1;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  width: auto;
}
.continue-pagination .swiper-pagination-bullet {
  width: 46px;
  height: 7px;
  margin: 0 !important;
  border-radius: 2px;
  background: #615636;
  opacity: 1;
  transition:
    width 0.3s ease-out,
    background 0.3s ease-out,
    opacity 0.3s ease-out;
}
.continue-pagination .swiper-pagination-bullet-active {
  width: 52px;
  background: var(--amber);
  opacity: 1;
}
.continue-swiper-nav .swiper-button-prev,
.continue-swiper-nav .swiper-button-next {
  position: static;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid #b89b5e;
  border-radius: 50%;
  background: var(--olive);
  transition:
    background 0.3s ease-out,
    border-color 0.3s ease-out;
}
.continue-swiper-nav .swiper-button-prev::after,
.continue-swiper-nav .swiper-button-next::after {
  content: none;
}
.continue-swiper-nav .swiper-button-prev img,
.continue-swiper-nav .swiper-button-next img {
  width: 20px;
  height: auto;
}
.continue-swiper-nav .continue-prev img {
  transform: rotate(225deg);
}
.continue-swiper-nav .continue-next img {
  transform: rotate(45deg);
}
.continue-swiper-nav .swiper-button-prev:hover,
.continue-swiper-nav .swiper-button-next:hover {
  border-color: var(--amber);
  background: var(--amber);
}
.continue-swiper-nav .swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 767.98px) {
  .continue-pagination .swiper-pagination-bullet {
    width: 30px;
  }
  .continue-pagination .swiper-pagination-bullet-active {
    width: 36px;
  }
}

/* ==========================================================================
   Blog listing — featured post
   ========================================================================== */
/* .featured-post .section-kicker {
  border-right: none;
  padding-right: 0;
} */
.featured-post {
  padding-bottom: 0;
}
.featured-post-copy {
  .section-title,
  .section-title a {
    color: #2e3504;
    -webkit-text-fill-color: #2e3504;
  }
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
  .section-title {
    margin-bottom: 20px;
  }
}
.featured-post p {
  margin: 0 0 18px;
  color: var(--olive);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.featured-post .header-contact {
  width: auto;
  justify-content: flex-start;
}
.featured-post .contact-button {
  max-width: 232px;
  flex: 0 0 232px;
}

/* Two-photo collage: the inset tucks under the main frame and overlaps it. */
.post-collage {
  position: relative;
  /* max-width: 489px; */
  width: 100%;
  min-height: 593px;
  padding-left: 24px;
}
.post-collage img {
  position: absolute;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.post-collage-main {
  top: 0;
  left: 0;
  width: 92%;
  height: 593px;
}
.post-collage-inset {
  bottom: 49px;
  right: 0;
  width: 40%;
  max-width: 174px;
  height: 239px;
}

/* Date chip — the filter button's gradient border at a quieter scale. */
.post-date {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0 !important;
  border-radius: 30px;
  line-height: 1;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}
.post-date img {
  width: 28px;
  flex-shrink: 0;
}

/* ==========================================================================
   Blog listing — archive grid
   ========================================================================== */
.blog-archive {
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(244, 184, 93, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.blog-archive .section-kicker {
  border-right: none;
  padding-right: 0;
}
.blog-archive .filter-buttons {
  margin: 26px 0 40px;
  /* justify-content: space-between; */
  gap: 20px;
}
.blog-archive .filter-btn {
  font-size: 21px;
}
.blog-archive .filter-btn,
.blog-archive .filter-btn:first-child {
  height: 60px;
  padding: 0 36px;
}
.blog-grid-item.hide {
  display: none;
}
/* Cards share a row, so the copy blocks have to line up across it. */
.blog-grid .reading-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-grid .reading-card-body {
  flex: 1 1 auto;
  padding-bottom: 20px;
}
.blog-grid .reading-card h3 {
  margin: 10px 0 15px 0;
  line-height: 1.3;
  /* min-height: 56px; */
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  white-space: normal;
  overflow: visible;
  color: var(--olive);
  text-overflow: clip;
}
.blog-grid .reading-card > img,
.blog-grid .reading-card > a > img {
  height: 235px;
}
.blog-grid .reflection-arrow {
  width: 24px;
  height: 24px;
}
.blog-grid .reading-card-meta a img {
  width: 14px;
  height: auto;
  padding: 0;
  object-fit: contain;
}

@media (max-width: 1199.98px) {
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    height: 46px;
    padding: 0 20px;
    font-size: 17px;
  }
  .post-collage {
    min-height: 420px;
  }
  .post-collage-main {
    height: 320px;
  }
  .post-collage-inset {
    height: 250px;
  }
}

@media (max-width: 991.98px) {
  .post-collage {
    margin-bottom: 40px;
  }
  .featured-post .header-contact {
    justify-content: center;
  }
  .featured-post-copy {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .post-collage {
    min-height: 330px;
  }
  .post-collage-main {
    height: 250px;
  }
  .post-collage-inset {
    height: 195px;
  }
  .featured-post p {
    font-size: 13px;
  }
  .post-date {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }
  .blog-archive .filter-buttons {
    gap: 10px;
    margin: 20px 0 28px;
  }
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
  }
  .blog-grid .reading-card > img {
    height: 190px;
  }
  .blog-grid .reading-card h3 {
    font-size: 20px;
  }
}

/* ==========================================================================
   Events page — upcoming event cards and the ceremony schedule table
   ========================================================================== */
.event-showcase-intro {
  margin-bottom: 42px;
}
.event-showcase-intro .section-kicker {
  margin-bottom: 6px;
}
.event-showcase-intro .section-title {
  margin: 0;
}
/* Tablet & desktop: the whole title on one line. It runs ~20em wide, so the
   type scales with the intro's width (4.8cqi) up to the shared 58px and
   nowrap stops it breaking. Phones wrap normally. */
@media (min-width: 768px) {
  .event-showcase-intro {
    container-type: inline-size;
  }
  .event-showcase-intro .section-title {
    font-size: min(58px, 4.8cqi);
    white-space: nowrap;
    text-wrap: nowrap;
  }
}

/* Photo card with the detail panel lifted over the foot of the image. */
.event-listing-card {
  height: 98%;
  /* padding: 12px;
  border: 1px solid #ecd293; */
  border-radius: 12px;
  background: rgb(213, 133, 33, 0.1);
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
}
.event-listing-card img {
  width: 100%;
  height: 423px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.event-listing-body {
  position: relative;
  z-index: 1;
  margin: -159px 20px 0px;
  padding: 25px 14px;
  border: 1px solid #ecd293;
  border-radius: 7px;
  background: rgb(247, 237, 210, 0.72);
  box-shadow: 0 14px 30px rgba(46, 53, 4, 0.14);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
/* The middle card sits a step lower so the row reads as a staggered set. */
.event-listing-card-raised {
  margin-top: 40px;
  height: 98%;
  .event-listing-body {
    margin: -132px 20px 0;
  }
}
/* Dynamic archive grid: stagger the middle card of every 3-up row so the
   AJAX-rendered listing matches the static staggered design. Applies only at
   the 3-column (col-lg-4) width. */
@media (min-width: 992px) {
  .allowance-result-item:nth-child(3n + 2) .event-listing-card {
    margin-top: 40px;
    height: 98%;
  }
  .allowance-result-item:nth-child(3n + 2) .event-listing-body {
    margin: -132px 20px 0;
  }
}
.event-listing-title,
.event-listing-title a {
  margin: 0 0 15px;
  color: #2e3504;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  /* Prefer a single line, but never clip: a title too long for the card wraps. */
  overflow-wrap: break-word;
}
.event-listing-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Wrap so the date + time stack instead of overflowing the card on narrow
     widths; they stay on one line whenever there is room. */
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 20px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}
.event-listing-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.event-listing-place {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0 0 14px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}
.event-listing-meta img,
.event-listing-place img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}
.event-listing-note {
  margin: 0 0 12px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.event-listing-note strong {
  font-weight: 600;
}
.event-listing-body .reflection-link {
  font-size: 14px;
  gap: 8px;
}
.event-listing-body .reflection-arrow {
  width: 24px;
  height: 24px;
}
.event-listing-body .reflection-arrow img {
  width: 13px;
  height: 13px;
}

/* Ceremony schedule */
.event-schedule-intro {
  margin-bottom: 34px;
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(244, 184, 93, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.event-schedule-intro .section-kicker {
  padding-right: 0;
  border-right: none;
}
.event-schedule-intro .section-title {
  margin: 0;
}
.schedule-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--divider);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}
.schedule-table {
  width: 100%;
  min-width: 1060px;
  margin: 0;
  border-collapse: collapse;
  color: var(--olive);
}
.schedule-table thead {
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 0%,
    rgba(213, 133, 33, 1) 100%
  );
}
.schedule-table thead th {
  padding: 17px 18px;

  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}
.schedule-table thead th + th {
  border-left: 1px solid rgba(46, 53, 4, 0.14);
}
.schedule-table tbody td {
  padding: 19px 18px;
  border-top: 1px solid var(--divider);
  background: #fbefd8;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}
.schedule-table tbody td + td {
  border-left: 1px solid var(--divider);
}
.schedule-table tbody td a {
  color: #2e3504;
}

@media (max-width: 1199.98px) {
  .event-listing-card > img {
    height: 290px;
  }
  .event-listing-body {
    margin: -120px 8px 0;
    padding: 18px 14px 20px;
  }
  .event-listing-title {
    font-size: 22px;
  }
}

@media (max-width: 991.98px) {
  .event-listing-card-raised {
    margin-top: 0;
  }
  .schedule-table thead th {
    padding: 14px 18px;
    font-size: 20px;
  }
  .schedule-table tbody td {
    padding: 16px 18px;
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .event-showcase-intro {
    margin-bottom: 30px;
    text-align: center;
  }
  .event-showcase-intro .section-kicker {
    padding-right: 0;
    border-right: none;
  }
  .event-listing-card > img {
    height: 250px;
  }
  .event-listing-body {
    margin: -110px 8px 0;
  }
  .event-schedule-intro {
    margin-bottom: 26px;
  }
  .schedule-table thead th {
    font-size: 18px;
  }
  .schedule-table tbody td {
    font-size: 14px;
  }
}

/* Be Part Of The Journey - CTA banner */
.journey-process {
  .section-title span:first-child {
    color: #e19534;
    -webkit-background-clip: none;
    background-clip: none;
    -webkit-text-fill-color: inherit;
  }
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.journey-cta {
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  margin-bottom: 60px;
  .header-contact:hover .contact-button,
  .contact-button:hover,
  .contact-button:focus-visible {
    background: #4d580a;
    color: var(--cream);
  }

  .header-contact {
    width: 336px;
    justify-content: flex-start;
  }
  .contact-button {
    max-width: 321px;
    flex: 0 0 321px;
  }
}
.post-type-archive-storytelling .journey-cta {
  margin-top: 70px;
}
.single-service-main .journey-cta {
  margin-top: 40px;
}
.journey-cta::before {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    to right,
    rgba(46, 53, 4, 0.92) 0%,
    rgba(46, 53, 4, 0.75) 35%,
    rgba(46, 53, 4, 0.25) 65%,
    rgba(46, 53, 4, 0) 100%
  );
}
.journey-cta .container {
  position: relative;
  z-index: 1;
}
.journey-cta .section-title {
  margin: 0 0 25px;
  color: var(--cream);
}
.journey-cta p {
  max-width: 547px;
  margin: 0 0 30px;
  color: var(--cream);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.journey-cta .contact-button {
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .journey-cta::before {
    background: linear-gradient(
      to right,
      rgba(46, 53, 4, 0.92) 0%,
      rgba(46, 53, 4, 0.7) 70%,
      rgba(46, 53, 4, 0.45) 100%
    );
  }
}

@media (max-width: 575.98px) {
  .journey-cta p {
    font-size: 14px;
    margin-bottom: 26px;
  }
}

/* ==========================================================================
   Sacred Space — overlapping ceremony imagery beside the copy
   ========================================================================== */
.sacred-space {
  background: var(--cream);
}
.sacred-space-media {
  position: relative;
  padding-bottom: 60px;
  padding-right: 60px;
}
.sacred-space-img-main {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.sacred-space-img-overlay {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  max-width: 190px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 8px solid var(--cream);
}
.sacred-space-copy p {
  margin: 0 0 22px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.sacred-space-copy p:last-child {
  margin-bottom: 0;
}
/* The heading shares a half-width column with the collage; at the global 58px
   its longest line (~560px) overflows that column and spills to 3 lines.
   Step it down per container width so desktop holds it to 2 balanced lines. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .sacred-space-copy .section-title {
    font-size: 44px;
  }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .sacred-space-copy .section-title {
    font-size: 50px;
  }
}
@media (max-width: 991px) {
  .sacred-space-media {
    padding-bottom: 40px;
    padding-right: 40px;
    margin-bottom: 32px;
  }
  .sacred-space-img-main {
    max-width: 100%;
  }
}

/* ==========================================================================
   Journey Process — three numbered steps linked by dotted arcs
   ========================================================================== */
.journey-process-head {
  margin-bottom: 46px;
}
.journey-process-head .header-contact {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}
.journey-process-steps {
  position: relative;
}
.process-step {
  position: relative;
  max-width: 300px;
}
.process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 103px;
  margin-bottom: 22px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--divider) 0%, var(--amber) 100%);
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 96px;
  font-weight: 700;
  /* Cormorant leaves a deep descender gap below the baseline, so a numeral
     centred by metrics rides high. Trim the line box to the cap so the flex
     centring sees the glyph itself. */
  line-height: 1;
  text-box: trim-both cap alphabetic;
  span {
    line-height: 0.8;
    display: inline-block;
    position: relative;
    top: -12px;
  }
}
/* Fallback for browsers without text-box: offset by the unused descender */
@supports not (text-box: trim-both cap alphabetic) {
  .process-step-number {
    padding-top: 0.18em;
  }
}
.process-step-title {
  margin: 0 0 12px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
}
.process-step p {
  margin: 0;
  color: #45464d;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
/* Middle step sits lower with its number beneath the copy */
.process-step-mid {
  margin-top: -30px;
}
.process-step-mid .process-step-number {
  margin: 22px 0 0;
}
/* Dotted connectors, drawn only where the three columns sit side by side */
@media (min-width: 768px) {
  .process-step::before {
    content: "";
    position: absolute;
    width: 77%;
    height: 100%;
    pointer-events: none;
  }
  .process-step::before {
    left: 50%;
    /* top: 34px;
    transform: rotate(6deg); */
    background: url(../img/private-ceremonies/3.png) no-repeat center;
    background-size: 100% auto;
  }
  .journey-process-steps .col-md-4:nth-child(2) .process-step::before {
    left: 43%;
    background: url(../img/private-ceremonies/4.png) no-repeat center;
    background-size: 100% auto;
    top: 13%;
  }
  .journey-process-steps .col-md-4:last-child .process-step::before {
    display: none;
  }
  /* .process-step::after {
    left: 57%;
    top: 118px;
    transform: rotate(-16deg);
  } */
}
@media (max-width: 767px) {
  .process-step {
    max-width: none;
    margin-bottom: 34px;
  }
  .process-step-mid {
    margin-top: 0;
  }
  .process-step-mid .process-step-number {
    margin: 0 0 22px;
    order: -1;
  }
}

/* ==========================================================================
   Ceremony Arrival — copy + quote beside a mirrored photo collage
   ========================================================================== */
.ceremony-arrival {
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.ceremony-arrival .journey-copy p {
  color: #45464d;
  line-height: 1.5;
}
.ceremony-arrival .journey-copy p + p {
  margin-top: 24px;
}
.ceremony-arrival .journey-copy blockquote {
  margin: 33px 0 25px 20px;
  color: #d58521;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 37px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.12;
  padding-left: 30px;
  padding-top: 17px;
  padding-bottom: 17px;
  border-left: 1px solid var(--olive);
}

/* Collage mirrored: main photo sits right, inset overlaps its top-left edge */
.ceremony-arrival .post-collage-main {
  left: auto;
  right: 0;
}
.ceremony-arrival .post-collage-inset {
  top: 48px;
  bottom: auto;
  left: 0;
}
.pr-0 {
  padding-right: 0;
}
@media (max-width: 991.98px) {
  .ceremony-arrival .post-collage {
    margin-bottom: 0;
  }
}
@media (max-width: 767.98px) {
  .ceremony-arrival .post-collage-inset {
    top: 30px;
    width: 35%;
  }
  .ceremony-arrival .journey-copy blockquote {
    margin-left: 0;
    font-size: 30px;
  }
}

/* ==========================================================================
   Ceremony Included — photo beside a 2x2 grid of icon cards
   ========================================================================== */
.ceremony-included-intro {
  margin-bottom: 46px;
}
.ceremony-included-intro .section-kicker {
  padding-right: 0;
  border-right: none;
  letter-spacing: 0.04em;
}
.ceremony-included-intro .section-title {
  margin-bottom: 0;
}
.ceremony-included-intro .section-title span {
  background: linear-gradient(
    to right,
    rgba(213, 133, 33, 1) 0%,
    rgba(246, 199, 128, 1) 54%,
    rgba(213, 133, 33, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ceremony-included-media {
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.ceremony-included-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 533px;
  object-fit: cover;
}
.included-card {
  padding: 29px 25px;
  border: 1px solid rgba(184, 155, 94, 0.3);
  border-radius: 7px;
  background: #f7f0e0;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
  margin: 30px 0 0;
}
.included-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 6px;
  background: linear-gradient(
    to right,
    rgba(246, 199, 128, 1) 1%,
    rgba(213, 133, 33, 1) 100%
  );
}
.included-card-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.included-card-title {
  margin: 0 0 15px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  line-height: 1.2;
}
.included-card p {
  margin: 0;
  color: #45464d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
@media (max-width: 991.98px) {
  .ceremony-included-media img {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
}
@media (max-width: 575.98px) {
  .ceremony-included-intro {
    margin-bottom: 32px;
  }
  .included-card-title {
    font-size: 21px;
  }
}

/* ==========================================================================
   Testimonials — two quote cards per view in a Swiper slider
   ========================================================================== */
.testimonials {
  background: var(--cream);
}
.testimonials-intro {
  margin-bottom: 20px;
}
.testimonials-intro .section-kicker {
  padding-right: 0;
  border-right: none;
  letter-spacing: 0.04em;
}
.testimonials-intro .section-title {
  margin-bottom: 0;
}
.testimonials-intro .section-title span {
  background: linear-gradient(
    to right,
    rgba(213, 133, 33, 1) 0%,
    rgba(246, 199, 128, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.testimonials-swiper {
  padding: 8px;
  margin: -8px;
}
.testimonials-swiper .swiper-slide {
  height: auto;
}
/* Thinner, shorter bars than the shared pagination; active one doubles in width */
.testimonials-pagination {
  gap: 2px;
  margin-top: 40px;
}
.testimonials-pagination .swiper-pagination-bullet {
  width: 46px;
  height: 7px;
  border-radius: 2px;
  background: #615636;
  cursor: pointer;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
}
.testimonials-pagination .swiper-pagination-bullet-active {
  width: 89px;
  background: #d58521;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 7px;
  background: rgba(246, 199, 138, 0.07);
  box-shadow: inset 0 0 12px rgba(184, 155, 94, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.testimonial-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.testimonial-quote {
  width: 51px;
  height: auto;
}
.testimonial-rating {
  display: flex;
  gap: 3px;
}
.testimonial-rating img {
  width: 24px;
  height: 24px;
}
.testimonial-text {
  margin: 0 0 49px;
  color: #45464d;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.75;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
}
.testimonial-author img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.testimonial-name {
  margin: 0 0 2px;
  color: #000;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.testimonial-role {
  display: block;
  color: #45464d;
  font-size: 18px;
  line-height: 1.4;
}
@media (max-width: 575.98px) {
  .testimonial-text {
    font-size: 13px;
  }
}

/* ==========================================================================
   Storytelling — featured story: sage card overlapping two photos
   ========================================================================== */
.story-feature {
}

.story-feature-img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.story-feature-img-left {
  height: 541px;
}
.story-feature-img-right {
  height: 583px;
}
.story-feature-card {
  position: relative;
  z-index: 1;
  min-height: 433px;
  padding: 60px 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 7px;
  background: #aaa686;
  color: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.story-feature-card .section-kicker {
  align-self: flex-start;
  color: #fff;
  font-size: clamp(16px, 3vw, 25px);
  font-weight: 700;
  border-right-color: #fff;
}
.story-feature-card .section-title {
  margin-bottom: 24px;
  color: #fff;
}
/* Desktop: keep the feature title on one line. At 58px it runs ~640px, wider
   than the card on lg/xl containers, so it steps down to fit there. */
@media (min-width: 992px) {
  .story-feature-card .section-title {
    white-space: nowrap;
    font-size: 42px;
  }
}
@media (min-width: 1200px) {
  .story-feature-card .section-title {
    font-size: 50px;
  }
}
@media (min-width: 1400px) {
  .story-feature-card .section-title {
    font-size: 58px;
  }
}
.story-feature-card p {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.story-feature-card p:last-child {
  margin-bottom: 0;
}
@media (min-width: 992px) {
  /* 33.33% + 58.33% + 25% = 116.67%: the card pulls left over the photo and the
     right photo steps back in so the three pieces still fill the row exactly. */
  .story-feature-card-col {
    margin-top: 237px;
    margin-left: -18.3333%;
  }
  .story-feature-right-col {
    margin-top: 10%;
    margin-left: 1.6667%;
  }
}
@media (max-width: 991.98px) {
  .story-feature-img-left,
  .story-feature-img-right {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
  .story-feature-card {
    min-height: 0;
    margin: -80px 20px 24px;
    padding: 44px 32px;
  }
}
@media (max-width: 575.98px) {
  .story-feature-card {
    margin: -60px 12px 20px;
    padding: 34px 22px;
  }
  .story-feature-card p {
    font-size: 14px;
  }
}

/* Storytelling — story collection */
.story-collection-intro {
  margin-bottom: 40px;
}

.story-collection {
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(213, 133, 33, 1) 9%,
      rgba(246, 199, 128, 1) 51%,
      rgba(246, 199, 128, 1) 51%,
      rgba(213, 133, 33, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}

.story-collection-intro .section-kicker {
  padding-right: 0;
  border-right: none;
}
.story-collection .blog-grid .reading-card p {
  min-height: 0;
}
.story-collection .story-collection-cta {
  width: auto;
  margin-top: 22px;
  justify-content: center;
}
.story-collection .story-collection-cta .contact-button {
  max-width: 280px;
  flex: 0 0 280px;
}
.journey-section {
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(213, 133, 33, 1) 0%,
      rgba(246, 199, 128, 1) 11%,
      rgba(213, 133, 33, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
  .journey-copy p {
    color: #45464d;
  }
  .journey-copy blockquote {
    margin: 24px 0 25px 53px;
    border-color: #2e3504;
  }
}

/* ==========================================================================
   About — the story: copy beside two staggered landscape photos
   ========================================================================== */
/* Desktop: "Born from lived experience" on line one, "not theory" on line
   two. Greedy wrapping (not balance) fills the first line, and the size steps
   down per container width so that first line fits the half-width column. */
@media (min-width: 992px) {
  .about-story .section-title {
    text-wrap: wrap;
    font-size: 40px;
  }
}
@media (min-width: 1200px) {
  .about-story .section-title {
    font-size: 50px;
  }
}
@media (min-width: 1400px) {
  .about-story .section-title {
    font-size: 56px;
  }
}
.about-story {
  .section-title span {
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 48%,
      rgba(213, 133, 33, 1) 48%,
      rgba(246, 199, 128, 1) 100%
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #efa443;
  }
}
.about-story-copy p,
.about-founder-copy p,
.about-meet-intro p,
.about-meet-item p,
.about-approach-list p {
  margin: 25px 0 0;
  color: #45464d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.about-meet-item p {
  width: 100%;
  max-width: 367px;
}
.about-story-images {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.about-story-img,
.about-founder-images img,
.about-approach-visual img {
  display: block;
  object-fit: cover;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}
.about-story-img {
  width: calc(50% - 12px);
  height: 397px;
}
.about-story-img-second {
  margin-top: 106px;
}

/* About — founder profiles (portrait + small accent photo) */
.about-founder {
  position: relative;
  padding: 100px 0;
  .section-title {
    line-height: 1.08;
  }
}
.about-founder:not(.about-founder-reverse) {
  background: rgba(184, 155, 94, 0.14);
}
.about-founder-images {
  position: relative;
  padding-bottom: 60px;
}
.about-founder-portrait {
  width: 100%;
  max-width: 489px;
  height: 720px;
}
.about-founder-accent {
  position: absolute;
  right: -18px;
  bottom: 114px;
  width: 174px;
  height: 239px;
}
.about-founder-reverse .about-founder-portrait {
  margin-left: auto;
}
.about-founder-reverse .about-founder-accent {
  right: auto;
  left: -10%;
  bottom: auto;
  /* Sits lower on the portrait, beside the figure rather than at the top. */
  top: 30%;
}
.about-founder-quote {
  margin: 66px 0 30px;
  padding: 20px 0 20px 30px;
  border-left: 1px solid var(--amber);
  color: #d58521;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 4.5vw, 36px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.15;
}
/* Bootstrap's `g-5` puts `margin-top: -48px` on the row. The first founder
   section has 100px of top padding to absorb it, but the reverse section is
   `pt-0`, so the negative margin pulled its whole row 48px up into the
   previous section — the portrait then painted over that section's tag row.
   Cancel the pull where there is no padding to absorb it. */
.about-founder.pt-0 > .container > .row {
  margin-top: 0;
}

.about-founder-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-founder-tags li {
  padding: 9px 24px;
  background: rgba(217, 217, 217, 0.35);
  border: 1px solid #ddd;
  border-radius: 8px;
  color: var(--olive);
  font-size: 14px;
  font-weight: 500;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}

/* About — where their paths meet */
.about-meet {
  position: relative;
  overflow: hidden;
  hr {
    height: 1px;
    border: 0;
    margin: 50px 0;
    border-radius: 3px;
    opacity: 0.7;
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 52%,
      rgba(246, 199, 128, 1) 100%
    );
  }
}
.about-meet .container {
  position: relative;
  z-index: 1;
}
/* .about-meet-intro {
  margin-bottom: 50px;
} */
.about-meet-intro .section-kicker {
  padding-right: 0;
  border-right: none;
}
.about-meet-intro .section-title {
  margin-bottom: 20px;
}
.about-meet-item {
  height: 100%;
  padding-top: 24px;
  /* border-top: 1px solid #b89b5e; */
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    opacity: 0.8;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(244, 213, 166, 1) 0%,
      rgba(213, 133, 33, 1) 49%,
      rgba(244, 220, 183, 1) 100%
    );
  }
}
.about-meet-grid .col-12:last-child .about-meet-item {
  &::before {
    display: none;
  }
}
.about-meet-item h3,
.about-approach-list h3 {
  margin: 0 0 12px;
  color: var(--olive);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(24px, 4.5vw, 40px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

/* About — philosophy & approach */
.about-approach {
  background: rgba(184, 155, 94, 0.14);
}
.about-approach .section-title {
  margin-bottom: 0;
}
.about-approach-sub {
  margin: 0 0 50px;
  color: #dd8d29;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.about-approach-visual {
  position: relative;
}
/* .about-approach-block {
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 40px;
  border-radius: 7px;
  background: rgba(46, 53, 4, 0.4);
} */
.about-approach-visual img {
  position: relative;
  width: 100%;
  height: 723px;
  border-radius: 7px;
}
.about-approach-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.about-approach-list li {
  display: flex;
  gap: 28px;
  padding: 25px 0;
}
.about-approach-list li:first-child {
  padding-top: 0;
}
.about-approach-list li:last-child {
  border-bottom: none;
}
.about-approach-list p {
  margin-bottom: 0;
}
.about-approach-number {
  flex: 0 0 auto;
  color: #dd8d29;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 80px;
  font-weight: 700;
  line-height: 0.9;
}

.story-collection {
  .blog-grid .reading-card h3 {
    margin: 0px 0 15px 0;
    line-height: 1.1;
    /* min-height: 56px; */
    font-size: clamp(24px, 4.5vw, 40px);
  }
  .reading-card-body {
    padding: 41px 38px;
  }
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms & Conditions)
   Reuses the blog detail prose scale — no new type or colour is introduced.
   ========================================================================== */
.legal-updated {
  margin: 0 0 28px;
  color: #6b6b6b;
  font-family: Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.legal-copy {
  padding-top: 0;
}
.legal-copy h2 {
  margin: 44px 0 16px;
  color: #111;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
}
.legal-copy h2:first-child {
  margin-top: 0;
}
.legal-copy h3 {
  margin: 30px 0 12px;
  color: #111;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}
.legal-copy ul,
.legal-copy ol {
  margin: 0 0 20px;
  padding-left: 20px;
}
.legal-copy li {
  margin-bottom: 10px;
}
.legal-copy li::marker {
  color: #efa443;
}
.legal-copy a {
  color: #d58521;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-copy a:hover,
.legal-copy a:focus-visible {
  color: #efa443;
}

@media (max-width: 767.98px) {
  .legal-copy {
    font-size: 12px;
  }
  .legal-copy h2 {
    margin-top: 32px;
    font-size: 24px;
  }
  .legal-copy h3 {
    font-size: 20px;
  }
}

/* Flat accent colour on highlighted heading portions */
.event-schedule-intro .section-title span.title-accent,
.services-intro .section-title span.title-accent {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #efa443;
  color: #efa443;
}

/* ==========================================================================
   Single event — detail layout
   ========================================================================== */
.event-single-copy {
  margin-top: 28px;
  container-type: inline-size;
}
/* Scale the title with its column (up to the shared 58px) so a typical event
   name like "Private Ceremony Experience" (~11.6em) sits on one line; longer
   names still wrap rather than shrinking further. */
.event-single-copy .section-title {
  margin-bottom: 16px;
  font-size: min(58px, 8.2cqi);
}
.event-single-copy p {
  margin: 0 0 16px;
  color: #000;
  font-size: 16px;
  line-height: 1.7;
}
.event-single-meta {
  padding: 30px;
  border: 1px solid rgba(46, 53, 4, 0.15);
  border-radius: 12px;
  background: #fff;
}
/* The meta list is a stacked block here, not the single-line card row. */
.event-single-meta-list {
  display: block;
  margin: 0;
  line-height: 1.6;
}
.event-single-meta-list li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(46, 53, 4, 0.12);
  color: #000;
  font-size: 15px;
  line-height: 1.5;
}
.event-single-meta-list li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.event-single-meta-list li img {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
  object-fit: contain;
}
.event-single-meta-list li strong {
  font-weight: 600;
}
.event-registration {
  margin-top: 24px;
}
.event-registration h3 {
  margin: 0 0 10px;
  color: #2e3504;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
}
.event-registration p {
  margin: 0 0 12px;
  color: #000;
  font-size: 15px;
  line-height: 1.6;
}
.event-single-meta .cta-button,
.event-single-meta .btn-primary {
  margin-top: 20px;
}