/* === JT source: assets/css/public-hero-system-437.css === */
/* Build 437 — canonical public hero system (restored desktop feather from the pre-433 baseline).
   This is the final presentation layer for public photographic heroes. It does
   not replace Hero Manager crop data or page content; it standardises geometry,
   copy anchoring, fades, typography rhythm, captions and responsive behaviour
   after all legacy/page-specific hero styles have loaded.

   Intentional exceptions retained:
   - THOV member details and Reviews chips remain content inside the shared copy.
   - Collaborations keeps its selected Anya/live imagery.
   - Gallery keeps its own media markup/content while inheriting the shared plane.
   - Wedding Advice article heroes keep article-scale typography and mobile bottom
     composition while using the same image-plane/fade/viewport rhythm.
   - Legal document headers are not photographic heroes and are not converted.
*/

:root {
  --jt-hero-header-desktop: 112px;
  --jt-hero-divider-desktop: 102px;
  --jt-hero-desktop-min: 520px;
  --jt-hero-tablet-min: 540px;
  --jt-hero-phone-min: 570px;
  --jt-hero-copy-column: 45%;
  --jt-hero-image-left: 30%;
  --jt-hero-image-width: 70%;
  --jt-hero-copy-gutter: clamp(28px, 5vw, 92px);
  --jt-hero-copy-max: 620px;
  --jt-hero-copy-text-max: 58ch;
  --jt-hero-heading-max: 18ch;
  --jt-hero-heading-size: clamp(2.35rem, 3vw, 3.55rem);
  --jt-hero-body-size: clamp(.98rem, 1vw, 1.04rem);
  --jt-hero-image-filter: brightness(1.08) saturate(1.10) contrast(1.03);
  --jt-hero-desktop-fade:
    linear-gradient(90deg,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 30%,
      rgba(0,0,0,.99) 32%,
      rgba(0,0,0,.90) 34%,
      rgba(0,0,0,.72) 37%,
      rgba(0,0,0,.48) 40%,
      rgba(0,0,0,.27) 43%,
      rgba(0,0,0,.12) 46%,
      rgba(0,0,0,.045) 48%,
      rgba(0,0,0,0) 51%,
      rgba(0,0,0,0) 100%);
  --jt-hero-tablet-fade:
    linear-gradient(90deg,
      rgba(3,3,3,.99) 0%,
      rgba(3,3,3,.94) 25%,
      rgba(3,3,3,.76) 48%,
      rgba(3,3,3,.34) 72%,
      rgba(3,3,3,.08) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.05) 55%,
      rgba(0,0,0,.28) 100%);
  --jt-hero-mobile-fade:
    linear-gradient(90deg,
      rgba(3,3,3,.94) 0%,
      rgba(3,3,3,.88) 20%,
      rgba(3,3,3,.72) 40%,
      rgba(3,3,3,.48) 60%,
      rgba(3,3,3,.24) 78%,
      rgba(3,3,3,.08) 91%,
      rgba(3,3,3,0) 100%),
    linear-gradient(180deg,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.04) 44%,
      rgba(0,0,0,.24) 70%,
      rgba(0,0,0,.68) 100%);
}

/* -------------------------------------------------------------------------
   1. STANDARD MANAGED HERO SHELL
   ------------------------------------------------------------------------- */
html body #main-content > .jt-standard-hero {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050505 !important;
  color: #f7f1e7 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(210,162,58,.28) !important;
}

html body #main-content > .jt-standard-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: var(--jt-hero-desktop-fade) !important;
}
html body #main-content > .jt-standard-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 76% 38%, rgba(210,162,58,.075), transparent 34%) !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
  box-sizing: border-box !important;
  /* Build 434: this wrapper must NOT form a stacking context. The hero fade is
     a sibling pseudo-element on .jt-standard-hero at z-index:1. Build 433 put
     the whole inner wrapper at z-index:2, which lifted the media above the fade
     and exposed the hard legacy image edge. Keep the wrapper static/auto so the
     media remains beneath the fade while the copy/caption can layer above it. */
  position: static !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
  text-align: left !important;
  text-shadow: none !important;
  transform: none !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-copy .kicker,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .preview-eyebrow {
  display: block !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #efc767 !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
  width: auto !important;
  max-width: var(--jt-hero-heading-max) !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #f7f1e7 !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-hero-heading-size) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: .012em !important;
  text-align: left !important;
  text-wrap: balance;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 .gold,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 .gold-line,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 > span {
  color: #edcf83 !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow):not(.jt-hero-subtitle) {
  max-width: var(--jt-hero-copy-text-max) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: rgba(255,255,255,.83) !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: var(--jt-hero-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.56 !important;
  letter-spacing: normal !important;
  text-align: left !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow):not(.jt-hero-subtitle):last-of-type {
  margin-bottom: 0 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p.jt-hero-subtitle {
  display: block !important;
  max-width: 52ch !important;
  margin: -1px 0 11px !important;
  padding: 0 !important;
  color: #efc767 !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(.98rem,1.06vw,1.1rem) !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  letter-spacing: .01em !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy p a {
  color: #efc767 !important;
}

html body #main-content > .jt-standard-hero .jt-standard-hero-copy .hero-actions,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .preview-hero-actions,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .reviews-hero-actions,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .contact-hero-actions,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .about-hero-actions,
html body #main-content > .jt-standard-hero .jt-standard-hero-copy .occasions-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px 14px !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy > .btn {
  margin-top: 22px !important;
}

/* Media plane. Crop-ready images are positioned by public-hero-manager and the
   inline !important crop values deliberately win over these fallback rules. */
html body #main-content > .jt-standard-hero .jt-standard-hero-media {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090806 !important;
  box-shadow: none !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media picture,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > figure,
html body #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image,
html body #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media img {
  filter: var(--jt-hero-image-filter) !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media img:not([data-jt-crop-ready="1"]) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--jt-hero-live-position, var(--jt-hero-position, 58% 50%)) !important;
}

/* Captions: one component, anchored to the clean far-right image area. */
html body #main-content > .jt-standard-hero .jt-standard-hero-media > figcaption,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-standard-hero-caption,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-hero-managed-caption {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  left: auto !important;
  right: clamp(18px,2.6vw,44px) !important;
  bottom: 16px !important;
  width: auto !important;
  max-width: min(38vw,520px) !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-left: 2px solid #d2a23a !important;
  border-radius: 0 !important;
  background: rgba(0,0,0,.68) !important;
  color: #f7f1e7 !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .8rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media > [data-jt-hero-caption][hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   2. DESKTOP GEOMETRY — shared copy anchor + restored 70% image plane
   ------------------------------------------------------------------------- */
@media (min-width:1001px) {
  html body #main-content > .jt-standard-hero {
    min-height: max(var(--jt-hero-desktop-min), calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop))) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    min-height: max(var(--jt-hero-desktop-min), calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop))) !important;
    display: grid !important;
    grid-template-columns: minmax(0,var(--jt-hero-copy-column)) minmax(0,calc(100% - var(--jt-hero-copy-column))) !important;
    grid-template-rows: minmax(0,1fr) !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 100% !important;
    padding: clamp(28px,4vh,46px) var(--jt-hero-copy-gutter) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    left: var(--jt-hero-image-left) !important;
    right: 0 !important;
    width: var(--jt-hero-image-width) !important;
    height: 100% !important;
  }
  html body #main-content > .jt-standard-hero::before {
    background: var(--jt-hero-desktop-fade) !important;
  }
}

/* -------------------------------------------------------------------------
   3. TABLET GEOMETRY — full-bleed image, left copy field, no card/split layout
   ------------------------------------------------------------------------- */
@media (min-width:641px) and (max-width:1000px) {
  html body #main-content > .jt-standard-hero {
    min-height: clamp(var(--jt-hero-tablet-min), 75svh, 720px) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 54px clamp(28px,5vw,58px) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    width: min(var(--jt-hero-copy-max),78vw) !important;
    max-width: var(--jt-hero-copy-max) !important;
    padding: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    max-width: 18ch !important;
    font-size: clamp(2.35rem,5vw,3.55rem) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body #main-content > .jt-standard-hero::before {
    background: var(--jt-hero-tablet-fade) !important;
  }
}

/* -------------------------------------------------------------------------
   4. PHONE / PORTRAIT — preserve the approved full-bleed fade from Build 427
   ------------------------------------------------------------------------- */
@media (max-width:640px) {
  html body #main-content > .jt-standard-hero {
    min-height: clamp(var(--jt-hero-phone-min),82svh,740px) !important;
    align-items: center !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 44px 22px 58px !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    width: 100% !important;
    max-width: 540px !important;
    padding: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    max-width: 18ch !important;
    font-size: clamp(2.15rem,10vw,3rem) !important;
    line-height: 1.06 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow):not(.jt-hero-subtitle) {
    max-width: 52ch !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .preview-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .reviews-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .contact-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .about-hero-actions,
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy .occasions-hero-actions {
    gap: 10px 12px !important;
    margin-top: 20px !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body #main-content > .jt-standard-hero::before {
    background: var(--jt-hero-mobile-fade) !important;
  }
  html body #main-content > .jt-standard-hero::after {
    background: radial-gradient(circle at 82% 28%, rgba(210,162,58,.05), transparent 35%) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > figcaption,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-standard-hero-caption,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-hero-managed-caption {
    right: 14px !important;
    bottom: 12px !important;
    max-width: min(72vw,420px) !important;
    font-size: .74rem !important;
  }
}

/* Short desktop screens must expand to fit content instead of clipping it. */
@media (min-width:1001px) and (max-height:740px) {
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    font-size: clamp(2.15rem,2.7vw,3.15rem) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow):not(.jt-hero-subtitle) {
    font-size: .95rem !important;
    line-height: 1.45 !important;
  }
}

/* -------------------------------------------------------------------------
   5. DELIBERATE PAGE-SPECIFIC CONTENT EXCEPTIONS
   ------------------------------------------------------------------------- */
/* THOV keeps its member strip, but it follows the shared hero rhythm. */
html body.thov-page #main-content > .jt-standard-hero .thov-members {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 10px !important;
  max-width: 560px !important;
  margin: 15px 0 0 !important;
}
html body.thov-page #main-content > .jt-standard-hero .thov-members > div {
  padding: 8px 10px !important;
  border: 1px solid rgba(210,162,58,.22) !important;
  background: rgba(8,8,8,.42) !important;
}
html body.thov-page #main-content > .jt-standard-hero .thov-members strong,
html body.thov-page #main-content > .jt-standard-hero .thov-members span {
  font-size: .73rem !important;
  line-height: 1.3 !important;
}
@media (max-width:640px) {
  html body.thov-page #main-content > .jt-standard-hero .thov-members {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin-top: 12px !important;
  }
}

/* Reviews keeps its useful summary chips while the retired hero quote cards stay
   out of the image plane. */
html body.reviews-page #main-content > .jt-standard-hero .reviews-hero-quotes {
  display: none !important;
}
html body.reviews-page #main-content > .jt-standard-hero .reviews-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 14px 0 0 !important;
}
html body.reviews-page #main-content > .jt-standard-hero .reviews-chip-row span {
  font-size: .72rem !important;
  line-height: 1.25 !important;
}

/* Gallery media content remains page-specific. The managed main image fills the
   canonical media plane; gallery controls do not alter hero geometry. */
html body.gallery-page #main-content > .jt-standard-hero .gallery-hero-main {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}
html body.gallery-page #main-content > .jt-standard-hero .gallery-hero-mini {
  display: none !important;
}

/* -------------------------------------------------------------------------
   6. RECOMMENDED SUPPLIERS — same hero geometry without rewriting its markup
   ------------------------------------------------------------------------- */
html body.resource-page-suppliers #main-content > .supplier-page-hero {
  box-sizing: border-box !important;
  position: relative !important;
  isolation: isolate !important;
  display: grid !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050505 !important;
  color: #f7f1e7 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(210,162,58,.28) !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: var(--jt-hero-desktop-fade) !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 76% 38%, rgba(210,162,58,.075), transparent 34%) !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  text-shadow: none !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy .kicker {
  margin: 0 0 10px !important;
  color: #efc767 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy h1 {
  max-width: var(--jt-hero-heading-max) !important;
  margin: 0 0 14px !important;
  color: #f7f1e7 !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-hero-heading-size) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: .012em !important;
  text-wrap: balance;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy h1 > span {
  color: #edcf83 !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy > p:not(.kicker):not(.jt-hero-subtitle) {
  max-width: 60ch !important;
  margin: 0 !important;
  color: rgba(255,255,255,.83) !important;
  font-size: var(--jt-hero-body-size) !important;
  line-height: 1.56 !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy .hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px 14px !important;
  margin: 22px 0 0 !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090806 !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img {
  filter: var(--jt-hero-image-filter) !important;
}
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img:not([data-jt-crop-ready="1"]) {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: var(--jt-hero-live-position,58% 50%) !important;
}
@media (min-width:1001px) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero {
    min-height: max(var(--jt-hero-desktop-min), calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop))) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner {
    min-height: max(var(--jt-hero-desktop-min), calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop))) !important;
    display: grid !important;
    grid-template-columns: minmax(0,var(--jt-hero-copy-column)) minmax(0,calc(100% - var(--jt-hero-copy-column))) !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    padding: clamp(28px,4vh,46px) var(--jt-hero-copy-gutter) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
    left: var(--jt-hero-image-left) !important;
    right: 0 !important;
    width: var(--jt-hero-image-width) !important;
    height: 100% !important;
  }
}
@media (min-width:641px) and (max-width:1000px) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero {
    min-height: clamp(var(--jt-hero-tablet-min),75svh,720px) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 54px clamp(28px,5vw,58px) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy {
    width: min(var(--jt-hero-copy-max),78vw) !important;
    max-width: var(--jt-hero-copy-max) !important;
    padding: 0 !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-hero-tablet-fade) !important;
  }
}
@media (max-width:640px) {
  html body.resource-page-suppliers #main-content > .supplier-page-hero {
    min-height: clamp(var(--jt-hero-phone-min),82svh,740px) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 44px 22px 58px !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy {
    width: 100% !important;
    max-width: 540px !important;
    padding: 0 !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy h1 {
    font-size: clamp(2.15rem,10vw,3rem) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-hero-mobile-fade) !important;
  }
}

/* -------------------------------------------------------------------------
   7. WEDDING ADVICE ARTICLE HERO — preserve article character, unify shell
   ------------------------------------------------------------------------- */
html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-picture {
  z-index: 0 !important;
}
html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
  z-index: 1 !important;
}
html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid {
  position: relative !important;
  z-index: 2 !important;
}
@media (min-width:1001px) {
  html body.resource-page.resource-page-advice #main-content > .article-hero {
    box-sizing: border-box !important;
    position: relative !important;
    isolation: isolate !important;
    height: calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop)) !important;
    min-height: 420px !important;
    max-height: calc(100svh - var(--jt-hero-header-desktop) - var(--jt-hero-divider-desktop)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #050505 !important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-picture {
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--jt-hero-image-left) !important;
    width: var(--jt-hero-image-width) !important;
    height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    background: var(--jt-hero-desktop-fade) !important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid {
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(24px,4vh,48px) var(--jt-hero-copy-gutter) !important;
    display: flex !important;
    align-items: center !important;
  }
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy {
    width: min(760px,52vw) !important;
    max-width: 760px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Article titles can be long. Keep them restrained so the divider remains
     visible in the opening desktop viewport and the copy does not dominate. */
  html body.resource-page.resource-page-advice #main-content > .article-hero .article-hero-copy h1 {
    max-width: 24ch !important;
    margin: .25rem 0 1rem !important;
    font-size: clamp(1.85rem,2.15vw,2.65rem) !important;
    line-height: 1.055 !important;
    letter-spacing: .006em !important;
    text-wrap: balance;
  }
}
@media (min-width:641px) and (max-width:1000px) {
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-hero-tablet-fade) !important;
  }
}
@media (max-width:640px) {
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-hero-mobile-fade) !important;
  }
  /* Keep the established article-specific bottom composition on phones. */
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-grid {
    align-items: flex-end !important;
    padding: 58px 20px 90px !important;
  }
}

/* -------------------------------------------------------------------------
   8. FADE STACKING LOCK — Build 434 regression fix
   -------------------------------------------------------------------------
   The horizontal/vertical fade must sit above the photograph and below text.
   Do not give .jt-standard-hero-inner a positive z-index: it contains the media
   on standard heroes, so doing so promotes the photograph above ::before.
*/
html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
  position: static !important;
  z-index: auto !important;
}
html body #main-content > .jt-standard-hero::before,
html body #main-content > .jt-standard-hero::after {
  z-index: 1 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media {
  z-index: auto !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
  position: relative !important;
  z-index: 3 !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media > figcaption,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-standard-hero-caption,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > .jt-hero-managed-caption {
  z-index: 4 !important;
}

/* -------------------------------------------------------------------------
   9. SCROLL CONTROL CONTRACT
   public-scroll-arrow-338.css remains the implementation. These rules only lock
   the shared hero relationship so page-specific hero CSS cannot reposition it.
   ------------------------------------------------------------------------- */
html:root body[class][class] button.section-scroll-next.section-scroll-next,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
html:root body[class][class] button.article-page-scroll.article-page-scroll {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  transform: translate(-50%,0) !important;
}
@media (max-width:640px) {
  html:root body[class][class] button.section-scroll-next.section-scroll-next,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
  html:root body[class][class] button.article-page-scroll.article-page-scroll {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}

/* Respect reduced motion without altering the visual system. */
@media (prefers-reduced-motion: reduce) {
  html body #main-content > .jt-standard-hero *,
  html body.resource-page-suppliers #main-content > .supplier-page-hero *,
  html body.resource-page.resource-page-advice #main-content > .article-hero * {
    scroll-behavior: auto !important;
  }
}

/* === JT source: assets/css/public-components-438.css === */
/* Build 438 — canonical public actions + landing-divider system.
   Presentation only. This is deliberately a late cascade layer so the public
   site can converge on one action language without deleting legacy CSS yet.
   Filters/tabs keep their functional state attributes; a later dedicated pass
   can consolidate those modules further. */

:root {
  --jt-action-gold: #d2a23a;
  --jt-action-gold-light: #e7bf61;
  --jt-action-gold-bright: #f3cf78;
  --jt-action-ink: #080704;
  --jt-action-light-ink: #674a11;
  --jt-action-light-border: #8b681f;
  --jt-action-focus: rgba(242,196,100,.42);
  --jt-divider-bg: #e9e0d3;
  --jt-divider-ink: #17130e;
  --jt-divider-muted: #625b52;
  --jt-divider-gold: #8b681f;
  --jt-divider-line: rgba(76,60,38,.18);
}

/* -------------------------------------------------------------------------
   1. PUBLIC BUTTON / CTA CONTRACT
   Primary   = filled gold pill
   Secondary = gold outline pill
   Quiet     = lower-emphasis outline
   Text      = .text-link
   ------------------------------------------------------------------------- */
html body .btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  padding: 11px 26px !important;
  border: 1px solid var(--jt-action-gold) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--jt-action-gold-light) !important;
  box-shadow: none !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(.78rem,.78vw,.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease !important;
}

html body .btn.btn-primary {
  border-color: #d3a437 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: var(--jt-action-ink) !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
}

html body .btn.btn-quiet {
  border-color: rgba(210,162,58,.46) !important;
  background: rgba(210,162,58,.025) !important;
  color: #cdbb8b !important;
  box-shadow: none !important;
}

html body .btn.btn-small {
  min-height: 42px !important;
  padding: 9px 18px !important;
  font-size: .74rem !important;
  letter-spacing: .09em !important;
}

/* Functional selected states for existing button-backed browse/filter controls. */
html body .btn.is-active:not(.btn-primary),
html body .btn[aria-pressed="true"]:not(.btn-primary),
html body .btn[aria-current="true"]:not(.btn-primary) {
  border-color: var(--jt-action-gold) !important;
  background: rgba(210,162,58,.14) !important;
  color: var(--jt-action-gold-bright) !important;
}

html body .btn:disabled,
html body .btn[disabled],
html body .btn[aria-disabled="true"] {
  opacity: .48 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

html body .btn:focus-visible,
html body .text-link:focus-visible {
  outline: 3px solid var(--jt-action-focus) !important;
  outline-offset: 3px !important;
}

@media (hover:hover) and (pointer:fine) {
  html body .btn:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    transform: translateY(-2px) !important;
    border-color: #e3b84f !important;
    background: rgba(210,162,58,.10) !important;
    color: #f2cf7a !important;
  }
  html body .btn.btn-primary:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    border-color: #e0b44c !important;
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
    color: #080704 !important;
    box-shadow: 0 14px 32px rgba(164,112,26,.24) !important;
  }
  html body .btn.btn-quiet:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
    border-color: rgba(210,162,58,.72) !important;
    background: rgba(210,162,58,.07) !important;
    color: #e6cc8d !important;
  }
}

/* Light public surfaces need the same secondary hierarchy but with darker ink. */
html body .preview-v2-light .btn:not(.btn-primary),
html body .preview-light-section .btn:not(.btn-primary),
html body .legal-section .btn:not(.btn-primary),
html body .jt-landing-divider .btn:not(.btn-primary) {
  border-color: var(--jt-action-light-border) !important;
  background: transparent !important;
  color: var(--jt-action-light-ink) !important;
}
html body .preview-v2-light .btn.btn-quiet,
html body .preview-light-section .btn.btn-quiet,
html body .legal-section .btn.btn-quiet {
  border-color: rgba(103,74,17,.46) !important;
  background: rgba(139,104,31,.025) !important;
  color: #786d54 !important;
}

html body .preview-v2-light .btn.is-active:not(.btn-primary),
html body .preview-v2-light .btn[aria-pressed="true"]:not(.btn-primary),
html body .preview-v2-light .btn[aria-current="true"]:not(.btn-primary),
html body .legal-section .btn.is-active:not(.btn-primary) {
  border-color: #80601e !important;
  background: rgba(139,104,31,.10) !important;
  color: #4f390d !important;
}
@media (hover:hover) and (pointer:fine) {
  html body .preview-v2-light .btn:not(.btn-primary):hover,
  html body .preview-light-section .btn:not(.btn-primary):hover,
  html body .legal-section .btn:not(.btn-primary):hover,
  html body .jt-landing-divider .btn:not(.btn-primary):hover {
    border-color: #725210 !important;
    background: rgba(139,104,31,.08) !important;
    color: #4e370b !important;
  }
}

/* Existing hero buttons already use these exact dimensions/colours. Keep this
   explicit parity so the hero-specific layer and the global action layer agree. */
html body #main-content > .jt-standard-hero .btn {
  min-height: 50px !important;
  padding: 11px 26px !important;
  border-radius: 999px !important;
}

/* Tertiary action language. Existing page-specific spacing is preserved. */
html body .text-link {
  color: var(--jt-action-gold-light) !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
  transition: color .18s ease, text-decoration-color .18s ease !important;
}
html body .preview-v2-light .text-link,
html body .preview-light-section .text-link,
html body .legal-section .text-link {
  color: #765719 !important;
}
@media (hover:hover) and (pointer:fine) {
  html body .text-link:hover { color: #fff0bc !important; }
  html body .preview-v2-light .text-link:hover,
  html body .preview-light-section .text-link:hover,
  html body .legal-section .text-link:hover { color: #3f2a0a !important; }
}

/* Action groups: consistent spacing while allowing each page to decide where
   the group sits. */
html body .hero-actions,
html body .resource-cta-actions,
html body .cta-actions {
  gap: 12px !important;
}

/* Do not turn all functional/filter buttons into full-width mobile bars. Only
   primary action groups stack to easy touch targets on narrow phones. */
@media (max-width:640px) {
  html body .btn {
    min-height: 48px !important;
    padding: 10px 21px !important;
    font-size: .78rem !important;
  }
  html body .btn.btn-small {
    min-height: 42px !important;
    padding: 9px 17px !important;
    font-size: .72rem !important;
  }
  html body .hero-actions,
  html body .resource-cta-actions,
  html body .cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }
  html body .hero-actions > .btn,
  html body .resource-cta-actions > .btn,
  html body .cta-actions > .btn,
  html body .booking-submit-row > .btn,
  html body .contact-form-footer .btn[type="submit"] {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  html body .btn { transition: none !important; }
  html body .btn:hover { transform: none !important; }
}

/* -------------------------------------------------------------------------
   2. CANONICAL LANDING DIVIDER CONTRACT
   Approved Occasions / Recommended Suppliers visual language.
   Desktop = 4 across. Tablet/phone = 2 x 2. No cards, no shadow, no radius.
   ------------------------------------------------------------------------- */
html body .jt-landing-divider {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(76,60,38,.20) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(76,60,38,.20) !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: var(--jt-divider-bg) !important;
  color: var(--jt-divider-ink) !important;
  box-shadow: none !important;
}

html body .jt-landing-divider .jt-landing-divider-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

html body .jt-landing-divider .jt-landing-divider-item {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 100px !important;
  margin: 0 !important;
  padding: 16px clamp(20px,2.5vw,44px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--jt-divider-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jt-divider-ink) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .jt-landing-divider .jt-landing-divider-item:last-child { border-right: 0 !important; }

html body .jt-landing-divider .jt-landing-divider-item > span:first-child {
  display: block !important;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: var(--jt-divider-gold) !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}
html body .jt-landing-divider .jt-landing-divider-item > strong {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--jt-divider-ink) !important;
  font-family: Marcellus,Georgia,serif !important;
  font-size: clamp(1.02rem,1.15vw,1.24rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}
html body .jt-landing-divider .jt-landing-divider-item > small {
  display: block !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--jt-divider-muted) !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

@media (hover:hover) and (pointer:fine) {
  html body .jt-landing-divider a.jt-landing-divider-item:hover {
    background: rgba(139,104,31,.07) !important;
  }
}
html body .jt-landing-divider a.jt-landing-divider-item:focus-visible {
  position: relative !important;
  z-index: 1 !important;
  outline: 3px solid rgba(139,104,31,.35) !important;
  outline-offset: -3px !important;
  background: rgba(139,104,31,.07) !important;
}

@media (max-width:1000px) {
  html body .jt-landing-divider .jt-landing-divider-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  html body .jt-landing-divider .jt-landing-divider-item:nth-child(2n) { border-right: 0 !important; }
  html body .jt-landing-divider .jt-landing-divider-item:nth-child(-n+2) { border-bottom: 1px solid var(--jt-divider-line) !important; }
}
@media (max-width:640px) {
  html body .jt-landing-divider .jt-landing-divider-item {
    min-height: 90px !important;
    padding: 14px 18px !important;
  }
}

/* Recommended Suppliers used the approved divider design before the shared
   class existed. Build 438 adds the shared classes in markup; these aliases
   keep the intent explicit while old supplier CSS is still present. */
html body.resource-page-suppliers .supplier-proof-strip.jt-landing-divider,
html body.resource-page-suppliers .supplier-proof-grid.jt-landing-divider-grid,
html body.resource-page-suppliers .supplier-proof-item.jt-landing-divider-item {
  box-sizing: border-box !important;
}

@media (forced-colors:active) {
  html body .btn { border: 1px solid ButtonText !important; }
  html body .btn:focus-visible { outline: 2px solid Highlight !important; }
  html body .jt-landing-divider .jt-landing-divider-item { border-color: CanvasText !important; }
}

/* === JT source: assets/css/public-cards-typography-440.css === */
/* Build 440 — shared public card + typography system.
   Presentation only. This layer is deliberately late in the cascade and scoped
   to public main content. It standardises rhythm and card families without
   touching navigation, footer, hero crop/fade geometry, forms, tabs or filters.

   Card families:
   - elevated content cards: rounded, lightly bordered surfaces
   - compact interactive cards: smaller radius, no heavy shadow
   - integrated tiles: keep connected grid/separator geometry; only type rhythm
   Special image selectors/forms (Wedding packages, Booking, Credentials request)
   are intentionally excluded and remain owned by their specialist CSS. */

:root {
  --jt-type-section-title: clamp(2rem, 2.75vw, 3.25rem);
  --jt-type-card-title: clamp(1.18rem, 1.25vw, 1.46rem);
  --jt-type-body: clamp(.98rem, .86vw, 1.08rem);
  --jt-type-card-body: clamp(.92rem, .78vw, 1rem);
  --jt-type-kicker: .76rem;
  --jt-type-body-line: 1.66;
  --jt-type-card-line: 1.58;
  --jt-copy-measure: 68ch;

  --jt-card-radius: 16px;
  --jt-card-radius-compact: 10px;
  --jt-card-border-dark: rgba(210,162,58,.23);
  --jt-card-border-dark-hover: rgba(231,191,97,.52);
  --jt-card-border-light: rgba(61,48,31,.19);
  --jt-card-border-light-hover: rgba(126,90,24,.42);
  --jt-card-shadow-dark: 0 12px 30px rgba(0,0,0,.16);
  --jt-card-shadow-light: 0 10px 26px rgba(61,48,31,.07);
  --jt-card-focus: rgba(242,196,100,.42);
}

/* -------------------------------------------------------------------------
   1. TYPOGRAPHY CONTRACT
   ------------------------------------------------------------------------- */

/* Section headings only. Hero typography remains owned by Build 437. */
html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head
) > h2 {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  max-width: 18ch;
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-type-section-title) !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: .006em !important;
  text-wrap: balance;
}

html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head
) > p:not(.kicker):not(.preview-section-eyebrow):not(.preview-eyebrow) {
  max-width: var(--jt-copy-measure) !important;
  margin-top: 0 !important;
  font-size: var(--jt-type-body) !important;
  line-height: var(--jt-type-body-line) !important;
  text-wrap: pretty;
}

/* Shared eyebrow/kicker rhythm inside normal section-heading wrappers only.
   Hero kickers remain completely owned by Build 437 and page-specific hero CSS. */
html body #main-content :is(
  .section-head,
  .resource-section-head,
  .contact-section-head,
  .reviews-section-head,
  .about-section-head,
  .collab-section-head,
  .occasions-section-head,
  .thov-section-head,
  .about-craft-head,
  .gig-snapshot-heading
) > :is(.kicker,.preview-section-eyebrow,.preview-eyebrow) {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: var(--jt-type-kicker) !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* Ordinary long-form links should remain recognisable without turning every
   inline link into a CTA. Header/footer/navigation are outside #main-content. */
html body #main-content p a:not(.btn):not(.text-link):not([class*="chip"]),
html body #main-content li a:not(.btn):not(.text-link):not([class*="chip"]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------------------
   2. ELEVATED CONTENT-CARD FAMILY
   ------------------------------------------------------------------------- */
html body #main-content :is(
  .review-card,
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .credential-quick-card,
  .listen-featured-card,
  .preview-repertoire-card,
  .info-card,
  .setup-product-card
) {
  box-sizing: border-box;
  border-radius: var(--jt-card-radius) !important;
  border-color: var(--jt-card-border-dark) !important;
  box-shadow: var(--jt-card-shadow-dark) !important;
}

/* Light sections keep the same card shape but use quieter neutral borders. */
html body #main-content :is(.preview-v2-light,.preview-light-section,.reviews-featured) :is(
  .review-card,
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .credential-quick-card,
  .listen-featured-card,
  .preview-repertoire-card,
  .info-card,
  .setup-product-card
) {
  border-color: var(--jt-card-border-light) !important;
  box-shadow: var(--jt-card-shadow-light) !important;
}

/* Cards with independent text insets share one title/copy rhythm. Image-led
   card internals retain their own media dimensions and padding. */
html body #main-content :is(
  .supplier-card,
  .credential-quick-card,
  .listen-featured-card,
  .article-carousel-card
) :is(h2,h3) {
  font-family: Marcellus, Georgia, serif !important;
  font-size: var(--jt-type-card-title) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: .004em !important;
  text-wrap: balance;
}

html body #main-content :is(
  .supplier-card,
  .credential-quick-card,
  .listen-featured-card,
  .article-carousel-card
) p:not(.kicker):not(.supplier-category):not(.listen-song-eyebrow) {
  font-size: var(--jt-type-card-body) !important;
  line-height: var(--jt-type-card-line) !important;
}

/* Review copy uses a readable editorial measure and one consistent rhythm. */
html body #main-content .review-card blockquote {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: clamp(.98rem,.82vw,1.06rem) !important;
  line-height: 1.66 !important;
  text-wrap: pretty;
}
html body #main-content .review-card footer {
  font-size: .9rem;
  line-height: 1.45;
}

/* Wedding Advice titles are H2s by design and can run longer than ordinary
   card titles. Keep them larger but within a consistent editorial range. */
html body.resource-page-advice #main-content .advice-card h2 {
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.3rem,1.55vw,1.72rem) !important;
  line-height: 1.2 !important;
  letter-spacing: .003em !important;
  text-wrap: balance;
}
html body.resource-page-advice #main-content .advice-card__excerpt {
  font-size: clamp(.94rem,.8vw,1rem) !important;
  line-height: 1.62 !important;
  text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   3. INTERACTIVE-CARD STATES
   ------------------------------------------------------------------------- */
html body #main-content :is(
  .supplier-card,
  .advice-card,
  .article-carousel-card,
  .setup-product-card
) {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  html body #main-content :is(
    .supplier-card,
    .advice-card,
    .article-carousel-card,
    .setup-product-card
  ):hover {
    transform: translateY(-2px) !important;
    border-color: var(--jt-card-border-dark-hover) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.20) !important;
  }
  html body #main-content :is(.preview-v2-light,.preview-light-section) :is(
    .supplier-card,
    .advice-card,
    .article-carousel-card,
    .setup-product-card
  ):hover {
    border-color: var(--jt-card-border-light-hover) !important;
    box-shadow: 0 14px 30px rgba(61,48,31,.10) !important;
  }
}

html body #main-content :is(.supplier-card,.setup-product-card):focus-visible,
html body #main-content :is(.advice-card,.article-carousel-card):focus-within {
  outline: 3px solid var(--jt-card-focus) !important;
  outline-offset: 3px !important;
}

/* Compact utility cards intentionally do not receive the elevated 16px look. */
html body #main-content .performance-map-venue-card {
  border-radius: var(--jt-card-radius-compact) !important;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}
@media (hover:hover) and (pointer:fine) {
  html body #main-content .performance-map-venue-card:hover {
    transform: translateY(-1px);
  }
}
html body #main-content .performance-map-venue-card:focus-visible {
  outline: 3px solid rgba(126,90,24,.28) !important;
  outline-offset: 2px !important;
}

/* -------------------------------------------------------------------------
   4. INTEGRATED TILE FAMILY
   These are intentionally connected grids, not floating cards. Preserve their
   straight separators/edge-to-edge geometry while standardising text rhythm.
   ------------------------------------------------------------------------- */
html body #main-content :is(.occasion-type-card,.occasions-flow-card) h3 {
  margin-top: 0;
  margin-bottom: 8px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.2rem,1.35vw,1.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .003em !important;
  text-wrap: balance;
}
html body #main-content :is(.occasion-type-card,.occasions-flow-card) p {
  font-size: clamp(.94rem,.8vw,1rem) !important;
  line-height: 1.58 !important;
  text-wrap: pretty;
}

/* THOV's lineup is intentionally more editorial and keeps its larger title scale. */
html body #main-content .thov-lineup-card h3 {
  margin-bottom: 8px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.45rem,1.7vw,1.9rem) !important;
  font-weight: 400 !important;
  line-height: 1.18 !important;
  text-wrap: balance;
}
html body #main-content .thov-lineup-card p:last-child {
  font-size: 1rem !important;
  line-height: 1.58 !important;
  text-wrap: pretty;
}

/* Gigs use compact schedule rows rather than floating cards. Keep their row
   geometry intact and only align the title/supporting-copy hierarchy. */
html body #main-content .schedule-card .event-info h3 {
  margin: 0 0 3px !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(1.02rem,1.05vw,1.18rem) !important;
  font-weight: 400 !important;
  line-height: 1.28 !important;
  letter-spacing: .002em !important;
}
html body #main-content .schedule-card .event-info p,
html body #main-content .schedule-card .event-date span {
  font-size: clamp(.82rem,.74vw,.9rem) !important;
  line-height: 1.42 !important;
}

/* Preserve specialist surfaces owned by later roadmap stages. */
html body #main-content :is(
  .booking-form-card,
  .booking-radio-card,
  .booking-person-card,
  .credentials-form-card,
  .package-card,
  .calendar-gig-dialog-card
) {
  /* Explicitly no card-system geometry here. */
}

/* -------------------------------------------------------------------------
   5. RESPONSIVE TYPE / CARD RHYTHM
   ------------------------------------------------------------------------- */
@media (max-width: 760px) {
  :root {
    --jt-type-section-title: clamp(1.78rem,7.8vw,2.35rem);
    --jt-type-body: 1rem;
    --jt-type-card-title: clamp(1.15rem,5.5vw,1.38rem);
    --jt-type-card-body: .96rem;
    --jt-card-radius: 14px;
  }

  html body #main-content :is(
    .section-head,
    .resource-section-head,
    .contact-section-head,
    .reviews-section-head,
    .about-section-head,
    .collab-section-head,
    .occasions-section-head,
    .thov-section-head
  ) > h2 {
    max-width: 22ch;
    margin-bottom: 10px !important;
  }

  html body #main-content .review-card blockquote {
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #main-content :is(.supplier-card,.advice-card,.article-carousel-card,.setup-product-card,.performance-map-venue-card) {
    transition: none !important;
  }
  html body #main-content :is(.supplier-card,.advice-card,.article-carousel-card,.setup-product-card,.performance-map-venue-card):hover {
    transform: none !important;
  }
}

/* === JT source: assets/css/public-scroll-arrow-338.css === */
/* Build 338 - authoritative public scroll control.
   This stylesheet must load LAST. It normalises every real page-level scroll
   button to the same dark Home-style control and removes all legacy halo /
   pseudo-element treatments. It also restores Wedding Advice's "Browse advice"
   CTA as a normal hero pill so it cannot sit underneath the real scroll button. */

html:root body[class][class] button.section-scroll-next.section-scroll-next,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
html:root body[class][class] button.article-page-scroll.article-page-scroll {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  z-index: 9998 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(244,210,124,.72) !important;
  border-radius: 50% !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(8,8,8,.94) !important;
  background-color: rgba(8,8,8,.94) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  opacity: .92 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next::before,
html:root body[class][class] button.section-scroll-next.section-scroll-next::after,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll::before,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll::after,
html:root body[class][class] button.article-page-scroll.article-page-scroll::before,
html:root body[class][class] button.article-page-scroll.article-page-scroll::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next[hidden],
html:root body[class][class] button.advice-page-scroll.advice-page-scroll[hidden],
html:root body[class][class] button.article-page-scroll.article-page-scroll[hidden] {
  display: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)) !important;
  transition: transform .18s ease !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next svg path,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg path,
html:root body[class][class] button.article-page-scroll.article-page-scroll svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next:hover,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus-visible,
html:root body[class][class] button.section-scroll-next.section-scroll-next:active,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:hover,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus-visible,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:active,
html:root body[class][class] button.article-page-scroll.article-page-scroll:hover,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus-visible,
html:root body[class][class] button.article-page-scroll.article-page-scroll:active {
  opacity: 1 !important;
  border-color: var(--gold-light, #f4d27c) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(8,8,8,.985) !important;
  background-color: rgba(8,8,8,.985) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
  filter: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next:hover svg,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus-visible svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:hover svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus-visible svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll:hover svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus-visible svg {
  transform: translateY(2px) !important;
}

/* Wedding Advice had TWO controls occupying the same bottom-centre position:
   the real .advice-page-scroll button plus a legacy rule that converted the
   "Browse advice" hero CTA into a second circular arrow. That second element
   was the apparent thick gold halo. Restore it to the standard hero pill. */
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 27px !important;
  transform: none !important;
  border: 1px solid #d3a437 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: #080704 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(.78rem,.78vw,.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none !important;
  filter: none !important;
}

html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"]::before,
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"]::after {
  content: none !important;
  display: none !important;
}

html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn.btn-primary[href="#articles"]:hover,
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn.btn-primary[href="#articles"]:focus-visible {
  background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  border-color: #d3a437 !important;
  color: #080704 !important;
  outline: 0 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 640px) {
  html:root body[class][class] button.section-scroll-next.section-scroll-next,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
  html:root body[class][class] button.article-page-scroll.article-page-scroll {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
  html:root body[class][class] button.article-page-scroll.article-page-scroll svg {
    width: 20px !important;
    height: 20px !important;
  }
  html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body[class][class] button.section-scroll-next.section-scroll-next,
  html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
  html:root body[class][class] button.article-page-scroll.article-page-scroll,
  html:root body[class][class] button.article-page-scroll.article-page-scroll svg,
  html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
    transition: none !important;
  }
}

/* Build 342 - the page-level scroller is persistent on every public route.
   Existing page scripts may still set hidden/visibility at their final target;
   the universal controller owns that final state and flips the same arrow UP. */
html:root body[class][class] button.section-scroll-next.jt-scroll-universal[hidden],
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal[hidden],
html:root body[class][class] button.article-page-scroll.jt-scroll-universal[hidden] {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-returning:hover svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-returning:hover svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-returning:hover svg {
  transform: rotate(180deg) !important;
}


/* Build 342 - site-wide text-action pill audit.
   Genuine text actions are capsules everywhere. Media tiles/cards stay cards,
   and icon-only navigation controls retain their existing circular treatment. */
html body .btn,
html body a.btn,
html body button.btn,
html body form button[type="submit"],
html body form input[type="submit"],
html body form input[type="button"],
html body form input[type="reset"],
html body .resource-filter-link,
html body .advice-pagination__page,
html body .advice-pagination__control,
html body .article-sequence-link,
html body .setup-product-link,
html body .setup-product-details,
html body .supplier-modal-link,
html body .performance-map-control-button,
html body .calendar-view-button,
html body .calendar-nav-button,
html body .calendar-today-button,
html body .cookie-choice-button,
html body .nav-toggle,
html body .performance-map-map-controls button,
html body .supplier-social-link {
  border-radius: 999px !important;
}

/* Wedding Advice's legacy desktop sidebar deliberately flattened its category
   actions after the general button system loaded; make the pill rule explicit. */
html:root body.resource-page.resource-page-advice main#main-content > #articles .advice-toolbar a.btn {
  border-radius: 999px !important;
}

/* Previous / next article controls are navigation actions, not content cards. */
html body.resource-page.resource-page-advice .article-sequence-link {
  min-height: 80px !important;
  justify-content: center !important;
  padding: 14px 24px !important;
}
@media (max-width:620px) {
  html body.resource-page.resource-page-advice .article-sequence-link {
    min-height: 72px !important;
    padding: 12px 20px !important;
  }
}

/* === JT source: assets/css/public-navigation-445.css === */
/* Build 445 — canonical public navigation with direct Booking, grouped Contact routes and a permanent desktop availability CTA.
   Desktop: Weddings, Occasions, Listen, Live, About, Explore, Booking, Contact, then a gold Check availability pill.
   Contact still provides Check Availability, Ask a Question, Complete a Booking and Request Documentation.
   One breakpoint (1220px) remains shared with public-navigation-422.js. */

:root {
  --jt-nav-breakpoint: 1220px;
  --jt-nav-bg: #000000;
  --jt-nav-panel: #0a0a0a;
  --jt-nav-gold: #d2a23a;
  --jt-nav-gold-light: #e8c56a;
  --jt-nav-cream: #f5efe2;
  --jt-nav-muted: #bdb5a5;
  --jt-nav-line: rgba(210, 162, 58, .22);
}

/* Shared accessibility helper for every public page. */
.jt-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] {
  position: relative !important;
  inset: auto !important;
  z-index: 500 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #000000 !important;
  border-bottom: 1px solid var(--jt-nav-line) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(14px) !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .header-inner {
  position: relative !important;
  width: min(1540px, calc(100% - 44px)) !important;
  min-height: 98px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 238px minmax(0, 1fr) !important;
  gap: clamp(28px, 3vw, 58px) !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .logo-link {
  width: 238px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  transform: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .logo-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 78px !important;
  object-fit: contain !important;
  object-position: left center !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(11px, 1.05vw, 21px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transform: none !important;
}


html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown {
  flex: 0 0 auto !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary {
  position: relative !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 14px 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--jt-nav-cream) !important;
  font: 800 clamp(.73rem, .72vw, .84rem)/1.1 Lato, Arial, sans-serif !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  list-style: none !important;
  transition: color .18s ease !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary::-webkit-details-marker {
  display: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 7px !important;
  height: 1px !important;
  background: var(--jt-nav-gold) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a:hover,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a:focus-visible,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.active,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary:hover,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary:focus-visible,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown[open] > summary,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown.is-current > summary {
  color: var(--jt-nav-gold-light) !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a:hover::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a:focus-visible::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.active::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary:hover::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary:focus-visible::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown[open] > summary::after,
html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown.is-current > summary::after {
  transform: scaleX(1) !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown {
  position: relative !important;
  display: block !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown-chevron {
  width: 9px !important;
  height: 9px !important;
  display: inline-block !important;
  border-right: 1.5px solid currentColor !important;
  border-bottom: 1.5px solid currentColor !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .18s ease !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown[open] .nav-dropdown-chevron {
  transform: translateY(2px) rotate(225deg) !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  z-index: 520 !important;
  width: min(650px, 72vw) !important;
  padding: 18px !important;
  display: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(210, 162, 58, .28) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(18, 18, 18, .995), rgba(7, 7, 7, .995)) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .48) !important;
  overflow: hidden !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--explore .nav-dropdown-menu {
  left: auto !important;
  right: 0 !important;
  width: min(720px, 76vw) !important;
  transform: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--contact .nav-dropdown-menu {
  left: auto !important;
  right: 0 !important;
  width: min(430px, 84vw) !important;
  grid-template-columns: 1fr !important;
  transform: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--contact .nav-mega-column {
  padding: 7px !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown[open] > .nav-dropdown-menu {
  display: grid !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-column {
  min-width: 0 !important;
  padding: 7px !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-heading {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 8px 8px !important;
  border-bottom: 1px solid rgba(210, 162, 58, .18) !important;
  color: var(--jt-nav-gold-light) !important;
  font: 800 .68rem/1.2 Lato, Arial, sans-serif !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 10px 11px !important;
  display: block !important;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--jt-nav-cream) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link::after {
  display: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link strong {
  display: block !important;
  color: inherit !important;
  font: 700 .92rem/1.25 Lato, Arial, sans-serif !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--jt-nav-muted) !important;
  font: 500 .76rem/1.38 Lato, Arial, sans-serif !important;
  white-space: normal !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link:hover,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link:focus-visible,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link[aria-current="page"] {
  color: #fff !important;
  border-color: rgba(210, 162, 58, .22) !important;
  background: rgba(210, 162, 58, .08) !important;
  outline: 0 !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-close,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-head,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-priority,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-footer {
  display: none !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle {
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1px solid rgba(210, 162, 58, .34) !important;
  border-radius: 12px !important;
  background: rgba(210, 162, 58, .035) !important;
  color: var(--jt-nav-gold-light) !important;
  cursor: pointer !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::before,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::after {
  width: 20px !important;
  height: 1.5px !important;
  display: block !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars {
  position: relative !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::before,
html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
}

html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::before { top: -6px !important; }
html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle-bars::after { top: 6px !important; }

/* Tablet/mobile drawer. This exact breakpoint is mirrored in JS. */
@media (max-width: 1220px) {
  html body .site-header.jt-public-header[data-jt-public-shell] .header-inner {
    width: min(100% - 30px, 1180px) !important;
    min-height: 82px !important;
    grid-template-columns: minmax(180px, 232px) 1fr 46px !important;
    gap: 16px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .logo-link {
    width: min(232px, 100%) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .logo-link img {
    max-height: 68px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle {
    display: grid !important;
    grid-column: 3 !important;
    justify-self: end !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2000 !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    white-space: normal !important;
    background:
      radial-gradient(circle at 84% 3%, rgba(210, 162, 58, .13), transparent 29%),
      linear-gradient(180deg, #080808 0%, #040404 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  @supports (height: 100dvh) {
    html body .site-header.jt-public-header[data-jt-public-shell] .main-nav {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  html body.nav-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  html body.nav-open .site-header.jt-public-header[data-jt-public-shell] .main-nav {
    display: flex !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-head {
    width: min(100%, 760px) !important;
    min-height: 82px !important;
    margin: 0 auto !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border-bottom: 1px solid rgba(210, 162, 58, .16) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-brand {
    width: min(220px, 62vw) !important;
    display: block !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-brand img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 67px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-close {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(210, 162, 58, .32) !important;
    border-radius: 12px !important;
    background: rgba(210, 162, 58, .035) !important;
    color: var(--jt-nav-gold-light) !important;
    font: 300 2rem/1 Arial, sans-serif !important;
    cursor: pointer !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-priority {
    width: min(100%, 760px) !important;
    margin: 24px auto 14px !important;
    display: grid !important;
    gap: 10px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-availability {
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--jt-nav-gold-light) !important;
    border-radius: 999px !important;
    background: var(--jt-nav-gold-light) !important;
    color: #080808 !important;
    font: 800 .78rem/1 Lato, Arial, sans-serif !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-booking {
    display: inline-flex !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    color: #d9d1c2 !important;
    font: 600 .82rem/1.3 Lato, Arial, sans-serif !important;
    text-decoration: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a,
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown,
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-footer {
    width: min(100%, 760px) !important;
    margin-inline: auto !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a,
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary {
    width: 100% !important;
    min-height: 56px !important;
    padding: 17px 2px !important;
    justify-content: flex-start !important;
    border-bottom: 1px solid rgba(210, 162, 58, .14) !important;
    color: #f4eee1 !important;
    font-size: .9rem !important;
    letter-spacing: .085em !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a::after,
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > .nav-dropdown > summary::after {
    display: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-item-weddings { order: 10 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-item-occasions { order: 20 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-item-listen { order: 30 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-item-about { order: 40 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--live { order: 50 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--explore { order: 60 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-item-booking { order: 70 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--contact { order: 80 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-head { order: 1 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-priority { order: 2 !important; }
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-footer { order: 90 !important; }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown {
    border-bottom: 0 !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown > summary {
    justify-content: space-between !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown-menu,
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--explore .nav-dropdown-menu,
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-dropdown--contact .nav-dropdown-menu {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 0 14px 14px !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    transform: none !important;
    border: 0 !important;
    border-left: 1px solid rgba(210, 162, 58, .27) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-column {
    padding: 3px 0 7px 10px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-heading {
    margin: 3px 0 4px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    color: #a99c86 !important;
    font-size: .62rem !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link {
    padding: 9px 8px !important;
    border-radius: 9px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link strong {
    font-size: .88rem !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mega-link small {
    font-size: .75rem !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-footer {
    margin-top: 20px !important;
    padding: 18px 0 4px !important;
    display: grid !important;
    gap: 14px !important;
    border-top: 1px solid rgba(210, 162, 58, .18) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-contact {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 16px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-contact a {
    color: #d9d1c2 !important;
    font: 600 .78rem/1.35 Lato, Arial, sans-serif !important;
    text-decoration: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-social {
    display: flex !important;
    gap: 9px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-social a {
    width: 40px !important;
    height: 40px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(210, 162, 58, .24) !important;
    border-radius: 50% !important;
    color: var(--jt-nav-gold-light) !important;
    text-decoration: none !important;
    font: 800 .72rem/1 Lato, Arial, sans-serif !important;
  }
}

@media (max-width: 560px) {
  html body .site-header.jt-public-header[data-jt-public-shell] .header-inner {
    width: calc(100% - 24px) !important;
    min-height: 74px !important;
    grid-template-columns: minmax(160px, 205px) 1fr 44px !important;
    gap: 10px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .logo-link {
    width: min(205px, 100%) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .logo-link img {
    max-height: 60px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-toggle,
  html body .site-header.jt-public-header[data-jt-public-shell] .nav-close {
    width: 44px !important;
    height: 44px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav {
    padding-inline: max(17px, env(safe-area-inset-left)) max(17px, env(safe-area-inset-right)) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-head {
    min-height: 74px !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .nav-mobile-brand {
    width: min(205px, 61vw) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .site-header.jt-public-header[data-jt-public-shell] *,
  html body .site-header.jt-public-header[data-jt-public-shell] *::before,
  html body .site-header.jt-public-header[data-jt-public-shell] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* -------------------------------------------------------------------------
   Build 445 — permanent desktop availability CTA.
   It deliberately duplicates Contact > Check Availability because availability
   is the site's primary conversion action.  The mobile drawer already has its
   own priority availability pill, so this desktop CTA is hidden at <=1220px.
   ------------------------------------------------------------------------- */
@media (min-width: 1221px) {
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta {
    box-sizing: border-box !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d3a437 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
    color: #080704 !important;
    box-shadow: 0 10px 24px rgba(164,112,26,.18) !important;
    font-family: Lato, Arial, sans-serif !important;
    font-size: clamp(.72rem,.70vw,.82rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .085em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta::after {
    display: none !important;
    content: none !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta:hover,
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta:focus-visible,
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta:active {
    border-color: #e0b44c !important;
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
    color: #080704 !important;
    box-shadow: 0 13px 30px rgba(164,112,26,.24) !important;
    transform: translateY(-1px) !important;
  }

  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta:focus-visible {
    outline: 3px solid rgba(242,196,100,.42) !important;
    outline-offset: 3px !important;
  }
}

@media (max-width: 1220px) {
  html body .site-header.jt-public-header[data-jt-public-shell] .main-nav > a.nav-availability-cta {
    display: none !important;
  }
}

/* === JT source: assets/css/weddings-package-desktop-428.css === */
/* Build 428: desktop Wedding package chooser scale.
   The phone/tablet chooser has already been approved, so this only changes
   layouts wider than 1180px. Keep all five landscape package cards on one row,
   but make them large enough for the artwork and package information to read
   comfortably on desktop. */
@media (min-width: 1181px) {
  html body.weddings-page #wedding-packages .packages-grid {
    width: 100% !important;
    max-width: 1180px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-content: center !important;
    gap: clamp(14px, 1.25vw, 20px) !important;
  }

  html body.weddings-page #wedding-packages .package-card,
  html body.weddings-page #wedding-packages .packages-grid .package-card:nth-child(5),
  html body.weddings-page #wedding-packages .packages-grid .package-card[href$="#wedding-custom"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  html body.weddings-page #wedding-packages .package-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* === JT source: assets/css/weddings-package-desktop-429.css === */
/* Build 429: readable portrait Wedding package chooser on desktop.
   Mobile/tablet keep the approved landscape chooser. At 1181px and above,
   the selector reuses the portrait package artwork already shown in the
   detailed package sections and gives all five cards substantially more
   usable width while keeping them on one evenly-spaced row. */
@media (min-width: 1181px) {
  html body.weddings-page #wedding-packages > .container {
    width: min(1600px, calc(100% - 32px)) !important;
    max-width: 1600px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.weddings-page #wedding-packages .section-head {
    padding-left: clamp(8px, 1.25vw, 20px);
    padding-right: clamp(8px, 1.25vw, 20px);
  }

  html body.weddings-page #wedding-packages .packages-grid {
    width: 100% !important;
    max-width: 1600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(14px, 1.25vw, 24px) !important;
    justify-content: space-between !important;
    align-items: start !important;
  }

  html body.weddings-page #wedding-packages .package-card,
  html body.weddings-page #wedding-packages .packages-grid .package-card:nth-child(5),
  html body.weddings-page #wedding-packages .packages-grid .package-card[href$="#wedding-custom"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }

  html body.weddings-page #wedding-packages .package-card picture {
    display: block;
    width: 100%;
  }

  html body.weddings-page #wedding-packages .package-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: contain !important;
    object-position: center !important;
  }
}

/* === JT source: assets/css/weddings-package-desktop-430.css === */
/* Build 430: keep the five readable portrait Wedding package cards fully inside
   the desktop viewport. Build 429 made the cards intentionally large; this
   refinement preserves that readability while enforcing a consistent outer
   gutter so the Custom card can never run off the right edge of the page. */
@media (min-width: 1181px) {
  html body.weddings-page #wedding-packages > .container {
    box-sizing: border-box !important;
    width: min(1700px, calc(100% - 64px)) !important;
    max-width: min(1700px, calc(100% - 64px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.weddings-page #wedding-packages .packages-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: clamp(12px, 1vw, 20px) !important;
  }

  html body.weddings-page #wedding-packages .package-card,
  html body.weddings-page #wedding-packages .package-card picture,
  html body.weddings-page #wedding-packages .package-card img {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* === JT source: assets/css/weddings-package-artwork-446.css === */
/* Build 446: approved Wedding package artwork.
   The five supplied package designs are portrait 4:5 cards. Keep the existing
   chooser grid and card widths, but display the complete new artwork at its
   natural portrait ratio on desktop, tablet and mobile without cropping. */
html body.weddings-page #wedding-packages .package-card picture {
  display: block;
  width: 100%;
}

html body.weddings-page #wedding-packages .package-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* === JT source: assets/css/public-footer-432.css === */
/* Build 432 — compact canonical public footer.
   Mirrors the simplified public navigation while preserving the established
   black/gold James Taylor visual language. Loaded after page-specific CSS so
   old page footer rules cannot reintroduce inconsistent layouts. */

.site-footer.footer-v432 {
  margin: 0;
  padding: 46px 0 24px;
  border-top: 1px solid rgba(210, 162, 58, .28);
  background: #000000;
  color: #f4efe5;
}

.site-footer.footer-v432 .footer-b-shell {
  width: min(calc(100% - 64px), 1480px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.site-footer.footer-v432 .footer-b-main {
  display: grid;
  grid-template-columns: minmax(245px, 305px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: start;
  padding: 0 0 34px;
}

.site-footer.footer-v432 .footer-b-brand-panel {
  min-width: 0;
  padding-right: clamp(28px, 3vw, 46px);
  border-right: 1px solid rgba(210, 162, 58, .24);
}

.site-footer.footer-v432 .footer-b-brand {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
}

.site-footer.footer-v432 .footer-b-brand img {
  display: block;
  width: min(100%, 255px);
  height: auto;
}

.site-footer.footer-v432 .footer-b-tagline {
  max-width: 31ch;
  margin: 19px 0 20px;
  color: #b8afa1;
  font: 500 .9rem/1.65 Lato, Arial, sans-serif;
}

.site-footer.footer-v432 .footer-b-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  border: 1px solid #d2a23a;
  border-radius: 999px;
  background: #e4bc58;
  color: #090806;
  font: 900 .76rem/1.1 Lato, Arial, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.site-footer.footer-v432 .footer-b-primary:hover,
.site-footer.footer-v432 .footer-b-primary:focus-visible {
  border-color: #f4d27c;
  background: #f4d27c;
  color: #090806;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(210, 162, 58, .14);
  outline: none;
}

.site-footer.footer-v432 .footer-b-nav {
  display: grid;
  grid-template-columns: 1.15fr 1fr .8fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
  padding: 3px 0 0;
}

.site-footer.footer-v432 .footer-b-nav-group {
  min-width: 0;
  border: 0;
}

.site-footer.footer-v432 .footer-b-nav-toggle {
  width: 100%;
  min-height: 0;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e4bc58;
  font: 900 .74rem/1.2 Lato, Arial, sans-serif;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .18em;
  cursor: default;
}

.site-footer.footer-v432 .footer-b-chevron {
  display: none;
}

.site-footer.footer-v432 .footer-b-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.site-footer.footer-v432 .footer-b-links a {
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 5px 0;
  color: #c5bdae;
  font: 500 .9rem/1.45 Lato, Arial, sans-serif;
  text-decoration: none;
  transition: color .18s ease;
}

.site-footer.footer-v432 .footer-b-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 1px;
  background: #d2a23a;
  transition: right .18s ease;
}

.site-footer.footer-v432 .footer-b-links a:hover,
.site-footer.footer-v432 .footer-b-links a:focus-visible,
.site-footer.footer-v432 .footer-b-links a[aria-current="page"] {
  color: #fff8e9;
  outline: none;
}

.site-footer.footer-v432 .footer-b-links a:hover::after,
.site-footer.footer-v432 .footer-b-links a:focus-visible::after,
.site-footer.footer-v432 .footer-b-links a[aria-current="page"]::after {
  right: 0;
}

.site-footer.footer-v432 .footer-b-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 20px 0;
  border-top: 1px solid rgba(210, 162, 58, .21);
  border-bottom: 1px solid rgba(210, 162, 58, .14);
  background: transparent;
}

.site-footer.footer-v432 .footer-b-contact-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  min-width: 0;
}

.site-footer.footer-v432 .footer-b-contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ded6c7;
  font: 500 .86rem/1.3 Lato, Arial, sans-serif;
  white-space: nowrap;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}

.site-footer.footer-v432 .footer-b-contact-pill svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  fill: none;
  stroke: #d2a23a;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer.footer-v432 .footer-b-contact-pill:hover,
.site-footer.footer-v432 .footer-b-contact-pill:focus-visible {
  border: 0;
  background: transparent;
  color: #f4d27c;
  transform: none;
  outline: none;
}

.site-footer.footer-v432 .footer-b-socials {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.site-footer.footer-v432 .footer-b-social {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210, 162, 58, .42);
  border-radius: 50%;
  background: transparent;
  color: #d9b55c;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}

.site-footer.footer-v432 .footer-b-social svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-footer.footer-v432 .footer-b-social:last-child svg {
  fill: currentColor;
  stroke: none;
}

.site-footer.footer-v432 .footer-b-social--instagram,
.site-footer.footer-v432 .footer-b-social--facebook {
  color: #d9b55c;
  border-color: rgba(210, 162, 58, .42);
  background: transparent;
}

.site-footer.footer-v432 .footer-b-social:hover,
.site-footer.footer-v432 .footer-b-social:focus-visible,
.site-footer.footer-v432 .footer-b-social--instagram:hover,
.site-footer.footer-v432 .footer-b-social--instagram:focus-visible,
.site-footer.footer-v432 .footer-b-social--facebook:hover,
.site-footer.footer-v432 .footer-b-social--facebook:focus-visible {
  border-color: #f4d27c;
  background: rgba(210, 162, 58, .09);
  color: #f4d27c;
  transform: translateY(-1px);
  outline: none;
}

.site-footer.footer-v432 .footer-b-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 0;
  padding: 16px 0 0;
  border: 0;
  color: #948b7d;
  font: 500 .75rem/1.45 Lato, Arial, sans-serif;
  letter-spacing: .01em;
  text-align: left;
}

.site-footer.footer-v432 .footer-b-bottom-separator {
  display: none;
}

.site-footer.footer-v432 .footer-b-legal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 3px 12px;
  margin: 0;
}

.site-footer.footer-v432 .footer-b-legal span {
  display: none;
}

.site-footer.footer-v432 .footer-b-legal a {
  color: #a59c8e;
  text-decoration: none;
  transition: color .18s ease;
}

.site-footer.footer-v432 .footer-b-legal a:hover,
.site-footer.footer-v432 .footer-b-legal a:focus-visible,
.site-footer.footer-v432 .footer-b-legal a[aria-current="page"] {
  color: #f4d27c;
  outline: none;
}

@media (max-width: 1040px) {
  .site-footer.footer-v432 .footer-b-shell {
    width: min(calc(100% - 48px), 1480px);
  }

  .site-footer.footer-v432 .footer-b-main {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .site-footer.footer-v432 .footer-b-brand-panel {
    display: grid;
    grid-template-columns: minmax(210px, 255px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 0 0 26px;
    border-right: 0;
    border-bottom: 1px solid rgba(210, 162, 58, .2);
  }

  .site-footer.footer-v432 .footer-b-tagline {
    margin: 0;
    max-width: 45ch;
  }

  .site-footer.footer-v432 .footer-b-nav {
    grid-template-columns: 1.2fr 1fr .8fr;
    gap: 34px;
  }
}

@media (max-width: 700px) {
  .site-footer.footer-v432 {
    padding: 30px 0 18px;
  }

  .site-footer.footer-v432 .footer-b-shell {
    width: min(calc(100% - 32px), 1480px);
  }

  .site-footer.footer-v432 .footer-b-main {
    display: block;
    padding: 0 0 18px;
  }

  .site-footer.footer-v432 .footer-b-brand-panel {
    display: block;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(210, 162, 58, .2);
    text-align: center;
  }

  .site-footer.footer-v432 .footer-b-brand {
    display: flex;
    justify-content: center;
  }

  .site-footer.footer-v432 .footer-b-brand img {
    width: min(100%, 230px);
  }

  .site-footer.footer-v432 .footer-b-tagline {
    max-width: 34ch;
    margin: 16px auto 18px;
    font-size: .86rem;
  }

  .site-footer.footer-v432 .footer-b-primary {
    width: min(100%, 320px);
    min-height: 44px;
  }

  .site-footer.footer-v432 .footer-b-nav {
    display: block;
    padding: 8px 0 0;
  }

  .site-footer.footer-v432 .footer-b-nav-group {
    border-bottom: 1px solid rgba(210, 162, 58, .17);
  }

  .site-footer.footer-v432 .footer-b-nav-group:last-child {
    border-bottom: 0;
  }

  .site-footer.footer-v432 .footer-b-nav-toggle {
    min-height: 50px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #e4bc58;
    cursor: pointer;
  }

  .site-footer.footer-v432 .footer-b-chevron {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .18s ease;
  }

  .site-footer.footer-v432 .footer-b-nav-toggle[aria-expanded="true"] .footer-b-chevron {
    transform: rotate(180deg);
  }

  .site-footer.footer-v432 .footer-b-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
    padding: 0 0 14px;
  }

  .site-footer.footer-v432 .footer-b-links a {
    width: auto;
    padding: 8px 0;
    font-size: .87rem;
  }

  .site-footer.footer-v432 .footer-b-nav-group.is-collapsed .footer-b-links {
    display: none;
  }

  .site-footer.footer-v432 .footer-b-contact-row {
    display: block;
    padding: 18px 0;
  }

  .site-footer.footer-v432 .footer-b-contact-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .site-footer.footer-v432 .footer-b-contact-pill {
    width: 100%;
    min-height: 42px;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .site-footer.footer-v432 .footer-b-socials {
    justify-content: center;
    margin-top: 14px;
  }

  .site-footer.footer-v432 .footer-b-bottom {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 0 0;
    text-align: center;
  }

  .site-footer.footer-v432 .footer-b-legal {
    justify-content: center;
    gap: 5px 13px;
  }
}

@media (max-width: 430px) {
  .site-footer.footer-v432 .footer-b-links {
    grid-template-columns: 1fr;
  }
}



/* Build 432 density pass.
   Preserve the approved phone accordion at <=700px, but make the desktop/tablet
   footer feel like a footer rather than another full content section. */
@media (min-width: 701px) {
  .site-footer.footer-v432 {
    padding-top: 32px;
    padding-bottom: 16px;
  }

  .site-footer.footer-v432 .footer-b-main {
    gap: clamp(28px, 4vw, 62px);
    padding-bottom: 20px;
  }

  .site-footer.footer-v432 .footer-b-brand-panel {
    padding-right: clamp(20px, 2.4vw, 34px);
  }

  .site-footer.footer-v432 .footer-b-brand img {
    width: min(100%, 220px);
  }

  .site-footer.footer-v432 .footer-b-tagline {
    margin: 11px 0 12px;
    font-size: .84rem;
    line-height: 1.5;
  }

  .site-footer.footer-v432 .footer-b-primary {
    min-height: 36px;
    padding: 8px 15px;
    font-size: .72rem;
  }

  .site-footer.footer-v432 .footer-b-nav {
    gap: clamp(24px, 3vw, 46px);
    padding-top: 0;
  }

  .site-footer.footer-v432 .footer-b-nav-toggle {
    margin-bottom: 10px;
  }

  .site-footer.footer-v432 .footer-b-links a {
    padding: 3px 0;
    font-size: .86rem;
    line-height: 1.35;
  }

  .site-footer.footer-v432 .footer-b-links a::after {
    bottom: 1px;
  }

  .site-footer.footer-v432 .footer-b-contact-row {
    gap: 20px;
    padding: 12px 0;
  }

  .site-footer.footer-v432 .footer-b-contact-actions {
    gap: 6px 24px;
  }

  .site-footer.footer-v432 .footer-b-contact-pill {
    min-height: 32px;
    font-size: .84rem;
  }

  .site-footer.footer-v432 .footer-b-contact-pill svg {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
  }

  .site-footer.footer-v432 .footer-b-social {
    width: 36px;
    height: 36px;
  }

  .site-footer.footer-v432 .footer-b-social svg {
    width: 16px;
    height: 16px;
  }

  .site-footer.footer-v432 .footer-b-bottom {
    gap: 16px;
    padding-top: 9px;
    font-size: .72rem;
  }
}

@media (min-width: 1041px) {
  .site-footer.footer-v432 .footer-b-main {
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  }

  .site-footer.footer-v432 .footer-b-nav {
    grid-template-columns: 1.4fr 1fr .8fr;
  }

  /* Performances has eight links; split only this desktop group into two
     columns so it no longer dictates the full footer height. */
  .site-footer.footer-v432 .footer-b-nav-group:first-child .footer-b-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(18px, 2vw, 30px);
  }

  .site-footer.footer-v432 .footer-b-nav-group:first-child .footer-b-links a {
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer.footer-v432 .footer-b-primary,
  .site-footer.footer-v432 .footer-b-links a,
  .site-footer.footer-v432 .footer-b-links a::after,
  .site-footer.footer-v432 .footer-b-contact-pill,
  .site-footer.footer-v432 .footer-b-social,
  .site-footer.footer-v432 .footer-b-chevron {
    transition: none;
  }
}