/* Deividas Kvederys — shared design system
   Tokens per design_handoff_photographer_site/README.md */


:root {
  --ivory: #FBF9F4;
  --bg-2: #F3EFE7;
  --dark: #1E1B16;
  --dark-card: #26221B;
  --dark-deep: #141210;
  --muted: #6E675C;
  --hairline: #E7E1D6;
  --hairline-dark: rgba(251, 249, 244, 0.15);
  --hairline-strong: #DDD5C6;
  /* Darkened from #A0824C (3.45:1 on ivory - failed WCAG AA for the 13px
     eyebrows, prices, socials and form errors that use it). #806536 gives
     5.21:1 on ivory and 4.78:1 on the soft ground. */
  --gold: #806536;
  --gold-light: #D8BC85;
  --on-dark: #FBF9F4;

  /* Was Cormorant Garamond, which renders s-caron and z-caron with the caron
   detached and floating above the letter ("uzimtumas" showed a loose mark).
   EB Garamond fixed that but broke uppercase U-macron the same way. Playfair
   Display renders every Lithuanian diacritic correctly in both cases and
   keeps the high-contrast display character the design relies on. */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Outfit', sans-serif;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --section-py: 112px;
  --section-px: 56px;
}

@media (max-width: 768px) {
  :root {
    --section-py: 64px;
    --section-px: 24px;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }
img { max-width: 100%; display: block; }
::selection { background: var(--gold); color: var(--ivory); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* The skip link is the first tab stop on every page — it has to become
   visible once focused, or keyboard users tab into something they can't see. */
.sr-only:focus, .sr-only:focus-visible {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: auto; height: auto; margin: 0; padding: 12px 24px;
  overflow: visible; clip: auto; white-space: normal;
  background: var(--dark); color: var(--ivory);
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Type ---------- */
.eyebrow {
  font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold);
  font-weight: 400;
}
.eyebrow--light { color: var(--gold-light); }
.eyebrow--muted { color: var(--muted); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; margin: 0; text-wrap: pretty; }
h1 { font-size: 72px; line-height: 1.05; }
h2 { font-size: 44px; line-height: 1.2; }
h3 { font-size: 28px; line-height: 1.25; }

@media (max-width: 900px) {
  h1 { font-size: 44px; }
  h2 { font-size: 32px; }
}

p { margin: 0; }
.body-lg { font-size: 17px; line-height: 1.7; }
.body-muted { color: var(--muted); line-height: 1.8; }

.ornament {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.ornament span { width: 80px; height: 1px; background: var(--gold-light); }
.ornament i {
  width: 8px; height: 8px; background: var(--gold); flex-shrink: 0; transform: rotate(45deg);
}

/* ---------- Layout ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding-left: var(--section-px); padding-right: var(--section-px); }
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--soft { background: var(--bg-2); }
.section--tight { max-width: 800px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.grid-2--6-5 { grid-template-columns: 6fr 5fr; }
.grid-2--5-6 { grid-template-columns: 5fr 6fr; }
.grid-2--align-center { align-items: center; }
.grid-2--align-start { align-items: start; }

@media (max-width: 900px) {
  .grid-2, .grid-2--6-5, .grid-2--5-6 { grid-template-columns: 1fr; gap: 48px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 16px 48px; border: 1px solid transparent; cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn-solid { background: var(--dark); color: var(--ivory); }
.btn-solid:hover { background: var(--gold); color: var(--ivory); }
.btn-outline-gold { background: none; border-color: var(--gold); color: var(--gold); }
.btn-outline-gold:hover { background: var(--gold); color: var(--ivory); }
.btn-outline-gold-light { background: none; border-color: var(--gold-light); color: var(--gold-light); }
.btn-outline-gold-light:hover { background: var(--gold-light); color: var(--dark); }

/* ---------- Header / nav ----------
   A real bar with its own space, not an overlay floating on the hero —
   gives the page breathing room at the top and lets the real logo (navy
   ink) sit on a light ground instead of fighting a dark image overlay. */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--section-px);
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
  position: relative; z-index: 50;
}
.logo-mark { height: 46px; width: auto; display: block; }
/* Mark plus the name in live text — the stacked lockup PNG's name line
   would be ~5px tall at header height, so the name is typeset here. */
.logo-lockup { display: flex; align-items: center; gap: 14px; }
.logo-lockup__text { display: flex; flex-direction: column; gap: 5px; }
.logo-lockup__name {
  font-family: var(--font-display); font-size: 17px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--dark); line-height: 1; white-space: nowrap;
}
.logo-lockup__sub {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.34em;
  text-transform: uppercase; color: var(--muted); line-height: 1;
}
.logo-lockup:hover .logo-lockup__name { color: var(--gold); }
/* Between the nav tightening and the hamburger taking over, there is no
   room for both the name and seven nav items — the mark carries alone. */
@media (max-width: 960px) and (min-width: 761px) {
  .logo-lockup__text { display: none; }
}
.wordmark {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dark);
}
.site-nav { display: flex; gap: 36px; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav a { color: var(--dark); }
.site-nav a:hover { color: var(--gold); }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 30;
}
.nav-toggle span {
  display: block; width: 26px; height: 1px; background: var(--dark); margin: 6px 0; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
/* Sits above the sticky CTA bar (40) but below the header (50), so the
   hamburger stays tappable to close the menu. visibility, not just opacity,
   so the closed menu's links are not tab stops. */
.mobile-nav {
  display: none; position: fixed; inset: 0; background: var(--dark); z-index: 45;
  flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0s;
}
.mobile-nav a {
  font-family: var(--font-display); font-size: 32px; color: var(--ivory); letter-spacing: 0.02em;
}
.mobile-nav a:hover { color: var(--gold-light); }

/* Seven items rather than five since the guides joined the menu — the row
   tightens before it would wrap onto a second line. */
@media (max-width: 1080px) {
  .site-nav { gap: 22px; font-size: 13px; }
}
@media (max-width: 880px) {
  .site-nav { gap: 15px; letter-spacing: 0.08em; }
}

@media (max-width: 760px) {
  .site-nav { display: none; }
  .nav-toggle { display: block; }
  .mobile-nav { display: flex; }
  .site-header { padding: 16px 20px; }
  .logo-mark { height: 38px; }
  .logo-lockup { gap: 11px; }
  .logo-lockup__name { font-size: 14px; }
  .logo-lockup__sub { font-size: 8.5px; letter-spacing: 0.3em; }
}

/* ---------- Hero (interior pages) ---------- */
.hero {
  position: relative; min-height: 560px; display: flex; overflow: hidden;
}
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,10,0.72), rgba(20,16,10,0.15) 60%);
}
.hero__content { position: relative; align-self: flex-end; padding: 80px var(--section-px); max-width: 800px; }
.hero__content h1 { color: var(--on-dark); }
.hero__content p { color: rgba(251,249,244,0.85); max-width: 560px; margin-top: 24px; }

@media (max-width: 760px) {
  .hero { min-height: 480px; }
  .hero__content { padding: 56px 20px; }
}

/* ---------- Split hero (homepage) ---------- */
.split-hero { display: flex; height: 88vh; min-height: 600px; }
.split-hero__panel {
  position: relative; flex: 1; display: flex; overflow: hidden;
  transition: flex 0.6s var(--ease);
  animation: fadeUp 0.9s ease both;
}
.split-hero__panel:hover { flex: 1.6; }
.split-hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-hero__divider { width: 1px; background: var(--ivory); z-index: 5; }
.split-hero__content { position: relative; align-self: flex-end; padding: 64px; }
.split-hero__content h2 { color: var(--on-dark); font-size: 64px; margin: 14px 0 18px; }
.split-hero__link {
  display: inline-flex; align-items: center; gap: 12px; color: var(--on-dark);
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid rgba(251,249,244,0.5); padding-bottom: 6px;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .split-hero { flex-direction: column; height: auto; min-height: 0; }
  .split-hero__panel { min-height: 340px; flex: none !important; }
  .split-hero__divider { width: auto; height: 1px; }
  .split-hero__content { padding: 32px; }
  .split-hero__content h2 { font-size: 44px; }
}

/* ---------- Stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
}
.stats--on-dark { background: var(--hairline-dark); border-color: var(--hairline-dark); }
.stat { background: var(--ivory); padding: 44px 32px; text-align: center; }
.stats--on-dark .stat { background: var(--dark); }
.stat__num { font-family: var(--font-display); font-size: 56px; font-weight: 500; }
.stats--on-dark .stat__num { color: var(--on-dark); }
.stat__label { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.stats--on-dark .stat__label { color: rgba(251,249,244,0.65); }

.stats--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 700px) {
  .stats--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .stat { padding: 28px 12px; }
  .stat__num { font-size: 38px; }
  .stat__label { font-size: 11px; }
}

/* ---------- About page ---------- */
.story { display: flex; flex-direction: column; gap: 40px; }
.story__item {
  display: grid; grid-template-columns: 132px 1fr; gap: 32px; align-items: start;
  padding-bottom: 40px; border-bottom: 1px solid var(--hairline-dark);
}
.story__item:last-child { border-bottom: none; padding-bottom: 0; }
.story__key {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light);
  padding-top: 8px;
}
.story__item h3 { color: var(--on-dark); font-size: 24px; }
.story__item p { margin-top: 14px; color: rgba(251,249,244,0.75); line-height: 1.8; }

@media (max-width: 700px) {
  .story__item { grid-template-columns: 1fr; gap: 12px; }
  .story__key { padding-top: 0; }
}

.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.principle { background: var(--ivory); padding: 40px 36px; }
.principle h3 { font-size: 22px; }
.principle p { margin-top: 14px; font-size: 15px; line-height: 1.75; color: var(--muted); }

@media (max-width: 700px) {
  .principles { grid-template-columns: 1fr; }
  .principle { padding: 28px 24px; }
}

/* ---------- Availability calendar ----------
   Was twelve colour-coded bars plus a legend: the visitor had to read a
   colour, hunt for the key, and map it back before learning anything. Each
   month now states its own status, so the legend is gone and the months
   that still have dates free — the ones worth clicking — carry the accent. */
.months {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.month {
  background: rgba(251,249,244,0.04);
  border: 1px solid var(--hairline-dark);
  padding: 22px 16px 20px; text-align: left;
}
.month--open { border-color: rgba(216,188,133,0.55); background: rgba(216,188,133,0.07); }
.month__name {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(251,249,244,0.75);
}
.month--open .month__name { color: var(--gold-light); }
.month__meter { display: flex; gap: 4px; margin: 16px 0 12px; }
.month__meter i {
  flex: 1; height: 3px; background: rgba(251,249,244,0.16); display: block;
}
.month__meter i.is-on { background: var(--gold-light); }
.month__meter i.is-half { background: linear-gradient(90deg, var(--gold-light) 50%, rgba(251,249,244,0.16) 50%); }
.month__status {
  font-family: var(--font-display); font-size: 17px; font-style: italic;
  color: rgba(251,249,244,0.82); line-height: 1.3;
}
.month--open .month__status { color: var(--on-dark); }

@media (max-width: 900px) {
  .months { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .month { padding: 18px 14px 16px; }
  .month__status { font-size: 15px; }
}
@media (max-width: 480px) {
  .months { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Package comparison rows ----------
   A summary inside an article, not the sales section: three dark cards
   mid-page broke the reading, so the same information sits in scannable
   rows where the hours and photo counts line up down the right edge. */
.pkg-compare {
  margin-top: 32px; border: 1px solid var(--hairline-strong);
  border-radius: 2px; overflow: hidden;
}
.pkg-row {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 24px; align-items: center;
  padding: 26px 28px; border-bottom: 1px solid var(--hairline);
  transition: background 0.3s var(--ease);
}
.pkg-row:last-child { border-bottom: none; }
.pkg-row:hover { background: var(--bg-2); }
.pkg-row--featured { background: rgba(216,188,133,0.09); }
.pkg-row--featured:hover { background: rgba(216,188,133,0.15); }
.pkg-row__num {
  font-family: var(--font-display); font-size: 30px; font-style: italic;
  color: var(--gold); text-align: center; line-height: 1;
}
.pkg-row__main h3 { font-size: 21px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pkg-row__main p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pkg-row__tag {
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--gold); padding: 3px 10px; border-radius: 20px;
}
.pkg-row__specs {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right;
}
.pkg-row__hours {
  font-family: var(--font-display); font-size: 19px; white-space: nowrap;
}
.pkg-row__photos {
  font-size: 12px; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap;
}

@media (max-width: 640px) {
  .pkg-row { grid-template-columns: 36px 1fr; gap: 16px; padding: 20px; }
  .pkg-row__specs { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; gap: 14px; margin-top: 4px; }
  .pkg-row__hours { font-size: 16px; }
  .pkg-row__num { font-size: 24px; }
}

/* ---------- Full-bleed photo band ----------
   A breath between two text sections. The source frames are portrait, so
   object-position carries the subject rather than the empty top half. */
.photo-band { margin: 0; width: 100%; overflow: hidden; }
.photo-band img {
  width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover;
  object-position: 50% 82%;
}

/* ---------- Long-form article ----------
   A single measured column: these guides are read top to bottom, so the
   line length is capped near 70 characters and the headings do the
   structural work instead of boxes or rules. */
.article__head {
  max-width: 780px; text-align: center;
  padding-top: var(--section-py); padding-bottom: 44px;
}
.article__head h1 { font-size: clamp(32px, 5.4vw, 54px); margin-top: 18px; }
.article__meta {
  margin-top: 22px; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
/* Lead photo runs wider than the text column — the article is by a
   photographer, so the picture is allowed to be the first argument. */
.article__lead { margin: 0 auto 56px; max-width: 1100px; padding: 0 var(--section-px); }
.article__lead img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }

@media (max-width: 700px) {
  .article__lead { margin-bottom: 36px; padding: 0; }
}

.article__body { max-width: 780px; padding-bottom: var(--section-py); }
.article__body > p { font-size: 17px; line-height: 1.85; margin-bottom: 24px; }
.article__body h2 {
  font-size: clamp(26px, 3.6vw, 36px); margin: 64px 0 8px;
  padding-top: 28px; border-top: 1px solid var(--hairline);
}
.article__body h3 { font-size: 22px; margin: 40px 0 6px; }
.article__body a { color: var(--gold); border-bottom: 1px solid rgba(128,101,54,0.3); }
.article__body a:hover { border-bottom-color: var(--gold); }
.article__list { margin: 0 0 26px; padding-left: 0; list-style: none; }
.article__list li {
  font-size: 16.5px; line-height: 1.75; margin-bottom: 12px;
  padding-left: 26px; position: relative;
}
.article__list li::before {
  content: '—'; position: absolute; left: 0; color: var(--gold);
}
.article__list--num { counter-reset: step; }
.article__list--num li::before { content: counter(step) '.'; counter-increment: step; font-size: 14px; }
/* The FAQ block inherits the site accordion; it only needs air above it. */
.article__body .faq-item:first-of-type { margin-top: 8px; }

@media (max-width: 700px) {
  .article__body > p { font-size: 16px; }
  .article__body h2 { margin-top: 48px; }
}

/* ---------- Article hub ----------
   Built to hold a growing library: a lead article, topic filters that carry
   their counts, and a grid that reflows from three columns to one. */
.post-featured {
  display: block; background: var(--dark); color: var(--on-dark);
  padding: 56px; position: relative; overflow: hidden;
  transition: background 0.4s var(--ease);
}
.post-featured::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease);
}
.post-featured:hover { background: var(--dark-card); color: var(--on-dark); }
.post-featured:hover::after { transform: scaleX(1); }
.post-featured__body { max-width: 760px; }
.post-featured h2 { color: var(--on-dark); font-size: clamp(26px, 3.8vw, 40px); margin-top: 18px; }
.post-featured p { margin-top: 18px; color: rgba(251,249,244,0.72); font-size: 16.5px; line-height: 1.75; }
.post-featured .post__cat { color: var(--gold-light); border-color: rgba(216,188,133,0.5); }
.post-featured .post__time { color: rgba(251,249,244,0.5); }
.post-featured .post__more { color: var(--gold-light); }

.post-filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--hairline);
}
.post-filter {
  background: none; border: 1px solid var(--hairline-strong); cursor: pointer;
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 11px 20px; border-radius: 40px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.post-filter span { opacity: 0.55; margin-left: 6px; }
.post-filter:hover { border-color: var(--gold); color: var(--gold); }
.post-filter.is-active { background: var(--dark); border-color: var(--dark); color: var(--ivory); }

.post-empty { text-align: center; color: var(--muted); padding: 40px 0; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.post {
  background: var(--ivory); padding: 0 0 30px; display: flex; flex-direction: column; gap: 14px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.post > :not(.post__img) { margin-left: 32px; margin-right: 32px; }
.post__img { display: block; overflow: hidden; margin-bottom: 6px; }
.post__img img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform 0.6s var(--ease); }
.post:hover .post__img img { transform: scale(1.04); }
.post:hover { background: #fff; transform: translateY(-2px); }
.post[hidden] { display: none; }
.post__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.post__cat {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(128,101,54,0.35); padding: 3px 10px; border-radius: 20px;
}
.post__time { font-size: 12px; color: var(--muted); }
.post h3 { font-size: 21px; line-height: 1.32; }
.post h3 a:hover { color: var(--gold); }
.post p { font-size: 14.5px; line-height: 1.7; color: var(--muted); flex: 1; }
.post__more { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .post-featured { padding: 40px 32px; }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: 1fr; }
  .post { padding: 26px 24px; }
  .post-filters { justify-content: flex-start; gap: 8px; }
  .post-filter { padding: 9px 14px; font-size: 11px; }
}

/* ---------- Seasonal cross-sell banner ---------- */
.season-banner {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: center;
  margin-top: 56px; padding: 28px; background: var(--ivory);
  border: 1px solid var(--hairline-strong);
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.season-banner:hover { border-color: var(--gold); transform: translateY(-3px); }
.season-banner img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.season-banner h3 { margin-top: 12px; font-size: clamp(22px, 3vw, 30px); }
.season-banner p { margin-top: 14px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.season-banner__cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid currentColor; padding-bottom: 6px;
}
.season-banner:hover .season-banner__cta span { transform: translateX(4px); }
.season-banner__cta span { transition: transform 0.3s var(--ease); }

@media (max-width: 700px) {
  .season-banner { grid-template-columns: 1fr; gap: 24px; padding: 20px; }
  .season-banner img { aspect-ratio: 3/2; }
}

.quote-band { background: var(--bg-2); padding: 100px var(--section-px); text-align: center; }
.quote-band blockquote {
  max-width: 760px; margin: 0 auto 24px; font-family: var(--font-display); font-size: 30px;
  font-style: italic; line-height: 1.5;
}

/* ---------- Instagram ---------- */
.ig-avatars { display: flex; justify-content: center; gap: 28px; margin-bottom: 44px; flex-wrap: wrap; }
.ig-avatar { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ig-avatar__ring {
  width: 76px; height: 76px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
}
.ig-avatar__ring img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--ivory); box-sizing: border-box;
}
.ig-avatar span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ig-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 8px; }
.ig-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.ig-grid a:hover img { transform: scale(1.05); }

@media (max-width: 700px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Reviews grid (mixed quote cards + real photos) ---------- */
/* ---------- Reviews carousel ----------
   Built on scroll-snap rather than a JS transform track: swipe, trackpad and
   momentum are the browser's, so the gesture feels native on a phone and the
   section is still browsable if the script never runs. */
.review-slider { position: relative; }
/* Arrows are centred against the quote, not the quote plus the dot row. */
.review-stage { position: relative; }
.review-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; gap: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.review-track::-webkit-scrollbar { display: none; }
.review-slide {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 28px; padding: 8px 4px 0;
}
.review-slide .stars { color: var(--gold); letter-spacing: 0.3em; font-size: 13px; }
.review-slide blockquote {
  margin: 0; max-width: 780px;
  font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 38px);
  font-style: italic; line-height: 1.4; text-wrap: pretty;
}
.review-slide figcaption {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}

/* Arrows sit outside the quote on wide screens and are hidden on touch
   widths, where swiping is the gesture and the dots show position. They stay
   hidden until the script marks the slider enhanced — a dead arrow on a
   no-JS page is worse than no arrow. */
.review-nav {
  display: none;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: none; border: 1px solid var(--hairline-strong); color: var(--dark);
  font-family: var(--font-body); font-size: 22px; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
@media (min-width: 1101px) {
  .review-slider.is-enhanced .review-nav { display: flex; }
}
.review-nav:hover { background: var(--dark); border-color: var(--dark); color: var(--ivory); }
.review-nav[disabled] { opacity: 0.25; cursor: default; }
.review-nav[disabled]:hover { background: none; border-color: var(--hairline-strong); color: var(--dark); }
.review-nav--prev { left: -8px; }
.review-nav--next { right: -8px; }

.review-dots { display: flex; justify-content: center; gap: 10px; margin-top: 44px; flex-wrap: wrap; }
.review-dots:empty { display: none; }
.review-dots button {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--hairline-strong); border: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.review-dots button.is-active { background: var(--gold); transform: scale(1.5); }

@media (max-width: 560px) {
  .review-slide { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .review-track { scroll-behavior: auto; }
}

/* ---------- Work gallery grid ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* For a gallery still filling up: auto-fit collapses the empty tracks, so two
   photos read as a deliberate pair rather than a half-empty row, and the grid
   tightens toward four columns on its own as more are added. */
.gallery-grid--roomy { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.gallery-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.gallery-grid a:hover img { transform: scale(1.05); }

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--hairline-strong); }
.faq-item__q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: none; border: none; padding: 26px 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 24px; color: var(--dark);
}
.faq-item__sign { font-family: var(--font-body); font-size: 20px; color: var(--gold); flex-shrink: 0; }
.faq-item__a {
  margin: 0; padding: 0 0 26px; font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 640px;
  display: none;
}
.faq-item.is-open .faq-item__a { display: block; }

@media (max-width: 600px) {
  .faq-item__q { font-size: 19px; }
}

/* ---------- Contact form ---------- */
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form input, .contact-form textarea {
  border: none; border-bottom: 1px solid var(--hairline-strong); background: none;
  padding: 14px 0; font-family: var(--font-body); font-size: 16px; color: var(--dark); outline: none;
  width: 100%;
}
.contact-form textarea { resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); opacity: 0.8; }
.contact-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; min-height: 20px; }
.form-status--success { color: #4a7a4a; }
.form-status--error { color: var(--gold); }
/* A face beside the form: the visitor is about to write to a person, not to
   an address. object-position keeps him in frame on the wide crop. */
.contact-portrait {
  display: flex; align-items: center; gap: 22px; margin: 32px 0 0;
  padding-bottom: 28px; border-bottom: 1px solid var(--hairline);
}
/* Square, matching the photo-square treatment used elsewhere on the brand.
   The file is cropped square around the subject, so the frame needs no
   object-position correction. */
.contact-portrait img {
  width: 156px; height: 156px; flex-shrink: 0;
  object-fit: cover; object-position: center;
}

@media (max-width: 480px) {
  .contact-portrait { gap: 18px; }
  .contact-portrait img { width: 112px; height: 112px; }
}
.contact-portrait figcaption { font-size: 15px; line-height: 1.7; color: var(--muted); }
.contact-portrait strong {
  display: block; font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--dark); margin-bottom: 6px;
}

.contact-links { display: flex; flex-direction: column; gap: 16px; font-size: 16px; color: var(--muted); margin-top: 28px; }
.contact-links a { color: var(--dark); }
.contact-socials { display: flex; gap: 24px; margin-top: 8px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.contact-socials a { color: var(--gold); }

/* ---------- Packages ---------- */
.packages {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline-dark); border: 1px solid var(--hairline-dark);
}
.package {
  background: var(--dark); padding: 52px 40px; display: flex; flex-direction: column; gap: 20px;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.45s var(--ease), background 0.45s var(--ease);
}
.package--featured { background: var(--dark-card); }

/* The numeral the card already carried, blown up and dropped behind the
   content. It reads as texture at rest and warms up when the card is
   hovered, which is what gives the row its pulse without any motion. */
.package__ghost {
  position: absolute; top: -0.32em; right: 0.06em; z-index: -1;
  font-family: var(--font-display); font-size: 210px; line-height: 1; font-style: italic;
  color: rgba(251,249,244,0.05); pointer-events: none; user-select: none;
  transition: color 0.5s var(--ease), transform 0.6s var(--ease);
}
/* A gold hairline that wipes across the top edge on hover. transform on a
   pseudo-element, so it costs nothing to animate. */
.package::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.package:hover { transform: translateY(-6px); background: var(--dark-card); }
.package--featured:hover { background: #2c2820; }
.package:hover::before { transform: scaleX(1); }
.package:hover .package__ghost { color: rgba(216,188,133,0.16); transform: translateY(6px); }

.package__num { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.package h3 { color: var(--on-dark); font-size: 32px; }
.package p { font-size: 15px; line-height: 1.75; color: rgba(251,249,244,0.72); flex: 1; }
.package__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.package__list li { font-size: 13.5px; line-height: 1.5; color: rgba(251,249,244,0.72); padding-left: 16px; position: relative; }
.package__list li::before { content: '—'; position: absolute; left: 0; color: var(--gold-light); }

@media (max-width: 900px) {
  .packages { grid-template-columns: 1fr; }
  .package__ghost { font-size: 150px; }
}

/* ---------- Services grid (Verslui) ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.service-card { display: flex; flex-direction: column; gap: 20px; }
.service-card__img { aspect-ratio: 4/3; overflow: hidden; }
.service-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.service-card:hover .service-card__img img { transform: scale(1.04); }
.service-card p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.service-card__price { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: -8px; }
.chip-row { display: flex; justify-content: center; gap: 16px; margin-top: 56px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--hairline-strong); padding: 12px 28px; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Estimate checklist (Verslui) ---------- */
.checklist { background: var(--bg-2); padding: 48px; }
.checklist__label { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 28px; }
.checklist ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.checklist li { display: flex; gap: 16px; font-size: 15px; line-height: 1.6; }
.checklist li span { color: var(--gold); }

@media (max-width: 500px) {
  .checklist { padding: 32px 24px; }
}

/* ---------- Lightbox ----------
   Progressive enhancement over plain <a href="full-image.jpg"> thumbnail
   links — with JS disabled or before it loads, clicking still opens the
   real image directly (good for SEO/crawlers/no-JS), JS just intercepts
   the click and shows this overlay instead. */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 16, 10, 0.94);
  opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease);
  /* Horizontal drags belong to the swipe handler, not to browser back-gestures. */
  touch-action: pan-y;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__figure { position: relative; max-width: 92vw; max-height: 88vh; margin: 0; }
.lightbox__img {
  display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: fixed; background: none; border: none; color: var(--ivory); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { color: var(--gold-light); }
.lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.lightbox__prev, .lightbox__next {
  top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 32px; border-radius: 50%;
}
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
.lightbox__counter {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: rgba(251,249,244,0.6); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
}

@media (max-width: 700px) {
  .lightbox__prev, .lightbox__next { width: 44px; height: 44px; font-size: 26px; }
  .lightbox__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}

/* ---------- Sticky mobile contact bar ----------
   71% of traffic is mobile but converts far worse than desktop (GA4), and
   sitewide form/contact interaction is close to zero — a persistent,
   low-friction call/message bar is a standard fix for local-service sites. */
.mobile-cta-bar { display: none; }
@media (max-width: 760px) {
  .mobile-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--dark); border-top: 1px solid var(--hairline-dark);
  }
  .mobile-cta-bar a {
    flex: 1; text-align: center; padding: 14px 8px; font-size: 12.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--on-dark);
  }
  .mobile-cta-bar a:first-child { border-right: 1px solid var(--hairline-dark); }
  .mobile-cta-bar a:last-child { background: var(--gold-light); color: var(--dark); }
  /* Keep the fixed bar from covering interactive content: extra
     clearance on whichever section happens to end the page, and
     scroll-margin so anchor jumps (FAQ/CTA links to #kontaktai) don't
     land with the submit button tucked behind the bar. */
  body { padding-bottom: 52px; }
  main > section:last-of-type { padding-bottom: calc(var(--section-py) + 56px); }
  .btn, #kontaktai { scroll-margin-bottom: 72px; }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--hairline); padding: 40px var(--section-px);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-size: 13px; letter-spacing: 0.12em; color: var(--muted);
}
.site-footer .wordmark { color: var(--dark); font-size: 18px; }
.footer-links { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 700px) {
  .site-footer { flex-direction: column; text-align: center; }
}


/* ==========================================================================
   Visual polish
   ========================================================================== */

/* ---------- Scroll-driven reveals ----------
   CSS-only, via animation-timeline: view(). Scoped to discrete card
   components (never to a container holding the 118-image gallery, which
   would promote a huge composited layer).

   Deliberately NOT the old JS/IntersectionObserver approach: that one set
   opacity:0 up front, so if the observer never fired — crawlers, prerender,
   screenshot tools — the content stayed invisible forever. Here the hidden
   state only exists inside @supports, so any browser without scroll-driven
   animations simply renders everything visible. Nothing can get stuck. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .service-card,
    .package,
    .month,
    .stat,
    .faq-item {
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    /* The package feature lists arrive one line at a time. Scroll-driven
       animations ignore animation-delay — progress is scroll position, not
       elapsed time — so the stagger is built by walking each item's
       animation-range further down the entry instead. */
    .package__list li {
      animation: revealUp linear both;
      animation-timeline: view();
    }
    .package__list li:nth-child(1) { animation-range: entry 10% entry 30%; }
    .package__list li:nth-child(2) { animation-range: entry 14% entry 34%; }
    .package__list li:nth-child(3) { animation-range: entry 18% entry 38%; }
    .package__list li:nth-child(4) { animation-range: entry 22% entry 42%; }
    .package__list li:nth-child(5) { animation-range: entry 26% entry 46%; }
    .package__list li:nth-child(6) { animation-range: entry 30% entry 50%; }
  }
}
/* Starts at 0.55, not 0. Before an element enters the view() range the
   fill state applies, so a from-opacity of 0 would render every below-fold
   card fully blank to anything that doesn't scroll — crawlers, prerenderers,
   full-page screenshots. A floor keeps the motion visible while guaranteeing
   the content is always legible. */
@keyframes revealUp {
  from { opacity: 0.55; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Split hero ----------
   Slow ambient drift on the imagery, and a gentler expand on hover — the
   old flex:1.6 shoved the other panel around hard enough to feel jumpy. */
.split-hero__panel:hover { flex: 1.25; }
.split-hero__panel img {
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
  transform: scale(1.04);
}
.split-hero__panel:hover img { transform: scale(1.09); }
.split-hero__panel .hero__overlay { transition: opacity 0.6s var(--ease); }
.split-hero__panel:hover .hero__overlay { opacity: 0.82; }

/* Arrow eases outward on hover — small, but it makes the panel read as
   clickable rather than decorative. */
.split-hero__link span[aria-hidden] { transition: transform 0.3s var(--ease); display: inline-block; }
.split-hero__panel:hover .split-hero__link span[aria-hidden] { transform: translateX(6px); }
.split-hero__link { border-bottom-color: rgba(251,249,244,0.5); transition: border-bottom-color 0.3s var(--ease); }
.split-hero__panel:hover .split-hero__link { border-bottom-color: var(--gold-light); }

/* ---------- Gallery ----------
   Warm-up on hover instead of only scaling: the neighbouring thumbnails
   settle back so the hovered frame is what the eye lands on. */
.gallery-grid a { position: relative; background: var(--bg-2); }
.gallery-grid img { transition: transform 0.6s var(--ease), filter 0.4s var(--ease); }
.gallery-grid a::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(216,188,133,0);
  transition: box-shadow 0.35s var(--ease);
  pointer-events: none;
}
.gallery-grid a:hover img { transform: scale(1.06); filter: brightness(1.04); }
.gallery-grid a:hover::after { box-shadow: inset 0 0 0 2px rgba(216,188,133,0.85); }
.gallery-grid a:focus-visible::after { box-shadow: inset 0 0 0 2px var(--gold); }

@media (hover: hover) {
  .gallery-grid:hover img { filter: brightness(0.94); }
  .gallery-grid a:hover img { filter: brightness(1.06); }
}

/* ---------- Buttons ---------- */
.btn-solid, .btn-outline-gold, .btn-outline-gold-light { position: relative; }
.btn:active { transform: translateY(1px); }

/* Split-hero panel titles are spans, not headings: the homepage <h1> needs to
   name the service, and two <h2>s used to sit above it in the document. */
.split-hero__title {
  display: block; font-family: var(--font-display); font-weight: 500;
  color: var(--on-dark); font-size: 64px; line-height: 1.05; margin: 14px 0 18px;
}
/* Carries the display treatment the Stieglitz quote used to get from <h1>. */
.display-quote {
  font-family: var(--font-display); font-weight: 500; line-height: 1.15;
  font-size: clamp(30px, 6.2vw, 52px); text-wrap: pretty;
}
@media (max-width: 760px) {
  .split-hero__title { font-size: 44px; }
}

/* Hero action row (business page) */
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
@media (max-width: 480px) {
  .hero__actions .btn { padding: 14px 28px; }
}

/* ---------- Dropdown navigation ----------
   Opens on hover AND on focus-within, so it is reachable by keyboard with
   no JS. The panel keeps display:block and is hidden with visibility, so
   the links stay out of the tab order until the group is actually open. */
/* ---------- Sub-navigation ----------
   Replaces the hover dropdowns. The top menu now lists only the two real
   choices; once a visitor has picked one, its sections are laid out here in
   full — visible rather than hidden behind a hover, and reachable on touch,
   where a dropdown never worked in the first place. */
.subnav {
  background: var(--bg-2); border-bottom: 1px solid var(--hairline);
  position: relative; z-index: 20;
}
.subnav__track {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 0 var(--section-px);
  max-width: 1200px; margin: 0 auto;
}
.subnav a {
  padding: 15px 18px; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; position: relative;
  transition: color 0.3s var(--ease);
}
.subnav a::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.subnav a:hover { color: var(--gold); }
.subnav a:hover::after { transform: scaleX(1); }

/* Below the wrap width the row becomes a swipeable strip rather than
   wrapping into three stacked rows that push the hero off the screen. */
@media (max-width: 860px) {
  .subnav__track {
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    padding: 0 12px;
  }
  .subnav__track::-webkit-scrollbar { display: none; }
  .subnav a { padding: 13px 12px; font-size: 11.5px; letter-spacing: 0.12em; }
}


@media (max-width: 1180px) {
  .site-nav { gap: 24px; font-size: 13px; }
}