/* Intro hero (template-parts/home/intro-hero.php), converted from the guardrail
   sections/intro-hero.liquid stylesheet. Per-instance values arrive as --hg-hero-* custom
   properties on the section; the fallbacks are the Shopify schema defaults. */

.hg-hero {
  position: relative;
  background: var(--hg-hero-bg, #0b0b0b);
  color: var(--hg-hero-text, #f2ede4);
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: 1.6;
}
.hg-hero__media {
  position: relative;
  aspect-ratio: var(--hg-hero-ratio-m, 9 / 16);
  overflow: hidden;
  background: var(--hg-hero-media-bg, #161514);
}
.hg-hero__media picture { display: contents; }
.hg-hero .hg-hero__img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--hg-hero-pos-m, 50% 40%);
  /* Full bleed, as in the Shopify hero: no Ecomus image rounding. */
  border-radius: 0;
}
.hg-hero__placeholder { color: var(--hg-hero-text, #f2ede4); }
.hg-hero__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--hg-hero-shade-h-m, 30%);
  background: linear-gradient(to top, var(--hg-hero-shade, #0b0b0b), transparent);
  pointer-events: none;
}
.hg-hero .hg-hero__cutout { display: none; }
.hg-hero__copy {
  position: relative;
  min-width: 0;
  max-width: 720px;
  padding: 4px var(--hg-hero-side-m, 20px) 28px;
}
.hg-hero--overlay-m .hg-hero__copy {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0 var(--hg-hero-side-m, 20px) var(--hg-hero-bottom-m, 32px);
}
.hg-hero__eyebrow {
  margin: 0 0 10px;
  color: var(--hg-hero-eyebrow-m, var(--hg-hero-eyebrow, #e0474d));
  font-family: var(--hg-font-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hg-hero .hg-hero__title {
  margin: 0 0 12px;
  color: var(--hg-hero-text, #f2ede4);
  font-family: var(--hg-font-heading);
  font-size: clamp(min(44px, var(--hg-hero-title-m, 72px)), 14vw, var(--hg-hero-title-m, 72px));
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.hg-hero__text {
  max-width: 520px;
  margin: 0 0 22px;
  color: inherit;
  font-size: 16px;
  line-height: 1.55;
  opacity: 0.88;
  overflow-wrap: anywhere;
}
.hg-hero--no-text-m .hg-hero__text { display: none; }
.hg-hero__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hg-hero__btn,
.hg-hero__btn:hover,
.hg-hero__btn:focus {
  color: var(--hg-hero-text, #f2ede4);
  text-decoration: none;
}
.hg-hero__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 clamp(10px, 3.2vw, 18px);
  border: 2px solid var(--hg-hero-text, #f2ede4);
  border-radius: var(--hg-hero-btn-radius, 4px);
  background: transparent;
  font-family: var(--hg-font-heading);
  font-size: var(--hg-hero-btn-size, 14px);
  font-style: normal;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  transition: filter 0.2s ease;
}
.hg-hero__btn--primary,
.hg-hero__btn--primary:hover,
.hg-hero__btn--primary:focus {
  border-color: var(--hg-hero-btn-bg, var(--hg-accent));
  background: var(--hg-hero-btn-bg, var(--hg-accent));
  color: var(--hg-hero-btn-text, #fff);
}
.hg-hero__btn--outline { border-color: color-mix(in srgb, var(--hg-hero-text, #f2ede4) 35%, transparent); }
.hg-hero__btn--wide { grid-column: 1 / -1; }
.hg-hero__btn:hover { filter: brightness(1.08); }
.hg-hero__btn:focus-visible {
  outline: 2px solid var(--hg-hero-text, #f2ede4);
  outline-offset: 3px;
}

@media (min-width: 990px) {
  .hg-hero {
    display: flex;
    align-items: flex-end;
    min-height: var(--hg-hero-min-h, 600px);
  }
  .hg-hero__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }
  .hg-hero .hg-hero__img { object-position: var(--hg-hero-pos, 60% 35%); }
  .hg-hero__media::after {
    height: 100%;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--hg-hero-shade, #0b0b0b) var(--hg-hero-shade-a, 90%), transparent) 0%,
      color-mix(in srgb, var(--hg-hero-shade, #0b0b0b) var(--hg-hero-shade-mid, 60%), transparent) calc(var(--hg-hero-shade-w, 52%) / 2),
      transparent var(--hg-hero-shade-w, 52%)
    );
  }
  [dir="rtl"] .hg-hero__media::after { transform: scaleX(-1); }
  .hg-hero .hg-hero__cutout {
    position: absolute;
    z-index: 3;
    inset-block: var(--hg-hero-cut-top, 4%) 0;
    inset-inline-start: var(--hg-hero-cut-left, 410px);
    display: block;
    width: auto;
    max-width: none;
    height: calc(100% - var(--hg-hero-cut-top, 4%));
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.55));
    pointer-events: none;
  }
  .hg-hero__copy,
  .hg-hero--overlay-m .hg-hero__copy {
    position: relative;
    inset: auto;
    max-width: var(--hg-hero-copy-w, 560px);
    padding: 0 var(--hg-hero-side, 56px) var(--hg-hero-bottom, 72px);
  }
  .hg-hero__eyebrow { color: var(--hg-hero-eyebrow, #e0474d); }
  .hg-hero .hg-hero__title { font-size: clamp(min(40px, var(--hg-hero-title, 104px)), 11vw, var(--hg-hero-title, 104px)); }
  .hg-hero__text,
  .hg-hero--no-text-m .hg-hero__text {
    display: block;
    max-width: var(--hg-hero-text-w, 320px);
  }
  .hg-hero__buttons {
    display: flex;
    flex-wrap: wrap;
  }
  .hg-hero__btn { min-width: var(--hg-hero-btn-min, 170px); }
}

/* A cover photo scales with the viewport, so below 1280px its subject moves in under a full-size
   title; heading_vw_medium lets the title shrink with it. Unset, this matches the rule above. */
@media (min-width: 990px) and (max-width: 1279px) {
  .hg-hero .hg-hero__title { font-size: clamp(min(40px, var(--hg-hero-title, 104px)), var(--hg-hero-title-md, 11vw), var(--hg-hero-title, 104px)); }
}

/* Entrance: the photo settles and the copy rises in turn. */
@media (prefers-reduced-motion: no-preference) {
  .hg-hero--intro .hg-hero__img { animation: hg-hero-settle 1.8s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hg-hero--intro .hg-hero__copy > * { animation: hg-hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hg-hero--intro .hg-hero__copy > :nth-child(1) { animation-delay: 0.15s; }
  .hg-hero--intro .hg-hero__copy > :nth-child(2) { animation-delay: 0.27s; }
  .hg-hero--intro .hg-hero__copy > :nth-child(3) { animation-delay: 0.39s; }
  .hg-hero--intro .hg-hero__copy > :nth-child(4) { animation-delay: 0.51s; }
  .hg-hero--intro .hg-hero__cutout { animation: hg-hero-stand 1.3s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@keyframes hg-hero-settle {
  from { transform: scale(1.12); }
  to { transform: none; }
}
@keyframes hg-hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes hg-hero-stand {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}