/* Shared shell — measured from the 1:1 Figma frame exports (1440px wide). */
:root {
  --cream: #FFFBF4;
  --sand: #F6F1E7;
  --white: #ffffff;
  --black: #11120D;
  --text: #11120D;
  --brown: #523F31;
  --btn-text: #FFFBF4;
  --rule: #000000;
  --line: #11120D;
  --icon: #999999;
  --input-border: #565449;
  --footer-bg: #FBF9F5;
  --font: "Montserrat", sans-serif;
  --page-w: 1440px;
  /* The design's content column is 1224px at x=109, so the gutters are uneven. */
  --pad-x: 109px;
  --pad-r: 107px;
  --nav-h: 92px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

body.modal-open { overflow: hidden; }

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

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }

.page {
  position: relative;
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  background: var(--cream);
  min-height: 100vh;
}

/* Nav — 91px bar plus a full-bleed 1px rule, overlaid on the hero photo */
.nav {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.nav--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(239, 233, 222, 0.415);
}

.nav--static {
  background: var(--cream);
}

.nav__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 91px;
  padding: 1.2px 70.5px 0 var(--pad-x);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 62px;
}

.nav__link {
  font-size: 21px;
  line-height: 24px;
  white-space: nowrap;
}

/* Figma gives each link a fixed box; the 600px group ends 70.5px from the
   right edge, which is what fixes the "Paslaugos" position. */
.nav__links .nav__link { flex: none; }
.nav__links .nav__link:nth-child(1) { width: 120px; }
.nav__links .nav__link:nth-child(2) { width: 88px; }
.nav__links .nav__link:nth-child(3) { width: 109px; }
.nav__links .nav__link:nth-child(4) { width: 97px; }

.nav__link:hover,
.nav__link--active { opacity: 0.55; }

.nav__line {
  height: 1px;
  background: var(--line);
}

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  position: absolute;
  left: 11px;
}

.nav__toggle span { top: 21px; }
.nav__toggle span::before { content: ""; top: -7px; }
.nav__toggle span::after { content: ""; top: 7px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--btn-text);
  background: var(--brown);
  text-align: center;
  flex-shrink: 0;
}

.btn__arrow { width: 24px; height: 8px; flex-shrink: 0; }

.btn--small {
  width: 288px;
  height: 32px;
}

.btn--bar {
  width: 100%;
  height: 48px;
}

.btn--card {
  width: 100%;
  height: 64px;
}

.btn--pill {
  width: 100%;
  height: 32px;
  border-radius: 16px;
}

.btn:hover { background: #3d2e24; }

/* Footer — Figma: 1440x287, column, gap 31 after the 1px rule. */
.footer {
  position: relative;
  height: 287px;
  padding: 31px var(--pad-x) 0;
  background: rgba(246, 241, 231, 0.4);
}

.footer__line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
}

.footer__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: 1222px;
  height: 256px;
  margin: 0 auto;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 230px;
  height: 235px;
  flex: 0 1 230px;
}

.footer__cols {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 232px;
  width: 808px;
  height: 240px;
  flex: 0 1 808px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer__col--nav { width: 184px; flex: 0 1 184px; }
.footer__col--contact { width: 392px; flex: 1 1 392px; min-width: 0; }

.footer__title {
  font-size: 28px;
  line-height: 32px;
  font-weight: 400;
  margin: 0;
}

.footer__nav,
.footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__nav a,
.footer__contact {
  font-size: 21px;
  line-height: 24px;
}

.footer__nav a:hover { opacity: 0.6; }

.footer__contact {
  display: flex;
  align-items: center;
  gap: 22px;
}

.footer__contact img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.footer__copyright {
  font-size: 12px;
  line-height: 24px;
  color: #000000;
}

@media (max-width: 1100px) {
  .footer { height: auto; min-height: 287px; padding: 31px 40px 24px; }
  .footer__inner { height: auto; min-height: 256px; gap: 40px; }
  .footer__cols { width: auto; flex: 1 1 auto; gap: 48px; height: auto; }
  .footer__brand { flex: 0 0 230px; }
}

@media (max-width: 768px) {
  :root { --pad-x: 24px; --pad-r: 24px; }

  .nav__bar { padding-right: var(--pad-x); }
  .nav__toggle { display: block; }

  .nav__links .nav__link:nth-child(n) { width: auto; }

  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 24px 24px;
    gap: 16px;
  }

  .nav.is-open .nav__links { display: flex; }

  .footer { padding: 31px var(--pad-x) 32px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 32px; height: auto; }
  .footer__cols { flex-direction: column; width: 100%; gap: 32px; height: auto; }
  .footer__brand { height: auto; }
}