@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

:root {
  --title-font: "Montserrat", Figtree, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero h1,
.page-hero h1,
.content h2,
.section-head h2,
.capabilities h2,
.stockists h2,
.partner h2,
.about h2,
.enquiry h2,
.brand-detail h1,
.brand-list article h2,
.path-grid h3,
.cap-grid h3,
.category-grid h3,
.values h3,
.logo b {
  font-family: var(--title-font);
}

h1,
.hero h1,
.page-hero h1,
.brand-detail h1 {
  font-weight: 800;
  letter-spacing: -0.055em;
}

h2,
h3,
.section-head h2,
.capabilities h2,
.stockists h2,
.partner h2,
.about h2,
.enquiry h2,
.content h2 {
  font-weight: 700;
  letter-spacing: -0.045em;
}

.review span::after {
  content: " · MONTSERRAT + NEW PHOTOGRAPHY";
}

.v3-photo-frame img {
  object-position: 50% center;
  filter: saturate(.96) contrast(1.02);
}

.path-grid img,
.cap-grid.visual img,
.capability-band img,
.contact-team-photo img,
.purpose-visual img,
.values-visual img {
  filter: saturate(.94) contrast(1.02);
}

.client-photo-note {
  color: var(--body);
  font-size: .8rem;
}

@media (max-width: 850px) {
  .review {
    justify-content:center;
  }

  .review span {
    display:none;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 3.5rem 6vw 4.5rem;
  }

  .hero h1 {
    font-size: clamp(3.25rem, 15vw, 5.5rem);
  }

  .hero-copy,
  .hero .hero-copy {
    max-width: 38rem;
  }

  .v3-hero-image {
    width:100%;
    min-height:390px;
  }

  .v3-photo-frame,
  .v3-photo-frame img {
    min-height:370px;
  }

  h1,
  .hero h1,
  .page-hero h1 {
    letter-spacing: -0.045em;
  }
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
    line-height: .94;
  }

  .v3-hero-image {
    min-height:330px;
  }

  .v3-photo-frame,
  .v3-photo-frame img {
    min-height:310px;
  }
}

/* Version 3.2: one consistent Montserrat display system. */
:where(h1, h2, h3, h4, h5, h6, .logo b, .stats b, .brand-facts b,
  .channel-list span, .stockist-grid.logos span, .sticker, .ticker) {
  font-family: var(--title-font) !important;
}

:where(.hero h1, .page-hero h1, .brand-detail h1, .intro h2,
  .section-head h2, .capabilities h2, .stockists h2, .partner h2,
  .about h2, .enquiry h2, .service-head h2, .content h2,
  .promise h2, .categories h2, .stockist-heading h2) {
  font-weight: 800;
}

.brand-list article > .brand-product {
  width: 100% !important;
  height: 210px !important;
  padding: 16px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
}

.brand-list article > div {
  width: 100%;
  min-width: 0;
}

/* Keep every portfolio card and its internal baselines consistent. */
.brand-list article {
  box-sizing: border-box;
  height: auto !important;
  min-height: 720px !important;
}

.brand-list article > div {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.brand-list article .brand-name-logo {
  width: 100% !important;
  max-width: 220px;
  height: 100px !important;
  margin: 0 auto 18px;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  flex-shrink: 0;
}

.brand-list article .brand-name-logo[src$="brand-roca.jpg"] {
  mix-blend-mode: multiply;
}

.brand-logo-frame {
  position: relative;
  width: min(100%, 220px);
  height: 104px;
  margin: 0 auto 18px;
  overflow: hidden;
  flex-shrink: 0;
  mix-blend-mode: multiply;
}

.brand-list article .brand-logo-frame .brand-name-logo {
  max-width: none;
  margin: 0;
}

.brand-logo-frame.artwork-fitted .brand-name-logo {
  position: absolute;
  object-fit: fill;
}

.brand-hero-logo-frame {
  width: min(100%, 480px);
  height: clamp(110px, 13vw, 170px);
  margin: 12px 0 24px;
}

.brand-hero-logo-frame .brand-title-logo {
  max-width: none;
  margin: 0;
  object-position: left center;
}

.brand-hero-logo-frame.artwork-fitted .brand-title-logo {
  position: absolute;
  object-fit: fill;
}

/* Supplied NERDS artwork: blend its pale canvas into the card surface. */
img[src$="brand-nerds-clean.png"] {
  mix-blend-mode: multiply;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.brand-title-logo {
  width: min(440px, 82%);
  height: clamp(90px, 12vw, 150px);
  margin: 0 0 22px;
  object-fit: contain;
  object-position: left center;
}

.brand-page .brand-logo-float { display: none; }

/* Keep Hydrofy packaging fully visible throughout its product-led profile. */
[data-brand="hydrofy"] .brand-product-stage,
[data-brand="hydrofy"] .brand-range-visual,
[data-brand="hydrofy"] .profile-signature figure {
  background: #fff;
}
[data-brand="hydrofy"] .profile-signature figure img,
[data-brand="hydrofy"] .brand-range-visual img,
[data-brand="hydrofy"] .brand-local-section > img {
  object-fit: contain;
  background: #fff;
  padding: 24px;
}
[data-brand="hydrofy"] .brand-title-logo {
  object-fit: cover;
  object-position: center;
  height: 90px;
  mix-blend-mode: multiply;
}

.vanholtens-landing .brand-product-stage > .brand-product-image {
  width: 90%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px #0004);
}

@media (max-width: 520px) {
  .brand-list article > .brand-product { height: 190px !important; }
  .brand-list article .brand-name-logo { height: 100px !important; }
}

/* Version 3.3 portrait-aware crops: keep faces and held products in frame. */
.path-grid a:nth-child(3) > img,
.cap-grid.visual article:nth-child(3) > img,
img[src$="guide-steve-retail-team.jpg"] {
  object-position: center 22% !important;
}

.path-grid a:nth-child(4) > img,
img[src$="guide-steve-expertise.jpg"] {
  object-position: center 26% !important;
}

img[src$="guide-steve-nerds.jpg"],
img[src$="guide-steve-peeps.jpg"],
img[src$="guide-steve-mike-and-ike.jpg"],
img[src$="guide-steve-roca.jpg"],
img[src$="guide-steve-sees.jpg"],
img[src$="guide-steve-taffy-town.jpg"],
img[src$="guide-steve-pickle-juice.jpg"],
img[src$="guide-steve-face-twisters.jpg"] {
  object-position: center 24% !important;
}

.brand-card-image-link {
  display: block;
  color: inherit;
}

.brand-card-image-link > img {
  display: block;
  width: 100%;
}

/* The product artwork and logo are both links, but only the logo should carry
   the link underline. Stretch the product link across the card so its artwork
   remains visually centred even though the card itself aligns content left. */
.brand-list article > .brand-card-image-link {
  align-self: stretch;
  display: flex;
  width: 100%;
  margin: 0 !important;
  border-bottom: 0 !important;
  align-items: center;
  justify-content: center;
}

.brand-list article > .brand-card-image-link > .brand-product {
  width: 100% !important;
  height: 210px !important;
  margin-inline: auto;
  padding: 16px;
  object-fit: contain;
  object-position: center;
}

.brand-list article > div > .brand-card-image-link {
  display: grid;
  width: 100%;
  height: 104px;
  min-height: 104px;
  margin: 0 0 14px !important;
  place-items: center;
  flex: 0 0 104px;
}

.brand-list article > div > .brand-card-image-link .brand-logo-frame {
  height: 92px;
}

.brand-list article > div > .brand-card-image-link .brand-logo-frame,
.brand-list article > div > .brand-card-image-link .brand-name-logo {
  margin-bottom: 0;
}

.brand-list article > div > p {
  margin-bottom: 18px;
}

.brand-list article > div > a:not(.brand-card-image-link) {
  margin-top: auto !important;
}

@media (max-width: 800px) {
  .brand-list article > .brand-card-image-link > .brand-product {
    height: 190px !important;
  }
}

/* Keep product-gallery cells optically even across every brand profile. */
.profile-product-gallery figure {
  overflow: hidden;
  grid-template-rows: 320px 72px;
}

.profile-product-gallery figure img {
  box-sizing: border-box;
  height: 320px;
  object-position: center;
}

.profile-product-gallery figure figcaption {
  display: flex;
  align-items: center;
  min-height: 72px;
}

/* Real photographs fill the shared image stage; isolated product artwork
   retains its breathing room on white. */
.profile-product-gallery figure img[src*="google-drive-complete/"],
.profile-product-gallery figure img[src*="retail-"],
.profile-product-gallery figure img[src*="steve-"],
.profile-product-gallery figure img[src*="leigh-"],
.profile-product-gallery figure img[src*="store-"],
.profile-product-gallery figure img[src*="team-"] {
  object-fit: cover;
  padding: 0;
}

/* PEEPS gallery: keep every cell on the same image stage and show the full
   seasonal artwork instead of enlarging it into an unreadable crop. */
.profile-seasonal-shapes .profile-product-gallery figure:first-of-type img {
  object-fit: contain;
  object-position: center;
  padding: 28px;
}

.profile-seasonal-shapes .profile-product-gallery figure {
  grid-template-rows: 320px 72px;
}

.profile-seasonal-shapes .profile-product-gallery figure figcaption {
  display: flex;
  align-items: center;
}

.profile-product-gallery figure img[src*="/products/"],
.profile-product-gallery figure img[src*="-product"],
.profile-product-gallery figure img[src*="product-"] {
  transform: scale(1.08);
  transform-origin: center;
}

/* Pull the Pickle Juice portrait upward so Steve and the bottle share the crop. */
[data-brand="pickle-juice"] .profile-signature figure img[src$="IMG_8729.JPG"] {
  object-position: center 68%;
}

/* Match the lighter Canva treatment for the approved Face Twisters photo. */
[data-brand="face-twisters"] img[src$="IMG_8731.JPG"] {
  filter: brightness(1.16) contrast(1.02);
}

@media (max-width: 850px) {
  .profile-product-gallery figure,
  .profile-seasonal-shapes .profile-product-gallery figure {
    grid-template-rows: 260px 72px;
  }

  .profile-product-gallery figure img {
    height: 260px;
  }
}

@media (max-width: 520px) {
  .brand-list article {
    height: auto !important;
    min-height: 580px !important;
  }
}

img[src$="google-drive-complete/IMG_6112.jpg"] {
  object-position: right 24% !important;
}

img[src*="google-drive-complete/IMG_87"],
img[src*="google-drive-complete/IMG_97"] {
  object-position: center 28%;
}

.brand-world img[src$="IMG_6112.jpg"],
.brand-range-photo[src$="IMG_6112.jpg"] {
  object-position: right 22% !important;
}
.steve-stand-photo {
  object-position: 82% 22% !important;
}

/* Keep Steve and the team visible in the shallow Sales cards while removing
   the unnecessary ceiling from the top of the portrait photograph. */
.path-grid a:nth-child(4) > .steve-stand-photo {
  object-position: 82% 42% !important;
}

.cap-grid.visual article:nth-child(3) > .retail-team-photo,
.capability-band article:nth-child(3) > .retail-team-photo {
  object-position: right 22% !important;
}

/* Taffy Town story: favour Steve and the products over the empty ceiling. */
[data-brand="taffy-town"] .brand-story-photo {
  object-position: center 62% !important;
}

/* Keep Steve centred in the Taffy Town range card. */
[data-brand="taffy-town"] .brand-range-photo[src$="IMG_8734.JPG"] {
  object-position: 30% center !important;
}

/* The square See's pack shot needs a taller stage so the complete box is
   visible rather than cropped at the top and bottom. */
[data-brand="sees"] .brand-story-photo[src$="sees-assorted-box-new.jpg"] {
  height: 400px;
  object-fit: contain;
  background: #fff;
}

/* Match the brighter treatment already used for the repeated lower image. */
[data-brand="face-twisters"] .profile-world > img {
  filter: brightness(1.16) contrast(1.02);
}

[data-brand="face-twisters"] .profile-product-gallery img[src$="IMG_8774.PNG"] {
  object-position: center 72% !important;
}