/* Варіант B «Вечірнє світло».
   Темний кінематографічний герой, де світло лампи з логотипа висвічує кухню.
   Широкий гротеск, таблетки керування, бенто на смузі кольору абажура. */
@property --r { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root {
  --night: #181513;
  --night-2: #25211e;
  --paper: #f6f3ee;
  --ink: #1e1a17;
  --muted: #655e56;
  --glow: #d8bd9c;
  --sand: #d7c3ab;
  --line: #dcd5cb;
  --lamp: #c6a988;
  --radius: 26px;
  --gutter: clamp(18px, 2.8vw, 40px);
  --display: 'Geologica', 'Segoe UI', Roboto, Arial, sans-serif;
  --text: 'Onest', 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote, dl, dd, fieldset { margin: 0; padding: 0; border: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--glow); color: var(--night); }
:focus-visible { outline: 2px solid #a9835a; outline-offset: 3px; }
.dark :focus-visible, .hero :focus-visible, .overlay :focus-visible, .pills :focus-visible { outline-color: var(--glow); }

h1, h2, h3, .h-m, .h-l { font-family: var(--display); font-weight: 300; text-wrap: balance; letter-spacing: -.02em; }
.h-l { font-size: clamp(32px, 4.3vw, 62px); line-height: 1.08; }
.h-m { font-size: clamp(25px, 2.5vw, 36px); line-height: 1.2; max-width: 26ch; letter-spacing: -.012em; }
h3 { font-size: 21px; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; }

.paper { background: var(--paper); }
.dark { background: var(--night); color: #f3eee7; }
.sec { padding: clamp(72px, 9vw, 130px) var(--gutter); padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.sec--tight { padding-bottom: clamp(28px, 3vw, 44px); padding-top: 0; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px clamp(24px, 3vw, 48px); align-items: start; }
.label { display: flex; align-items: center; gap: 10px; padding-top: 8px; font-size: 15px; }
.label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(24px, 3vw, 44px); margin-top: clamp(32px, 4vw, 60px); }
.two p { max-width: 46ch; }
.two .btn { margin-top: 20px; }
.center { display: flex; justify-content: center; margin-top: 52px; }

/* Кнопки-таблетки */
.btn { display: inline-flex; align-items: center; gap: 16px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 500 13px/1 var(--text); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.btn svg { width: 22px; height: 11px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.btn:hover svg { transform: translateX(4px); }
.btn--line { color: #fff; border-color: rgba(255, 255, 255, .8); }
.btn--line:hover { background: rgba(255, 255, 255, .12); }
.btn--solid { background: #fff; color: var(--ink); }
.btn--solid:hover { background: var(--glow); }
.btn--ink { color: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink); color: #fff; }

/* Шапка */
.pills { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 16px max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left)); pointer-events: none; }
.pills__right { display: flex; gap: 8px; }
.pill { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--night); color: #fff; font: 400 16px/1 var(--display); text-decoration: none; transition: background .3s; }
.pill:hover { background: #38322c; }
.pill--logo { padding: 0 18px; }
.pill--logo svg { width: 84px; height: 24px; }
.pill--phone { font-size: 14px; font-family: var(--text); }
.pill--phone svg { width: 17px; height: 17px; }
.is-stuck:not(.is-past-hero) .pill { background: rgba(24, 21, 19, .72); }

/* Оверлей меню */
.overlay { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); background: var(--night); visibility: hidden; clip-path: inset(0 0 0 100%); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s .6s; }
.overlay.is-open { visibility: visible; clip-path: inset(0); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
.overlay__list { display: grid; grid-auto-rows: 1fr; background: var(--paper); color: var(--ink); }
.overlay__list a { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; padding: 0 clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s, padding-left .35s cubic-bezier(.2, .8, .2, 1); }
.overlay__list a:last-child { border-bottom: 0; }
.overlay__list a:hover { background: #ece6dd; padding-left: clamp(30px, 4vw, 58px); }
.overlay__list .n { font-size: 14px; color: var(--muted); }
.overlay__list .t { font: 300 clamp(20px, 2.1vw, 30px)/1.15 var(--display); letter-spacing: -.012em; }
.overlay__list .go { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 30px; border: 1px solid #b4aca0; border-radius: 999px; transition: background .25s, color .25s, border-color .25s; }
.overlay__list .go svg { width: 18px; height: 9px; }
.overlay__list a:hover .go { background: var(--ink); border-color: var(--ink); color: #fff; }
.overlay__brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: clamp(30px, 5vh, 56px) clamp(24px, 3vw, 48px) clamp(24px, 4vh, 40px); background: var(--night-2); color: #fff; min-height: 0; overflow-y: auto; }
.overlay__close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--paper); color: var(--ink); z-index: 2; transition: background .2s; }
.overlay__close:hover { background: var(--glow); }
.overlay__close svg { width: 20px; height: 20px; }
.overlay__logo { width: 100%; max-width: 760px; height: auto; aspect-ratio: 1004/277; margin-top: 28px; }
.overlay__foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: end; }
.overlay__links a, .overlay__meta a { display: block; padding-block: 5px; font-size: 16px; text-decoration: none; }
.overlay__links a { font: 300 22px/1.3 var(--display); }
.overlay__links a:hover, .overlay__meta a:hover { color: var(--glow); }
.overlay__meta { justify-self: end; text-align: right; }
.overlay__lang { display: flex; justify-content: flex-end; gap: 12px; margin-top: 10px; font-size: 15px; }
.overlay__lang b { font-weight: 400; color: #bdb4a8; }
.overlay__lang a { display: inline; padding: 0; }

/* Герой */
.hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(100svh, 1000px); overflow: hidden; background: var(--night); color: #fff; text-align: center; isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 58%; }
.hero__base { filter: brightness(.3) saturate(.7) contrast(1.05); }
.hero__lit { --x: 66%; --y: 56%; filter: brightness(.86) saturate(1.04); -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, rgba(0, 0, 0, .75) 42%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0, rgba(0, 0, 0, .75) 42%, rgba(0, 0, 0, 0) 100%); animation: lampOn 2.2s .35s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes lampOn { from { --r: 0px; } to { --r: clamp(280px, 38vmax, 640px); } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 68% 62% at 50% 50%, rgba(14, 11, 9, .55) 0, rgba(14, 11, 9, .28) 60%, rgba(14, 11, 9, .1) 100%), linear-gradient(to bottom, rgba(14, 11, 9, .4), rgba(14, 11, 9, 0) 26%); }
.hero__inner { position: relative; z-index: 2; padding: 104px var(--gutter) 84px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 96px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; max-width: 13.5em; margin-inline: auto; }
.hero h1 em { font-style: normal; color: var(--glow); }
.hero__sub { margin-top: 24px; font: 400 clamp(17px, 1.6vw, 22px)/1.35 var(--display); }
.hero__note { margin-top: 18px; font-size: 16px; color: #e2dcd3; }
.hero__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Цифри */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(72px, 10vw, 150px); border-top: 1px solid var(--line); padding-top: 22px; }
.stats dd { font: 300 clamp(28px, 3.1vw, 46px)/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stats dt { order: 2; margin-top: 8px; font-size: 15px; color: var(--muted); }
.stats > div { display: flex; flex-direction: column; }

/* Панелі послуг */
.panels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
.panels a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: clamp(440px, 72vh, 720px); padding: 28px; overflow: hidden; color: #fff; text-decoration: none; background: var(--night); }
.panels img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.panels a::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 9, .78) 0, rgba(14, 11, 9, .25) 45%, rgba(14, 11, 9, .08) 100%); }
.panels a:hover img { transform: scale(1.05); }
.panels h3, .panels p { position: relative; z-index: 1; }
.panels h3 { font-size: clamp(23px, 2.1vw, 30px); font-weight: 300; }
.panels p { max-width: 30ch; margin-top: 8px; font-size: 15px; line-height: 1.45; color: #f0ebe4; }

/* Бенто */
.band { padding: clamp(72px, 9vw, 120px) var(--gutter); background: var(--sand); }
.band__title { max-width: 19ch; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; max-width: 1240px; margin-inline: auto; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; padding: 28px; border-radius: var(--radius); background: #fbf9f6; overflow: hidden; }
.tile__icon { width: 38px; height: 38px; margin-bottom: auto; padding-bottom: 0; color: #8a6f54; flex: none; }
.tile h3 { margin-top: 28px; font-size: 24px; font-weight: 300; }
.tile--photo h3 { margin-top: 0; }
.tile p { margin-top: 8px; font-size: 16px; line-height: 1.45; color: #4d463f; }
.tile--a { grid-column: span 4; }
.tile--b { grid-column: span 8; }
.tile--c { grid-column: span 5; }
.tile--d { grid-column: span 3; }
.tile--e { grid-column: span 4; }
.tile--f { grid-column: span 7; }
.tile--g { grid-column: span 5; }
.tile--photo { color: #fff; background: var(--night); }
.tile--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 11, 9, .8) 0, rgba(14, 11, 9, .2) 55%, rgba(14, 11, 9, 0) 100%); }
.tile--photo > div { position: relative; z-index: 1; }
.tile--photo p { color: #f0ebe4; }
.tile--dark { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; background: var(--night); color: #fff; }
.tile--dark img { flex: none; width: clamp(92px, 11vw, 150px); aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; border-radius: 16px; }
.tile--dark blockquote p { margin: 0; font: 300 clamp(22px, 2.3vw, 32px)/1.2 var(--display); letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.tile--dark cite { display: block; margin-top: 12px; font-size: 14px; font-style: normal; color: #c9c0b4; }

/* Мозаїка проєктів */
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 16px; margin-top: clamp(40px, 5vw, 72px); }
.mosaic a { display: block; text-decoration: none; }
.mosaic .m-2 { grid-column: span 2; }
.mosaic img { width: 100%; height: clamp(240px, 31vw, 460px); object-fit: cover; transition: filter .4s; }
.mosaic a:hover img { filter: brightness(.9); }
.mosaic h3 { margin-top: 12px; font-size: 17px; font-weight: 400; }

/* Етапи */
.steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.steps__side { position: sticky; top: 104px; }
.steps__side p { max-width: 38ch; margin-top: 18px; color: #d4ccc1; }
.steps__list { counter-reset: st; }
.steps__list li { counter-increment: st; display: grid; grid-template-columns: 64px minmax(0, 1fr); padding-block: 20px 22px; border-top: 1px solid #3f3934; }
.steps__list li::before { content: '(' counter(st) ')'; padding-top: 3px; font-size: 15px; color: var(--glow); font-variant-numeric: tabular-nums; }
.steps__list h3 { font-weight: 300; font-size: 24px; }
.steps__list p { grid-column: 2; margin-top: 5px; font-size: 16px; color: #d4ccc1; }

/* Стрічка брендів */
.brands { overflow: hidden; padding-block: 34px; border-bottom: 1px solid var(--line); }
.brands__track { display: flex; width: max-content; gap: 56px; animation: slide 46s linear infinite; font: 300 clamp(24px, 2.8vw, 40px)/1.1 var(--display); letter-spacing: -.015em; white-space: nowrap; color: #5d564e; }
.brands:hover .brands__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(calc(-50% - 28px)); } }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px clamp(32px, 6vw, 96px); }
.faq__side { display: flex; flex-direction: column; gap: 36px; justify-content: space-between; }
.askcard { padding: 28px; border-radius: var(--radius); background: var(--night); color: #fff; }
.askcard h3 { font-size: 24px; font-weight: 300; }
.askcard p { margin: 8px 0 22px; color: #d4ccc1; font-size: 16px; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 76px; padding-block: 16px; font: 300 clamp(19px, 1.6vw, 23px)/1.25 var(--display); letter-spacing: -.01em; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary svg { flex: none; width: 22px; height: 22px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
details[open] summary svg { transform: rotate(45deg); }
details p { max-width: 62ch; padding-bottom: 24px; color: #4d463f; }

/* Контакт */
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 6vw, 96px); }
.clist { margin-top: 40px; }
.clist > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); padding-block: 8px; font-size: 16px; }
.clist dt { color: #b9b0a4; }
.clist a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lead { display: grid; gap: 22px; align-content: start; }
.lead__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.field label, .chips legend { display: block; margin-bottom: 6px; font-size: 14px; color: #c9c0b4; }
.field input, .field textarea { display: block; width: 100%; min-height: 46px; padding: 10px 0; border: 0; border-bottom: 1px solid #6a6157; border-radius: 0; background: transparent; color: #fff; font: 400 17px/1.4 var(--text); transition: border-color .2s; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--glow); box-shadow: 0 1px 0 var(--glow); }
.field [aria-invalid="true"] { border-color: #ff9d85; box-shadow: 0 1px 0 #ff9d85; }
.field__err { margin-top: 6px; font-size: 14px; color: #ffb6a3; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { float: left; width: 100%; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid #6a6157; border-radius: 999px; font-size: 15px; transition: background .2s, color .2s, border-color .2s; }
.chips input:hover + span { border-color: var(--glow); }
.chips input:checked + span { background: var(--glow); border-color: var(--glow); color: var(--night); }
.chips input:focus-visible + span { outline: 2px solid var(--glow); outline-offset: 2px; }
.lead button { justify-self: start; cursor: pointer; }
.lead__done { padding: 14px 16px; border-radius: 14px; background: var(--night-2); font-size: 15px; outline: none; }

/* Підвал */
.foot { padding: 0 var(--gutter) 88px; background: var(--night); color: #efe9e1; font-size: 15px; }
.foot__mark { color: #fff; padding-top: 16px; border-top: 1px solid #3f3934; }
.foot__mark svg { display: block; width: 100%; height: auto; aspect-ratio: 1004/277; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.foot__cols > * { padding-top: 12px; border-top: 1px solid #efe9e1; }
.foot__cols p { margin-bottom: 14px; }
.foot__cols a { display: block; padding-block: 4px; color: #cfc6ba; text-decoration: none; }
.foot__cols a:hover { color: #fff; }
.foot__base { margin-top: 40px; color: #b9b0a4; font-size: 14px; }

@media (max-width: 1000px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .label { padding-top: 0; }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panels a { height: 420px; }
  .steps, .faq, .contact__grid { grid-template-columns: minmax(0, 1fr); }
  .steps__side { position: static; }
  .tile--a, .tile--e, .tile--d, .tile--c, .tile--g { grid-column: span 6; }
  .tile--b, .tile--f { grid-column: span 12; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .pill--phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pill--phone { width: 44px; padding: 0; justify-content: center; }
  .hero h1 { font-size: clamp(42px, 12.6vw, 60px); }
  .hero__inner { padding-inline: 20px; }
  .hero__cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .hero__cta .btn { justify-content: space-between; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panels a { height: 74vw; min-height: 300px; padding: 22px; }
  .tile--a, .tile--e, .tile--d, .tile--c, .tile--g, .tile--b, .tile--f { grid-column: span 12; }
  .tile { min-height: 200px; }
  .tile--b, .tile--c { min-height: 300px; }
  .tile--dark { align-items: flex-start; }
  .mosaic { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mosaic .m-2 { grid-column: auto; }
  .mosaic img { height: 62vw; }
  .steps__list li { grid-template-columns: 48px minmax(0, 1fr); }
  .lead__two { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Меню на телефоні: спершу бренд і сторінки, нижче послуги */
  .overlay { display: flex; flex-direction: column-reverse; justify-content: flex-end; overflow-y: auto; clip-path: inset(0 0 100% 0); }
  .overlay.is-open { clip-path: inset(0); }
  .overlay__brand { flex: none; gap: 22px; padding: 20px 20px 24px; overflow: visible; }
  .overlay__logo { width: 62%; margin-top: 8px; }
  .overlay__close { top: 12px; right: 12px; }
  .overlay__links a { font-size: 26px; }
  .overlay__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .overlay__meta a { font-size: 14px; }
  .overlay__list { flex: 1 0 auto; }
  .overlay__list a { grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 60px; padding-inline: 20px; }
  .overlay__list .t { font-size: 18px; }
  .overlay__list .go { width: 46px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__lit { animation: none; --r: 640px; }
  .brands__track { animation: none; flex-wrap: wrap; width: auto; gap: 12px 36px; padding-inline: var(--gutter); }
  .brands__track [aria-hidden="true"] { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}