/* DR-018 — Portal 1 homepage campaign modals and Meet Mark & Keely. */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] button.promo {
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] button.promo:focus-visible,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo[data-pm-open]:focus-visible,
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .promo-spot[data-pm-open]:focus-visible {
  outline: 2px solid var(--berry, #c43b82);
  outline-offset: 3px;
}

/* DG-MOBILE-STOREFRONT-POLISH-20 (Mark): the former navy "How we can help" treatment is retired; the action is the
   shared .btn.btn-ghost next to the canonical WhatsApp CTA (meet-mark-keely.php). */

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story {
  margin: 14px 0 0;
  font-size: 15px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story a {
  color: var(--d-green-900, #1f4a1b);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-story a:focus-visible {
  outline: 2px solid var(--berry, #c43b82);
  outline-offset: 3px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-media img {
  object-position: 50% 70%; /* DG-INFO-PANEL-DEPTH-32B (Mark): both faces of the mountain-walk photo in the square frame */
}

.ss-info-modal:not(.open) {
  display: none;
}

.modal-overlay.ss-info-modal.open,
.ss-info-modal.open {
  display: grid;
  place-items: center;
  padding: 24px 20px;
}

.modal.ss-info-dialog,
.ss-info-dialog {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
  max-height: min(88vh, 88dvh, 760px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.ss-info-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  max-height: min(86vh, 86dvh, 720px);
  margin: 0;
  padding: 0;
  text-align: left;
}

.ss-info-scroll {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.ss-info-head {
  display: grid;
  grid-template-columns: 36px 1fr 38px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 24px 28px 14px;
  border-bottom: 1px solid var(--line);
}

.ss-info-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-softer, #e7f3e4);
  color: var(--green-dark);
}

.ss-info-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.ss-info-close {
  position: static;
  top: auto;
  right: auto;
  justify-self: end;
}

.ss-info-content {
  width: 100%;
  padding: 18px 28px 44px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  min-height: 0;
  flex: 1 1 auto;
}

.ss-info-media {
  max-width: 168px;
  margin: 0 auto 14px;
  border-radius: 16px;
  overflow: hidden;
  background: #f3f5f0;
}

.ss-info-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 148px;
  margin: 0 auto;
  object-fit: contain;
}

.ss-info-lead,
.ss-info-list {
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
}

.ss-info-list-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.ss-info-list {
  padding-left: 1.15em;
}

.ss-info-foot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 14px 28px 24px;
  border-top: 1px solid var(--line);
}

.ss-info-gotit {
  width: min(100%, 220px);
}

.ss-info-scroll > .d-dialog-fade {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

@media (max-width: 720px) {
  .ss-info-modal.open {
    padding: 16px;
    align-items: end;
  }

  .ss-info-dialog {
    width: min(100%, calc(100vw - 24px));
    max-height: min(92vh, 760px);
  }

  .ss-info-head,
  .ss-info-content,
  .ss-info-foot {
    padding-left: 18px;
    padding-right: 18px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-meet-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* PLT-SHARED-PORTAL-RUNTIME-01 — approved USP ribbon slot above the home hero.
   Renders only when a portal's approved content carries USP copy.
   DG-LHL-004-RUNTIME-01B — accepted LHL-004C U1 composition (slim full-width
   ribbon, centred line, ES/PT flag marks, 14px/700; 12.5px left-aligned on
   mobile) in the light, quiet treatment V2 60 asked for, so it reads as its own
   band and never merges with the green member hero below. Content-driven only:
   no portal selector. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar {
  background: #fff;
  border-bottom: 1px solid var(--line, #e4e7dd);
  color: #1f4a1b;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar-text {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-align: center;
  text-wrap: balance;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flags {
  display: inline-flex;
  flex: none;
  gap: 4px;
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(23, 29, 24, 0.08);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag-es {
  background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%);
}

body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-flag-pt {
  background: linear-gradient(90deg, #046a38 0 40%, #da291c 40% 100%);
}

@media (max-width: 720px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar .container {
    gap: 10px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .d-usp-bar-text {
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
  }
}

/* DG-LAUNCH-STOREFRONT-POLISH-01B — LHL-004H guest hero: the server-selected photo carries the
   manifest's own focal points as two custom properties (allowlisted keyword/percent values).
   Box, cover fit and layout stay as they are; the previous image (no data-guest-hero) keeps its
   existing framing. Mobile/desktop split follows the manifest boxes (<=960px / >=961px). */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media img[data-guest-hero] {
  object-fit: cover;
  object-position: var(--gh-pos-m, center center);
}

@media (min-width: 961px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media img[data-guest-hero] {
    object-position: var(--gh-pos-d, center top);
  }
}

/* DG-LAUNCH-STOREFRONT-POLISH-01C — tablet/stacked band only (561–960px). The stacked hero photo
   box was a fixed 260px band across the full card width (~2.8:1 at 768px), which cut every head.
   It now keeps the same 16:10 proportion the accepted phone view renders (≤560px, where the
   #main zoom makes the 260px box 1.6:1), so the manifest mobile focal points frame the same way.
   Phones (≤560px) and desktop (≥961px) are untouched; so is the legacy fallback image. */
@media (min-width: 561px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .hero-media:has(> img[data-guest-hero]) {
    aspect-ratio: 16 / 10;
    min-height: 260px;
  }
}

/* LHL-HOMEPAGE-BESTSELLERS-WORTH-HIDE-11A — homepage bestsellers layout hook (columns only).
   The cards are the unchanged category Compact contract; this hook only fixes the homepage column count:
   4 per row on desktop (>= 1000px), 2 on tablet (600–999px), 1 on mobile (<= 599px). Two ids so it also
   outranks the later shared mobile-compact two-up rule. No card, price, button, media or modal styling here. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main #bestsellers.d-catalog--home-bestsellers[data-density="compact"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 999px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main #bestsellers.d-catalog--home-bestsellers[data-density="compact"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #main #bestsellers.d-catalog--home-bestsellers[data-density="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  /* LHL-HOMEPAGE-BESTSELLERS-MOBILE-FINAL-11D (Mark, 2026-10-01): mobile keeps one card per row; the
     eyebrow/title/text column takes the full section width. Desktop and tablet are unchanged.
     DG-MOBILE-STOREFRONT-POLISH-20 (Mark): the list is now exactly four (App\Home\HomepageBestsellers), so the
     former cards-7–8 rule is gone, and "Shop all products" is visible again, directly under the intro. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #bestsellers-sec .d-best-head .d-best-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
  }

  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] #bestsellers-sec .d-best-head > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* =====================================================================
   DG-HERO-UK-FINAL-RUNTIME-29 (Mark, 2026-10-05) — final UK guest hero. Only the allowlisted `uk-final` hero variant emits
   `.d-ghf` (on the hero's container; Portal 1 guests), so every rule below is scoped to it; other portals keep the shared
   hero untouched. The approved photograph is never altered: panel, run-out and USP surface are CSS layers.
   DG-HERO-COMPOSITION-USP-POLISH-29A (Mark, 2026-10-05) — refined composition: hero and USPs are one surface; on desktop the
   photo fills the hero from top to bottom edge and runs broadly behind the copy with a long horizontal blend (no top band,
   no vertical fade), and each family has its own palette drawn from its photograph. The transparent logo (no backing) heads
   the copy over the blend, or sits on a measured calm corner of the photo where one exists; in these photographs the top
   right is taken by heads or is too bright for an unbacked logo, so a corner is used only where it is collision-free.
   DG-HERO-CATALOG-CART-POLISH-30A (Mark, 2026-10-05): the logo always sits top-left above the copy (no photo corner) on every
   family, in the official white or green asset that suits the copy panel.
   ===================================================================== */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf {
  --ghf-bg: #17251c;
  --ghf-ink: #ffffff;
  --ghf-sub: rgba(255, 255, 255, 0.92);
  --ghf-accent: #a9e58a;
  --ghf-fade: 48%;
  --ghf-photo-w: 74%;
}
/* Per-family palettes (from each photograph: gym charcoal, coastal petrol, kitchen ivory/stone, river slate, strength-gym
   graphite, city/high-street charcoal-olive, countryside moss, pink-studio plum). Brand green stays the "succeed." accent. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-charcoal-forest { --ghf-bg: #151d19; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-petrol { --ghf-bg: #17323a; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-ivory { --ghf-bg: #f3efe6; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-stone { --ghf-bg: #eee8dc; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-slate { --ghf-bg: #1f2b33; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-graphite { --ghf-bg: #1d1e22; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-charcoal-olive { --ghf-bg: #23271f; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-moss { --ghf-bg: #1c2e22; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--tone-plum { --ghf-bg: #3f1c38; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--text-dark {
  --ghf-ink: #142a17;
  --ghf-sub: #233a26;
  --ghf-accent: #28732a;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--blend-soft { --ghf-fade: 40%; }
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--blend-strong { --ghf-fade: 56%; }

/* ---------- one surface: hero + USPs ---------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-shell {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 32, 22, 0.06), 0 22px 48px -30px rgba(20, 32, 22, 0.42);
  isolation: isolate;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ghf-bg);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
  position: relative;
  z-index: 2;
  padding: 24px 20px 22px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
  display: block;
  width: 128px;
  margin: 0 0 18px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* DG-FLAVOUR-ERROR-HERO-MICRO-POLISH-31A (Mark): on phones (this unscoped base layer) 40px above the headline and 40px
   below the subheadline; the tablet and desktop layers keep their own spacing. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
  margin: 40px 0 0;
  color: var(--ghf-ink);
  font-size: clamp(36px, 10vw, 44px);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.022em;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title em {
  color: var(--ghf-accent);
  font-style: normal;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
  margin: 12px 0 40px;
  max-width: 24ch;
  color: var(--ghf-sub);
  font-size: clamp(19px, 5vw, 20px);
  font-weight: 600;
  line-height: 1.32;
  text-wrap: balance;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions .btn {
  justify-content: center;
  min-height: 48px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn-ghost {
  background: transparent;
  border-color: color-mix(in srgb, var(--ghf-ink) 55%, transparent);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn-ghost:hover {
  background: color-mix(in srgb, var(--ghf-ink) 10%, transparent);
  border-color: var(--ghf-ink);
  color: var(--ghf-ink);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions .btn:focus-visible {
  outline: 3px solid var(--ghf-accent);
  outline-offset: 3px;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--ghf-pos-m, center center);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Phone / tablet join: a clean edge by default; a short blend only where the photo has open background above the people. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--join-short .d-ghf-fade {
  background: linear-gradient(180deg, var(--ghf-bg) 0%, color-mix(in srgb, var(--ghf-bg) 45%, transparent) 4%, transparent 9%);
}

/* ---------- USP: one quiet light surface (exact copy, existing icons) ---------- */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .trust.d-ghf-usp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 14px 14px;
  border: 0;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item + .trust-item {
  border: 0;
}
/* Quiet hairline between the two rows, inset so it never crosses the words. */
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item:nth-child(n+3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: rgba(20, 42, 23, 0.08);
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #f8e8f1;
  color: #8e1566;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico .ico {
  width: 19px;
  height: 19px;
  color: #8e1566;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item b {
  display: block;
  margin: 0;
  color: #17251a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}
body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item div > span {
  display: block;
  margin-top: 3px;
  color: #5a6458;
  font-size: 12.5px;
  line-height: 1.42;
}

@media (min-width: 561px) and (max-width: 960px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    padding: 34px 40px 30px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
    width: 160px;
    margin-bottom: 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
    margin-top: 0;
    font-size: 54px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
    max-width: none;
    margin: 14px 0 24px;
    font-size: 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
    aspect-ratio: 4 / 3;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
    object-position: var(--ghf-pos-t, center center);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
  }
}

@media (min-width: 961px) {
  /* The photo fills the hero from its top edge to its bottom edge and runs broadly behind the copy. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 470px;
    background: var(--ghf-bg);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--ghf-photo-w);
    aspect-ratio: auto;
    z-index: 0;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-media img {
    object-position: var(--ghf-pos-d, center center);
  }
  /* Long horizontal blend only (no vertical fade): the panel colour holds behind the words, then thins out gradually
     before the people; its length is the family's blend. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-fade {
    background: linear-gradient(90deg,
      var(--ghf-bg) 0%,
      var(--ghf-bg) 9%,
      color-mix(in srgb, var(--ghf-bg) 90%, transparent) calc(var(--ghf-fade) * 0.42),
      color-mix(in srgb, var(--ghf-bg) 62%, transparent) calc(var(--ghf-fade) * 0.66),
      color-mix(in srgb, var(--ghf-bg) 24%, transparent) calc(var(--ghf-fade) * 0.86),
      transparent var(--ghf-fade));
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    position: static;
    width: 50%;
    padding: 56px 0 56px 56px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy > :not(.d-ghf-logo) {
    position: relative;
    z-index: 2;
  }
  /* The transparent logo (no backing) heads the copy, top-left above the text (30A: always; no photo corner). It is out of
     the flow, so the copy stays vertically centred without reserved space. */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-logo {
    position: absolute;
    z-index: 3;
    width: 176px;
    margin: 0;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--logo-pos-copy .d-ghf-logo {
    top: 32px;
    left: 56px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-title {
    margin-top: 0;
    font-size: clamp(50px, 4.3vw, 62px);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-sub {
    max-width: 30ch;
    margin: 16px 0 30px;
    font-size: clamp(20px, 1.65vw, 23px);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .hero-actions.d-ghf-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .trust.d-ghf-usp {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 22px 22px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item:nth-child(n+3)::before {
    content: none;
  }
  /* Light inset separators between the four assurances (never full height). */
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item + .trust-item::after {
    content: "";
    position: absolute;
    left: 0;
    top: 28%;
    bottom: 28%;
    width: 1px;
    background: rgba(20, 42, 23, 0.09);
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-ico .ico {
    width: 21px;
    height: 21px;
  }
}
@media (min-width: 961px) and (max-width: 1180px) {
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf {
    --ghf-photo-w: 70%;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf-copy {
    width: 54%;
    padding-left: 44px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf--logo-pos-copy .d-ghf-logo {
    left: 44px;
  }
  body.v3-storefront[data-storefront="unified"][data-v3-page="home"] .hero.only-out .d-ghf .d-ghf-usp .trust-item {
    padding: 20px 16px;
    gap: 12px;
  }
}