/* ARKA Stay · Atmosfera verde. Scoped to the homepage hero. */
@font-face {
  font-family: "Arka Zalando";
  src: url("/assets/arka/zalando-sans-expanded-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

.home.home-arka .top:not(.is-scroll-docked) {
  color: #e5d9cb;
  mix-blend-mode: normal;
}

.home-arka .arka-hero {
  --arka-olive: #615b43;
  --arka-sand: #e5d9cb;
  --arka-gutter: max(5%, calc((100vw - 1680px) / 2));
  --arka-footer-height: clamp(72px, 6.25vw, 120px);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100svh;
  min-height: 680px;
  max-height: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--arka-olive);
  color: var(--arka-sand);
  font-family: "Arka Zalando", Arial, sans-serif;
}

.arka-visual {
  position: absolute;
  inset: 0 0 var(--arka-footer-height);
  z-index: -3;
  display: block;
}

.arka-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.arka-shade {
  position: absolute;
  inset: 0 0 var(--arka-footer-height);
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(90deg, #615b43f5 0%, #615b43c7 17%, #615b436e 34%, #615b4324 51%, #615b4300 68%);
}

.arka-top-shade {
  position: absolute;
  inset: 0 0 auto;
  height: 200px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(#181d16a3, #181d1600);
}

.arka-content {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: min(680px, 60%);
  margin-left: var(--arka-gutter);
  padding-top: clamp(136px, 19svh, 240px);
  padding-bottom: 28px;
}

.arka-eyebrow {
  margin: 0 0 clamp(22px, 2.4svh, 28px);
  font: 400 clamp(11px, .73vw, 14px)/1.6 "Arka Zalando", Arial, sans-serif;
  letter-spacing: .13em;
  color: #fff;
}

.arka-brand {
  width: clamp(210px, 17.6vw, 338px);
  height: auto;
  object-fit: contain;
  margin: 0 0 clamp(28px, 3.5svh, 44px);
}

.arka-content h1 {
  margin: 0 0 24px;
  font-family: "Arka Zalando", Arial, sans-serif;
  font-size: clamp(32px, 2.61vw, 50px);
  font-weight: 300;
  line-height: 1.27;
  letter-spacing: -.025em;
  color: var(--arka-sand);
}

.arka-product {
  margin: 0 0 clamp(24px, 2.5svh, 32px);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

.arka-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 246px;
  min-height: 48px;
  padding: 13px 20px;
  background: var(--arka-sand);
  color: var(--arka-olive);
  font-size: clamp(14px, .99vw, 19px);
  line-height: 1.5;
  font-weight: 400;
  border: 1px solid transparent;
  transition: background-color .18s ease, border-color .18s ease;
}

.arka-cta span { font-size: 1.25em; line-height: 1; }
.arka-cta:hover { background: #f5f0e8; color: var(--arka-olive); }
.arka-cta:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

.arka-footer {
  position: relative;
  z-index: 1;
  flex: 0 0 var(--arka-footer-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-inline: var(--arka-gutter);
  margin-top: auto;
  background: var(--arka-olive);
  border-top: 1px solid #e5d9cb38;
}

.arka-footer p {
  margin: 0;
  font-size: clamp(11px, .94vw, 18px);
  line-height: 1.65;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .arka-content { max-width: 66%; }
  .arka-content h1 { font-size: 34px; }
  .arka-brand { width: 218px; }
  .arka-footer p { font-size: 11px; }
}

@media (max-width: 760px) {
  .home.home-arka .top { height: 100px; }
  .home.home-arka .top-actions { display: none; }
  .home.home-arka .top .menu-trigger { font-size: 11px; }

  .home-arka .arka-hero {
    --arka-gutter: 7.4%;
    --arka-footer-height: 88px;
    height: auto;
    min-height: 100svh;
  }

  .arka-visual {
    inset: 0 0 auto;
    height: 125vw;
  }

  .arka-image { object-fit: cover; object-position: center top; }

  .arka-shade {
    inset: 0 0 auto;
    height: calc(125vw + 72px);
    background: linear-gradient(180deg, #615b4300 36%, #615b4317 55%, #615b4380 72%, #615b43e8 91%, #615b43 100%);
  }

  .arka-top-shade { height: 165px; }

  .arka-content {
    max-width: 85.2%;
    margin-left: var(--arka-gutter);
    padding-top: 92vw;
    padding-bottom: 32px;
  }

  .arka-eyebrow { font-size: 10px; line-height: 1.7; margin-bottom: 16px; }
  .arka-brand { width: clamp(116px, 30vw, 170px); margin-bottom: 24px; }
  .arka-content h1 { font-size: clamp(26px, 6.7vw, 38px); margin-bottom: 18px; line-height: 1.23; }
  .arka-product { font-size: clamp(13px, 3.5vw, 18px); margin-bottom: 22px; }
  .arka-cta { min-width: 220px; min-height: 46px; padding: 12px 17px; font-size: 13px; }
  .arka-footer { justify-content: center; align-items: flex-start; flex-direction: column; gap: 7px; padding-block: 18px; }
  .arka-footer p { font-size: 10px; }
}

@media (min-width: 761px) and (max-height: 700px) {
  .home-arka .arka-hero { min-height: 660px; }
  .arka-content { padding-top: 126px; }
  .arka-brand { width: 206px; margin-bottom: 24px; }
  .arka-content h1 { font-size: 32px; margin-bottom: 18px; }
  .arka-product { font-size: 16px; margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .arka-cta { transition: none; }
}