/* =========================================================
   MS BYG — PREMIUM STYLE.CSS (FULL REPLACE)
   Wklej jako: /css/style.css (podmień cały plik)
   ========================================================= */

/* ===================== (SECTION: GLOBAL SETTINGS) ===================== */
:root{
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);

  --panel: rgba(18,18,18,0.58);
  --panelStroke: rgba(255,255,255,0.12);
  --shadow: 0 22px 70px rgba(0,0,0,0.55);

  --brand-size-hero: clamp(44px, 6.2vw, 92px);
  --brand-size-splash: clamp(40px, 6vw, 88px);
  --base-text: 16px;

  --panel-title: clamp(30px, 3.1vw, 52px);

  --photo-tall: 460px;
  --photo-short: 320px;

  --panel-side-padding: 46px;

  /* Offer main frame heights */
  --offer-main-h: 460px;
  --offer-main-h-mobile: 340px;

  /* Thumbs size (offer) */
  --thumb-w: 64px;
  --thumb-h: 48px;
}

*{ box-sizing:border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  color:var(--text);
  background:#06070a;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--base-text);
  overflow-x: hidden;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
.muted{ color: var(--muted); }

/* ===================== (SECTION: FIXED BACKGROUND) ===================== */
.bg-stage{ position: fixed; inset:0; z-index:-2; overflow:hidden; }
.bg-image{ width:100%; height:100%; object-fit:cover; transform: translate3d(0,0,0); }
.bg-overlay{
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.62),
    rgba(0,0,0,0.56),
    rgba(0,0,0,0.74)
  );
}

/* ===================== (SECTION: TOPBAR) ===================== */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 18px;
  background: rgba(0,0,0,0.30);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.brand-name{
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}

/* prawa strona topbara: menu + social + języki */
.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.nav{
  display:flex;
  gap: 10px;
  align-items:center;
  font-size: 14px;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.nav a{
  padding: 8px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,0.86);
  transition: background 180ms ease, transform 180ms ease, opacity 180ms ease;
}

.nav a:hover{ background: rgba(255,255,255,0.08); }
.nav a:active{ transform: translateY(1px); }

.nav-cta{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

/* ===================== (SECTION: SOCIAL IN TOPBAR) ===================== */
.top-social{
  display:flex;
  gap: 8px;
  align-items:center;
  padding-left: 6px;
  padding-right: 2px;
  border-left: 1px solid rgba(255,255,255,0.12);
  border-right: 1px solid rgba(255,255,255,0.12);
}

.top-social-btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
}
.top-social-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
}
.top-social-btn svg{
  width: 18px;
  height: 18px;
  fill: rgba(255,255,255,0.90);
}

/* ===================== (SECTION: LANGUAGE SWITCH) ===================== */
.lang{ display:flex; gap: 8px; }
.lang-btn{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.90);
  border-radius: 14px;
  padding: 6px 10px;
  cursor:pointer;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .14em;
  transition: background 180ms ease, transform 180ms ease;
}
.lang-btn:hover{ background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.lang-pill{ font-size: 12px; }

/* ===================== (SECTION: HERO START) ===================== */
.home{ min-height:100vh; }
.hero-start{ height: 92vh; display:grid; place-items:center; }
.hero-center{ text-align:center; }

.hero-country{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: 12px;
}

.hero-name{
  font-family: "Playfair Display", serif;
  font-size: var(--brand-size-hero);
  font-weight: 650;
  letter-spacing: 0.03em;
  text-shadow:
    0 18px 60px rgba(0,0,0,0.65),
    0 0 26px rgba(255,255,255,0.08);
}

.hero-subtitle{
  margin-top: 10px;
  font-size: clamp(14px, 1.5vw, 18px);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.06em;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
}

.hero-hint{
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

/* ===================== (SECTION: MATTE PANEL CORE) ===================== */
.matte-wrap{ width: 100%; display:block; }

.matte-panel{
  width: 100%;
  margin: 0;
  background: var(--panel);
  border-top: 1px solid var(--panelStroke);
  border-bottom: 1px solid var(--panelStroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transform: translateY(18vh);
  opacity: 0;

  min-height: 66vh;
  display: flex;
  flex-direction: column;
}

/* ===================== (SECTION: PANEL REVEAL ANIMATION) ===================== */
.page-panel{
  animation: panelReveal 1.1s ease forwards;
}
@keyframes panelReveal{
  from{ transform: translateY(18vh); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}

/* ===================== (SECTION: MAGAZINE GRID — HOME) ===================== */
.matte-grid.magazine{
  width: min(1720px, calc(100% - 18px));
  margin: 0 auto;
  padding: 80px var(--panel-side-padding) 58px var(--panel-side-padding);

  display: grid;
  grid-template-columns: 1.25fr 1.35fr 1.25fr;
  gap: 84px;
  align-items: start;
}

/* ===================== (SECTION: EDITORIAL PHOTOS — HOME) ===================== */
.photos{ display:grid; gap: 26px; }
.photos.left{ justify-self: start; }
.photos.right{ justify-self: end; }

.photo{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  filter: drop-shadow(0 24px 70px rgba(0,0,0,0.62));
}

.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: filter 460ms ease, transform 460ms ease;
  filter: saturate(0.68) contrast(1.08) brightness(0.70);
}

.photo:hover img{
  filter: saturate(1.06) contrast(1.06) brightness(1.00);
  transform: scale(1.01);
}

.photo.tall{ height: var(--photo-tall); }
.photo.short{ height: var(--photo-short); }

.editorial .lift{ transform: translateY(-16px); }
.editorial .drop{ transform: translateY(18px); }

/* shading sides */
.leftShade::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.58), rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22));
}
.rightShade::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(270deg, rgba(0,0,0,0.58), rgba(0,0,0,0.00) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.22));
}

.leftShade::before,
.rightShade::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 18%;
  pointer-events:none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.leftShade::before{ left:0; background: linear-gradient(90deg, rgba(0,0,0,0.18), rgba(0,0,0,0)); }
.rightShade::before{ right:0; background: linear-gradient(270deg, rgba(0,0,0,0.18), rgba(0,0,0,0)); }

/* ===================== (SECTION: MAGAZINE TEXT — HOME) ===================== */
.matte-text.magazine-text{
  max-width: 760px;
  margin: 0 auto;
}

.kicker{
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  text-align: center;
  margin-bottom: 14px;
}

.matte-text h1{
  margin: 0 0 22px 0;
  text-align: center;
  font-size: var(--panel-title);
  letter-spacing: 0.015em;
  font-family: "Playfair Display", serif;
  font-weight: 650;
  line-height: 1.05;
  text-shadow: 0 22px 70px rgba(0,0,0,0.45);
}

.matte-divider{
  width: 180px;
  height: 2px;
  margin: 0 auto 34px auto;
  border-radius: 99px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.00),
    rgba(255,255,255,0.42),
    rgba(255,255,255,0.00)
  );
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.matte-text p{
  margin: 0;
  text-align: left;
  line-height: 1.78;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}

.matte-text p.lead{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.62;
  color: rgba(255,255,255,0.90);
  margin-bottom: 34px;
}

.matte-text p.lead::first-letter{
  float: left;
  font-family: "Playfair Display", serif;
  font-size: 78px;
  line-height: 0.85;
  padding-right: 12px;
  padding-top: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.matte-text p.muted{
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  margin-bottom: 10px;
}

/* ===================== (SECTION: MATTE PANEL - BOTTOM NOTE) ===================== */
.matte-bottom-note{
  width: min(1720px, calc(100% - 18px));
  margin: 0 auto;
  padding: 32px var(--panel-side-padding) 30px var(--panel-side-padding);
  text-align: center;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.55;

  color: rgba(255,255,255,0.82);
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 14px;
}

/* “Skontaktuj się z nami” — link nad stopką */
.panel-contact-line{
  width: min(1720px, calc(100% - 18px));
  margin: 0 auto;
  padding: 18px var(--panel-side-padding) 44px var(--panel-side-padding);
  text-align: center;

  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.62);
  cursor: pointer;
  transition: opacity 200ms ease, transform 200ms ease;
}
.panel-contact-line:hover{ opacity: 0.92; transform: translateY(-1px); }
.panel-contact-line:focus{
  outline: 2px solid rgba(255,255,255,0.25);
  outline-offset: 6px;
  border-radius: 14px;
}

/* ===================== (SECTION: OUTRO) ===================== */
.hero-end{ height: 40vh; }

/* ===================== (SECTION: FOOTER) ===================== */
.footer{
  padding: 18px 18px 26px 18px;
  color: rgba(255,255,255,0.74);
}
.footer-inner{
  width: min(1180px, calc(100% - 34px));
  margin: 0 auto;
  display:flex;
  justify-content: space-between;
  align-items:center;

  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.footer-inner.footer-single{
  justify-content: center;
  text-align: center;
}

/* ===================== (SECTION: SPLASH - SMOOTH REVEAL) ===================== */
#splash{
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #050608;
  display: grid;
  place-items: center;
  opacity: 1;
  pointer-events: auto;
  will-change: opacity, filter;
}

.splash-inner{
  text-align:center;
  padding: 22px;
  will-change: opacity, filter, transform;
}

.splash-country{
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: 10px;
}

.splash-title{
  font-family: "Playfair Display", serif;
  font-size: var(--brand-size-splash);
  font-weight: 650;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.03em;
  text-shadow:
    0 0 22px rgba(255,255,255,0.16),
    0 0 52px rgba(255,255,255,0.08),
    0 18px 70px rgba(0,0,0,0.55);
}

.splash-subtitle{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.74);
  letter-spacing: 0.08em;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
}

/* fade: najpierw znika napis */
#splash.is-fading .splash-inner{
  transition: opacity 1200ms ease, filter 1200ms ease, transform 1200ms ease;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-4px);
}

/* potem znika tło splash */
#splash.is-revealing{
  transition: opacity 1500ms ease, filter 1500ms ease;
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

/* ===================== (SECTION: OFFER HERO) ===================== */
.hero-offer{ height: 86vh; }
.hero-name-small{
  font-size: clamp(40px, 5.2vw, 76px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===================== (SECTION: OFFER PAGE — PREMIUM, NO DUPLICATES) ===================== */
.offer-panel{ /* dziedziczy wygląd matte-panel */ }

.offer-section{
  width: min(1720px, calc(100% - 18px));
  margin: 0 auto;
  padding: 74px var(--panel-side-padding);
  display: grid;
  grid-template-columns: 1.05fr 1.55fr;
  gap: 86px;
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.offer-text h2{
  margin: 0 0 18px 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.2vw, 56px);
  line-height: 1.04;
  letter-spacing: 0.01em;
}

.offer-text p{
  margin: 0;
  text-align: left;
  line-height: 1.78;
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}

.offer-text p.lead{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.62;
  color: rgba(255,255,255,0.90);
  margin-bottom: 26px;
}

.offer-text p.lead::first-letter{
  float: left;
  font-family: "Playfair Display", serif;
  font-size: 78px;
  line-height: 0.85;
  padding-right: 12px;
  padding-top: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.offer-text p.muted{
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}

/* ===== Offer gallery wrapper ===== */
.offer-gallery{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ===== Main frame (NO VISIBLE BORDER) ===== */
.offer-main{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow:
    0 26px 90px rgba(0,0,0,.66),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  width: 100%;
  height: var(--offer-main-h);
  background: rgba(0,0,0,0.20);
  isolation: isolate;
}

/* Rozmyte tło w ramce (ustawiane przez JS: --bg: url(...)) */
.offer-main::before{
  content: "";
  position: absolute;
  inset: -28px;
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  filter: blur(22px) saturate(1.05) brightness(0.80);
  transform: scale(1.10);
  opacity: 0.76;
  z-index: 0;
}

/* delikatny premium glow / gradient */
.offer-main::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(255,255,255,0.11), rgba(0,0,0,0.00) 55%),
    linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.30));
  opacity: 0.92;
  pointer-events: none;
  z-index: 0;
}

/* Dwie warstwy obrazków — kontrolowane przez JS */
.offer-main .main-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
  opacity: 0;
  border-radius: 18px;

  filter:
    drop-shadow(0 20px 60px rgba(0,0,0,0.58))
    saturate(0.95)
    contrast(1.05)
    brightness(0.93);

  transition:
    opacity 900ms ease,
    filter 900ms ease,
    transform 600ms ease,
    box-shadow 600ms ease;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

.offer-main .main-img.is-active{
  opacity: 1;
}

/* animacje dla premium dissolve (JS nadaje/usuwa klasy) */
.offer-main .main-img.blur-out{
  opacity: 0;
  filter:
    blur(10px)
    drop-shadow(0 18px 55px rgba(0,0,0,0.50));
}

.offer-main .main-img.fade-in{
  opacity: 1;
  filter:
    blur(0)
    drop-shadow(0 20px 60px rgba(0,0,0,0.58))
    saturate(0.95)
    contrast(1.05)
    brightness(0.93);
}

/* subtelny hover na całej galerii */
.offer-main:hover .main-img.is-active{
  transform: scale(1.01);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    inset 0 0 0 1px rgba(255,255,255,0.06);
}

/* Thumbs */
.offer-thumbs{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.offer-thumbs img{
  width: var(--thumb-w);
  height: var(--thumb-h);
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.62;
  border: 1px solid rgba(255,255,255,0.10);
  transition:
    opacity .35s ease,
    transform .35s ease,
    filter .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

  filter: saturate(0.85) contrast(1.05);
  box-shadow: 0 10px 22px rgba(0,0,0,0.26);
}

.offer-thumbs img:hover{
  opacity: 1;
  transform: translateY(-3px);
  filter: saturate(1.05) contrast(1.06);
  box-shadow: 0 18px 34px rgba(0,0,0,0.40);
}

.offer-thumbs img.is-active-thumb{
  opacity: 1;
  border-color: rgba(255,255,255,0.26);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.42),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}

/* ===================== (SECTION: CONTACT HERO) ===================== */
.hero-contact{ height: 86vh; }

/* ===================== (SECTION: CONTACT PAGE) ===================== */
.contact-panel{ /* dziedziczy matte-panel */ }

.contact-grid{
  width: min(1520px, calc(100% - 18px));
  margin: 0 auto;
  padding: 80px var(--panel-side-padding);
  display: grid;
  grid-template-columns: 1.05fr 1.05fr;
  gap: 80px;
  align-items: start;
}

.contact-text h2{
  margin: 0 0 18px 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.0vw, 52px);
  line-height: 1.05;
}

.contact-text p{
  margin: 0;
  text-align: left;
  line-height: 1.78;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}

.contact-text p.lead{
  font-size: 24px;
  font-weight: 500;
  line-height: 1.62;
  margin-bottom: 26px;
}

.contact-text p.lead::first-letter{
  float: left;
  font-family: "Playfair Display", serif;
  font-size: 78px;
  line-height: 0.85;
  padding-right: 12px;
  padding-top: 6px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 18px 55px rgba(0,0,0,0.45);
}

.contact-text p.muted{
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}

/* Form */
.contact-formWrap{ padding-top: 8px; }

.contact-form{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  background: rgba(0,0,0,0.14);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: 26px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.field{
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.field span{
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}

.field input,
.field textarea{
  width: 100%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  color: rgba(255,255,255,0.90);
  border-radius: 16px;
  padding: 14px 14px;
  outline: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
}

.field textarea{
  resize: vertical;
  min-height: 160px;
}

.field input:focus,
.field textarea:focus{
  border-color: rgba(255,255,255,0.34);
}

/* ===================== (SECTION: BUTTONS) ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.90);
  font-family: "Cormorant Garamond", serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, opacity 180ms ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.06); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.14);
}

.btn-full{
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}

.form-note{
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255,255,255,0.58);
  font-family: "Inter", sans-serif;
}

/* ===================== (SECTION: RESPONSIVE) ===================== */
@media (max-width: 1180px){
  :root{
    --panel-side-padding: 26px;
    --photo-tall: 410px;
    --photo-short: 300px;
  }

  .matte-grid.magazine{
    width: min(1200px, calc(100% - 22px));
    gap: 44px;
    grid-template-columns: 1.12fr 1.35fr 1.12fr;
  }

  .matte-text.magazine-text{ max-width: 680px; }

  .top-social{ display:none; }
}

@media (max-width: 980px){
  .matte-grid.magazine{
    grid-template-columns: 1fr;
    width: min(760px, calc(100% - 22px));
    padding: 44px 18px 34px 18px;
    gap: 22px;
  }

  .matte-text p{ font-size: 18px; }
  .matte-text p.lead{ font-size: 21px; }

  .matte-text p.lead::first-letter{
    font-size: 64px;
    line-height: 0.9;
  }

  .editorial .lift, .editorial .drop{ transform: none; }

  /* Offer responsive */
  .offer-section{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 18px;
  }
  .offer-main{ height: var(--offer-main-h-mobile); }

  /* Contact responsive */
  .contact-grid{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 18px;
  }
}/* Completion: readable content without scripts, responsive navigation and touch galleries. */
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { isolation:isolate; }
.matte-panel { opacity:1; transform:none; }
.page-panel { animation:none; }
.hero-center { max-width:960px; padding:32px 24px; }
h1.hero-name { margin:0; }
.hero-hint { display:inline-block; padding:14px; font-size:14px; }
.hero-offer,.hero-contact { height:auto; min-height:48svh; }
.hero-start:not(.hero-offer):not(.hero-contact) { min-height:65svh; height:auto; }
.hero-end { height:12vh; }
figure.photo { margin:0; width:100%; }
.photos { width:100%; min-width:0; }
.matte-grid.magazine { gap:clamp(24px,4vw,70px); }
.offer-section,.contact-grid { gap:clamp(24px,4vw,70px); }
.offer-section > *,.contact-grid > * { min-width:0; }
.lang-btn,.btn,.nav a { min-height:44px; font-size:14px; }
.lang-btn[aria-pressed="true"],.nav a[aria-current="page"] { background:#ffffff26; border-bottom:2px solid #eee; }
.field span,.form-note { font-size:14px; }
.field input,.field textarea { font-size:16px; }
.btn { cursor:pointer; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
:focus-visible { outline:2px solid white; outline-offset:4px; }
.field input:focus-visible,.field textarea:focus-visible { outline:2px solid white; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:14px; background:#111; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.thumb-button { padding:0; border:2px solid transparent; border-radius:12px; background:none; cursor:pointer; min-height:48px; }
.thumb-button[aria-pressed="true"] { border-color:#fff; }
.thumb-button[aria-pressed="true"] img { opacity:1; }
.gallery-status { min-height:1.3em; margin:0; font-size:14px; color:var(--muted); }
@media(max-width:980px) {
 .matte-text.magazine-text { grid-row:1; }
 .photos { grid-template-columns:1fr 1fr; }
 .photo.tall,.photo.short { height:300px; }
}
@media(max-width:600px) {
 .topbar { flex-wrap:wrap; gap:10px; padding:12px 16px; }
 .brand { width:100%; text-align:center; }
 .topbar-right { width:100%; justify-content:center; gap:8px; flex-wrap:wrap; }
 .nav { gap:2px; }
 .nav a { padding:10px 8px; }
 .lang { gap:4px; }
 .lang-btn { padding:6px 8px; }
 .hero-name-small { font-size:clamp(28px,8vw,46px); overflow-wrap:anywhere; }
 .hero-subtitle { line-height:1.7; }
 .photos { gap:12px; }
 .photo.tall,.photo.short { height:230px; }
 .contact-form { padding:18px; }
 .panel-contact-line { font-size:20px; }
 .offer-main { height:280px; }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*::before,*::after { animation:none!important; transition:none!important; }
}
.conversation-heading { display:flex; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid #ffffff24; }
.service-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.72); }
.conversation-messages { max-height:370px; overflow:auto; padding:18px 4px; scrollbar-width:thin; }
.chat-bubble { font-size:16px; line-height:1.65; padding:16px 18px; border-radius:16px; margin:0 0 14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.assistant-bubble { background:#ffffff0e; margin-right:20px; }
.customer-bubble { background:#ffffff20; margin-left:32px; }
.chat-question { font-size:14px; line-height:1.5; color:#ddd; }
.conversation .field { margin-top:16px; }
.conversation select { width:100%; min-height:52px; border:1px solid #ffffff55; padding:12px; border-radius:12px; color:#fff; background:#191b1d; font:inherit; }
.conversation-actions { display:flex; justify-content:space-between; gap:12px; }
.conversation-actions [hidden] { display:none; }
.conversation-actions .primary { margin-left:auto; }
#conversationError,.delivery-note { color:var(--text); font-size:14px; line-height:1.6; }
.conversation-summary { font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.conversation-summary dt { color:#bbb; margin-top:12px; }
.conversation-summary dd { margin:2px 0 0; white-space:pre-wrap; }
.consent { display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.6; margin:24px 0; }
.consent input { width:20px; height:20px; flex-shrink:0; margin-top:2px; }
/* Messenger-style contact surface */
.chat-page .hero-contact { display:none; }
.chat-page .contact-grid { max-width:1320px; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); padding-top:40px; padding-bottom:40px; align-items:center; }
.chat-page .contact-text h2 { line-height:1.15; }
.chat-page .contact-text .kicker { text-align:left; }
.chat-page .contact-text .matte-divider { margin-left:0; }
.chat-page .contact-text .lead::first-letter { float:none; font:inherit; padding:0; }
.chat-page .conversation { padding:0; overflow:hidden; background:rgba(18,18,18,.78); border-radius:24px; box-shadow:0 24px 80px #0008; }
.chat-page .conversation-heading { padding:18px 22px; gap:12px; background:#ffffff05; }
.chat-avatar { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.10); color:var(--text); border:1px solid var(--panelStroke); font-family:serif; }
.chat-assistant-label { display:block; margin-top:4px; font-size:13px; color:#bbb; }
.chat-page .conversation-messages { height:clamp(290px,48svh,480px); max-height:none; padding:22px; display:flex; flex-direction:column; gap:12px; }
.chat-page .chat-bubble { flex-shrink:0; max-width:88%; margin:0; padding:13px 16px; font-size:15px; line-height:1.6; }
.chat-page .assistant-bubble { align-self:flex-start; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); border-radius:4px 18px 18px; }
.chat-page .customer-bubble { align-self:flex-end; background:rgba(255,255,255,.16); color:var(--text); border:1px solid rgba(255,255,255,.20); border-radius:18px 4px 18px 18px; }
.chat-suggestions { display:flex; flex-wrap:wrap; gap:8px; flex-shrink:0; margin-top:4px; }
.chat-suggestion { padding:11px 14px; min-height:44px; border-radius:20px; border:1px solid rgba(255,255,255,.22); color:var(--text); background:transparent; cursor:pointer; font:inherit; font-size:14px; text-align:left; }
.chat-suggestion:hover { background:rgba(255,255,255,.10); }
.chat-page #conversationForm { position:relative; padding:16px 20px 12px; border-top:1px solid #ffffff18; }
.chat-page #conversationInput { padding-right:56px; }
.chat-page .chat-composer { width:100%; border:0; background:transparent; color:#fff; outline-offset:2px; padding:8px 2px; min-height:48px; max-height:120px; resize:vertical; font:inherit; font-size:16px; line-height:1.5; }
.chat-page #conversationNext { position:absolute; right:18px; top:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.16); color:var(--text); border:1px solid rgba(255,255,255,.20); font:24px system-ui; justify-content:center; padding:0; }
.chat-page #conversationBack { min-height:32px; font:12px system-ui; text-transform:none; letter-spacing:0; padding:4px 0; background:none; border:0; color:#ccc; }
.chat-page #conversationError:empty { display:none; }
.chat-page #conversationPrivacy { margin:0; padding:10px 20px 16px; background:#ffffff03; font-size:12px; }
.chat-page .is-review #conversationInput { padding-right:0; }
.chat-page .is-review #conversationNext { position:static; width:auto; height:auto; padding:12px 16px; border-radius:12px; font-size:14px; }
.chat-page .conversation-summary { background:#ffffff08; border-radius:14px; padding:16px; flex-shrink:0; margin:0; }
.chat-page .hero-end { display:none; }
@media(max-width:800px){
 .chat-page .contact-grid { grid-template-columns:1fr; padding:24px 12px; gap:20px; }
 .chat-page .contact-text h2 { font-size:30px; margin:0; }
 .chat-page .contact-text .kicker,.chat-page .contact-text .matte-divider,.chat-page .contact-text p { display:none; }
 .chat-page .conversation-messages { height:46svh; min-height:280px; padding:16px; }
 .chat-page .contact-formWrap { padding:0; }
 .chat-page .chat-bubble { max-width:94%; }
}

.chat-page .chat-composer::placeholder { color:var(--muted); opacity:1; }
.chat-page .consent input { accent-color:#bcbcbc; }
.chat-page #conversationNext:hover:not(:disabled) { background:rgba(255,255,255,.24); }
.chat-page .conversation-messages { scrollbar-color:#ffffff40 transparent; }
.chat-demo { margin-left:auto; max-width:160px; background:transparent; border:1px solid #ffffff30; border-radius:12px; padding:10px; color:var(--text); font:12px/1.5 Inter, sans-serif; cursor:pointer; }
.chat-demo:hover { background:#ffffff12; }
.example-badge { padding:10px 20px; margin:0; color:var(--muted); background:#ffffff08; font-size:12px; }
.chat-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; flex-shrink:0; margin-bottom:12px; }
.chat-photo-grid img { width:100%; height:90px; object-fit:cover; border-radius:10px; border:1px solid #ffffff20; }
.upload-note { font-size:13px; line-height:1.6; color:var(--muted); }
.chat-page .is-upload #conversationInput { padding-right:0; }
.chat-page .is-upload #conversationNext { position:static; }
.chat-page .is-upload input[type=file] { display:block; width:100%; font:14px Inter,sans-serif; padding:12px 0; color:var(--text); }
.chat-page .is-upload input::file-selector-button { padding:10px; background:#ffffff14; border:1px solid #ffffff30; border-radius:10px; color:white; margin-right:8px; cursor:pointer; }
.measurement-note { border-left:2px solid #ffffff60!important; }
.cms-banner{display:flex;align-items:center;justify-content:center;gap:20px;padding:16px 5vw;background:rgba(32,33,34,.96);border-bottom:1px solid #ffffff30;color:var(--text)}.cms-banner img{width:100px;height:65px;object-fit:cover;border-radius:5px}.cms-banner p{margin:0;text-align:center;font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.matte-text p,.offer-text p{white-space:pre-line}
/* One cover per project, full-size gallery on demand. */
.project-cover{position:relative;width:100%;height:460px;padding:0;border:1px solid #ffffff18;border-radius:22px;overflow:hidden;background:#111;cursor:pointer;color:#fff;display:block}
.project-cover-image{width:100%;height:100%;object-fit:cover;filter:none;transition:transform .4s ease}
.project-cover:hover .project-cover-image{transform:scale(1.025)}
.project-cover-label{position:absolute;right:18px;bottom:18px;padding:12px 16px;border:1px solid #ffffff40;border-radius:10px;background:#101112e8;color:#fff;font:14px/1.5 Inter,Arial,sans-serif}
.project-lightbox{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px 32px;border:0;background:#0c0d0ff5;color:#eee;overflow:hidden}
.project-lightbox[open]{display:flex;flex-direction:column;gap:16px}
.project-lightbox::backdrop{background:#000e}
.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-shrink:0}
.lightbox-header h2{font:400 clamp(22px,3vw,38px)/1.2 'Cormorant Garamond',Georgia,serif;margin:0}
.project-lightbox button{width:48px;height:48px;flex-shrink:0;background:#ffffff10;border:1px solid #ffffff35;border-radius:50%;color:#fff;font:32px/1 Arial;cursor:pointer}
.project-lightbox button:hover{background:#ffffff25}
.lightbox-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 64px}
.lightbox-photo{width:100%;height:100%;object-fit:contain;filter:none;touch-action:pan-y pinch-zoom}
.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);z-index:1}.lightbox-prev{left:0}.lightbox-next{right:0}
.lightbox-counter{margin:0;text-align:center;font:14px/1.5 Inter,Arial,sans-serif;min-height:22px;flex-shrink:0}
.project-lightbox [hidden]{display:none!important}
@media(max-width:650px){.project-cover{height:330px}.project-cover-label{right:12px;bottom:12px;font-size:13px}.project-lightbox{padding:16px 12px}.lightbox-stage{padding:0}.project-lightbox .lightbox-prev,.project-lightbox .lightbox-next{width:42px;height:42px;background:#101112d9}.lightbox-header h2{font-size:25px}.lightbox-counter{padding:0 10px}}
@media(prefers-reduced-motion:reduce){.project-cover-image{transition:none}.project-cover:hover .project-cover-image{transform:none}}
/* Consistent viewing frame; no in-gallery zoom control. */
.lightbox-photo{flex:none;width:min(900px,100%);height:min(600px,100%);object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none}
.lightbox-stage{max-width:1080px;width:100%;align-self:center}
.project-cover-image{transition:none}
.project-cover:hover .project-cover-image{transform:none}