/* ═══════════════════════════════════════════════
   Buttons
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2.25rem;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn .icon { transition: transform 0.3s ease; }
.btn:hover .icon { transform: translateX(4px); }

.btn--gold {
  background: var(--gold);
  color: var(--black);
}
.btn--gold:hover {
  background: var(--gold-hover);
  box-shadow: 0 8px 36px rgba(212, 177, 106, 0.44);
  transform: translateY(-4px);
}

.btn--outline {
  border-color: rgba(212, 177, 106, 0.4);
  color: rgba(248, 246, 241, 0.8);
  font-weight: 500;
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-4px);
}

.btn--dark {
  background: var(--black);
  color: var(--ivory);
  padding: 1rem 2rem;
  font-size: 12px;
}
.btn--dark:hover {
  background: #1c1c1c;
  transform: translateY(-1px);
}

.btn--outline-dark {
  border-color: rgba(11, 11, 11, 0.22);
  color: var(--black);
  padding: 1rem 2.5rem;
  font-size: 12px;
  font-weight: 500;
}
.btn--outline-dark:hover {
  background: var(--black);
  color: var(--ivory);
  border-color: var(--black);
  transform: translateY(-1px);
}

.btn--wide { padding-inline: 2.5rem; font-size: 12px; font-weight: 500; }

/* ═══════════════════════════════════════════════
   Navigation
═══════════════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}
.nav.is-scrolled {
  background: rgba(11, 11, 11, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(212, 177, 106, 0.28);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A floor on the clearance between logo, links and actions, so a longer
     menu compresses the links group instead of colliding with the CTA. */
  gap: 1rem;
  height: var(--nav-h);
}

/* The source logo is a square PNG with a large black margin around the
   wordmark. These offsets crop the frame down to the mark itself so the
   logo reads at a proper size without a visible black plate. */
.brand {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 710 / 214;
  flex-shrink: 0;
}
.brand img {
  position: absolute;
  top: -176.6%;
  left: -21.1%;
  height: 461.2%;
  width: auto;
  max-width: none;
  mix-blend-mode: screen;
}

.nav__logo {
  height: 2.5rem;
  transition: opacity 0.3s ease;
}
.nav__logo:hover { opacity: 0.85; }

.nav__links {
  display: none;
  align-items: center;
  gap: 1.75rem;
  flex-shrink: 0;
}

.nav__link {
  position: relative;
  /* Never break a label across two lines. The row is a fixed --nav-h, so a
     second line lands on top of the logo and the buttons — which is exactly
     what the longer Albanian labels used to do. The tiers at the bottom of
     this section are what keep the group inside the available width. */
  white-space: nowrap;
  color: rgba(248, 246, 241, 0.65);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.025em;
  transition: color 0.3s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after { width: 100%; }

.nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--black);
  padding: 0.625rem 1.5rem;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.nav__cta:hover {
  background: var(--gold-hover);
  box-shadow: 0 4px 24px rgba(212, 177, 106, 0.38);
  transform: translateY(-1px);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Icon-only square everywhere except the widest tier (>=1440px), where the
   row finally has room for the word next to the full menu. */
.nav__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: rgba(248, 246, 241, 0.85);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.3s ease;
  flex-shrink: 0;
}
.nav__wa:hover { border-color: var(--gold); color: var(--gold); }
.nav__wa-label { display: none; }

/* ── Language switcher ─────────────────────────────────────
   The trigger deliberately mirrors .nav__wa: a bordered square holding
   just the flag. Language names stay in the markup as .screen-reader-text
   so the control is still announced, but are never shown. */
.lang { position: relative; flex-shrink: 0; }

.lang__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(212, 177, 106, 0.4);
  color: rgba(248, 246, 241, 0.85);
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.lang__toggle:hover { border-color: var(--gold); color: var(--gold); }

.lang__flag {
  display: block;
  width: 1.125rem;
  height: auto;
  flex-shrink: 0;
}
.lang__flag--emoji {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
}

.lang__chevron { display: none; }

.lang.is-open .lang__chevron { transform: rotate(180deg); }
.lang__chevron { transition: transform 0.3s ease; }

.lang__menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  min-width: 0;
  background: var(--black);
  border: 1px solid rgba(212, 177, 106, 0.4);
  padding: 0.375rem 0;
  animation: menuIn 0.22s ease-out;
}
.lang.is-open .lang__menu { display: block; }

.lang__menu .lang__option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 1rem;
  color: rgba(248, 246, 241, 0.75);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s ease, background 0.3s ease;
}
.lang__menu .lang__option:hover {
  color: var(--gold);
  background: rgba(212, 177, 106, 0.08);
}

/* Inside the burger drawer there is no popup — every language is a plain
   row, so it reads like the menu links above it. */
.nav__mobile .lang--mobile {
  display: flex;
  gap: 1.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid rgba(212, 177, 106, 0.2);
  margin-top: 0.25rem;
}
.nav__mobile .lang__option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.nav__mobile .lang__option.is-current { color: var(--gold); }

.nav__toggle {
  color: var(--ivory);
  padding: 0.5rem;
  display: inline-flex;
}
.nav__toggle .icon-close,
.nav__toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 1rem;
  background: var(--black);
  border-top: 1px solid rgba(212, 177, 106, 0.2);
  padding: 1.75rem var(--gutter);
  animation: menuIn 0.22s ease-out;
}
.nav__mobile.is-open { display: flex; }

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.nav__mobile a {
  color: rgba(248, 246, 241, 0.65);
  font-size: 14px;
  font-weight: 500;
  padding-block: 0.25rem;
  transition: color 0.3s ease;
}
.nav__mobile a:hover { color: var(--gold); }

.nav__mobile .nav__mobile-cta {
  margin-top: 0.5rem;
  background: var(--gold);
  color: var(--black);
  padding-block: 0.75rem;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__mobile .nav__mobile-cta:hover { color: var(--black); background: var(--gold-hover); }

/* The desktop nav arrives in two stages. Turning the links, the WhatsApp
   label and the full-width CTA on together at 1280px overflowed the row —
   every item in it is flex-shrink: 0, so nothing could give. Stage one adds
   the links but keeps the actions compact; stage two, once there is real
   room, lets them breathe.

   The row lives inside .shell, so its width stops growing at --max (1440px)
   minus 2 x --gutter-lg = 1312px. Every number below is budgeted against
   that ceiling using the Albanian labels, which are the longest. */
@media (min-width: 1280px) {
  .nav__links,
  .nav__cta   { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__mobile.is-open { display: none; }

  .nav__links { gap: 0.875rem; }
  .nav__link { font-size: 11.5px; letter-spacing: 0.01em; }
  .nav__actions { gap: 0.5rem; }
  .nav__cta { padding: 0.625rem 0.875rem; font-size: 11.5px; letter-spacing: 0.06em; }

  /* Flag + chevron need a touch more room than the square allows. */
  .lang__toggle { width: auto; padding-inline: 0.625rem; gap: 0.375rem; }
  .lang__chevron { display: block; }
}

/* Stage two is the widest the row will ever be. The WhatsApp label costs
   roughly another 110px, so the link gap stays below its old 1.75rem to
   keep the Albanian menu clear of the buttons. */
@media (min-width: 1440px) {
  .nav__links { gap: 1.25rem; }
  .nav__link { font-size: 12px; letter-spacing: 0.02em; }
  .nav__actions { gap: 0.75rem; }
  .nav__cta { padding: 0.625rem 1.25rem; font-size: 12px; letter-spacing: 0.1em; }

  .nav__wa { width: auto; height: auto; padding: 0.625rem 1.25rem; }
  .nav__wa-label { display: inline; }
}

/* ═══════════════════════════════════════════════
   Icons
═══════════════════════════════════════════════ */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
}
.icon--sm  { width: 0.875rem; height: 0.875rem; }
.icon--md  { width: 1.375rem; height: 1.375rem; }
.icon--lg  { width: 1.75rem; height: 1.75rem; }
.icon--thin { stroke-width: 1.4; }
.icon--filled { fill: currentColor; }
/* Official brand marks (X, YouTube, WhatsApp…) are solid glyphs, not outline
   strokes: filling and dropping the stroke keeps them at their intended weight
   instead of adding a 2px outline around every edge. */
.icon--brand { fill: currentColor; stroke: none; }

.icon-box {
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(212, 177, 106, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   Form
═══════════════════════════════════════════════ */
.field { display: block; }

.field__label {
  display: block;
  color: rgba(248, 246, 241, 0.38);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.625rem;
}

.field__input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(212, 177, 106, 0.18);
  color: var(--ivory);
  font-size: 14px;
  padding-bottom: 0.75rem;
  outline: none;
  transition: border-color 0.3s ease;
  border-radius: 0;
}
.field__input::placeholder { color: rgba(248, 246, 241, 0.18); }
.field__input:focus { border-bottom-color: var(--gold); }

select.field__input {
  color: rgba(248, 246, 241, 0.7);
  appearance: none;
  cursor: pointer;
}
select.field__input option { background: var(--black-card); color: var(--ivory); }

textarea.field__input { resize: none; }

.field__error {
  display: none;
  color: #d98b7a;
  font-size: 11px;
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}
.field.has-error .field__input { border-bottom-color: #d98b7a; }
.field.has-error .field__error { display: block; }

.form__status {
  display: none;
  align-items: center;
  gap: 0.625rem;
  color: var(--gold);
  font-size: 13px;
  margin-top: 0.25rem;
}
.form__status.is-visible { display: flex; }

/* ═══════════════════════════════════════════════
   Footer
═══════════════════════════════════════════════ */
.footer { background: var(--black-deep); }

.footer__divider {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(212, 177, 106, 0),
    rgba(212, 177, 106, 0.45),
    rgba(212, 177, 106, 0)
  );
  transform-origin: left;
}

.footer__inner { padding-block: 4rem; }

.footer__grid {
  display: grid;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer__logo {
  height: 2.5rem;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.footer__blurb {
  color: rgba(248, 246, 241, 0.32);
  font-size: 13.5px;
  line-height: 1.85;
  max-width: 20rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
}

.footer__social {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(212, 177, 106, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 246, 241, 0.38);
  transition: all 0.3s ease;
}
.footer__social:hover { border-color: var(--gold); color: var(--gold); }

.footer__heading {
  color: var(--ivory);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.footer__link {
  display: block;
  color: rgba(248, 246, 241, 0.32);
  font-size: 13px;
  margin-bottom: 0.625rem;
  transition: color 0.3s ease;
}
.footer__link:hover { color: var(--gold); }

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(248, 246, 241, 0.32);
  font-size: 13px;
}
.footer__contact-item .icon {
  color: var(--gold);
  width: 0.8125rem;
  height: 0.8125rem;
  stroke-width: 1.8;
  margin-top: 0.125rem;
}

.footer__hours {
  color: rgba(248, 246, 241, 0.32);
  font-size: 13px;
  line-height: 1.8;
}

.footer__rule {
  height: 1px;
  background: rgba(212, 177, 106, 0.12);
  margin-bottom: 1.75rem;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer__bottom p,
.footer__bottom a {
  color: rgba(248, 246, 241, 0.22);
  font-size: 12px;
}
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { transition: color 0.3s ease; }
.footer__legal a:hover { color: var(--gold); }

@media (min-width: 768px) {
  .footer__bottom { flex-direction: row; }
}

@media (min-width: 1024px) {
  .footer__inner { padding-block: 5rem; }
  .footer__grid  { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
.brand--custom.nav__logo img{
 object-fit: cover!important;
  object-position: center;
  width: 230px!important;
}