{% require_css %}
<style>
  {% scope_css %}
  /* ============= Half-Hero base height (½ viewport) ============= */
  .hh {
    position: relative;
    min-height: 50vh;
    width: 100%;
  }
  @supports (height: 100dvh) {
    .hh { min-height: 50dvh; }
  }

  .hh__bg {
    position: relative;
    min-height: inherit;
    width: 100%;
    overflow: hidden;
    z-index: 0;
  }

  /* Media / overlay layers */
  .hh__video,
  .hh__overlay { 
    position: absolute; 
    inset: 0; 
}

  .hh__video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    z-index: 0; 
}

  .hh__overlay { 
    z-index: 1; 
    pointer-events: none; 
}

  /* Content sits above media/overlay */
  .hh__content, .hh__scroll { 
    position: absolute; 
    z-index: 2; 
}

  .hh__content {
    left: 2.5rem;             /* 40px */
    bottom: 2.5rem;           /* 40px */
    width: min(50%, 45rem);   /* narrower for half-hero */
    max-width: 90vw;
    color: #fff;
    box-sizing: border-box;
    padding-left: 1.5rem;     /* inner breathing room */
  }

  /* H1 */
  .hh__content h1,
  .hh__content .hh__h1 {
    margin: 0 0 0.75rem;
    font-family: "Bahnschrift","Helvetica",sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
    font-size: clamp(2.25rem, 7vw, 4.75rem);
  }

  /* H2 pill */
  .hh__content h2,
  .hh__content .hh__h2 {
    display: inline-block;
    margin: 1rem 0 1.75rem;
    padding: 0.375rem 1.25rem;
    font-family: "Bahnschrift","Helvetica",sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.125em;
    font-size: clamp(1rem, 2.4vw, 1.625rem);
    color: #773847;
    background: #F7F6F5;
    line-height: 1.2;
  }

  /* Body */
  .hh__content p {
    margin: 0 0 0.875rem;
    font-family: "darwin pro", sans-serif;
    font-weight: 100;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
    line-height: 1.5;
    letter-spacing: 0.03125em;
    color: #fff;
  }
  .hh__content a { 
    color:#e9f5e5; 
    text-decoration: underline; 
}

  .hh__content a:hover { 
    text-decoration-thickness: 0.125rem; 
}

  /* Scroll indicator */
  .hh__scroll {
    left: 50%;
    bottom: 1.25rem;          /* 20px */
    transform: translateX(-50%);
    pointer-events: none;
  }
  .hh__arrow {
    font-size: 1.5rem;        /* icon size (1em) */
    color: #fff; opacity: .9;
    display: inline-flex; align-items: center; justify-content: center;
    animation: hh-breathe 2s ease-in-out infinite;
  }
  .hh__arrow svg { width: 1em; height: 1em; }
  @keyframes hh-breathe {
    0%,100%{ transform: translateY(0); opacity: .9; }
    50%    { transform: translateY(0.375rem); opacity: .65; }
  }

  /* Video swap (scoped) */
  .hh .hh__video--desktop { display: block; }
  .hh .hh__video--mobile  { display: none; }
  @media (max-width: 48em){ /* ~768px */
    .hh.hh--show-mobile .hh__video--desktop { display: none; }
    .hh.hh--show-mobile .hh__video--mobile  { display: block; }
  }

  /* Tablet & mobile adjustments */
  @media (max-width: 62em){          /* ~992px */
    .hh__content { width: min(70%, 35rem); }
  }
  @media (max-width: 48em){          /* ~768px */
    .hh__content{
      left: 0; right: 0;
      bottom: max(4.5rem, calc(3rem + env(safe-area-inset-bottom, 0)));
      width: auto; max-width: none;
      padding: 0 1.25rem;            /* 20px gutters */
    }
    .hh__content h1,
    .hh__content .hh__h1{
      font-size: clamp(1.5rem, 8vw, 2.5rem);
      letter-spacing: 0.06em;
      margin: 0 0 0.75rem;
    }
    .hh__content h2,
    .hh__content .hh__h2{
      margin: 0.5rem 0 1.25rem;
      padding: 0.375rem 0.875rem;    /* 6px 14px */
      font-size: clamp(0.875rem, 3.6vw, 1.125rem);
    }
    .hh__scroll{ bottom: 1rem; }
  }

  /* Parallax safety */
  @media (max-width: 64em){          /* ~1024px */
    .hh__bg { background-attachment: scroll !important; }
  }

  /* --- Mobile IMAGE background + overlay overrides (HubL inside CSS) --- */
  {% if module.add_mobile_options %}
  @media (max-width: 48em){
    {% if module.mobile.type_background == 'image' %}
      #-hh .hh__bg{
        background:
          rgba(, )
          url('');
        background-blend-mode: ;
        {% if module.mobile.background_size == 'custom' %}
          background-size: %;
        {% else %}
          background-size: ;
        {% endif %}
        background-repeat: ;
        background-position: ;
        background-attachment: scroll;
      }
    {% endif %}

    {% if module.mobile.overlay == "solid" %}
      #-hh .hh__overlay {
        background: rgba(, );
      }
    {% elif module.mobile.overlay == "gradient" %}
      #-hh .hh__overlay {
        background:
          linear-gradient(deg,
            rgba(, ) %,
            rgba(, ) %);
      }
    {% endif %}
  }
  {% endif %}
  {% end_scope_css %}
</style>
{% end_require_css %}