/* =================================================================
   Kitsy Art — styles
   ----------------------------------------------------------------
   Сторінкові стилі. Структура:
     1. Tokens (CSS-змінні: кольори, шрифти, відступи)
     2. Reset
     3. Base
     4. Layout (container)
     5. Header
     6. Language switch
     7. Main (заглушка)
     8. Footer
   ================================================================= */


/* ---------- 1. Tokens ------------------------------------------- */
:root {
  /* Colors — paper & ink */
  --bg:           #FDFAF0;
  --bg-soft:      #F7F1E0;
  --ink:          #2A2418;
  --ink-soft:     #5C4D34;

  /* Colors — bronze accents */
  --bronze:       #B89564;
  --bronze-deep:  #A07848;
  --bronze-light: #DCC59A;
  --copper:       #B88555;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
  --font-body:    'EB Garamond', Garamond, Georgia, serif;

  /* Layout */
  --container-max: 1200px;
  --pad-x-mob:     20px;
  --pad-x-desk:    48px;

  /* Lines */
  --hairline-color: var(--bronze);
  --hairline-width: 0.6px;
}


/* ---------- 2. Reset -------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

a {
  color: inherit;
}


/* ---------- 3. Base --------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Anchor offset: section tops shouldn't hide under sticky header */
section[id] {
  scroll-margin-top: 72px;
}

@media (min-width: 900px) {
  section[id] {
    scroll-margin-top: 96px;
  }
}

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);

  min-height: 100vh;
  display: flex;
  flex-direction: column;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Матеріальність фону: тепле зерно + волокно паперу + нерівномірний теплий
   відтінок. Шари лежать на КОЖНІЙ секції — над її фоном, але під контентом
   (isolation + z-index:-1), тож проступають і на hero, і на bg-soft. */
.site-main > section { position: relative; isolation: isolate; }

/* Ледь помітні акварельні плями / нерівномірний теплий відтінок.
   Парні секції дзеркаляться — сусідні не повторюють одна одну. */
.site-main > section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;                 /* ← загальна сила плям */
  background-image:
    radial-gradient(45% 32% at 18% 12%, rgba(184, 149, 100, 0.06),  transparent 70%),
    radial-gradient(40% 28% at 84% 26%, rgba(160, 120, 72,  0.055), transparent 70%),
    radial-gradient(52% 34% at 32% 60%, rgba(220, 197, 154, 0.06),  transparent 70%),
    radial-gradient(44% 30% at 76% 82%, rgba(184, 149, 100, 0.05),  transparent 70%);
}
.site-main > section:nth-of-type(even)::before { transform: scale(-1, 1); }

/* Дрібне зерно + волокно паперу: SVG-шум (fractalNoise), знебарвлений. */
.site-main > section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.20;             /* ← сила зерна (4× від базового, з лупи) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Мобілка: зерно дрібніше й ледь помітне (десктоп лишається 0.20 / 180px). */
@media (max-width: 767px) {
  .site-main > section::after { opacity: 0.04; background-size: 100px 100px; }
}


/* ---------- 4. Layout ------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x-mob);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--pad-x-desk);
  }
}


/* ---------- 5. Header ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 240, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--hairline-width) solid var(--hairline-color);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.site-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.site-logo img {
  height: 44px;
  width: auto;
}

@media (min-width: 768px) {
  .site-logo img {
    height: 56px;
  }
  .site-header__inner {
    padding-block: 24px;
  }
}


/* ---------- 6. Language switch ---------------------------------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lang-switch__current {
  color: var(--ink);
  font-weight: 600;
}

.lang-switch__divider {
  color: var(--bronze);
}

.lang-switch__link {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.lang-switch__link:hover {
  color: var(--ink);
}


/* ---------- 7. Main --------------------------------------------- */
.site-main {
  flex: 1;
}

/* (page-placeholder лишився як no-op, секції тепер мають свої padding'и) */
.page-placeholder {
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink-soft);
}


/* ---------- 8. Footer ------------------------------------------- */
.site-footer {
  border-top: var(--hairline-width) solid var(--hairline-color);
}

.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 24px;
}

.site-footer__brand,
.site-footer__year {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--bronze-deep);
}


/* ---------- 9. Hero --------------------------------------------- */
.hero {
  padding-block: 80px 64px;
}

.hero__inner {
  text-align: center;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 18ch;
  margin-inline: auto;
}

.hero__fleuron {
  margin: 28px auto 36px;
  color: var(--bronze);
  display: flex;
  justify-content: center;
}

.hero__cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .hero {
    padding-block: 120px 96px;
  }
  .hero__fleuron {
    margin: 36px auto 44px;
  }
  .hero__cta {
    gap: 18px;
  }
}


/* ---------- 10. Buttons ----------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--hairline-width) solid var(--bronze);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn--primary {
  background: var(--bronze-deep);
  color: var(--bg);
  border-color: var(--bronze-deep);
}

.btn--primary:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.btn--ghost:hover {
  background: var(--bronze-deep);
  color: var(--bg);
  border-color: var(--bronze-deep);
}

.btn--sm {
  padding: 10px 18px;
  font-size: 10.5px;
  letter-spacing: 2.4px;
}


/* ---------- 11. Header — nav, CTA, burger, mobile menu --------- */
.site-nav {
  display: none;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.2s ease;
}

.site-nav__link:hover {
  color: var(--bronze-deep);
}

.site-header__cta {
  display: none;
  align-items: center;
  gap: 20px;
  margin-left: 28px;
}

.site-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: auto;
}

.site-burger span {
  display: block;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}

.site-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.site-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.site-mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 24px var(--pad-x-mob);
  border-top: var(--hairline-width) solid var(--hairline-color);
  background: var(--bg);
}

.site-mobile-menu[hidden] {
  display: none;
}

.site-mobile-menu__link {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-block: 8px;
  border-bottom: var(--hairline-width) solid var(--bronze-light);
}

.site-mobile-menu__btn {
  margin-top: 8px;
}

.lang-switch--mobile {
  margin-top: 8px;
  justify-content: center;
}

@media (min-width: 900px) {
  .site-nav {
    display: flex;
  }
  .site-header__cta {
    display: flex;
  }
  .site-burger {
    display: none;
  }
  .site-mobile-menu {
    display: none !important;
  }
}


/* ---------- 12. Section heads (shared) -------------------------- */
.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 26ch;
  margin-inline: auto;
}

.section-divider {
  margin: 18px auto 0;
  color: var(--bronze);
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .section-head {
    margin-bottom: 64px;
  }
}


/* ---------- 13. Services + Callout ------------------------------ */
.services {
  padding-block: 72px;
  border-top: var(--hairline-width) solid var(--hairline-color);
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 600px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1000px) {
  .services__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.service-card {
  padding: 28px 22px;
  background: var(--bg-soft);
  border: var(--hairline-width) solid var(--hairline-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 36, 24, 0.06);
}

.service-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 12px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.service-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.callout {
  margin-top: 48px;
  padding: 28px 24px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.callout__text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.4;
  font-style: italic;
  max-width: 70ch;
  margin: 0;
}

.callout__text strong {
  color: var(--bronze-light);
  font-style: normal;
  font-weight: 600;
}

.callout__link {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--bronze-light);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.callout__link:hover {
  transform: translateX(4px);
  color: var(--bg);
}

@media (min-width: 768px) {
  .services {
    padding-block: 96px;
  }
  .callout {
    margin-top: 64px;
    padding: 36px 32px;
  }
}


/* ---------- 14. Audiences --------------------------------------- */
.audiences {
  padding-block: 72px;
  background: var(--bg-soft);
}

.audiences__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .audiences__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }
}

.audience-card {
  padding: 22px 24px;
  border-left: 2px solid var(--bronze);
}

.audience-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.audience-card__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .audiences {
    padding-block: 96px;
  }
}


/* ---------- 15. Why us ------------------------------------------ */
.why {
  padding-block: 72px;
}

.why__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}

@media (min-width: 700px) {
  .why__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
  }
}

.why-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: var(--hairline-width) solid var(--bronze);
  letter-spacing: -0.005em;
}

.why-card__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .why {
    padding-block: 96px;
  }
}


/* ---------- 16. Process (4 steps) ------------------------------- */
.process {
  padding-block: 72px;
  background: var(--bg-soft);
}

.process__steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  position: relative;
}

@media (min-width: 900px) {
  .process__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  /* Dotted bronze connectors between steps */
  .process__steps::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 14%;
    right: 14%;
    border-top: 1px dashed var(--bronze);
    z-index: 0;
  }
}

.process-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--hairline-width) solid var(--bronze);
  color: var(--bronze-deep);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}

.process-step__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}

.process-step__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 28ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .process {
    padding-block: 96px;
  }
}


/* ---------- 17. Works (masonry placeholder) --------------------- */
.works {
  padding-block: 72px;
}

.gallery-chapter {
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin: 0 0 26px;
}

/* A chapter that follows a gallery (e.g. "Covers" after illustrations) gets breathing room */
.gallery + .gallery-chapter { margin-top: 56px; }

/* Gallery — masonry composition (mobile-first; matches the mobile mockup) */
.gallery {
  display: grid;
  gap: 10px;
  margin-bottom: 36px;
}

/* Illustrations — set 1 (mobile layout) */
.gallery--illus1 {
  grid-template-columns: 427fr 58fr 247fr 313fr;
  grid-template-rows: 444fr 176fr 442fr 47fr 386fr 362fr;
  aspect-ratio: 1045 / 1857;
  grid-template-areas:
    "comic town town  town"
    "comic mush mush  mush"
    "lib   mush mush  mush"
    "lib   .    craft craft"
    "pri   pri  craft craft"
    "pri   pri  girl  black";
}

/* Illustrations — set 2 (mobile layout) */
.gallery--illus2 {
  grid-template-columns: 513fr 292fr 260fr;
  grid-template-rows: 419fr 290fr 296fr 465fr 393fr;
  aspect-ratio: 1065 / 1863;
  grid-template-areas:
    "horses fairy   fairy"
    "horses warrior warrior"
    "comic  warrior warrior"
    "comic  harbor  harbor"
    "tora   tora    boys";
}

/* Covers — mobile layout */
.gallery--covers {
  grid-template-columns: 236fr 131fr 91fr 608fr;
  grid-template-rows: 334fr 480fr 496fr 517fr;
  aspect-ratio: 1066 / 1827;
  grid-template-areas:
    "personnel silage   silage   moth"
    "workwear  workwear .        moth"
    "master    master   heritage heritage"
    "echo      echo     dash     dash";
}

/* Covers — set 2, mobile layout */
.gallery--covers2 {
  grid-template-columns: 741fr 311fr;
  grid-template-rows: 440fr 120fr 306fr 249fr 137fr 412fr;
  aspect-ratio: 1052 / 1664;
  grid-template-areas:
    "minisvit ninety"
    "minisvit ty"
    "balance  ty"
    "balance  boho"
    "yuriy    boho"
    "yuriy    galli";
}

.gallery__item {
  grid-area: auto;
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: var(--hairline-width) solid var(--hairline-color);
  background: var(--bg-soft);
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.gallery__item:hover img,
.gallery__item:focus-visible img { transform: scale(1.045); }

.gallery__item:focus-visible {
  outline: 2px solid var(--bronze-deep);
  outline-offset: 2px;
}

.gallery__item--comic { grid-area: comic; }
.gallery__item--town  { grid-area: town; }
.gallery__item--pri   { grid-area: pri; }
.gallery__item--lib   { grid-area: lib; }
.gallery__item--mush  { grid-area: mush; }
.gallery__item--girl  { grid-area: girl; }
.gallery__item--craft { grid-area: craft; }
.gallery__item--black { grid-area: black; }
.gallery__item--horses  { grid-area: horses; }
.gallery__item--fairy   { grid-area: fairy; }
.gallery__item--harbor  { grid-area: harbor; }
.gallery__item--warrior { grid-area: warrior; }
.gallery__item--boys    { grid-area: boys; }
.gallery__item--tora    { grid-area: tora; }
.gallery__item--echo      { grid-area: echo; }
.gallery__item--workwear  { grid-area: workwear; }
.gallery__item--moth      { grid-area: moth; }
.gallery__item--master    { grid-area: master; }
.gallery__item--silage    { grid-area: silage; }
.gallery__item--dash      { grid-area: dash; }
.gallery__item--personnel { grid-area: personnel; }
.gallery__item--heritage  { grid-area: heritage; }
.gallery__item--minisvit  { grid-area: minisvit; }
.gallery__item--yuriy     { grid-area: yuriy; }
.gallery__item--ty        { grid-area: ty; }
.gallery__item--boho      { grid-area: boho; }
.gallery__item--galli     { grid-area: galli; }
.gallery__item--ninety    { grid-area: ninety; }
.gallery__item--balance   { grid-area: balance; }

.works__cta {
  text-align: center;
}

/* Desktop composition (matches the desktop mockup) */
@media (min-width: 768px) {
  .works { padding-block: 96px; }

  .gallery {
    gap: 14px;
    margin-bottom: 48px;
  }

  .gallery--illus1 {
    grid-template-columns: 391fr 607fr 300fr 80fr 500fr;
    grid-template-rows: 435fr 141fr 21fr 446fr;
    aspect-ratio: 1878 / 1043;
    grid-template-areas:
      "comic town pri  pri   lib"
      "comic mush pri  pri   lib"
      "black mush pri  pri   lib"
      "black mush girl craft craft";
  }

  .gallery--illus2 {
    grid-template-columns: 417fr 446fr 575fr 468fr;
    grid-template-rows: 419fr 195fr 454fr;
    aspect-ratio: 1906 / 1068;
    grid-template-areas:
      "comic horses fairy   harbor"
      "comic horses warrior boys"
      "tora  tora   warrior boys";
  }

  .gallery--covers {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1.408fr 1.386fr;
    aspect-ratio: 1906 / 1065;
    grid-template-areas:
      "echo workwear moth      master   silage"
      "dash dash     personnel heritage heritage";
  }

  .gallery--covers2 {
    grid-template-columns: 419fr 316fr 73fr 363fr 314fr 428fr;
    grid-template-rows: 1fr 1fr;
    aspect-ratio: 1920 / 1070;
    grid-template-areas:
      "minisvit minisvit yuriy yuriy   yuriy   ty"
      "boho     galli    galli ninety  balance balance";
  }
}

/* ---------- 17b. Gallery lightbox ------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 84px;
  background: rgba(42, 36, 24, 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox[aria-hidden="false"] {
  display: flex;
  animation: modal-fade 0.18s ease;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border: var(--hairline-width) solid var(--bronze);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  animation: modal-rise 0.22s ease;
}

.lightbox__group {
  position: absolute;
  top: 22px;
  left: 16px;
  right: 16px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bronze-light);
  pointer-events: none;
}

.lightbox__counter {
  position: absolute;
  bottom: 54px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--bronze-light);
  pointer-events: none;
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--bg);
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { opacity: 1; color: var(--bronze-light); }

.lightbox__close { top: 14px; right: 14px; width: 44px; height: 44px; }

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox__nav--prev { left: 6px; }
.lightbox__nav--next { right: 6px; }

.lightbox__footer {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .lightbox { padding: 72px 24px 92px; }
  .lightbox__nav--prev { left: 24px; }
  .lightbox__nav--next { right: 24px; }
}


/* ---------- 18. Guarantees -------------------------------------- */
.guarantees {
  padding-block: 72px;
  background: var(--bg-soft);
}

.guarantees__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 700px) {
  .guarantees__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

.guarantee-card {
  padding: 22px 24px 22px 28px;
  background: var(--bg);
  border-left: 2px solid var(--bronze);
}

.guarantee-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.guarantee-card__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (min-width: 768px) {
  .guarantees {
    padding-block: 96px;
  }
}


/* ---------- 19. FAQ (native <details> accordion) ---------------- */
.faq {
  padding-block: 72px;
}

.faq__list {
  max-width: 760px;
  margin-inline: auto;
}

.faq-item {
  border-bottom: var(--hairline-width) solid var(--bronze);
}

.faq-item:first-child {
  border-top: var(--hairline-width) solid var(--bronze);
}

.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  position: relative;
  transition: color 0.2s ease;
  letter-spacing: -0.005em;
}

.faq-item__q::-webkit-details-marker {
  display: none;
}

.faq-item__q::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border-right: 1px solid var(--bronze);
  border-bottom: 1px solid var(--bronze);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.25s ease;
}

.faq-item[open] .faq-item__q::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

.faq-item__q:hover {
  color: var(--bronze-deep);
}

.faq-item__a {
  padding: 0 44px 24px 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.faq-item__a p {
  max-width: 64ch;
}

@media (min-width: 768px) {
  .faq {
    padding-block: 96px;
  }
}


/* ---------- 20. Final CTA --------------------------------------- */
.final-cta {
  padding-block: 80px;
  background: var(--bg-soft);
}

.final-cta__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding: 48px 24px;
  background: var(--bg);
  border: var(--hairline-width) solid var(--bronze);
  position: relative;
}

.final-cta__inner::before,
.final-cta__inner::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
}

.final-cta__inner::before {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid var(--bronze-deep);
  border-left: 1.5px solid var(--bronze-deep);
}

.final-cta__inner::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid var(--bronze-deep);
  border-right: 1.5px solid var(--bronze-deep);
}

.final-cta__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 44px);
  color: var(--ink);
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.final-cta__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 28px;
}

.final-cta__btn {
  margin-bottom: 18px;
}

.final-cta__note {
  font-size: 11px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--bronze-deep);
}

@media (min-width: 768px) {
  .final-cta {
    padding-block: 112px;
  }
  .final-cta__inner {
    padding: 64px 40px;
  }
}


/* ---------- 21. Modal (consultation form) ----------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[aria-hidden="false"] {
  display: flex;
  animation: modal-fade 0.18s ease;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 36, 24, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--bg);
  border: var(--hairline-width) solid var(--bronze);
  padding: 48px 40px 40px;
  text-align: center;
  animation: modal-rise 0.22s ease;
}

.modal__panel::before,
.modal__panel::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.modal__panel::before {
  top: -1px;
  left: -1px;
  border-top: 1.5px solid var(--bronze-deep);
  border-left: 1.5px solid var(--bronze-deep);
}
.modal__panel::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1.5px solid var(--bronze-deep);
  border-right: 1.5px solid var(--bronze-deep);
}

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

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.modal__close:hover { color: var(--bronze-deep); }

.modal__fleuron {
  margin: 0 auto 20px;
  color: var(--bronze);
  display: flex;
  justify-content: center;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 4vw, 30px);
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.modal__intro {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 36ch;
  margin-inline: auto;
}

.modal__form { text-align: left; }

.modal__field { margin-bottom: 18px; }

.modal__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 6px;
}

.modal__input {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-soft);
  border: var(--hairline-width) solid var(--bronze-light);
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.modal__input:focus {
  border-color: var(--bronze);
  background: var(--bg);
}
.modal__input::placeholder {
  color: var(--ink-soft);
  opacity: 0.5;
}

.modal__error {
  font-size: 13.5px;
  color: #8C2F23;
  background: rgba(140, 47, 35, 0.07);
  padding: 10px 12px;
  margin-bottom: 14px;
  border-left: 2px solid #8C2F23;
}

.modal__submit {
  width: 100%;
  margin-top: 6px;
}

.modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Honeypot — visually hidden but in the DOM for spam bots to fill */
.modal__honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

@media (max-width: 520px) {
  .modal__panel {
    padding: 40px 22px 28px;
  }
  .modal__title { font-size: 24px; }
}