/* JT P31T44 source: assets/css/public-polish-258.css */
/* Build 255 — public navigation + promoted V2 page consistency.
   Loaded after all legacy/V2 page styles so page-specific layouts win. */

/* ---------- Main navigation ---------- */
.site-header .header-inner {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  min-height: 108px !important;
  margin-inline: auto !important;
}
@media (min-width: 1321px) {
  .site-header .header-inner {
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: clamp(28px, 2.5vw, 54px) !important;
  }
  .site-header .logo-link { width: 250px !important; }
  .site-header .nav-toggle { display: none !important; }
  .site-header .main-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, .72vw, 15px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary {
    font-size: clamp(.72rem, .66vw, .87rem) !important;
    letter-spacing: .045em !important;
    font-weight: 800 !important;
  }
  .site-header .main-nav > .nav-availability {
    padding: 10px 13px !important;
  }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  .site-header .header-inner { grid-template-columns: 220px minmax(0,1fr) !important; gap: 24px !important; }
  .site-header .logo-link { width: 220px !important; }
  .site-header .main-nav { gap: 8px !important; }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary { font-size: .72rem !important; letter-spacing: .025em !important; }
  .site-header .main-nav > .nav-availability { padding: 9px 10px !important; }
}
/* Use the mobile menu before the expanded desktop nav becomes cramped. */
@media (max-width: 1320px) {
  .site-header .header-inner {
    width: calc(100% - 34px) !important;
    min-height: 86px !important;
    grid-template-columns: minmax(180px, 240px) 1fr 46px !important;
    gap: 16px !important;
  }
  .site-header .logo-link { width: min(240px, 100%) !important; }
  .site-header .nav-toggle { display: inline-grid !important; place-items: center !important; justify-self: end !important; }
  .site-header .main-nav {
    position: fixed !important;
    z-index: 130 !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px 24px 26px !important;
    background: rgba(0,0,0,.985) !important;
    border-top: 1px solid rgba(210,162,58,.2) !important;
    border-bottom: 1px solid rgba(210,162,58,.28) !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
  }
  body.nav-open .site-header .main-nav { display: flex !important; }
  .site-header .main-nav > a,
  .site-header .main-nav > .nav-dropdown > summary {
    padding: 14px 0 !important;
    font-size: .91rem !important;
    letter-spacing: .07em !important;
  }
  .site-header .main-nav > .nav-dropdown { border-bottom: 1px solid rgba(210,162,58,.13) !important; }
  .site-header .main-nav > .nav-dropdown > summary { justify-content: space-between !important; }
  .site-header .main-nav > .nav-dropdown > .nav-dropdown-menu {
    position: static !important;
    transform: none !important;
    width: auto !important;
    padding: 0 0 10px 14px !important;
    border: 0 !important;
    border-left: 1px solid rgba(210,162,58,.3) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .site-header .main-nav > .nav-dropdown > .nav-dropdown-menu a { padding: 10px 12px !important; }
  .site-header .main-nav > .nav-availability { margin-top: 12px !important; text-align: center !important; }
}
@media (max-width: 640px) {
  .site-header .header-inner { width: calc(100% - 24px) !important; grid-template-columns: 190px 1fr 44px !important; }
  .site-header .logo-link { width: 190px !important; }
}
/* ---------- About hero ---------- */
@media (min-width: 901px) {
  body.about-page .about-hero.preview-v2-hero { padding: 0 !important; }
  body.about-page .about-hero-grid.preview-v2-hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr) !important;
    gap: clamp(34px, 4vw, 68px) !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: clamp(42px, 4vw, 64px) var(--public-content-gutter, clamp(28px,4vw,72px)) !important;
  }
  body.about-page .about-hero-copy.preview-v2-hero-copy {
    padding: 0 !important;
    background: transparent !important;
    align-self: center !important;
  }
  body.about-page .about-hero-media.preview-v2-hero-media {
    width: 100% !important;
    height: clamp(340px, 30vw, 455px) !important;
    min-height: 0 !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
  }
  body.about-page .about-hero-media.preview-v2-hero-media img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: 50% 35% !important;
  }
}
@media (max-width: 900px) {
  body.about-page .about-hero-grid.preview-v2-hero-split { min-height: 0 !important; }
  body.about-page .about-hero-media.preview-v2-hero-media { min-height: 0 !important; height: clamp(320px, 70vw, 460px) !important; }
  body.about-page .about-hero-media.preview-v2-hero-media img { min-height: 0 !important; height: 100% !important; object-position: 50% 34% !important; }
}
/* ---------- Reviews hero/header consistency ---------- */
@media (min-width: 981px) {
  body.reviews-page .reviews-hero.preview-v2-hero { padding: 0 !important; }
  body.reviews-page .reviews-hero-grid.preview-v2-hero-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(410px, .94fr) !important;
    gap: clamp(36px, 4vw, 70px) !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 46px var(--public-content-gutter, clamp(28px,4vw,72px)) 62px !important;
  }
  body.reviews-page .reviews-hero-copy.preview-v2-hero-copy {
    padding: 0 !important;
    background: transparent !important;
    align-self: center !important;
  }
  body.reviews-page .reviews-hero-media.preview-v2-hero-media {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.reviews-page .reviews-hero-image { height: clamp(340px, 29vw, 440px) !important; }
  body.reviews-page .reviews-hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 50% 32% !important;
  }
}
@media (max-width: 980px) {
  body.reviews-page .reviews-hero-grid.preview-v2-hero-split { min-height: 0 !important; }
  body.reviews-page .reviews-hero-media.preview-v2-hero-media { min-height: 0 !important; height: auto !important; overflow: visible !important; }
  body.reviews-page .reviews-hero-image { height: clamp(320px, 62vw, 430px) !important; }
  body.reviews-page .reviews-hero-image img { min-height: 0 !important; height: 100% !important; object-position: 50% 32% !important; }
}
/* ---------- Gallery: restore the intentional collage/grids ---------- */
body.gallery-page .gallery-hero.preview-v2-hero { padding: 0 !important; }
body.gallery-page .gallery-hero-grid.preview-v2-hero-split {
  display: grid !important;
  grid-template-columns: minmax(0, .83fr) minmax(520px, 1.17fr) !important;
  gap: clamp(34px, 4vw, 64px) !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 46px var(--public-content-gutter, clamp(28px,4vw,72px)) 42px !important;
}
body.gallery-page .gallery-hero-copy.preview-v2-hero-copy {
  padding: 0 !important;
  background: transparent !important;
  align-self: center !important;
  justify-content: center !important;
}
body.gallery-page .gallery-hero-collage.preview-v2-hero-panel {
  display: grid !important;
  grid-template-columns: minmax(0,1.9fr) minmax(190px,.95fr) minmax(140px,.72fr) !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  height: clamp(350px, 30vw, 430px) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
body.gallery-page .gallery-hero-collage.preview-v2-hero-panel button { min-width: 0 !important; min-height: 0 !important; }
body.gallery-page .gallery-showcase > .container {
  width: 100% !important; max-width: none !important; padding-inline: var(--public-content-gutter, clamp(28px,4vw,72px)) !important;
}
@media (max-width: 1080px) {
  body.gallery-page .gallery-hero-grid.preview-v2-hero-split { grid-template-columns: 1fr !important; }
  body.gallery-page .gallery-hero-collage.preview-v2-hero-panel { max-width: 900px !important; height: 390px !important; }
}
@media (max-width: 760px) {
  body.gallery-page .gallery-hero-grid.preview-v2-hero-split { padding: 34px var(--public-content-gutter, 20px) 32px !important; }
  body.gallery-page .gallery-hero-collage.preview-v2-hero-panel {
    height: auto !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
  }
}

/* Build 258 — public header, scroll-control and Weddings consistency. */
/* One public header presentation everywhere. Page-specific styles are not allowed to
   move, resize or restyle the shell after this file loads. */
html body .site-header {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  background: #050505 !important;
  border-bottom: 1px solid rgba(210,162,58,.24) !important;
  box-shadow: none !important;
}
html body .site-header .header-inner {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  align-items: center !important;
  padding-block: 0 !important;
  transform: none !important;
}
html body .site-header .logo-link {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
html body .site-header .logo-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 88px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
html body .site-header .main-nav {
  margin: 0 !important;
  transform: none !important;
}
html body .site-header .main-nav > a,
html body .site-header .main-nav > .nav-dropdown,
html body .site-header .main-nav > .nav-dropdown > summary {
  align-self: center !important;
}
html body .site-header .main-nav > a,
html body .site-header .main-nav > .nav-dropdown > summary {
  line-height: 1.15 !important;
}
/* Weddings had accumulated page-specific header rules over several V2 passes.
   These selectors deliberately pin it to the same shell as Collaborations. */
html body.weddings-page .site-header,
html body.weddings-page .site-header .header-inner,
html body.weddings-page .site-header .main-nav,
html body.weddings-page .site-header .logo-link {
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}
/* Wedding package chooser: landscape artwork is supporting navigation, not a hero.
   Keep all five visible at a sensible size on wide screens and never crop the art. */
body.weddings-page #wedding-packages .packages-grid {
  width: 100% !important;
  max-width: 1260px !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(150px, 220px)) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: clamp(12px, 1.25vw, 20px) !important;
}
body.weddings-page #wedding-packages .package-card {
  width: 100% !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
body.weddings-page #wedding-packages .package-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 165px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 1180px) {
  body.weddings-page #wedding-packages .packages-grid {
    grid-template-columns: repeat(3, minmax(170px, 230px)) !important;
  }
  body.weddings-page #wedding-packages .package-card { max-width: 230px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 173px !important; }
}
@media (max-width: 760px) {
  body.weddings-page #wedding-packages .packages-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px !important;
  }
  body.weddings-page #wedding-packages .package-card { max-width: 260px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 195px !important; }
}
@media (max-width: 470px) {
  body.weddings-page #wedding-packages .packages-grid { grid-template-columns: 1fr !important; max-width: 290px !important; }
  body.weddings-page #wedding-packages .package-card { max-width: 290px !important; }
  body.weddings-page #wedding-packages .package-card img { max-height: 218px !important; }
}
/* One scroll-arrow system everywhere: exactly the dark/gold circular treatment used
   on Collaborations. Page-specific legacy colours/backgrounds are overridden. */
html body .section-scroll-next.preview-v2-scroll-next {
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #d2a23a !important;
  border-radius: 999px !important;
  background: rgba(8,8,8,.94) !important;
  color: #efc767 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
html body > .section-scroll-next.preview-v2-scroll-next {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
}
html body .section-scroll-next.preview-v2-scroll-next svg {
  width: 25px !important;
  height: 25px !important;
  display: block !important;
  overflow: visible !important;
}
html body .section-scroll-next.preview-v2-scroll-next svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .section-scroll-next.preview-v2-scroll-next:hover,
html body .section-scroll-next.preview-v2-scroll-next:focus-visible {
  background: #d2a23a !important;
  border-color: #d2a23a !important;
  color: #080808 !important;
  outline: none !important;
}
html body .section-scroll-next.preview-v2-scroll-next:focus-visible {
  box-shadow: 0 0 0 3px rgba(210,162,58,.22), 0 10px 28px rgba(0,0,0,.34) !important;
}
@media (max-width: 720px) {
  html body .section-scroll-next.preview-v2-scroll-next {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
  }
  html body > .section-scroll-next.preview-v2-scroll-next { bottom: 14px !important; }
  html body .section-scroll-next.preview-v2-scroll-next svg { width: 22px !important; height: 22px !important; }
}

/* Build 262 — promoted original public pages: outstanding consistency fixes.
   This layer deliberately changes presentation only. No retired *2 HTML page is targeted. */

/* Wedding Advice: the shared public header changes from 108px to 86px at 1320px.
   Keep the opening hero + header equal to one complete viewport at that same breakpoint. */
html body.resource-page-advice main > .article-hero,
html body.resource-page-advice main > .article-hero > .article-hero-grid {
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
}
@media (max-width: 1320px) {
  html body.resource-page-advice main > .article-hero,
  html body.resource-page-advice main > .article-hero > .article-hero-grid {
    min-height: calc(100vh - 86px) !important;
    min-height: calc(100svh - 86px) !important;
  }
}

/* Wedding Advice: make the reading field / guide rail contrast explicit and use the
   exact warm-ivory colour used by the light V2 sections elsewhere on the site. */
html body.resource-page-advice .article-content-section {
  background: #090909 !important;
}
html body.resource-page-advice .article-side-card {
  background: #f4efe7 !important;
  color: #17130e !important;
  border-color: rgba(127,92,23,.38) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.34) !important;
}
html body.resource-page-advice .article-side-card h2,
html body.resource-page-advice .article-side-card strong {
  color: #17130e !important;
}
html body.resource-page-advice .article-side-card .article-toc-list a,
html body.resource-page-advice .article-side-card .article-side-links a,
html body.resource-page-advice .article-side-card .article-topic-chip {
  color: #30281e !important;
}
html body.resource-page-advice .article-side-card .article-toc-list a:hover,
html body.resource-page-advice .article-side-card .article-toc-list a:focus-visible,
html body.resource-page-advice .article-side-card .article-side-links a:hover,
html body.resource-page-advice .article-side-card .article-side-links a:focus-visible,
html body.resource-page-advice .article-side-card .article-topic-chip:hover,
html body.resource-page-advice .article-side-card .article-topic-chip:focus-visible {
  color: #7f5c17 !important;
}

/* Weddings: the five 4:3 package chooser images are navigation thumbnails, not hero
   artwork. Keep them substantially smaller while preserving the full source image. */
html body.weddings-page #wedding-packages .packages-grid {
  width: 100% !important;
  max-width: 860px !important;
  grid-template-columns: repeat(5, minmax(118px, 150px)) !important;
  justify-content: center !important;
  gap: clamp(10px, .9vw, 14px) !important;
}
html body.weddings-page #wedding-packages .package-card {
  width: 100% !important;
  max-width: 150px !important;
  min-width: 0 !important;
}
html body.weddings-page #wedding-packages .package-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 113px !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  object-position: center !important;
}
@media (max-width: 1180px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 510px !important;
    grid-template-columns: repeat(3, minmax(120px, 150px)) !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 150px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 113px !important; }
}
@media (max-width: 760px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 350px !important;
    grid-template-columns: repeat(2, minmax(0, 165px)) !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 165px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 124px !important; }
}
@media (max-width: 470px) {
  html body.weddings-page #wedding-packages .packages-grid {
    max-width: 210px !important;
    grid-template-columns: 1fr !important;
  }
  html body.weddings-page #wedding-packages .package-card { max-width: 210px !important; }
  html body.weddings-page #wedding-packages .package-card img { max-height: 158px !important; }
}

/* Weddings: explicitly pin the promoted original page to the shared Collaborations
   header geometry so older Weddings-specific styles cannot alter the top navigation. */
html body.weddings-page .site-header .header-inner {
  width: calc(100% - 56px) !important;
  max-width: none !important;
  min-height: 108px !important;
  margin-inline: auto !important;
  padding-block: 0 !important;
}
@media (min-width: 1321px) {
  html body.weddings-page .site-header .header-inner {
    grid-template-columns: 250px minmax(0,1fr) !important;
    gap: clamp(28px, 2.5vw, 54px) !important;
  }
  html body.weddings-page .site-header .logo-link { width: 250px !important; }
  html body.weddings-page .site-header .nav-toggle { display: none !important; }
  html body.weddings-page .site-header .main-nav {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(8px, .72vw, 15px) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap !important;
  }
  html body.weddings-page .site-header .main-nav > a,
  html body.weddings-page .site-header .main-nav > .nav-dropdown > summary {
    font-size: clamp(.72rem, .66vw, .87rem) !important;
    letter-spacing: .045em !important;
    font-weight: 800 !important;
  }
  html body.weddings-page .site-header .main-nav > .nav-availability {
    padding: 10px 13px !important;
  }
}
@media (min-width: 1321px) and (max-width: 1500px) {
  html body.weddings-page .site-header .header-inner {
    grid-template-columns: 220px minmax(0,1fr) !important;
    gap: 24px !important;
  }
  html body.weddings-page .site-header .logo-link { width: 220px !important; }
  html body.weddings-page .site-header .main-nav { gap: 8px !important; }
  html body.weddings-page .site-header .main-nav > a,
  html body.weddings-page .site-header .main-nav > .nav-dropdown > summary {
    font-size: .72rem !important;
    letter-spacing: .025em !important;
  }
  html body.weddings-page .site-header .main-nav > .nav-availability { padding: 9px 10px !important; }
}
@media (max-width: 1320px) {
  html body.weddings-page .site-header .header-inner {
    width: calc(100% - 34px) !important;
    min-height: 86px !important;
    grid-template-columns: minmax(180px, 240px) 1fr 46px !important;
    gap: 16px !important;
  }
  html body.weddings-page .site-header .logo-link { width: min(240px, 100%) !important; }
  html body.weddings-page .site-header .nav-toggle {
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
  }
  html body.weddings-page .site-header .main-nav {
    position: fixed !important;
    z-index: 130 !important;
    top: 86px !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 14px 24px 26px !important;
    background: rgba(0,0,0,.985) !important;
    border-top: 1px solid rgba(210,162,58,.2) !important;
    border-bottom: 1px solid rgba(210,162,58,.28) !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }
  html body.weddings-page.nav-open .site-header .main-nav { display: flex !important; }
}
@media (max-width: 640px) {
  html body.weddings-page .site-header .header-inner {
    width: calc(100% - 24px) !important;
    grid-template-columns: 190px 1fr 44px !important;
  }
  html body.weddings-page .site-header .logo-link { width: 190px !important; }
}

/* Scroll controls: use the actual Collaborations visual treatment everywhere.
   Generic V2 arrows remain interactive; Collaborations keeps its own is-visible behaviour. */
html body .section-scroll-next {
  box-sizing: border-box !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(244,210,124,.72) !important;
  border-radius: 50% !important;
  background: rgba(5,5,5,.12) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  opacity: .86 !important;
  pointer-events: auto !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 .2s ease !important;
}
html body > .section-scroll-next {
  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;
  transform: translate(-50%, 0) !important;
}
html body .section-scroll-next 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 body .section-scroll-next svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
html body .section-scroll-next:hover,
html body .section-scroll-next:focus-visible {
  opacity: 1 !important;
  border-color: var(--gold-light, #f4d27c) !important;
  background: rgba(5,5,5,.28) !important;
  color: var(--gold-light, #f4d27c) !important;
  outline: none !important;
}
html body .section-scroll-next:hover svg,
html body .section-scroll-next:focus-visible svg {
  transform: translateY(2px) !important;
}
html body.page2-preview .section-scroll-next.is-at-end {
  opacity: .38 !important;
}
html body.collaborations-page .section-scroll-next {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 12px) !important;
}
html body.collaborations-page .section-scroll-next.is-visible {
  opacity: .86 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}
html body.collaborations-page .section-scroll-next.is-visible:hover,
html body.collaborations-page .section-scroll-next.is-visible:focus-visible {
  opacity: 1 !important;
}
@media (max-width: 640px) {
  html body .section-scroll-next {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  html body > .section-scroll-next {
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  html body .section-scroll-next svg {
    width: 20px !important;
    height: 20px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body .section-scroll-next,
  html body .section-scroll-next svg {
    transition: none !important;
  }
}

/* Build 264 — Wedding Advice landing page, built strictly on top of Build 262.
   This is a CSS-only transformation of the existing wedding-advice.php markup:
   full-depth photographic hero, real anchor scroll control, warm-light category rail,
   image-led horizontal advice carousel and deliberate light/dark section contrast. */

/* LANDING HERO — use the same photographic, full-viewport language as the article page. */
html body.resource-page-advice main > .resource-hero {
  position: relative !important;
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-bottom: 1px solid rgba(210,162,58,.22) !important;
  background:
    linear-gradient(90deg,rgba(4,4,4,.96) 0%,rgba(4,4,4,.87) 28%,rgba(4,4,4,.55) 53%,rgba(4,4,4,.22) 74%,rgba(4,4,4,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.7) 100%),
    url("../img/home-v2/home-hero-ballroom-1536.webp") 64% 45% / cover no-repeat !important;
}
html body.resource-page-advice main > .resource-hero::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,rgba(210,162,58,.72),transparent) !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: calc(100vh - 108px) !important;
  min-height: calc(100svh - 108px) !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(70px,8vh,118px) var(--public-content-gutter,clamp(28px,4vw,72px)) clamp(96px,11vh,142px) !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy {
  position: static !important;
  width: min(790px,58vw) !important;
  max-width: 790px !important;
  min-width: 0 !important;
  padding: clamp(22px,3vw,42px) 0 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.52) !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy .kicker {
  color: #efc767 !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy h1 {
  max-width: 780px !important;
  margin: .28rem 0 1rem !important;
  color: #fff8ea !important;
  font-size: clamp(2.8rem,4.65vw,5.75rem) !important;
  line-height: .99 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > .resource-hero .resource-hero-copy > p:not(.kicker) {
  max-width: 710px !important;
  margin: 0 !important;
  color: rgba(255,248,234,.9) !important;
  font-size: clamp(1.06rem,1.3vw,1.24rem) !important;
  line-height: 1.68 !important;
}
/* The old small graphic is no longer the hero visual; the full bleed wedding photograph is. */
html body.resource-page-advice main > .resource-hero .resource-hero-media {
  display: none !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 28px !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]) {
  border-color: rgba(244,210,124,.72) !important;
  background: rgba(5,5,5,.42) !important;
  color: #f7e6b0 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]):hover,
html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]):focus-visible {
  background: #d2a23a !important;
  border-color: #d2a23a !important;
  color: #080808 !important;
}

/* Re-use the existing Browse advice anchor as the missing Collaborations-style scroll control. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  z-index: 8 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(210,162,58,.62) !important;
  border-radius: 50% !important;
  background: rgba(5,5,5,.28) !important;
  color: var(--gold-light,#f4d27c) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  opacity: .88 !important;
  transition: opacity .18s ease,border-color .18s ease,background .18s ease !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  width: 1.8px !important;
  height: 17px !important;
  border-radius: 2px !important;
  background: currentColor !important;
  transform: translateX(-50%) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 20px !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  transform: translateX(-50%) rotate(45deg) !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:hover,
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:focus-visible {
  opacity: 1 !important;
  border-color: var(--gold-light,#f4d27c) !important;
  background: rgba(5,5,5,.42) !important;
  color: var(--gold-light,#f4d27c) !important;
  outline: none !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(210,162,58,.22),0 10px 28px rgba(0,0,0,.34) !important;
}

/* ADVICE LIBRARY — dark editorial field with the warm-light guide rail from article pages. */
html body.resource-page-advice main > #articles.resource-section {
  scroll-margin-top: 108px !important;
  padding: clamp(58px,6.2vw,94px) 0 !important;
  background:
    radial-gradient(circle at 8% 8%,rgba(210,162,58,.05),transparent 26%),
    linear-gradient(180deg,#0c0b09 0%,#080808 100%) !important;
  border-bottom: 1px solid rgba(210,162,58,.17) !important;
}
html body.resource-page-advice main > #articles > .container {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: minmax(285px,350px) minmax(0,1fr) !important;
  grid-template-rows: auto minmax(0,1fr) !important;
  column-gap: clamp(36px,5vw,82px) !important;
  row-gap: 24px !important;
  align-items: start !important;
  padding-left: var(--public-content-gutter,clamp(28px,4vw,72px)) !important;
  padding-right: var(--public-content-gutter,clamp(28px,4vw,72px)) !important;
}
html body.resource-page-advice main > #articles .resource-section-head {
  grid-column: 2 !important;
  grid-row: 1 !important;
  max-width: 880px !important;
  margin: 0 !important;
}
html body.resource-page-advice main > #articles .resource-section-head .kicker {
  color: #efc767 !important;
}
html body.resource-page-advice main > #articles .resource-section-head h2 {
  margin: .15rem 0 .75rem !important;
  color: #fff5e4 !important;
  font-size: clamp(2.2rem,3.35vw,4rem) !important;
  line-height: 1.05 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > #articles .resource-section-head p:not(.kicker) {
  max-width: 760px !important;
  color: #cfc6b9 !important;
  font-size: clamp(1rem,1.08vw,1.12rem) !important;
  line-height: 1.72 !important;
}

/* Existing category toolbar becomes the visible light side menu. */
html body.resource-page-advice main > #articles .advice-toolbar {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: sticky !important;
  top: 122px !important;
  display: grid !important;
  gap: 0 !important;
  align-content: start !important;
  margin: 0 !important;
  padding: clamp(24px,2.4vw,34px) !important;
  border: 1px solid rgba(178,132,38,.42) !important;
  border-radius: 14px !important;
  background: linear-gradient(155deg,#f5f0e7 0%,#eee5d8 100%) !important;
  color: #17130e !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.3) !important;
}
html body.resource-page-advice main > #articles .advice-toolbar::before {
  content: "Browse Wedding Advice" !important;
  display: block !important;
  margin: 0 0 13px !important;
  color: #18130d !important;
  font-family: Lato,Arial,sans-serif !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  width: 100% !important;
  min-height: 0 !important;
  justify-content: space-between !important;
  padding: 12px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(99,78,47,.14) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #2c241c !important;
  text-align: left !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
  letter-spacing: .035em !important;
  white-space: normal !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn:first-of-type {
  border-top: 1px solid rgba(99,78,47,.14) !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn::after {
  content: "→" !important;
  margin-left: 12px !important;
  color: #a57417 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn:hover,
html body.resource-page-advice main > #articles .advice-toolbar .btn:focus-visible {
  color: #8e6414 !important;
  background: rgba(154,111,26,.055) !important;
  outline: none !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn.btn-primary {
  padding-left: 10px !important;
  padding-right: 10px !important;
  background: rgba(154,111,26,.12) !important;
  color: #744f0c !important;
  font-weight: 900 !important;
}

/* The existing article list becomes an image-led horizontal carousel. */
html body.resource-page-advice main > #articles .advice-grid {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column !important;
  grid-auto-columns: minmax(350px,46%) !important;
  gap: 20px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(210,162,58,.72) rgba(255,255,255,.055) !important;
  overscroll-behavior-inline: contain !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  height: 7px !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05) !important;
  border-radius: 999px !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-thumb {
  background: rgba(210,162,58,.72) !important;
  border-radius: 999px !important;
}
html body.resource-page-advice main > #articles .advice-card {
  position: relative !important;
  min-height: 520px !important;
  padding: 0 0 26px !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  border: 1px solid rgba(210,162,58,.27) !important;
  border-radius: 18px !important;
  background: linear-gradient(155deg,rgba(20,17,12,.98),rgba(7,7,7,.99)) !important;
  box-shadow: 0 20px 46px rgba(0,0,0,.28) !important;
  transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
html body.resource-page-advice main > #articles .advice-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(210,162,58,.52) !important;
  box-shadow: 0 26px 58px rgba(0,0,0,.38) !important;
}
html body.resource-page-advice main > #articles .advice-card::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: clamp(205px,16vw,270px) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(210,162,58,.24) !important;
}
html body.resource-page-advice main > #articles .advice-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: clamp(205px,16vw,270px) !important;
  background: linear-gradient(180deg,rgba(0,0,0,.02) 48%,rgba(7,7,7,.5) 100%) !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+1)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-barn-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+2)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-editorial-close-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+3)::before { background-image: url("../img/optimized/qa-image-pass-107/gallery-v3/wedding-barn-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+4)::before { background-image: url("../img/home-v2/home-hero-ballroom-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+5)::before { background-image: url("../img/optimized/qa-image-pass-107/gallery-v3/wedding-church-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+6)::before { background-image: url("../img/optimized/qa3/heroes/wedding-ceremony-church-hero-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+7)::before { background-image: url("../img/optimized/qa-image-pass-107/site-content/weddings-v2/wedding-ceremony-editorial-full-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(8n+8)::before { background-image: url("../img/optimized/qa3/heroes/james-performance-800.webp") !important; }
html body.resource-page-advice main > #articles .advice-card > * {
  position: relative !important;
  z-index: 2 !important;
}
html body.resource-page-advice main > #articles .advice-card > div:first-child {
  margin: 22px 24px 0 !important;
}
html body.resource-page-advice main > #articles .advice-card h2 {
  margin: .55rem 24px .7rem !important;
  color: #fff4df !important;
  font-size: clamp(1.55rem,2vw,2.15rem) !important;
  line-height: 1.14 !important;
  text-wrap: balance !important;
}
html body.resource-page-advice main > #articles .advice-card > p {
  margin: 0 24px !important;
  color: #d2c9bc !important;
  line-height: 1.68 !important;
}
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  margin: 16px 24px 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  margin: auto 24px 0 !important;
  padding-top: 18px !important;
  color: #efc767 !important;
}
html body.resource-page-advice main > #articles .resource-empty {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Chromium's native generated scroll buttons make the CSS-only carousel controllable
   without touching the PHP or any shared JavaScript. Other browsers retain touch/trackpad scroll. */
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 26px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(210,162,58,.56) !important;
    border-radius: 50% !important;
    background: rgba(6,6,6,.88) !important;
    color: #f4d27c !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.3) !important;
    font: 700 24px/1 Georgia,serif !important;
    cursor: pointer !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) { content: "‹" !important; }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) { content: "›" !important; }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .28 !important;
    cursor: default !important;
  }
}

/* FINAL CTA — a genuine light section so the page does not become one endless black field. */
html body.resource-page-advice main > .resource-cta.resource-section-alt {
  padding: clamp(58px,6vw,88px) 0 !important;
  background: #f4efe7 !important;
  color: #17130e !important;
  border-top: 1px solid rgba(127,92,23,.26) !important;
  border-bottom: 0 !important;
}
html body.resource-page-advice main > .resource-cta .resource-cta-shell {
  border-color: rgba(127,92,23,.38) !important;
  background: linear-gradient(135deg,#fbf7ef 0%,#eee4d5 100%) !important;
  box-shadow: 0 24px 56px rgba(47,33,12,.13) !important;
}
html body.resource-page-advice main > .resource-cta .kicker { color: #8f6516 !important; }
html body.resource-page-advice main > .resource-cta h2 { color: #17130e !important; }
html body.resource-page-advice main > .resource-cta p { color: #50483e !important; }
html body.resource-page-advice main > .resource-cta .btn:not(.btn-primary) {
  border-color: rgba(99,78,47,.38) !important;
  color: #241e17 !important;
  background: rgba(255,255,255,.38) !important;
}

@media (max-width: 1320px) {
  html body.resource-page-advice main > .resource-hero,
  html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
    min-height: calc(100vh - 86px) !important;
    min-height: calc(100svh - 86px) !important;
  }
  html body.resource-page-advice main > #articles.resource-section { scroll-margin-top: 86px !important; }
}

@media (max-width: 980px) {
  html body.resource-page-advice main > .resource-hero {
    background-position: 60% 48% !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy {
    width: min(760px,82vw) !important;
  }
  html body.resource-page-advice main > #articles > .container {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 24px !important;
  }
  html body.resource-page-advice main > #articles .resource-section-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    grid-column: 1 !important;
    grid-row: 2 !important;
    position: static !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 22px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar::before {
    width: 100% !important;
    margin-bottom: 3px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    width: auto !important;
    padding: 9px 12px !important;
    border: 1px solid rgba(99,78,47,.2) !important;
    border-radius: 999px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn:first-of-type {
    border-top: 1px solid rgba(99,78,47,.2) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn::after { display: none !important; }
  html body.resource-page-advice main > #articles .advice-grid,
  html body.resource-page-advice main > #articles .resource-empty {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    grid-auto-columns: minmax(320px,72%) !important;
  }
}

@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero {
    background:
      linear-gradient(90deg,rgba(4,4,4,.93) 0%,rgba(4,4,4,.76) 48%,rgba(4,4,4,.44) 100%),
      linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.72) 100%),
      url("../img/home-v2/home-hero-ballroom-800.webp") 63% 50% / cover no-repeat !important;
  }
  html body.resource-page-advice main > .resource-hero > .resource-hero-grid {
    padding: 48px 22px 92px !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy {
    width: 100% !important;
    max-width: 560px !important;
  }
  html body.resource-page-advice main > .resource-hero .resource-hero-copy h1 {
    font-size: clamp(2.45rem,12vw,4rem) !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a:not([href="#articles"]) {
    width: 100% !important;
    justify-content: center !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    bottom: 16px !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::before {
    top: 9px !important;
    height: 16px !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"]::after {
    top: 18px !important;
  }
  html body.resource-page-advice main > #articles > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    padding: 19px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    grid-auto-columns: minmax(286px,88%) !important;
    gap: 14px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    min-height: 495px !important;
  }
  html body.resource-page-advice main > #articles .advice-card::before,
  html body.resource-page-advice main > #articles .advice-card::after {
    height: 205px !important;
  }
  html body.resource-page-advice main > #articles .advice-card > div:first-child,
  html body.resource-page-advice main > #articles .advice-card h2,
  html body.resource-page-advice main > #articles .advice-card > p,
  html body.resource-page-advice main > #articles .advice-card .resource-meta,
  html body.resource-page-advice main > #articles .advice-card .text-link {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.resource-page-advice main > #articles .advice-grid { scroll-behavior: auto !important; }
  html body.resource-page-advice main > #articles .advice-card { transition: none !important; }
}


/* Build 265 — Wedding Advice landing refinements after live QA */
html body.resource-page-advice,
html body.resource-page-advice main,
html body.resource-page-advice main > #articles,
html body.resource-page-advice main > #articles > .container {
  overflow-x: clip !important;
}

html body.resource-page-advice main > .resource-hero {
  overflow: clip !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions {
  position: static !important;
}
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 20px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  z-index: 5 !important;
}

html body.resource-page-advice main > #articles > .container {
  grid-template-columns: minmax(280px,360px) minmax(0,1fr) !important;
  column-gap: clamp(24px,2.4vw,38px) !important;
  max-width: min(1760px, calc(100vw - 48px)) !important;
}

html body.resource-page-advice main > #articles .advice-toolbar {
  font-size: 0 !important;
  padding: 28px 34px !important;
}
html body.resource-page-advice main > #articles .advice-toolbar::before {
  font-size: .96rem !important;
  letter-spacing: .12em !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  padding: 16px 18px !important;
  font-size: .99rem !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn span,
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  line-height: 1.25 !important;
}

html body.resource-page-advice main > #articles .advice-grid {
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 4px 2px 24px !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-inline: contain !important;
  scroll-snap-type: x proximity !important;
  scroll-padding-inline: 2px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    content: "" !important;
  }
}

html body.resource-page-advice main > #articles .advice-card {
  flex: 0 0 clamp(320px,31vw,408px) !important;
  width: clamp(320px,31vw,408px) !important;
  min-width: clamp(320px,31vw,408px) !important;
  min-height: 540px !important;
  display: flex !important;
  flex-direction: column !important;
  cursor: pointer !important;
}
html body.resource-page-advice main > #articles .advice-card:focus-within {
  border-color: rgba(210,162,58,.62) !important;
  box-shadow: 0 0 0 1px rgba(210,162,58,.22), 0 26px 58px rgba(0,0,0,.38) !important;
}
html body.resource-page-advice main > #articles .advice-card::before,
html body.resource-page-advice main > #articles .advice-card::after {
  height: clamp(220px,17vw,280px) !important;
}
html body.resource-page-advice main > #articles .advice-card > div:first-child {
  margin-top: 20px !important;
}
html body.resource-page-advice main > #articles .advice-card h2 {
  margin-bottom: .9rem !important;
}
html body.resource-page-advice main > #articles .advice-card > p {
  margin-bottom: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  margin-top: 18px !important;
  pointer-events: none !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link::after {
  content: "READ ARTICLE →" !important;
  position: absolute !important;
  left: 24px !important;
  right: auto !important;
  bottom: 24px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  color: #efc767 !important;
  white-space: nowrap !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link:focus-visible {
  outline: none !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link:focus-visible::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 0 2px rgba(240,205,117,.78) !important;
}

html body.resource-page-advice main > #articles .advice-card:nth-child(10n+1)::before { background-image: url("../img/generated/wedding-advice-265/01-songs-and-requests.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+2)::before { background-image: url("../img/generated/wedding-advice-265/02-supplier-checklist.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+3)::before { background-image: url("../img/generated/wedding-advice-265/03-electric-violin-backing-tracks.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+4)::before { background-image: url("../img/generated/wedding-advice-265/04-behind-the-scenes-setup.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+5)::before { background-image: url("../img/generated/wedding-advice-265/05-yorkshire-venue.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+6)::before { background-image: url("../img/generated/wedding-advice-265/06-live-music-venue-planning.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+7)::before { background-image: url("../img/generated/wedding-advice-265/07-dj-live-musician-both.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+8)::before { background-image: url("../img/generated/wedding-advice-265/08-drinks-reception-live-music.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+9)::before { background-image: url("../img/generated/wedding-advice-265/09-civil-church-celebrant.webp") !important; }
html body.resource-page-advice main > #articles .advice-card:nth-child(10n+10)::before { background-image: url("../img/generated/wedding-advice-265/10-aisle-song-timing.webp") !important; }

@media (max-width: 1180px) {
  html body.resource-page-advice main > #articles > .container {
    grid-template-columns: 320px minmax(0,1fr) !important;
    max-width: min(100vw - 32px, 1600px) !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: clamp(312px,46vw,390px) !important;
    width: clamp(312px,46vw,390px) !important;
    min-width: clamp(312px,46vw,390px) !important;
  }
}

@media (max-width: 980px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: min(100vw - 24px, 1200px) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    font-size: initial !important;
    padding: 24px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar::before {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    font-size: .95rem !important;
    padding: 11px 14px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 8px !important;
  }
}

@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    bottom: 18px !important;
  }
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 12px) !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar {
    padding: 20px !important;
  }
  html body.resource-page-advice main > #articles .advice-toolbar .btn {
    font-size: .92rem !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    min-height: 510px !important;
  }
  html body.resource-page-advice main > #articles .advice-card::before,
  html body.resource-page-advice main > #articles .advice-card::after {
    height: 205px !important;
  }
}


/* Build 266 — Wedding Advice live QA corrections.
   Corrects the remaining interaction/layout defects without changing page data. */

/* 1. The hero arrow must behave like the site's fixed section control, not as an
   absolutely positioned ornament inside the hero. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  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;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  opacity: .86 !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
}
/* Fade the hero-only anchor away once its hero leaves the viewport, so it cannot
   become a stale "jump back up" control further down the page. */
@supports (animation-timeline: view()) {
  html body.resource-page-advice main > .resource-hero {
    view-timeline-name: --wedding-advice-hero !important;
    view-timeline-axis: block !important;
  }
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    animation-name: wedding-advice-hero-arrow-visibility !important;
    animation-duration: 1ms !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    animation-timeline: --wedding-advice-hero !important;
    animation-range: exit 0% exit 42% !important;
  }
  @keyframes wedding-advice-hero-arrow-visibility {
    from { opacity: .86; visibility: visible; pointer-events: auto; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
  }
}

/* 2. Keep the side menu genuinely interactive and above the scrolling article rail. */
html body.resource-page-advice main > #articles .advice-toolbar {
  z-index: 30 !important;
  isolation: isolate !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
html body.resource-page-advice main > #articles .advice-toolbar .btn {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
html body.resource-page-advice main > #articles .advice-grid {
  z-index: 1 !important;
}

/* 3. Carousel geometry: the rail owns its own overflow; the page never does.
   Snap every movement to a whole card, so no article is left half-cut-off. */
html body.resource-page-advice,
html body.resource-page-advice body,
html body.resource-page-advice main {
  max-width: 100% !important;
  overflow-x: clip !important;
}
html body.resource-page-advice main > #articles > .container {
  min-width: 0 !important;
  max-width: min(1760px, calc(100vw - 48px)) !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px 72px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  overscroll-behavior-inline: contain !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
html body.resource-page-advice main > #articles .advice-card {
  flex: 0 0 clamp(330px, 31.5%, 400px) !important;
  width: clamp(330px, 31.5%, 400px) !important;
  min-width: clamp(330px, 31.5%, 400px) !important;
  max-width: 400px !important;
  min-height: 560px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-card h2,
html body.resource-page-advice main > #articles .advice-card > p,
html body.resource-page-advice main > #articles .advice-card .resource-meta {
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

/* 4. Bring back visible carousel controls, but anchor them to the actual rail.
   Chrome exposes CSS scroll buttons here; reserve the bottom strip so they never
   float away from the carousel or cover article content. */
@supports selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    top: auto !important;
    bottom: 12px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid rgba(244,210,124,.72) !important;
    border-radius: 50% !important;
    background: rgba(5,5,5,.9) !important;
    color: #f4d27c !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
    font: 700 26px/1 Georgia,serif !important;
    cursor: pointer !important;
    z-index: 20 !important;
    opacity: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
    content: "‹" !important;
    left: calc(50% - 52px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    content: "›" !important;
    left: calc(50% + 8px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):focus-visible,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):focus-visible {
    background: #d2a23a !important;
    border-color: #d2a23a !important;
    color: #080808 !important;
    outline: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .28 !important;
    cursor: default !important;
  }
}

/* Ensure the full-card article link remains clickable without swallowing the side menu. */
html body.resource-page-advice main > #articles .advice-card .text-link {
  z-index: 4 !important;
}

@media (max-width: 1180px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: min(100vw - 32px, 1600px) !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: clamp(320px, 46%, 380px) !important;
    width: clamp(320px, 46%, 380px) !important;
    min-width: clamp(320px, 46%, 380px) !important;
  }
}
@media (max-width: 980px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 24px) !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 70px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(72vw, 360px) !important;
    width: min(72vw, 360px) !important;
    min-width: min(72vw, 360px) !important;
  }
}
@media (max-width: 640px) {
  html body.resource-page-advice main > #articles > .container {
    max-width: calc(100vw - 12px) !important;
  }
  html body.resource-page-advice main > #articles .advice-grid {
    gap: 14px !important;
    padding-bottom: 68px !important;
  }
  html body.resource-page-advice main > #articles .advice-card {
    flex-basis: min(86vw, 340px) !important;
    width: min(86vw, 340px) !important;
    min-width: min(86vw, 340px) !important;
    min-height: 520px !important;
  }
  @supports selector(.advice-grid::scroll-button(right)) {
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      bottom: 10px !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
      left: calc(50% - 49px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      left: calc(50% + 7px) !important;
    }
  }
}


/* Build 267 — Wedding Advice carousel, sidebar, viewport-scroll and article-guide QA fixes. */

/* Restore the normal document scrollbar. Horizontal containment belongs to the page
   content, not the viewport scrolling mechanism. */
html {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}
html body.resource-page-advice {
  overflow: visible !important;
  max-width: 100% !important;
}
html body.resource-page-advice main {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100% !important;
}
html body.resource-page-advice main > #articles,
html body.resource-page-advice main > #articles > .container {
  overflow: visible !important;
}

/* Landing-page hero scroll control: use the same fixed bottom-centre geometry as the
   public home-page control rather than locating it relative to the hero content. */
html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .resource-hero .hero-actions > a[href="#articles"] {
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}

/* Article-page scroll control: resources-hub placed this absolutely inside the hero.
   Override it to the same fixed viewport position used on the home page. */
html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
  z-index: 96 !important;
  transform: translateX(-50%) !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
}
@media (max-width: 640px) {
  html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
    bottom: 14px !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
}
/* Keep the article-only control from becoming a stale button after the opening hero. */
@supports (animation-timeline: view()) {
  html body.resource-page-advice main > .article-hero {
    view-timeline-name: --wedding-article-hero !important;
    view-timeline-axis: block !important;
  }
  html body.resource-page-advice main > .article-hero .article-hero-scroll.section-scroll-next {
    animation-name: wedding-article-scroll-visibility !important;
    animation-duration: 1ms !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    animation-timeline: --wedding-article-hero !important;
    animation-range: exit 0% exit 42% !important;
  }
  @keyframes wedding-article-scroll-visibility {
    from { opacity: .86; visibility: visible; pointer-events: auto; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
  }
}

/* The warm article guide was visually right but undersized. Increase all reading and
   navigation text without making the box feel oversized. */
html body.resource-page-advice .article-side-card {
  font-size: 1rem !important;
}
html body.resource-page-advice .article-side-section h2 {
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: .075em !important;
  margin-bottom: 15px !important;
}
html body.resource-page-advice .article-toc-list a {
  padding: 8px 0 8px 14px !important;
  font-size: .98rem !important;
  line-height: 1.48 !important;
}
html body.resource-page-advice .article-toc-list li.is-subheading a {
  padding-left: 27px !important;
  font-size: .9rem !important;
  line-height: 1.46 !important;
}
html body.resource-page-advice .article-topic-chip {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: .84rem !important;
  line-height: 1.25 !important;
}
html body.resource-page-advice .article-side-links a {
  padding: 14px 0 !important;
  font-size: .98rem !important;
  line-height: 1.4 !important;
}

/* Sidebar hit-area correction. Keep the carousel paint and pointer area strictly
   inside its own grid column so it cannot sit invisibly on top of the category links. */
html body.resource-page-advice main > #articles > .container {
  position: relative !important;
  isolation: isolate !important;
}
html body.resource-page-advice main > #articles .advice-toolbar {
  position: sticky !important;
  top: 122px !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}
html body.resource-page-advice main > #articles .advice-toolbar a.btn {
  position: relative !important;
  z-index: 21 !important;
  display: flex !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  text-decoration: none !important;
}
html body.resource-page-advice main > #articles .advice-toolbar a.btn::before {
  content: none !important;
}

/* Carousel owns only its own column and scrollport. Clipping here prevents an
   invisible full-card anchor or generated control from stealing clicks from the rail. */
html body.resource-page-advice main > #articles .advice-grid {
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  contain: layout style !important;
  clip-path: inset(0 round 18px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 2px 70px !important;
  margin: 0 !important;
  scroll-snap-type: x mandatory !important;
  scroll-padding-inline: 2px !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-inline: contain !important;
  anchor-name: --wedding-advice-carousel !important;
  box-sizing: border-box !important;
}
html body.resource-page-advice main > #articles .advice-card {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* 266 positioned experimental browser-generated scroll buttons against the wrong
   containing block. Anchor them explicitly to the carousel's own box instead. */
@supports (anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right)) {
  html body.resource-page-advice main > #articles .advice-grid {
    scrollbar-width: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    display: grid !important;
    place-items: center !important;
    position: absolute !important;
    position-anchor: --wedding-advice-carousel !important;
    top: calc(anchor(bottom) - 56px) !important;
    bottom: auto !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(244,210,124,.72) !important;
    border-radius: 50% !important;
    background: rgba(5,5,5,.92) !important;
    color: #f4d27c !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.32) !important;
    font: 700 25px/1 Georgia,serif !important;
    cursor: pointer !important;
    z-index: 8 !important;
    opacity: 1 !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
    content: "‹" / "Previous articles" !important;
    right: calc(anchor(center) + 8px) !important;
    left: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
    content: "›" / "Next articles" !important;
    left: calc(anchor(center) + 8px) !important;
    right: auto !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):hover,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):focus-visible,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):focus-visible {
    background: #d2a23a !important;
    border-color: #d2a23a !important;
    color: #080808 !important;
    outline: none !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(left):disabled,
  html body.resource-page-advice main > #articles .advice-grid::scroll-button(right):disabled {
    opacity: .3 !important;
    cursor: default !important;
  }
}

/* Fallback for browsers without the CSS-carousel controls: retain a small, contained
   horizontal rail scrollbar rather than removing all indication that the rail scrolls. */
@supports not ((anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right))) {
  html body.resource-page-advice main > #articles .advice-grid {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(210,162,58,.72) rgba(255,255,255,.055) !important;
    padding-bottom: 24px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar {
    display: block !important;
    height: 7px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-track {
    background: rgba(255,255,255,.05) !important;
    border-radius: 999px !important;
  }
  html body.resource-page-advice main > #articles .advice-grid::-webkit-scrollbar-thumb {
    background: rgba(210,162,58,.72) !important;
    border-radius: 999px !important;
  }
}

/* Full-card links remain inside each card and cannot bleed outside the clipped rail. */
html body.resource-page-advice main > #articles .advice-card {
  position: relative !important;
  overflow: hidden !important;
}
html body.resource-page-advice main > #articles .advice-card .text-link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

@media (max-width: 980px) {
  html body.resource-page-advice main > #articles .advice-toolbar {
    position: static !important;
    top: auto !important;
  }
}
@media (max-width: 640px) {
  html body.resource-page-advice main > #articles .advice-grid {
    padding-bottom: 66px !important;
  }
  @supports (anchor-name: --wedding-advice-carousel) and selector(.advice-grid::scroll-button(right)) {
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left),
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      width: 42px !important;
      height: 42px !important;
      min-width: 42px !important;
      min-height: 42px !important;
      top: calc(anchor(bottom) - 53px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(left) {
      right: calc(anchor(center) + 7px) !important;
    }
    html body.resource-page-advice main > #articles .advice-grid::scroll-button(right) {
      left: calc(anchor(center) + 7px) !important;
    }
  }
}

/* JT P31T44 source: assets/css/public-hero-standard-295.css */
/* Build 295 — site-wide public hero standard.
   Canonical reference: Recommended Suppliers Build 294.
   The rules below deliberately reproduce that hero's geometry, type scale,
   full-width image treatment, left fade and 102px landing divider. */

:root {
  --jt-landing-divider-height: 102px;
}

body .jt-standard-hero {
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #050505 !important;
  color: #f7f1e7 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(210,162,58,.28) !important;
}

body .jt-standard-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(3,3,3,.995) 0%,
      rgba(3,3,3,.985) 17%,
      rgba(3,3,3,.95) 30%,
      rgba(3,3,3,.84) 42%,
      rgba(3,3,3,.58) 54%,
      rgba(3,3,3,.27) 67%,
      rgba(3,3,3,.10) 80%,
      rgba(3,3,3,.04) 100%),
    linear-gradient(180deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.30) 100%);
}

body .jt-standard-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 42%,rgba(210,162,58,.10),transparent 35%);
}

body .jt-standard-hero-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  position: static !important;
}

body .jt-standard-hero-copy {
  position: relative !important;
  z-index: 2 !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background: none !important;
  text-shadow: none !important;
}

body .jt-standard-hero-copy .kicker,
body .jt-standard-hero-copy .preview-eyebrow {
  margin: 0 0 10px !important;
  color: #efc767 !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
}

body .jt-standard-hero-copy h1 {
  max-width: 19ch !important;
  margin: 0 0 14px !important;
  color: #f7f1e7 !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: clamp(2.35rem,3vw,3.55rem) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: .012em !important;
  text-wrap: balance;
}

body .jt-standard-hero-copy h1 .gold,
body .jt-standard-hero-copy h1 .gold-line,
body .jt-standard-hero-copy h1 > span {
  color: #edcf83 !important;
}

body .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
  max-width: 66ch !important;
  margin: 0 0 10px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(.96rem,1vw,1.04rem) !important;
  line-height: 1.5 !important;
}
body .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow):last-of-type {
  margin-bottom: 0 !important;
}
body .jt-standard-hero-copy p a {
  color: #efc767 !important;
}

body .jt-standard-hero-copy .hero-actions,
body .jt-standard-hero-copy .preview-hero-actions,
body .jt-standard-hero-copy .reviews-hero-actions,
body .jt-standard-hero-copy .contact-hero-actions,
body .jt-standard-hero-copy .about-hero-actions,
body .jt-standard-hero-copy .occasions-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

body .jt-standard-hero-copy > .btn {
  margin-top: 24px !important;
  align-self: flex-start !important;
}

body .jt-standard-hero .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 12px 27px !important;
  border: 1px solid #d2a23a !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #e7bf61 !important;
  box-shadow: none !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;
}
body .jt-standard-hero .btn.btn-primary {
  border-color: #d3a437 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: #080704 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
}
@media (hover:hover) and (pointer:fine) {
  body .jt-standard-hero .btn:hover,
  body .jt-standard-hero .btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(210,162,58,.10) !important;
  }
  body .jt-standard-hero .btn.btn-primary:hover,
  body .jt-standard-hero .btn.btn-primary:focus-visible {
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  }
}

body .jt-standard-hero-media {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  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;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090806 !important;
  box-shadow: none !important;
}
body .jt-standard-hero-media picture,
body .jt-standard-hero-media > img,
body .jt-standard-hero-media > picture > img,
body .jt-standard-hero-media figure,
body .jt-standard-hero-media figure > img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
body .jt-standard-hero-media > img,
body .jt-standard-hero-media > picture > img,
body .jt-standard-hero-media figure > img {
  display: block !important;
  object-fit: cover !important;
  object-position: var(--jt-hero-position,58% 50%) !important;
  filter: saturate(.92) contrast(1.04) brightness(.82) !important;
  transform: scale(1.012) !important;
}
body .jt-standard-hero-media figcaption {
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(18px,2.6vw,44px) !important;
  bottom: 16px !important;
  left: auto !important;
  max-width: min(38vw,520px) !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-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: .03em !important;
  text-align: left !important;
  text-transform: none !important;
}

/* Page-specific media containers that previously used nested cards/collages. */
body.reviews-page .jt-standard-hero-media .reviews-hero-image {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.reviews-page .jt-standard-hero-media .reviews-hero-quotes {
  display: none !important;
}
body.collaborations-page .jt-standard-hero-media .collab-hero-photo-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
body.collaborations-page .jt-standard-hero-media .collab-hero-photo-grid img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  filter: saturate(.92) contrast(1.04) brightness(.82) !important;
}
body.gallery-page .jt-standard-hero-media {
  pointer-events: none !important;
}
body.gallery-page .jt-standard-hero-media .gallery-hero-main {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.gallery-page .jt-standard-hero-media .gallery-hero-main img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--jt-hero-position,58% 45%) !important;
  filter: saturate(.92) contrast(1.04) brightness(.82) !important;
  transform: scale(1.012) !important;
}
body.gallery-page .jt-standard-hero-media .gallery-hero-mini {
  display: none !important;
}

/* Compact supporting hero-only details without changing the standard copy anchor. */
body .jt-standard-hero-copy .thov-members,
body .jt-standard-hero-copy .reviews-chip-row {
  margin-top: 16px !important;
}
body .jt-standard-hero-copy .thov-members {
  gap: 10px !important;
}
body .jt-standard-hero-copy .thov-members > div {
  padding: 8px 10px !important;
  background: rgba(8,8,8,.44) !important;
  border-color: rgba(210,162,58,.24) !important;
}
body .jt-standard-hero-copy .thov-members strong,
body .jt-standard-hero-copy .thov-members span,
body .jt-standard-hero-copy .reviews-chip-row span {
  font-size: .73rem !important;
  line-height: 1.3 !important;
}

/* Image focal points: revised in Build 296 to prioritise the performer's face and
   the strongest part of each source image now that every hero uses the shared
   full-width Suppliers geometry. */
body.home-page { --jt-hero-position: 74% 46%; }
body.weddings-page { --jt-hero-position: 70% 47%; }
body.occasions-page { --jt-hero-position: 72% 34%; }
body.performances-page { --jt-hero-position: 68% 42%; }
body.past-gigs-page { --jt-hero-position: 72% 36%; }
body.performance-map-page { --jt-hero-position: 63% 50%; }
body.reviews-page { --jt-hero-position: 74% 32%; }
body.thov-page { --jt-hero-position: 62% 42%; }
body.about-page { --jt-hero-position: 76% 34%; }
body.contact-page { --jt-hero-position: 78% 34%; }
body.booking-page { --jt-hero-position: 78% 34%; }
body.gallery-page { --jt-hero-position: 66% 42%; }
body.setup-page { --jt-hero-position: 54% 50%; }
body.resource-page-listen { --jt-hero-position: 70% 44%; }
body.resource-page-advice { --jt-hero-position: 70% 44%; }

/* Canonical first divider: exact Build 293/294 Recommended Suppliers treatment. */
body .jt-landing-divider {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #e9e0d3 !important;
  color: #17130e !important;
  border-block: 1px solid rgba(76,60,38,.20) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body .jt-landing-divider-grid {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}
body .jt-landing-divider-item {
  min-width: 0 !important;
  min-height: 100px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  padding: 16px clamp(20px,2.5vw,44px) !important;
  border: 0 !important;
  border-right: 1px solid rgba(76,60,38,.18) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #17130e !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
body .jt-landing-divider-item:last-child {
  border-right: 0 !important;
}
body .jt-landing-divider-item > span:first-child {
  display: block !important;
  margin: 0 0 5px !important;
  color: #8b681f !important;
  font-size: .72rem !important;
  font-weight: 900 !important;
  letter-spacing: .15em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}
body .jt-landing-divider-item strong {
  display: block !important;
  margin: 0 !important;
  color: #17130e !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;
}
body .jt-landing-divider-item small {
  display: block !important;
  margin: 5px 0 0 !important;
  color: #625b52 !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
@media (hover:hover) and (pointer:fine) {
  body a.jt-landing-divider-item:hover,
  body a.jt-landing-divider-item:focus-visible {
    background: rgba(139,104,31,.07) !important;
    outline: none !important;
  }
}

@media (min-width:1001px) {
  body .jt-standard-hero {
    min-height: calc(100svh - 112px - var(--jt-landing-divider-height)) !important;
    height: auto !important;
    max-height: none !important;
  }
  body .jt-standard-hero-inner {
    min-height: calc(100svh - 112px - var(--jt-landing-divider-height)) !important;
    height: auto !important;
    max-height: none !important;
    display: grid !important;
    grid-template-columns: minmax(0,45%) minmax(0,55%) !important;
    align-items: stretch !important;
    padding: 0 !important;
  }
  body .jt-standard-hero-copy {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: clamp(26px,3vh,38px) clamp(28px,5vw,96px) !important;
  }
}

@media (min-width:641px) and (max-width:1000px) {
  body .jt-standard-hero {
    min-height: clamp(540px,75svh,700px) !important;
    height: auto !important;
    max-height: none !important;
  }
  body .jt-standard-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 52px clamp(24px,4.5vw,54px) !important;
  }
  body .jt-standard-hero-copy {
    width: min(620px,78vw) !important;
    max-width: 620px !important;
    padding: 0 !important;
  }
  body .jt-standard-hero-copy h1 {
    max-width: 18ch !important;
    font-size: clamp(2.35rem,5.4vw,3.55rem) !important;
  }
  body .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  body .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.95) 26%,rgba(3,3,3,.78) 48%,rgba(3,3,3,.36) 72%,rgba(3,3,3,.15) 100%),
      linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.32));
  }
}

@media (max-width:980px) {
  body .jt-landing-divider-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
  body .jt-landing-divider-item:nth-child(2) {
    border-right: 0 !important;
  }
  body .jt-landing-divider-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(76,60,38,.18) !important;
  }
}

@media (max-width:640px) {
  body .jt-standard-hero {
    min-height: clamp(570px,82svh,720px) !important;
    height: auto !important;
    max-height: none !important;
    align-items: center !important;
  }
  body .jt-standard-hero-inner {
    min-height: inherit !important;
    display: flex !important;
    align-items: center !important;
    padding: 44px 22px !important;
  }
  body .jt-standard-hero-copy {
    width: 100% !important;
    max-width: 540px !important;
    padding: 0 !important;
  }
  body .jt-standard-hero-copy h1 {
    max-width: 18ch !important;
    font-size: clamp(2.15rem,10vw,3rem) !important;
  }
  body .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }
  body .jt-standard-hero-copy .hero-actions,
  body .jt-standard-hero-copy .preview-hero-actions,
  body .jt-standard-hero-copy .reviews-hero-actions,
  body .jt-standard-hero-copy .contact-hero-actions,
  body .jt-standard-hero-copy .about-hero-actions,
  body .jt-standard-hero-copy .occasions-hero-actions {
    gap: 12px !important;
  }
  body .jt-standard-hero .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
  body .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.97) 0%,rgba(3,3,3,.91) 38%,rgba(3,3,3,.64) 68%,rgba(3,3,3,.34) 100%),
      linear-gradient(180deg,rgba(3,3,3,.30) 0%,rgba(3,3,3,.18) 36%,rgba(3,3,3,.76) 82%,rgba(3,3,3,.94) 100%);
  }
  body .jt-standard-hero-media figcaption {
    right: 16px !important;
    bottom: 12px !important;
    max-width: calc(100% - 32px) !important;
  }
  body .jt-landing-divider-item {
    min-height: 90px !important;
    padding: 14px 18px !important;
  }
}

/* Final Build 295 parity lock -------------------------------------------------
   These selectors intentionally include #main-content so older page-specific
   hero/divider fixes cannot override the Build 294 Suppliers reference. */
@media (min-width:1001px) {
  html body #main-content > .jt-standard-hero {
    box-sizing: content-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100svh - 112px - 102px) !important;
    min-height: calc(100svh - 112px - 102px) !important;
    max-height: calc(100svh - 112px - 102px) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  html body #main-content > .jt-standard-hero > .jt-standard-hero-inner,
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(100svh - 112px - 102px) !important;
    min-height: calc(100svh - 112px - 102px) !important;
    max-height: calc(100svh - 112px - 102px) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,45%) minmax(0,55%) !important;
    grid-template-rows: minmax(0,1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: clamp(26px,3vh,38px) clamp(28px,5vw,96px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 0 !important;
    overflow: visible !important;
    background: 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 {
    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: .2em !important;
    text-transform: uppercase !important;
  }

  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    width: auto !important;
    max-width: 19ch !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #f7f1e7 !important;
    font-family: Marcellus, Georgia, serif !important;
    font-size: clamp(2.35rem,3vw,3.55rem) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: .012em !important;
    text-align: left !important;
    text-transform: none !important;
  }

  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    width: auto !important;
    max-width: 66ch !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-family: Lato, Arial, sans-serif !important;
    font-size: clamp(.96rem,1vw,1.04rem) !important;
    font-weight: 400 !important;
    line-height: 1.5 !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):last-of-type {
    margin-bottom: 0 !important;
  }

  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #090806 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html body #main-content > .jt-standard-hero .jt-standard-hero-media > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media figure,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media figure > img {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media figure > img {
    display: block !important;
    object-fit: cover !important;
    object-position: var(--jt-hero-position,58% 50%) !important;
    filter: saturate(.92) contrast(1.04) brightness(.82) !important;
    transform: scale(1.012) !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;
    gap: 16px !important;
    width: auto !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }

  html body #main-content > .jt-standard-hero .btn {
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 50px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 27px !important;
    border: 1px solid #d2a23a !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #e7bf61 !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-decoration: none !important;
  }
  html body #main-content > .jt-standard-hero .btn.btn-primary {
    border-color: #d3a437 !important;
    background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
    color: #080704 !important;
    box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
  }

  /* Lock the landing divider to the same 100px + two 1px borders as Build 294. */
  html body #main-content > .jt-landing-divider {
    box-sizing: content-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !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: #e9e0d3 !important;
    color: #17130e !important;
    box-shadow: none !important;
  }
  html body #main-content > .jt-landing-divider > .jt-landing-divider-grid,
  html body #main-content > .jt-landing-divider .jt-landing-divider-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100px !important;
    min-height: 100px !important;
    max-height: 100px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    grid-template-rows: 100px !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100px !important;
    min-height: 100px !important;
    max-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;
    overflow: hidden !important;
    border: 0 !important;
    border-right: 1px solid rgba(76,60,38,.18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #17130e !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item:last-child {
    border-right: 0 !important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > span:first-child {
    display: block !important;
    width: auto !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #8b681f !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 #main-content > .jt-landing-divider .jt-landing-divider-item > strong {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #17130e !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 #main-content > .jt-landing-divider .jt-landing-divider-item > small {
    display: block !important;
    width: auto !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #625b52 !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;
  }

  /* Nested legacy media structures: keep the existing imagery, but make the
     selected hero image(s) occupy the same full-width plane. */
  html body.collaborations-page #main-content > .jt-standard-hero .jt-standard-hero-media .collab-hero-photo-grid {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
  }
  html body.collaborations-page #main-content > .jt-standard-hero .jt-standard-hero-media .collab-hero-photo-grid img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    filter: saturate(.92) contrast(1.04) brightness(.82) !important;
  }
  html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--jt-hero-position,70% 45%) !important;
    filter: saturate(.92) contrast(1.04) brightness(.82) !important;
    transform: scale(1.012) !important;
  }
  html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-quotes {
    display: none !important;
  }
  html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: var(--jt-hero-position,58% 45%) !important;
    filter: saturate(.92) contrast(1.04) brightness(.82) !important;
    transform: scale(1.012) !important;
  }
  html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-mini {
    display: none !important;
  }
}

/* Tablet/mobile parity with the same Suppliers reference. */
@media (min-width:641px) and (max-width:1000px) {
  html body #main-content > .jt-standard-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: clamp(540px,75svh,700px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  html body #main-content > .jt-standard-hero > .jt-standard-hero-inner,
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 52px clamp(24px,4.5vw,54px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: min(620px,78vw) !important;
    max-width: 620px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: auto !important;
    transform: none !important;
    background: none !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    width: auto !important;
    max-width: 18ch !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #f7f1e7 !important;
    font-family: Marcellus, Georgia, serif !important;
    font-size: clamp(2.35rem,5.4vw,3.55rem) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: .012em !important;
    text-align: left !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 {
    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: .2em !important;
    text-transform: uppercase !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    max-width: 66ch !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-family: Lato, Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !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):last-of-type { margin-bottom: 0 !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;
    gap: 16px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100% - 1px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
}

@media (max-width:640px) {
  html body #main-content > .jt-standard-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: clamp(570px,82svh,720px) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  html body #main-content > .jt-standard-hero > .jt-standard-hero-inner,
  html body #main-content > .jt-standard-hero .jt-standard-hero-inner {
    position: static !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 44px 22px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: 540px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: auto !important;
    transform: none !important;
    background: none !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy h1 {
    width: auto !important;
    max-width: 18ch !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: #f7f1e7 !important;
    font-family: Marcellus, Georgia, serif !important;
    font-size: clamp(2.15rem,10vw,3rem) !important;
    font-weight: 400 !important;
    line-height: 1.04 !important;
    letter-spacing: .012em !important;
    text-align: left !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 {
    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: .2em !important;
    text-transform: uppercase !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p:not(.kicker):not(.preview-eyebrow) {
    max-width: 66ch !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: rgba(255,255,255,.82) !important;
    font-family: Lato, Arial, sans-serif !important;
    font-size: .96rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !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):last-of-type { margin-bottom: 0 !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;
    gap: 12px !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100% - 1px) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }
  html body #main-content > .jt-standard-hero .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}

/* Responsive divider lock: same two-column behaviour and typography as the
   approved Suppliers bar, while allowing extra height only when copy wraps. */
@media (max-width:1000px) {
  html body #main-content > .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;
    max-height: none !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: #e9e0d3 !important;
    color: #17130e !important;
    box-shadow: none !important;
  }
  html body #main-content > .jt-landing-divider > .jt-landing-divider-grid,
  html body #main-content > .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;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100px !important;
    max-height: none !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;
    overflow: visible !important;
    border: 0 !important;
    border-right: 1px solid rgba(76,60,38,.18) !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #17130e !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item:nth-child(2n) { border-right: 0 !important; }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item:nth-child(-n+2) { border-bottom: 1px solid rgba(76,60,38,.18) !important; }
  html body #main-content > .jt-landing-divider .jt-landing-divider-item > span:first-child {
    display: block !important;
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: #8b681f !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 #main-content > .jt-landing-divider .jt-landing-divider-item > strong {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #17130e !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 #main-content > .jt-landing-divider .jt-landing-divider-item > small {
    display: block !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #625b52 !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 (max-width:640px) {
  html body #main-content > .jt-landing-divider .jt-landing-divider-item {
    min-height: 90px !important;
    padding: 14px 18px !important;
  }
}

@media (min-width:1001px) and (max-height:740px) {
  html body.reviews-page #main-content > .jt-standard-hero .reviews-chip-row { margin-top: 8px !important; }
}

/* Final visual parity: one fade layer only, and the existing hero captions keep
   the approved Weddings hero treatment. */
html body #main-content > .jt-standard-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,
      rgba(3,3,3,.995) 0%,
      rgba(3,3,3,.985) 17%,
      rgba(3,3,3,.95) 30%,
      rgba(3,3,3,.84) 42%,
      rgba(3,3,3,.58) 54%,
      rgba(3,3,3,.27) 67%,
      rgba(3,3,3,.10) 80%,
      rgba(3,3,3,.04) 100%),
    linear-gradient(180deg,rgba(0,0,0,.13) 0%,rgba(0,0,0,.05) 58%,rgba(0,0,0,.30) 100%) !important;
}
html body #main-content > .jt-standard-hero::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 72% 42%,rgba(210,162,58,.10),transparent 35%) !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media::before,
html body #main-content > .jt-standard-hero .jt-standard-hero-media::after {
  content: none !important;
  display: none !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media figcaption {
  position: absolute !important;
  z-index: 2 !important;
  left: 18px !important;
  right: auto !important;
  bottom: 14px !important;
  max-width: min(44vw,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;
  opacity: 1 !important;
}

@media (min-width:641px) and (max-width:1000px) {
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    height: 100% !important;
  }
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.95) 26%,rgba(3,3,3,.78) 48%,rgba(3,3,3,.36) 72%,rgba(3,3,3,.15) 100%),
      linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.32)) !important;
  }
}
@media (max-width:640px) {
  html body #main-content > .jt-standard-hero .jt-standard-hero-media {
    height: 100% !important;
  }
}
@media (max-width:600px) {
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.97) 0%,rgba(3,3,3,.91) 38%,rgba(3,3,3,.64) 68%,rgba(3,3,3,.34) 100%),
      linear-gradient(180deg,rgba(3,3,3,.30) 0%,rgba(3,3,3,.18) 36%,rgba(3,3,3,.76) 82%,rgba(3,3,3,.94) 100%) !important;
  }
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture > img,
  html body #main-content > .jt-standard-hero .jt-standard-hero-media figure > img,
  html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image img,
  html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main img,
  html body.collaborations-page #main-content > .jt-standard-hero .jt-standard-hero-media .collab-hero-photo-grid img {
    filter: saturate(.88) contrast(1.04) brightness(.68) !important;
  }
}

@media (max-width:1000px) {
  html body #main-content > .jt-landing-divider .jt-landing-divider-grid {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* Keep captions above the fade while the hero copy remains the top content layer. */
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 { z-index: 3 !important; }
html body #main-content > .jt-standard-hero .jt-standard-hero-media figcaption { z-index: 2 !important; }

/* Build 298 — Hero Manager optional subtitle. The rest of the hero geometry
   remains the approved Suppliers/Build 295 standard. */
html body #main-content > .jt-standard-hero .jt-standard-hero-copy > p.jt-hero-subtitle,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-copy > p.jt-hero-subtitle {
  display: block !important;
  max-width: 54ch !important;
  margin: -2px 0 11px !important;
  color: #efc767 !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(1rem,1.08vw,1.12rem) !important;
  font-weight: 800 !important;
  line-height: 1.38 !important;
  letter-spacing: .01em !important;
}

/* Build 328: managed captions must be the SAME caption component as the
   established hero figcaption. Build 327 accidentally gave generated captions
   a second right-aligned variant; remove that divergence completely. */
body .jt-standard-hero-media > .jt-hero-managed-caption {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  left: 18px !important;
  right: auto !important;
  bottom: 14px !important;
  max-width: min(44vw,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;
}
body .jt-standard-hero-media > .jt-hero-managed-caption > * {
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Build 329 — Credentials no longer has any caption-specific visual override.
   Its legacy label is normalised to a clean FIGCAPTION by the hero runtime, so
   it inherits the exact same shared caption CSS as every other standard hero. */


/* Build 330 — one hero-caption component, anchored to the RIGHT of the image
   plane on every managed page. This is deliberately the final caption rule in
   the shared stylesheet so older page-specific left/badge/uppercase rules
   cannot win the cascade. */
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,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > figcaption,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > .jt-standard-hero-caption,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-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],
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > [data-jt-hero-caption][hidden] {
  display: none !important;
}
@media (max-width: 640px) {
  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,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > figcaption,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > .jt-standard-hero-caption,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media > .jt-hero-managed-caption {
    right: 14px !important;
    bottom: 12px !important;
    max-width: min(72vw,420px) !important;
    font-size: .74rem !important;
  }
}

/* JT P31T44 source: assets/css/public-hero-image-plane-300.css */
/* Build 300 — site-wide desktop hero image plane.
   Approved from the Build 299 Home prototype. On desktop the hero image occupies
   the right-hand 70% of the hero, leaving a clean dark copy area on the left.
   The fade spans the join so the transition remains smooth. Tablet/mobile retain
   the existing responsive treatment. Hero Manager measures the real media plane,
   so its resizable crop frame automatically uses this 70% desktop aspect ratio. */

@media (min-width: 1001px) {
  html body #main-content > .jt-standard-hero .jt-standard-hero-media,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media {
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
  }

  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }
}
/* Build 305 — Wedding Advice parity fix.
   public-polish-258 still gave this legacy resource hero its own full-bleed
   background image and hid the real media element. That sat underneath the new
   70% hero system, so Wedding Advice could not visually match the shared fade.
   Remove the legacy background and force the managed media plane back on. */
html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero {
  background: #050505 !important;
  background-image: none !important;
}
html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero .resource-hero-media.jt-standard-hero-media {
  display: block !important;
}



/* Build 306 — Wedding Advice uses the same DOM layering as the working heroes.
   Keep its media as a direct hero child so the shared hero fade sits above the
   image and below the copy instead of being trapped behind the old resource grid. */
@media (min-width: 1001px) {
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero > .resource-hero-media.jt-standard-hero-media {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
    height: 100% !important;
    overflow: hidden !important;
  }
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero > .resource-hero-grid.jt-standard-hero-inner {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }
}



/* Build 309 — exact crop first paint.
   Hero Manager's X/Y/zoom values describe the exact draggable source rectangle.
   The public runtime now applies that same proportional crop before revealing the
   proxy image. This avoids both the Build 308 approximate object-fit/transform
   interpretation and the visible load-then-jump that Build 307 suffered from. */
html body #main-content > .jt-standard-hero .jt-standard-hero-media img[data-jt-hero-proxy],
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img[data-jt-hero-proxy] {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  opacity: 0 !important;
  transition: none !important;
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media img[data-jt-hero-proxy][data-jt-crop-ready="1"],
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img[data-jt-hero-proxy][data-jt-crop-ready="1"] {
  opacity: 1 !important;
}


/* Build 311 — lighter portrait-mobile hero fade.
   On phones the image already fills the hero behind the copy, so the previous
   desktop-strength overlay hid too much of the photograph. Keep enough contrast
   behind the left-aligned text, but reveal substantially more of the image.
   Landscape mobile/tablet and desktop are intentionally unchanged. */
@media (max-width: 640px) and (orientation: portrait) {
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.16) 74%,
        rgba(3,3,3,.05) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.06) 0%,
        rgba(0,0,0,.02) 56%,
        rgba(0,0,0,.30) 100%) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.16) 74%,
        rgba(3,3,3,.05) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.06) 0%,
        rgba(0,0,0,.02) 56%,
        rgba(0,0,0,.30) 100%) !important;
  }
}

/* Build 328 — Credentials uses the exact same desktop fade as the other
   standard landing heroes. The selector is deliberately more specific than
   the legacy Credentials stylesheet so that older resource-page rules cannot
   replace the shared fade when they are loaded later. */
@media (min-width: 1001px) {
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background:
      linear-gradient(90deg,
        rgba(3,3,3,1) 0%,
        rgba(3,3,3,1) 27%,
        rgba(3,3,3,.97) 31%,
        rgba(3,3,3,.88) 36%,
        rgba(3,3,3,.70) 42%,
        rgba(3,3,3,.46) 49%,
        rgba(3,3,3,.24) 56%,
        rgba(3,3,3,.10) 64%,
        rgba(3,3,3,.04) 72%,
        rgba(3,3,3,.02) 100%),
      linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 58%,rgba(0,0,0,.28) 100%) !important;
  }

  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero .jt-standard-hero-media {
    inset: 0 0 0 30% !important;
    left: 30% !important;
    right: 0 !important;
    width: 70% !important;
    max-width: 70% !important;
  }
}

/* Build 329 — one desktop hero fade rule for the whole public site.
   The image plane begins at 30vw. Keep the overlay fully black beyond that join,
   then reveal the photograph progressively across a longer gradient. This removes
   the visible vertical image edge and makes the same fade treatment authoritative
   for Home, Weddings, Occasions, Listen, THOV, Collaborations, Gigs, Reviews,
   Gallery, About, Contact, Booking, Wedding Advice, Suppliers, Setup and Credentials. */
@media (min-width: 1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 34%,
        rgba(0,0,0,.995) 38%,
        rgba(0,0,0,.965) 43%,
        rgba(0,0,0,.87) 49%,
        rgba(0,0,0,.68) 56%,
        rgba(0,0,0,.46) 63%,
        rgba(0,0,0,.27) 70%,
        rgba(0,0,0,.13) 79%,
        rgba(0,0,0,.055) 90%,
        rgba(0,0,0,.02) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.14) 0%,
        rgba(0,0,0,.05) 58%,
        rgba(0,0,0,.30) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 331 — shared hero image vibrancy.
   The source images are unchanged. Keep the strong left fade for copy contrast,
   but stop dimming the whole photograph: restore brightness/saturation and let
   the far-right image plane read much closer to the original image. */
html {
  --jt-public-hero-image-filter: brightness(1.10) saturate(1.12) contrast(1.03);
}
html body #main-content > .jt-standard-hero .jt-standard-hero-media > img,
html body #main-content > .jt-standard-hero .jt-standard-hero-media > picture > img,
html body #main-content > .jt-standard-hero .jt-standard-hero-media figure > img,
html body.reviews-page #main-content > .jt-standard-hero .jt-standard-hero-media .reviews-hero-image img,
html body.gallery-page #main-content > .jt-standard-hero .jt-standard-hero-media .gallery-hero-main img,
html body.collaborations-page #main-content > .jt-standard-hero .jt-standard-hero-media .collab-hero-photo-grid img,
html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-media img {
  filter: var(--jt-public-hero-image-filter) !important;
}

@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 34%,
        rgba(0,0,0,.995) 38%,
        rgba(0,0,0,.965) 43%,
        rgba(0,0,0,.87) 49%,
        rgba(0,0,0,.68) 56%,
        rgba(0,0,0,.46) 63%,
        rgba(0,0,0,.27) 70%,
        rgba(0,0,0,.11) 79%,
        rgba(0,0,0,.035) 90%,
        rgba(0,0,0,.008) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 58%,
        rgba(0,0,0,.18) 100%);
  }
}

@media (min-width:641px) and (max-width:1000px) {
  html body #main-content > .jt-standard-hero::before {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.94) 26%,rgba(3,3,3,.75) 48%,rgba(3,3,3,.30) 72%,rgba(3,3,3,.06) 100%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.20)) !important;
  }
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,rgba(3,3,3,.99) 0%,rgba(3,3,3,.94) 26%,rgba(3,3,3,.75) 48%,rgba(3,3,3,.30) 72%,rgba(3,3,3,.06) 100%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.20)) !important;
  }
}

@media (max-width:640px) and (orientation:portrait) {
  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background:
      linear-gradient(90deg,
        rgba(3,3,3,.78) 0%,
        rgba(3,3,3,.62) 28%,
        rgba(3,3,3,.38) 52%,
        rgba(3,3,3,.14) 74%,
        rgba(3,3,3,.03) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.04) 0%,
        rgba(0,0,0,.01) 56%,
        rgba(0,0,0,.20) 100%) !important;
  }
}

/* Build 342 - authoritative desktop fade geometry.
   The photograph is now left clean across the right-hand side of the hero.
   Moving from right to left, the fade does not begin until the 70% point; it
   then tightens quickly and is fully black by the 30% image/copy boundary. */
@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 30%,
        rgba(0,0,0,1) 36%,
        rgba(0,0,0,.97) 43%,
        rgba(0,0,0,.86) 49%,
        rgba(0,0,0,.60) 55%,
        rgba(0,0,0,.28) 61%,
        rgba(0,0,0,.08) 66%,
        rgba(0,0,0,.01) 70%,
        rgba(0,0,0,0) 72%,
        rgba(0,0,0,0) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.08) 0%,
        rgba(0,0,0,.02) 58%,
        rgba(0,0,0,.18) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 343 - corrected desktop fade timing.
   The visible darkening now starts at exactly 70% of the full hero width and
   completes much more quickly. The image remains clean from 70%-100%, then
   transitions through a compact 20% band and is fully black by 50%, well before
   the 30% media/copy join. This is the authoritative desktop rule for every
   managed hero variant. */
@media (min-width:1001px) {
  html {
    --jt-public-hero-desktop-fade:
      linear-gradient(90deg,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,.985) 52%,
        rgba(0,0,0,.90) 54%,
        rgba(0,0,0,.72) 56%,
        rgba(0,0,0,.50) 58%,
        rgba(0,0,0,.30) 60%,
        rgba(0,0,0,.15) 62%,
        rgba(0,0,0,.07) 64%,
        rgba(0,0,0,.025) 66%,
        rgba(0,0,0,.008) 68%,
        rgba(0,0,0,0) 70%,
        rgba(0,0,0,0) 100%),
      linear-gradient(180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.01) 58%,
        rgba(0,0,0,.14) 100%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }

  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 344 - 70% of the IMAGE PLANE stays clear.
   Desktop hero media occupies the right-hand 70% of the full hero (30%-100%).
   The previous rule incorrectly treated 70% as a full-hero coordinate, which
   darkened far too much of the photograph. This rule fades only across the
   LEFTMOST 30% of that 70%-wide image plane: full black at the 30% copy/image
   join, fully clear by 51% of the full hero. Therefore the remaining 49% of the
   full hero = exactly 70% of the image plane, untouched by the horizontal fade. */
@media (min-width:1001px) {
  html {
    --jt-public-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%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade {
    background: var(--jt-public-hero-desktop-fade) !important;
  }
}

/* Build 427 - authoritative phone/portrait hero fade.
   The desktop hero already fades the managed image into the black copy plane.
   Phones use a full-bleed image, so give the portrait treatment its own visible
   side-and-bottom fade instead of leaving the photograph visually unblended.
   This rule covers standard managed heroes, Recommended Suppliers and Wedding
   Advice articles. It deliberately does not alter desktop/tablet geometry. */
@media (max-width:640px) {
  html {
    --jt-public-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%);
  }

  html body #main-content > .jt-standard-hero::before,
  html body.resource-page-advice #main-content > .resource-hero.jt-standard-hero::before,
  html body.credentials-page #main-content > .jt-credentials-standard-hero.jt-standard-hero::before,
  html body.resource-page-credentials.credentials-page #main-content > .jt-standard-hero.jt-credentials-standard-hero::before,
  html body.resource-page-suppliers #main-content > .supplier-page-hero .supplier-hero-shade,
  html body.resource-page.resource-page-advice #main-content > .article-hero > .article-hero-shade {
    background: var(--jt-public-hero-mobile-fade) !important;
  }
}