/* ===========================================================
   v2.0 — Editorial luxury, papierowy off-white, Cormorant + Inter
   =========================================================== */

:root{
  --bg:#fcfbf9;
  --bg-warm:#f6f1e9;
  --ink:#111111;
  --ink-2:#222222;
  --muted:#706e6b;
  --muted-2:#9a9893;
  --rule:#e3ded8;
  --rule-soft:rgba(17,17,17,.06);
  --accent:#1a1a1a;
  --max:1240px;
  --gutter:48px;
  --ease:cubic-bezier(.16,1,.3,1);
  --t:.55s;
  --font-serif:"Cormorant Garamond","EB Garamond","Times New Roman",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  /* iOS Safari — safe areas (notch, dynamic island, home indicator) */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  /* iOS Safari — dynamic viewport height (set by JS) */
  --vh:1vh;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);
  min-height:100vh;
  min-height:calc(var(--vh, 1vh) * 100);
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
  font-weight:500;
  font-size:16px;line-height:1.55;
  /* iOS — zapobiega pull-to-refresh i bounce */
  overscroll-behavior-y:contain;
  /* iOS — domyślnie blokuj selekcję tekstu (zwolniona dla treści niżej) */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
/* Selekcja tekstu DOZWOLONA dla treści (żeby kopiować numer, e-mail, adres) */
.tagline, .about-text, .services-text, .credential,
.faq-item summary, .faq-item p,
.contact-link, .address-box, .year-badge,
h1.title{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

/* --- Subtelna tekstura papieru (ziarno) --- */
body::before{
  content:"";position:fixed;inset:0;
  z-index:200;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- Ambientowe ciepłe plamy w tle --- */
.bg-ambient{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.bg-ambient::before,
.bg-ambient::after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(80px);opacity:.55;
}
.bg-ambient::before{
  width:720px;height:720px;top:-220px;right:-180px;
  background:radial-gradient(circle,#f1e7d2 0%,transparent 65%);
}
.bg-ambient::after{
  width:600px;height:600px;bottom:-200px;left:-120px;
  background:radial-gradient(circle,#ece2cd 0%,transparent 70%);
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.serif{font-family:var(--font-serif);font-weight:500;letter-spacing:-.01em}

/* --- A11y helpers --- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;left:8px;top:-100px;z-index:400;
  background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:6px;
  font-family:var(--font-sans);font-size:13px;font-weight:700;letter-spacing:.02em;
  text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:8px;outline:2px solid var(--ink);outline-offset:2px}

/* --- Scroll progress line (top) --- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:1px;
  z-index:300;pointer-events:none;
  background:rgba(17,17,17,.06);
}
.scroll-progress::before{
  content:"";display:block;height:100%;width:var(--sp,0%);
  background:var(--ink);
  transition:width .12s linear;
  transform-origin:left center;
}

/* --- Viewport (main wrapper) --- */
.viewport{
  display:flex;flex-direction:column;
  min-height:100vh;
  min-height:calc(var(--vh, 1vh) * 100);
  min-height:100dvh;
  padding:calc(32px + var(--safe-top))
          calc(var(--gutter) + var(--safe-right))
          calc(32px + var(--safe-bottom))
          calc(var(--gutter) + var(--safe-left));
  max-width:var(--max);margin:0 auto;
  position:relative;
}

/* =========== TOP BAR =========== */
.top-bar{
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--rule);
  padding-bottom:22px;
  font-size:11px;text-transform:uppercase;letter-spacing:.22em;
  font-weight:800;
}
.brand-sub{color:var(--muted);font-weight:800}
.lang-switcher{display:flex;gap:14px;align-items:center}
.lang-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-sans);
  font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--muted);padding:14px 6px;
  min-height:44px;
  position:relative;transition:color var(--t) var(--ease);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* === Flagi PL/DE === */
.flag{
  display:inline-block;
  width:18px;height:12px;
  border-radius:2px;
  position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.18),inset 0 0 0 1px rgba(0,0,0,.08);
  transform-origin:left center;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  flex-shrink:0;
  animation:flagWave 4.5s ease-in-out infinite;
}
.flag-pl{background:linear-gradient(180deg,#fff 0%,#fff 50%,#d4213d 50%,#d4213d 100%)}
.flag-de{
  background:linear-gradient(180deg,
    #000 0%,#000 33.33%,
    #dd0000 33.33%,#dd0000 66.66%,
    #ffce00 66.66%,#ffce00 100%);
  animation-delay:-2.2s;
}
@keyframes flagWave{
  0%,100%{transform:skewY(0) scaleY(1)}
  25%{transform:skewY(-1.2deg) scaleY(.985)}
  50%{transform:skewY(0) scaleY(1)}
  75%{transform:skewY(1.2deg) scaleY(.985)}
}
.flag::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,
    transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-110%);
  animation:flagShine 6s ease-in-out infinite;
}
.flag-de::before{animation-delay:-3s}
@keyframes flagShine{
  0%,30%{transform:translateX(-110%)}
  50%{transform:translateX(110%)}
  100%{transform:translateX(110%)}
}
.lang-btn:hover .flag,
.lang-btn.active .flag{
  transform:scale(1.15);
  box-shadow:0 2px 6px rgba(0,0,0,.22),inset 0 0 0 1px rgba(0,0,0,.1);
}
@media (prefers-reduced-motion:reduce){
  .flag,.flag::before{animation:none}
}

.lang-btn::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform var(--t) var(--ease);
}
@media (hover:hover){
  .lang-btn:hover{color:var(--ink)}
  .lang-btn:hover::after{transform:scaleX(1);transform-origin:left}
}
@media (hover:none){
  .lang-btn:active{color:var(--ink);transform:scale(.96)}
}
.lang-btn.active{color:var(--ink);font-weight:800}
.lang-btn.active::after{transform:scaleX(1);transform-origin:left}
.lang-divider{color:var(--rule);user-select:none}

/* =========== HERO =========== */
header.hero{
  margin:7vh 0 5vh;
  position:relative;
  will-change:transform,opacity;
}
h1.title{
  font-family:var(--font-serif);
  font-size:clamp(18px,2.2vw,30px);
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
  text-transform:none;
  margin-bottom:0;
  position:relative;
  display:flex;flex-wrap:wrap;gap:.3em;
  color:var(--ink);
}
h1.title .first,
h1.title .surname{display:inline-block;overflow:hidden}
h1.title .first .inner,
h1.title .surname .inner{display:inline-block}
h1.title .surname{
  padding-left:0;
  font-style:normal;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
}
.tagline{
  font-family:var(--font-serif);
  font-size:clamp(18px,2.2vw,30px);
  font-weight:500;line-height:1.3;
  max-width:24ch;
  color:var(--muted);
  margin-top:1.2rem;
}
.tagline .word{display:inline-block}

/* =========== CONTENT GRID =========== */
.content-grid{
  display:grid;grid-template-columns:1fr 1.2fr;gap:64px;
  margin:4vh 0;
  border-top:1px solid var(--rule);
  padding-top:42px;
  position:relative;
}
.content-grid::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--ink);
  transition:width 1.2s var(--ease) .2s;
}
.content-grid.in::before{width:120px}
.grid-left{display:flex;flex-direction:column;gap:28px}

.label{
  display:block;
  font-size:10px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--muted);font-weight:800;margin-bottom:16px;
}

.about-text{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.8vw,26px);
  line-height:1.32;font-weight:500;
  letter-spacing:-.008em;
  max-width:18ch;
}

.year-badge{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.8vw,26px);
  font-weight:500;letter-spacing:-.008em;text-transform:none;
  color:var(--ink);line-height:1.32;
  padding:0;border:0;width:auto;overflow:visible;
}
.year-badge>span{display:inline}

/* --- Credential (numer TP + link do listy MS) --- */
.credential{
  font-family:var(--font-sans);
  font-size:12px;color:var(--muted);
  line-height:1.5;font-weight:600;
  letter-spacing:.02em;
  margin-top:-8px;
  display:flex;flex-wrap:wrap;gap:6px;
}
.credential span{color:var(--ink);font-weight:700}
.credential a{
  color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding-bottom:1px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){
  .credential a:hover{color:var(--ink);border-bottom-color:var(--ink)}
}
@media (hover:none){
  .credential a:active{color:var(--ink);border-bottom-color:var(--ink)}
}

/* --- Services --- */
.services-wrapper{position:relative}
.services-text{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.9vw,26px);
  font-weight:500;line-height:1.45;
  letter-spacing:-.008em;
  color:var(--ink);
  max-width:42ch;
}
.services-list{list-style:none;display:flex;flex-direction:column}
.services-item{
  font-family:var(--font-serif);
  font-size:clamp(16px,1.6vw,22px);
  font-weight:500;letter-spacing:-.008em;
  padding:16px 0;border-bottom:1px solid var(--rule-soft);
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  position:relative;
  transition:padding-left var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease),opacity .9s var(--ease),transform .9s var(--ease);
  overflow:hidden;
}
.services-list:not(.in) .services-item{opacity:0;transform:translateX(-18px)}
.services-list.in .services-item{opacity:1;transform:none}
.services-list.in .services-item:nth-child(1){transition-delay:.05s}
.services-list.in .services-item:nth-child(2){transition-delay:.13s}
.services-list.in .services-item:nth-child(3){transition-delay:.21s}
.services-list.in .services-item:nth-child(4){transition-delay:.29s}
.services-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--ink);
  transition:width .6s var(--ease);
}
.services-item:hover{padding-left:24px;border-bottom-color:var(--ink)}
.services-item:hover::before{width:8px}
.services-item .arrow{
  display:inline-block;font-family:var(--font-sans);font-size:14px;font-weight:400;
  opacity:0;transform:translateX(-18px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease);
  flex-shrink:0;
}
.services-item:hover .arrow{opacity:1;transform:translateX(0)}

/* =========== FOOTER =========== */
footer.foot{
  border-top:1px solid var(--rule);
  padding-top:42px;margin-top:6vh;
  position:relative;
}
footer.foot::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--ink);
  transition:width 1.2s var(--ease) .2s;
}
footer.foot.in::before{width:120px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;
  margin-bottom:40px;
}
.contact-prompt{
  font-size:10px;text-transform:uppercase;letter-spacing:.24em;
  color:var(--muted);font-weight:800;margin-bottom:16px;
}
.contact-group{display:flex;flex-direction:column;gap:8px}
.contact-link{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.7vw,24px);
  font-weight:600;line-height:1.2;letter-spacing:-.012em;
  color:var(--ink);text-decoration:none;
  display:inline-block;
  position:relative;padding:6px 0;min-height:44px;width:fit-content;
  transition:transform .5s var(--ease),color var(--t);
  will-change:transform;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.contact-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(1);transform-origin:left;
  transition:transform .65s var(--ease);
}
@media (hover:hover){
  .contact-link:hover{color:var(--muted)}
  .contact-link:hover::after{transform:scaleX(0);transform-origin:right}
}
@media (hover:none){
  .contact-link:active{color:var(--muted);transform:scale(.985)}
}

.address-box{
  font-family:var(--font-serif);font-style:normal;
  font-size:clamp(18px,1.7vw,24px);font-weight:600;line-height:1.35;
  letter-spacing:-.012em;color:var(--ink);
}
.address-box>span{display:block;white-space:nowrap}
.address-box .address-meta{
  font-family:var(--font-sans);font-size:12px;letter-spacing:.04em;
  color:var(--muted);font-weight:600;margin-top:10px;
}

/* =========== FAQ =========== */
.faq{
  margin:6vh 0 2vh;
  padding-top:42px;border-top:1px solid var(--rule);
  position:relative;
}
.faq::before{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--ink);
  transition:width 1.2s var(--ease) .2s;
}
.faq.in::before{width:120px}
.faq-head{margin-bottom:28px}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq-item{
  border-bottom:1px solid var(--rule);
  padding:0;
}
.faq-item summary{
  font-family:var(--font-serif);
  font-size:clamp(18px,1.7vw,24px);
  font-weight:600;letter-spacing:-.008em;color:var(--ink);
  cursor:pointer;list-style:none;
  padding:22px 40px 22px 0;
  min-height:44px;
  position:relative;
  transition:color var(--t) var(--ease);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:14px;height:14px;margin-top:-7px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='1.4'><path d='M7 1v12M1 7h12'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transition:transform .35s var(--ease);
}
.faq-item[open] summary::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23111' stroke-width='1.4'><path d='M1 7h12'/></svg>");
}
@media (hover:hover){
  .faq-item summary:hover{color:var(--muted)}
}
@media (hover:none){
  .faq-item summary:active{color:var(--muted);background:rgba(17,17,17,.02)}
}
.faq-item p{
  font-family:var(--font-serif);
  font-size:clamp(16px,1.4vw,19px);font-weight:500;line-height:1.55;
  color:var(--ink-2);
  padding:0 0 26px;
  max-width:70ch;
}

.legal-notice{
  border-top:1px solid var(--rule);
  padding-top:20px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:10px;text-transform:uppercase;letter-spacing:.18em;
  color:var(--muted);font-weight:800;
}
.legal-link{
  border-bottom:1px solid var(--rule);padding-bottom:1px;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
@media (hover:hover){.legal-link:hover{color:var(--ink);border-bottom-color:var(--ink)}}
@media (hover:none){.legal-link:active{color:var(--ink);border-bottom-color:var(--ink)}}

/* =========== REVEAL ANIMATIONS — Weight morph (no reflow) =========== */
/* Stany ukrycia (opacity:0) aktywują się TYLKO gdy działa JS (html.js).
   Bez JS — treść jest w pełni widoczna (progressive enhancement). */
@media (prefers-reduced-motion:no-preference){
  /* Group A: krótkie etykiety i tytuły — weight + letter-spacing + opacity */
  .js .content-grid .label,
  .js .content-grid .year-badge,
  .js .faq .label,
  .js .foot .contact-prompt,
  .js .foot .legal-notice{
    font-weight:400;
    letter-spacing:.12em;
    opacity:0;
    transition:font-weight 1.4s var(--ease), letter-spacing 1.4s var(--ease), opacity 1s var(--ease);
  }

  /* Group B: długie teksty — tylko weight + opacity (bez reflow!) */
  .js .content-grid .about-text,
  .js .content-grid .credential,
  .js .content-grid .services-text,
  .js .faq .faq-item summary,
  .js .faq .faq-item p,
  .js .foot .contact-link,
  .js .foot .address-box{
    font-weight:400;
    opacity:0;
    transition:font-weight 1.4s var(--ease), opacity 1s var(--ease);
  }

  /* Final states — Profile section */
  .content-grid.in .label{font-weight:800;letter-spacing:.24em;opacity:1}
  .content-grid.in .about-text{font-weight:500;opacity:1;transition-delay:.1s}
  .content-grid.in .year-badge{font-weight:500;letter-spacing:-.008em;opacity:1;transition-delay:.2s}
  .content-grid.in .credential{font-weight:600;opacity:1;transition-delay:.3s}
  .content-grid.in .services-text{font-weight:500;opacity:1;transition-delay:.2s}

  /* Final states — FAQ */
  .faq.in .label{font-weight:800;letter-spacing:.24em;opacity:1}
  .faq.in .faq-item summary{font-weight:600;opacity:1}
  .faq.in .faq-item p{font-weight:500;opacity:1}
  .faq.in .faq-item:nth-child(1) summary{transition-delay:.10s}
  .faq.in .faq-item:nth-child(2) summary{transition-delay:.20s}
  .faq.in .faq-item:nth-child(3) summary{transition-delay:.30s}
  .faq.in .faq-item:nth-child(4) summary{transition-delay:.40s}
  .faq.in .faq-item:nth-child(5) summary{transition-delay:.50s}

  /* Final states — Footer */
  .foot.in .contact-prompt{font-weight:800;letter-spacing:.24em;opacity:1}
  .foot.in .contact-link{font-weight:600;opacity:1;transition-delay:.1s}
  .foot.in .address-box{font-weight:600;opacity:1;transition-delay:.2s}
  .foot.in .legal-notice{font-weight:800;letter-spacing:.18em;opacity:1;transition-delay:.3s}

  /* Wrapper containers — overall fade */
  .js .reveal{opacity:0;transition:opacity 1.1s var(--ease)}
  .reveal.in{opacity:1}

  /* hero — weight morph + letter-spacing + opacity (variable font) */
  .js h1.title{
    font-weight:400;
    letter-spacing:.12em;
    opacity:0;
    transition:font-weight 1.4s var(--ease), letter-spacing 1.4s var(--ease), opacity 1s var(--ease);
  }
  .js h1.title .surname{
    font-weight:400;
    transition:font-weight 1.4s var(--ease);
  }
  .is-loaded h1.title{
    font-weight:600;
    letter-spacing:-.01em;
    opacity:1;
  }
  .is-loaded h1.title .surname{font-weight:700}

  .js .tagline{
    font-weight:400;
    opacity:0;
    transition:font-weight 1.4s var(--ease) .4s, opacity 1s var(--ease) .4s;
  }
  .is-loaded .tagline{
    font-weight:500;
    opacity:1;
  }
}

::selection{background:var(--ink);color:var(--bg)}

/* =========== RESPONSIVE =========== */
@media (max-width:1000px){
  :root{--gutter:32px}
  .content-grid{gap:48px}
  .footer-grid{gap:40px}
}

@media (max-width:760px){
  :root{--gutter:22px}
  .viewport{padding:22px var(--gutter)}
  header.hero{margin:4vh 0 3vh}
  h1.title{font-size:clamp(16px,4.4vw,22px);gap:.25em}
  h1.title .surname{padding-left:0}
  .tagline{font-size:clamp(16px,4.4vw,22px);max-width:none;margin-top:.9rem}

  .content-grid{
    grid-template-columns:1fr;gap:32px;
    padding-top:28px;margin:2vh 0;
  }
  .grid-left{gap:22px}
  .about-text{font-size:19px;max-width:none}
  .services-item{font-size:16px;padding:14px 0}
  .services-item:hover{padding-left:14px}
  .services-text{font-size:18px;max-width:none}

  footer.foot{padding-top:32px;margin-top:4vh}
  .footer-grid{grid-template-columns:1fr;gap:28px;margin-bottom:28px}
  .contact-link{font-size:18px}
  .address-box{font-size:18px}
  .legal-notice{flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px}
}

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