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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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