:root {
  --accent: #e0a66b;
  --cream: #fbf4ea;
  --grad-dark: #241510;
  --grad-mid: #6b4429;
  --sheen: 0.22;
  --wm-color: #fbf4ea;
  --wm-scale: 1;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow: hidden;
  background-color: #241510;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: #241510;
  background-image:
    linear-gradient(298deg, rgba(16, 9, 4, 0.6) 0%, rgba(16, 9, 4, 0) 44%),
    linear-gradient(118deg, rgba(231, 185, 138, 0) 43%, rgba(231, 185, 138, var(--sheen)) 50%, rgba(231, 185, 138, 0) 57%),
    linear-gradient(118deg, var(--grad-dark) 0%, var(--grad-dark) 28%, var(--grad-mid) 50%, var(--grad-dark) 72%, var(--grad-dark) 100%);
  color: var(--cream);
  font-family: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.wrap {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(40px, 8vh, 96px) clamp(24px, 6vw, 64px);
}

.wordmark {
  cursor: default;
  font-family: "Playfair Display", serif;
  font-weight: 600;
  color: var(--wm-color);
  line-height: 0.95;
  margin: 0;
  font-size: calc(clamp(72px, 15vw, 168px) * var(--wm-scale));
  letter-spacing: 0.005em;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);
}

.slogan {
  display: block;
  margin: clamp(18px, 2.6vw, 28px) 0 0;
  font-size: clamp(10px, 1.2vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream);
  font-weight: 400;
  text-align: center;
  padding-left: 0.34em;
  white-space: nowrap;
}

.divider {
  width: clamp(54px, 7vw, 86px);
  height: 1px;
  background: rgba(251, 244, 234, 0.4);
  margin: clamp(40px, 6vh, 64px) 0 0;
}

.contact {
  max-width: 660px;
  margin: clamp(32px, 5vh, 52px) 0 0;
  font-weight: 300;
  font-size: clamp(16px, 1.9vw, 22px);
  line-height: 1.64;
  color: rgba(251, 244, 234, 0.92);
  text-wrap: pretty;
}
.contact a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(224, 166, 107, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact a:focus-visible {
  color: var(--cream);
  border-color: var(--cream);
  outline: none;
}
.mobile-only {
  display: none;
}
@media (hover: hover) {
  .contact a:hover {
    color: var(--cream);
    border-color: var(--cream);
  }
}

.social {
  display: flex;
  gap: clamp(14px, 1.6vw, 18px);
  margin-top: clamp(34px, 5vh, 50px);
}
.social a,
.social button {
  width: clamp(42px, 4.25vw, 49px);
  height: clamp(42px, 4.25vw, 49px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, opacity 0.22s ease;
  opacity: 0.92;
}
.social button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.social a:focus-visible,
.social button:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
  outline: none;
}
@media (hover: hover) {
  .social a:hover,
  .social button:hover {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.social img {
  width: 100%;
  height: 100%;
  display: block;
}
.social .nl-trigger {
  position: relative;
  overflow: visible;
}
.nl-badge {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #e0a66b;
  color: #fff;
  font-family: "Jost", -apple-system, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .nl-badge-txt {
    display: block;
    animation: nlBadgeWobble 2s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes nlBadgeWobble {
    0%,
    100% {
      transform: rotate(10deg);
    }
    50% {
      transform: rotate(-10deg);
    }
  }
}

.foot {
  margin-top: clamp(40px, 6vh, 64px);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 244, 234, 0.5);
}
.ver {
  text-transform: none;
}

.wordmark .ltr {
  display: inline-block;
  will-change: transform, opacity;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  will-change: transform;
}
.rest {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark .ltr {
    opacity: 0;
    transform: translateY(42px) scale(0.66);
    animation: pop 0.74s cubic-bezier(0.33, 1.28, 0.5, 1) forwards;
  }
  .wordmark .ltr:nth-child(1) {
    animation-delay: 0.26s;
  }
  .wordmark .ltr:nth-child(2) {
    animation-delay: 0.42s;
  }
  .wordmark .ltr:nth-child(3) {
    animation-delay: 0.58s;
  }
  .wordmark .ltr:nth-child(4) {
    animation-delay: 0.74s;
  }
  .wordmark .ltr:nth-child(5) {
    animation-delay: 0.9s;
  }
  @keyframes pop {
    0% {
      opacity: 0;
      transform: translateY(42px) scale(0.66);
    }
    60% {
      opacity: 1;
      transform: translateY(-5px) scale(1.03);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .wordmark.wm-done .ltr {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .wordmark.wm-done.dancing .ltr {
    animation: dance 0.62s cubic-bezier(0.36, 0, 0.34, 1.4) both;
  }
  .wordmark.wm-done.dancing .ltr:nth-child(2) {
    animation-delay: 0.06s;
  }
  .wordmark.wm-done.dancing .ltr:nth-child(3) {
    animation-delay: 0.12s;
  }
  .wordmark.wm-done.dancing .ltr:nth-child(4) {
    animation-delay: 0.18s;
  }
  .wordmark.wm-done.dancing .ltr:nth-child(5) {
    animation-delay: 0.24s;
  }
  @keyframes dance {
    0%,
    100% {
      transform: translateY(0) rotate(0);
    }
    25% {
      transform: translateY(-12px) rotate(-7deg);
    }
    55% {
      transform: translateY(0) rotate(5deg);
    }
    78% {
      transform: translateY(-4px) rotate(-2deg);
    }
  }

  .stack.glide {
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .rest > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.ready .rest > * {
    opacity: 1;
    transform: none;
  }
  body.ready .slogan {
    transition-delay: 0.1s;
  }
  body.ready .divider {
    transition-delay: 0.44s;
  }
  body.ready .contact {
    transition-delay: 0.78s;
  }
  body.ready .social {
    transition-delay: 1.14s;
  }
  body.ready .foot {
    transition-delay: 1.46s;
  }

  .social img {
    animation: socialWobble 2s ease-in-out infinite;
    transform-origin: center;
  }
  @keyframes socialWobble {
    0%,
    100% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
  }

  .rotate-ico {
    animation: rotateDevice 2.5s ease-in-out infinite;
  }
  @keyframes rotateDevice {
    0%,
    18% {
      transform: rotate(90deg);
    }
    50%,
    78% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(90deg);
    }
  }
}

@media (max-width: 620px) {
  :root {
    --wm-scale: 1.235;
  }
  .slogan {
    font-size: calc(clamp(10px, 1.2vw, 14px) * 1.2);
    line-height: 1.6;
    white-space: normal;
    max-width: 22em;
    text-wrap: balance;
  }
  .contact {
    font-size: calc(clamp(16px, 1.9vw, 22px) + 1px);
  }
  .mobile-only {
    display: inline;
  }
}

.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px 24px 34px;
  color: var(--cream);
}
.rotate-ico {
  width: clamp(92px, 25.5vw, 143px);
  height: auto;
  transform-origin: center;
}
.rotate-text {
  margin: 0;
  font-size: calc(clamp(10px, 1.2vw, 14px) + 3px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 400;
  padding-left: 0.34em;
}

@media (orientation: landscape) and (max-height: 500px) {
  .wrap {
    display: none;
  }
  .rotate-hint {
    display: flex;
  }
}

.nl-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 9, 4, 0.66);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.nl-overlay[hidden] {
  display: none;
}
.nl-modal {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.nl-close {
  position: absolute;
  top: 17px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #6b4429;
  color: #fbf4ea;
  font-size: 29px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.nl-close:hover {
  background: #8f6230;
}
@media (max-width: 620px) {
  .nl-close {
    top: 20px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .nl-overlay {
    animation: nlFadeIn 0.25s ease both;
  }
  .nl-overlay.nl-closing {
    animation: nlBackdropOut 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .nl-overlay .nl-modal {
    animation: nlSlideIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .nl-overlay.nl-closing .nl-modal {
    animation: nlSlideOut 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes nlFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes nlBackdropOut {
    from {
      background-color: rgba(16, 9, 4, 0.66);
      -webkit-backdrop-filter: blur(3px);
      backdrop-filter: blur(3px);
    }
    to {
      background-color: rgba(16, 9, 4, 0);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
  }
  @keyframes nlSlideIn {
    from {
      transform: translateY(100px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes nlSlideOut {
    from {
      transform: translateY(0);
      opacity: 1;
    }
    to {
      transform: translateY(100px);
      opacity: 0;
    }
  }
}

/* ── Brevo newsletter form (moved from inline <style>; loads after sib-styles.css) ── */
:where(.sib-form-message-panel) {
  display: none;
}
:where(.sib-form-message-panel .sib-notification__icon) {
  width: 20px;
  height: 20px;
}
#sib-container input::placeholder {
  font-family: Helvetica, sans-serif;
  text-align: left;
  color: #c0ccda;
}
#sib-container textarea::placeholder {
  font-family: Helvetica, sans-serif;
  text-align: left;
  color: #c0ccda;
}
#sib-container a {
  text-decoration: underline;
  color: #2bb2fc;
}
.sib-form .entry__field {
  border-radius: 100px !important;
}
#sib-container .input,
#sib-container input.input {
  padding-left: 20px !important;
  padding-right: 20px !important;
  color: #333 !important;
}
#sib-container .checkbox.checkbox_tick_positive {
  border-color: #c0ccd9 !important;
  border-width: 1px !important;
  border-radius: 5px !important;
}
#sib-container .entry__label_optin,
#sib-container .entry__label_optin::after,
#sib-container [data-required] {
  color: #e0a66b !important;
}
.sib-form .entry__error {
  display: none !important;
}
#sib-container .form__entry:has(.entry__error:not(:empty)) .entry__field {
  border-color: #e0a66b !important;
}
#sib-container .form__entry:has(.entry__error:not(:empty)) .checkbox.checkbox_tick_positive {
  border-color: #e0a66b !important;
}
#sib-container input:checked + .checkbox_tick_positive,
#sib-container input:checked ~ .checkbox_tick_positive {
  background-color: #e0a66b !important;
  border-color: #e0a66b !important;
}
.nl-optin-block {
  padding: 8px 0;
  margin-top: -5px;
}
.nl-submit-block {
  padding: 8px 0;
  margin-top: -21.5px;
}
.nl-title-block {
  padding: 8px 0;
}
.nl-input-block {
  padding: 8px 0;
  margin-top: -5px;
}
.nl-note-block {
  padding: 8px 0 0;
}
.nl-note {
  margin: 0;
  font-family: Helvetica, sans-serif;
  font-size: 11px;
  font-style: italic;
  line-height: 1.45;
  text-align: left;
  color: #8a8a8a;
}
#sib-container .sib-form-block__button.sib-form-block__button-with-loader {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}
/* desktop: add bottom padding so popup bottom matches its top */
@media (min-width: 621px) {
  .nl-note-block {
    padding-bottom: 13px;
  }
}
/* mobile: trim top padding so popup top matches its bottom */
@media (max-width: 620px) {
  .nl-title-block {
    padding-top: 0;
    margin-top: -10px;
  }
}