@import url("resources-hub.css?v=20260908-342");
.supplier-toolbar{align-items:center;margin-bottom:14px}
.supplier-toolbar .btn{cursor:pointer}
.supplier-toolbar .btn[aria-current="true"]{border-color:var(--gold);background:var(--gold);color:#080808}
.supplier-results-summary{margin:0 0 20px;color:var(--muted);font-size:.88rem}
.supplier-grid{align-items:stretch}
.supplier-card{position:relative;padding:0;overflow:hidden}
.supplier-card[hidden]{display:none!important}
.supplier-card.is-featured{border-color:rgba(210,162,58,.58);box-shadow:0 15px 42px rgba(0,0,0,.22)}
.supplier-card-image{position:relative;width:100%;height:230px;overflow:hidden;box-sizing:border-box;background:radial-gradient(circle at 50% 42%,#17140e 0,#0c0b09 58%,#080808 100%);border-bottom:1px solid rgba(210,162,58,.18)}
.supplier-card-image img{position:absolute!important;inset:28px 32px!important;display:block!important;width:calc(100% - 64px)!important;height:calc(100% - 56px)!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;object-fit:contain!important;object-position:50% 50%!important;margin:0!important;padding:0!important;background:transparent!important;transform:none!important}

.supplier-card-image--cover img{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;padding:0!important}
.supplier-featured{position:absolute;z-index:2;top:14px;right:14px;display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid rgba(210,162,58,.62);border-radius:999px;color:var(--gold-light);background:rgba(8,8,8,.92);box-shadow:0 5px 18px rgba(0,0,0,.28);font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.supplier-card-body{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.supplier-card-head{display:block;min-height:23px}
.supplier-tagline{margin:.05rem 0 .65rem!important;color:var(--cream)!important;font-weight:700}
.supplier-location{display:flex;gap:7px 14px;flex-wrap:wrap;margin:.1rem 0 .8rem!important;font-size:.78rem!important}
.supplier-location span{display:inline-flex;gap:4px}
.supplier-location strong{color:var(--gold-light)}
.supplier-review{margin:.15rem 0 0}
.supplier-worked{margin-top:14px!important}
.supplier-socials{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:18px}
.supplier-social-link{display:grid;place-items:center;width:30px;height:30px;color:var(--gold-light);background:transparent;border:0;border-radius:0;transition:transform .16s ease,color .16s ease,filter .16s ease}
.supplier-social-link:hover,.supplier-social-link:focus-visible{transform:translateY(-2px) scale(1.06);color:#f6d98b;filter:drop-shadow(0 0 7px rgba(210,162,58,.24))}
.supplier-social-link:focus-visible{outline:1px solid var(--gold);outline-offset:4px;border-radius:3px}
.supplier-social-link svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.supplier-social-link--facebook svg,.supplier-social-link--tiktok svg{fill:currentColor;stroke:none}
.supplier-filter-empty{margin-top:18px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){.supplier-card-image{height:215px}.supplier-card-image img{inset:26px 28px!important;width:calc(100% - 56px)!important;height:calc(100% - 52px)!important}}
@media(max-width:720px){.supplier-card-body{padding:20px}.supplier-card-image{height:200px}.supplier-card-image img{inset:24px 26px!important;width:calc(100% - 52px)!important;height:calc(100% - 48px)!important}.supplier-social-link{width:28px;height:28px}.supplier-social-link svg{width:23px;height:23px}}

/* Build 281 — compact supplier directory cards + full supplier modal. */
.supplier-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.supplier-card{cursor:pointer;border-radius:15px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.supplier-card:hover,.supplier-card:focus-visible{transform:translateY(-2px);border-color:rgba(210,162,58,.48);box-shadow:0 14px 30px rgba(0,0,0,.22)}
.supplier-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.supplier-card-image{height:160px}
.supplier-card-image img{inset:18px 20px!important;width:calc(100% - 40px)!important;height:calc(100% - 36px)!important}
.supplier-card-image--cover img{inset:0!important;width:100%!important;height:100%!important}
.supplier-card-body{padding:16px 17px 18px}
.supplier-card-head{min-height:19px}
.supplier-card h3{font-size:1.08rem;line-height:1.2;margin:.18rem 0 .38rem}
.supplier-category{font-size:.64rem;letter-spacing:.075em}
.supplier-tagline{font-size:.82rem!important;line-height:1.4!important;margin:.02rem 0 .48rem!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.supplier-location{margin:.02rem 0 .5rem!important;font-size:.7rem!important;line-height:1.35!important}
.supplier-review{margin:.08rem 0 0!important;font-size:.82rem!important;line-height:1.48!important}
.supplier-read-more{white-space:nowrap;color:var(--gold-light);font-weight:850}
.supplier-worked{margin-top:9px!important;font-size:.7rem!important}
.supplier-socials{gap:10px;padding-top:11px}
.supplier-social-link{width:25px;height:25px}
.supplier-social-link svg{width:20px;height:20px}
.supplier-featured{top:10px;right:10px;min-height:22px;padding:3px 8px;font-size:.59rem}

.supplier-modal{width:min(920px,calc(100vw - 32px));max-height:min(86vh,820px);padding:0;border:1px solid rgba(210,162,58,.42);border-radius:20px;color:var(--cream);background:#0a0908;box-shadow:0 28px 90px rgba(0,0,0,.65);overflow:hidden}
.supplier-modal::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}
.supplier-modal-shell{position:relative;max-height:min(86vh,820px);overflow:auto}
.supplier-modal-close{position:absolute;z-index:4;top:12px;right:12px;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(210,162,58,.48);border-radius:999px;background:rgba(8,8,8,.9);color:var(--cream);font:400 1.75rem/1 Georgia,serif;cursor:pointer}
.supplier-modal-close:hover,.supplier-modal-close:focus-visible{border-color:var(--gold);color:var(--gold-light);outline:none}
.supplier-modal-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.35fr);min-height:470px}
.supplier-modal-media{display:flex;align-items:center;justify-content:center;min-height:470px;padding:26px;background:radial-gradient(circle at 50% 40%,#1a160f 0,#0d0b09 58%,#080808 100%);border-right:1px solid rgba(210,162,58,.18)}
.supplier-modal-media img{display:block;width:100%;height:100%;max-height:560px;object-fit:contain;object-position:center;border-radius:10px}
.supplier-modal-copy{padding:34px 38px 34px}
.supplier-modal-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:44px}
.supplier-modal-preferred{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border:1px solid rgba(210,162,58,.5);border-radius:999px;color:var(--gold-light);font-size:.62rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.supplier-modal h2{margin:.4rem 0 .42rem;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.08}
.supplier-modal-tagline{margin:0 0 1rem;color:var(--cream);font-weight:700;line-height:1.5}
.supplier-modal-facts{display:flex;gap:8px 18px;flex-wrap:wrap;margin:0 0 1rem;padding:0}
.supplier-modal-facts div{display:flex;gap:5px;font-size:.78rem}
.supplier-modal-facts dt{color:var(--gold-light);font-weight:850}
.supplier-modal-facts dd{margin:0;color:var(--muted)}
.supplier-modal-review{color:var(--muted);font-size:.94rem;line-height:1.72}
.supplier-modal-worked{margin:15px 0 0;color:var(--gold-light);font-size:.8rem;font-weight:900}
.supplier-modal-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(210,162,58,.18)}
.supplier-modal-link{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:10px 11px;border:1px solid rgba(210,162,58,.2);border-radius:11px;color:var(--cream);background:rgba(255,255,255,.025);text-decoration:none;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.supplier-modal-link:hover,.supplier-modal-link:focus-visible{border-color:rgba(210,162,58,.58);background:rgba(210,162,58,.07);transform:translateY(-1px);outline:none}
.supplier-modal-link>svg{width:22px;height:22px;color:var(--gold-light);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.supplier-modal-link--facebook>svg,.supplier-modal-link--tiktok>svg{fill:var(--gold-light);stroke:none}
.supplier-modal-link span{display:block;min-width:0}
.supplier-modal-link strong,.supplier-modal-link small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.supplier-modal-link strong{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase}
.supplier-modal-link small{margin-top:2px;color:var(--gold-light);font-size:.76rem}
html.supplier-modal-open{overflow:hidden}

@media(max-width:1120px){.supplier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:860px){.supplier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.supplier-modal-layout{grid-template-columns:1fr}.supplier-modal-media{min-height:250px;max-height:330px;border-right:0;border-bottom:1px solid rgba(210,162,58,.18)}.supplier-modal-media img{max-height:270px}.supplier-modal-copy{padding:28px 28px 30px}}
@media(max-width:560px){.supplier-grid{grid-template-columns:1fr}.supplier-card-image{height:190px}.supplier-card-body{padding:17px 18px 19px}.supplier-modal{width:calc(100vw - 18px);max-height:92vh;border-radius:16px}.supplier-modal-shell{max-height:92vh}.supplier-modal-copy{padding:24px 20px 26px}.supplier-modal-media{min-height:220px;padding:18px}.supplier-modal-links{grid-template-columns:1fr}}

/* Build 282 — Recommended Suppliers section scroller. The button uses the
   site-wide Collaborations dark/gold treatment from public-polish-258.css. */
.resource-page-suppliers .section-scroll-next.is-returning svg{transform:rotate(180deg)}
.resource-page-suppliers .section-scroll-next svg{transition:transform .18s ease}
@media (prefers-reduced-motion:reduce){.resource-page-suppliers .section-scroll-next svg{transition:none}}

/* Build 285 — Recommended Suppliers scroll-arrow visibility parity.
   public-polish-258.css deliberately forces the generic scroll control visible.
   Completed pages such as Collaborations then override that generic rule with a
   page-specific hidden base state and an .is-visible active state. Suppliers
   must do exactly the same. The extra specificity and !important flags are
   required because public-polish is loaded after this page stylesheet. */
html body.resource-page-suppliers > .section-scroll-next.preview-v2-scroll-next[data-supplier-page-scroll] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 12px) !important;
}

html body.resource-page-suppliers > .section-scroll-next.preview-v2-scroll-next[data-supplier-page-scroll].is-visible {
  opacity: .86 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

html body.resource-page-suppliers > .section-scroll-next.preview-v2-scroll-next[data-supplier-page-scroll].is-visible:hover,
html body.resource-page-suppliers > .section-scroll-next.preview-v2-scroll-next[data-supplier-page-scroll].is-visible:focus-visible {
  opacity: 1 !important;
}

/* Build 286 — full Recommended Suppliers landing hero.
   This follows the same full-width split hero language used on the main V2 pages:
   dark editorial copy on the left, edge-to-edge photography on the right, and
   a hero depth that occupies the opening desktop viewport rather than a small
   resource-card style banner. */
.resource-page-suppliers main#main-content > .supplier-page-hero {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #050505 !important;
  color: #f7f1e7 !important;
  border-bottom: 1px solid rgba(210,162,58,.28);
}
.resource-page-suppliers .supplier-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-height: clamp(560px,calc(100svh - 112px),780px);
  padding: 0 !important;
}
.resource-page-suppliers .supplier-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: clamp(58px,6vw,108px) var(--public-content-gutter,clamp(28px,4vw,72px)) !important;
  background:
    radial-gradient(circle at 100% 20%,rgba(210,162,58,.12),transparent 32rem),
    #050505;
  position: relative;
  z-index: 2;
}
.resource-page-suppliers .supplier-hero-copy .kicker { margin-bottom: .7rem; }
.resource-page-suppliers .supplier-hero-copy h1 {
  max-width: 12ch;
  margin: .18rem 0 1rem;
  color: #f7f1e7;
  font-size: clamp(2.65rem,4.3vw,5rem);
  line-height: 1.02;
  text-wrap: balance;
}
.resource-page-suppliers .supplier-hero-copy > p:not(.kicker) {
  max-width: 720px;
  margin: 0;
  color: #cfc6b9;
  font-size: clamp(1rem,1.1vw,1.12rem);
  line-height: 1.72;
}
.resource-page-suppliers .supplier-hero-copy .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.resource-page-suppliers .supplier-hero-media {
  position: relative;
  min-width: 0;
  min-height: inherit;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #0b0a08;
}
.resource-page-suppliers .supplier-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(5,5,5,.13),transparent 22%),linear-gradient(180deg,transparent 70%,rgba(0,0,0,.18));
}
.resource-page-suppliers .supplier-hero-media picture,
.resource-page-suppliers .supplier-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
}
.resource-page-suppliers .supplier-hero-media img {
  object-fit: cover;
  object-position: 52% 50%;
}
.resource-page-suppliers .supplier-hero-media figcaption {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 18px;
  padding: 8px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(0,0,0,.68);
  color: #f7f1e7;
  font-size: .72rem;
  letter-spacing: .03em;
}

@media (max-width: 980px) {
  .resource-page-suppliers .supplier-hero-grid {
    grid-template-columns: 1fr !important;
    min-height: 0;
  }
  .resource-page-suppliers .supplier-hero-copy {
    padding: 52px var(--public-content-gutter,24px) 48px !important;
  }
  .resource-page-suppliers .supplier-hero-copy h1 { max-width: 18ch; }
  .resource-page-suppliers .supplier-hero-media {
    min-height: clamp(360px,63vw,560px);
    height: clamp(360px,63vw,560px);
  }
  .resource-page-suppliers .supplier-hero-media img { object-position: 50% 50%; }
}
@media (max-width: 640px) {
  .resource-page-suppliers .supplier-hero-copy { padding: 42px 22px 38px !important; }
  .resource-page-suppliers .supplier-hero-copy h1 { font-size: clamp(2.15rem,10vw,3rem); }
  .resource-page-suppliers .supplier-hero-copy .hero-actions { display: grid; grid-template-columns: 1fr; }
  .resource-page-suppliers .supplier-hero-copy .hero-actions .btn { justify-content: center; width: 100%; }
  .resource-page-suppliers .supplier-hero-media { min-height: 320px; height: 320px; }
  .resource-page-suppliers .supplier-hero-media figcaption { left: 16px; bottom: 14px; }
}

/* Build 287 — hero typography and CTA parity with the approved V2 public pages.
   Reference: Weddings/Collaborations use Marcellus at 54px desktop (42px tablet,
   34px mobile) via v2-section-rhythm-140.css, and the shared gold pill CTA system
   from v2-button-system-133.css. Keep these rules scoped to the supplier hero. */
.resource-page-suppliers .supplier-hero-copy h1 {
  max-width: 13ch !important;
  font-family: Marcellus, Georgia, serif !important;
  font-size: 54px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: .018em !important;
  text-wrap: balance;
}
.resource-page-suppliers .supplier-hero-copy .kicker {
  font-size: clamp(.77rem,.8vw,.9rem) !important;
  letter-spacing: .18em !important;
}
.resource-page-suppliers .supplier-hero-copy > p:not(.kicker) {
  font-size: 1rem !important;
  line-height: 1.68 !important;
}
.resource-page-suppliers .supplier-hero-copy .hero-actions {
  gap: 16px !important;
  margin-top: 24px !important;
}
.resource-page-suppliers .supplier-page-hero .btn {
  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;
}
.resource-page-suppliers .supplier-page-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) {
  .resource-page-suppliers .supplier-page-hero .btn:hover,
  .resource-page-suppliers .supplier-page-hero .btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(210,162,58,.10) !important;
  }
  .resource-page-suppliers .supplier-page-hero .btn.btn-primary:hover,
  .resource-page-suppliers .supplier-page-hero .btn.btn-primary:focus-visible {
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  }
}
@media (max-width:900px) {
  .resource-page-suppliers .supplier-hero-copy h1 {
    font-size: 42px !important;
    line-height: 1.08 !important;
  }
  .resource-page-suppliers .supplier-hero-copy .hero-actions { margin-top: 22px !important; }
}
@media (max-width:600px) {
  .resource-page-suppliers .supplier-hero-copy h1 {
    font-size: 34px !important;
    line-height: 1.10 !important;
  }
  .resource-page-suppliers .supplier-hero-copy .hero-actions { margin-top: 20px !important; }
  .resource-page-suppliers .supplier-page-hero .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}

/* Build 288 — full-width cinematic supplier hero.
   The approved hero image now sits beneath the whole hero instead of in a split
   panel. A left-to-right black gradient creates the same fade shown in the
   approved visual mock while preserving the existing V2 typography and pill CTAs. */
.resource-page-suppliers main#main-content > .supplier-page-hero {
  position: relative !important;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(560px,calc(100svh - 112px),790px) !important;
  overflow: hidden;
  padding: 0 !important;
  background: #050505 !important;
  border-bottom: 1px solid rgba(210,162,58,.28);
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-media {
  position: absolute !important;
  z-index: -3;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #090806;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-media picture,
.resource-page-suppliers .supplier-page-hero .supplier-hero-media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-media img {
  object-fit: cover !important;
  object-position: 58% 50% !important;
  filter: saturate(.92) contrast(1.04) brightness(.82);
  transform: scale(1.012);
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-shade {
  position: absolute;
  z-index: -2;
  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%);
}
.resource-page-suppliers .supplier-page-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%);
}
.resource-page-suppliers .supplier-hero-inner {
  width: min(1180px,calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(74px,9vw,124px) 0;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
  position: relative;
  z-index: 2;
  display: block;
  width: min(660px,58vw);
  max-width: 660px;
  padding: 0 !important;
  background: none !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy .kicker {
  margin: 0 0 .9rem !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 {
  max-width: 11ch !important;
  margin: 0 0 1rem !important;
  color: #f7f1e7 !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 span {
  color: #edcf83;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
  max-width: 590px;
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-copy .hero-actions {
  margin-top: 26px !important;
}
.resource-page-suppliers .supplier-page-hero .supplier-hero-media figcaption {
  display: none !important;
}

@media (max-width:900px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    min-height: clamp(540px,75svh,700px) !important;
  }
  .resource-page-suppliers .supplier-hero-inner {
    width: min(100% - 40px,760px);
    padding: 70px 0 66px;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    width: min(620px,78vw);
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-media img {
    object-position: 62% 50% !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-shade {
    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:600px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    min-height: clamp(570px,82svh,720px) !important;
    align-items: end;
  }
  .resource-page-suppliers .supplier-hero-inner {
    width: calc(100% - 36px);
    padding: 72px 0 54px;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    width: 100%;
    max-width: 540px;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 {
    max-width: 10ch !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-media img {
    object-position: 67% 50% !important;
    filter: saturate(.88) contrast(1.04) brightness(.68);
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-shade {
    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%);
  }
}

/* Build 289 — hero copy position parity with the established public pages.
   Reference: the approved Collaborations hero uses a desktop left inset of
   clamp(42px,4.4vw,84px), tablet clamp(28px,5vw,52px), and 22px on mobile.
   Build 288 centred a 1180px inner wrapper, which pushed the copy too far into
   the page on wide screens. Keep the full-width fading photograph, but place
   its copy on the same horizontal rhythm as the other public heroes. */
@media (min-width:1001px) {
  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding-left: clamp(42px,4.4vw,84px) !important;
    padding-right: clamp(42px,4.4vw,84px) !important;
  }
}
@media (min-width:601px) and (max-width:1000px) {
  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding-left: clamp(28px,5vw,52px) !important;
    padding-right: clamp(28px,5vw,52px) !important;
  }
}
@media (max-width:600px) {
  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* Build 290 — Recommended Suppliers hero parity with the live To Hell or Verona hero.
   Reference values are taken directly from the final THOV cascade (page-preview-v2,
   v2-button-system-133 and to-hell-or-verona-fixes-151/152), not approximated from
   another page. Keep the approved full-width background image and overlay fade. */

@media (min-width:1001px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    /* THOV opening section fills the usable viewport beneath the 112px header. */
    min-height: calc(100svh - 112px) !important;
  }

  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: inherit;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /* Exact THOV copy inset and vertical rhythm. */
    padding: clamp(26px,3vh,38px) clamp(28px,5vw,96px) !important;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    width: 45% !important;
    max-width: none !important;
    align-self: auto !important;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 {
    max-width: 19ch !important;
    margin: 0 0 14px !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;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .kicker {
    margin: 0 0 10px !important;
    font-size: .72rem !important;
    letter-spacing: .2em !important;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
    max-width: 66ch !important;
    margin: 0 !important;
    font-size: clamp(.96rem,1vw,1.04rem) !important;
    line-height: 1.5 !important;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .hero-actions {
    gap: 16px !important;
    margin-top: 24px !important;
  }
}

/* THOV uses the V2 button system verbatim. Keep the same exact pill geometry,
   typography and gold treatments here even though Suppliers is PHP-rendered and
   does not load v2-button-system-133.css itself. */
.resource-page-suppliers .supplier-page-hero .btn {
  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;
}
.resource-page-suppliers .supplier-page-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) {
  .resource-page-suppliers .supplier-page-hero .btn:hover,
  .resource-page-suppliers .supplier-page-hero .btn:focus-visible {
    transform: translateY(-2px);
    background: rgba(210,162,58,.10) !important;
  }
  .resource-page-suppliers .supplier-page-hero .btn.btn-primary:hover,
  .resource-page-suppliers .supplier-page-hero .btn.btn-primary:focus-visible {
    background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  }
}

/* Match the THOV responsive copy gutters/rhythm while retaining the approved
   full-background hero rather than switching back to THOV's split image layout. */
@media (min-width:641px) and (max-width:1000px) {
  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 52px clamp(24px,4.5vw,54px) !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    width: min(620px,78vw) !important;
    max-width: 620px !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 {
    max-width: 18ch !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;
    margin: 0 0 14px !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .kicker {
    margin-bottom: 10px !important;
    font-size: .72rem !important;
    letter-spacing: .2em !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .hero-actions {
    gap: 16px !important;
    margin-top: 24px !important;
  }
}

@media (max-width:640px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    align-items: center !important;
  }
  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 44px 22px !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    width: 100% !important;
    max-width: 540px !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy h1 {
    max-width: 18ch !important;
    margin: 0 0 14px !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;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .kicker {
    margin-bottom: 10px !important;
    font-size: .72rem !important;
    letter-spacing: .2em !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy > p:not(.kicker) {
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }
  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy .hero-actions {
    gap: 12px !important;
    margin-top: 24px !important;
  }
  .resource-page-suppliers .supplier-page-hero .btn {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}

/* Build 292 - Recommended Suppliers hero position and transition strip.
   Desktop positioning now uses the same 45/55 hero grid and the same copy
   padding as the final To Hell or Verona hero. The background image remains
   full-width and the fade remains a separate overlay. */
@media (min-width:1001px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    min-height: calc(100svh - 112px) !important;
  }

  .resource-page-suppliers .supplier-hero-inner {
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100svh - 112px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0,45%) minmax(0,55%) !important;
    align-items: stretch !important;
  }

  .resource-page-suppliers .supplier-page-hero .supplier-hero-copy {
    grid-column: 1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    box-sizing: border-box;
    padding: clamp(26px,3vh,38px) clamp(28px,5vw,96px) !important;
  }
}

/* Build 293 - standard public divider bar.
   This deliberately mirrors the approved Occasions divider treatment:
   warm cream field, gold uppercase eyebrow, Marcellus title and a smaller
   muted supporting line. Use this visual hierarchy as the default treatment
   for equivalent divider bars elsewhere on the public site. */
.resource-page-suppliers .supplier-proof-strip {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #e9e0d3;
  color: #17130e;
  border-block: 1px solid rgba(76, 60, 38, .20);
  overflow: hidden;
}
.resource-page-suppliers .supplier-proof-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.resource-page-suppliers .supplier-proof-item {
  min-width: 0;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px clamp(20px, 2.5vw, 44px);
  border-right: 1px solid rgba(76, 60, 38, .18);
}
.resource-page-suppliers .supplier-proof-item:last-child {
  border-right: 0;
}
.resource-page-suppliers .supplier-proof-item span {
  display: block;
  margin-bottom: 5px;
  color: #8b681f;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1.2;
  text-transform: uppercase;
}
.resource-page-suppliers .supplier-proof-item strong {
  display: block;
  color: #17130e !important;
  font-family: Marcellus, Georgia, serif;
  font-size: clamp(1.02rem, 1.15vw, 1.24rem);
  font-weight: 400;
  line-height: 1.2;
}
.resource-page-suppliers .supplier-proof-item small {
  display: block;
  margin-top: 5px;
  color: #625b52 !important;
  font-size: .78rem;
  line-height: 1.35;
}
@media (max-width: 980px) {
  .resource-page-suppliers .supplier-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .resource-page-suppliers .supplier-proof-item:nth-child(2) {
    border-right: 0;
  }
  .resource-page-suppliers .supplier-proof-item:nth-child(-n+2) {
    border-bottom: 1px solid rgba(76, 60, 38, .18);
  }
}
@media (max-width: 640px) {
  .resource-page-suppliers .supplier-proof-item {
    min-height: 90px;
    padding: 14px 18px;
  }
}

/* Build 294 - keep the first divider visible in the opening desktop viewport.
   The standard supplier divider is 100px high plus its 1px top and bottom
   borders, so the hero gives back the same 102px. Header (112px) + hero +
   divider therefore occupy the landing viewport without changing the divider. */
@media (min-width:1001px) {
  .resource-page-suppliers main#main-content > .supplier-page-hero {
    min-height: calc(100svh - 112px - 102px) !important;
  }

  .resource-page-suppliers .supplier-hero-inner {
    min-height: calc(100svh - 112px - 102px) !important;
  }
}

/* Build 451 — cropped supplier photographs use the same fixed ratio as the crop editor.
   Logo/contain cards retain the existing fixed-height treatment. */
.supplier-card-image--cover{height:auto!important;aspect-ratio:16/9}
@media(max-width:900px){.supplier-card-image--cover{height:auto!important}}
@media(max-width:720px){.supplier-card-image--cover{height:auto!important}}
@media(max-width:560px){.supplier-card-image--cover{height:auto!important}}