/* ==========================================================================
   Fizjoterapia Patryk Maroszek — tokens
   ========================================================================== */
:root{
  --ink: #322F2A;
  --ink-soft: #5C574F;
  --paper: #F3F1ED;
  --paper-alt: #EAE6DF;
  --accent: #AE8873;
  --accent-dark: #8F6E5A;
  --line: rgba(50,47,42,.12);

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-sans: 'Jost', -apple-system, sans-serif;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --header-h: 64px;
  --header-float-top: clamp(14px, 2.4vw, 28px);
  --header-bg: rgba(50, 47, 42, .96);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-3xl: 48px;
  --radius-4xl: 64px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

::selection{ background: var(--accent); color: var(--paper); }
::-moz-selection{ background: var(--accent); color: var(--paper); }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width: 100%; display: block; }
picture{ display: contents; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }

:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

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

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed;
  top: var(--header-float-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  box-shadow: 0 20px 40px -14px rgba(50,47,42,.4), 0 4px 14px rgba(50,47,42,.18);
  animation: nav-reveal 1100ms var(--ease-in-out) backwards;
}

@keyframes nav-reveal{
  0%{
    clip-path: inset(0 50% 0 50% round 999px);
    opacity: 0;
  }
  25%{
    opacity: 1;
  }
  100%{
    clip-path: inset(0 0% 0 0% round 999px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header{
    animation: nav-fade 300ms ease both;
  }

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

.header-inner{
  padding: 8px 8px 8px 36px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
}

.logo{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.logo-image{
  display: block;
  height: 44px;
  width: auto;
}

.logo-text{
  display: none;
  flex-direction: column;
}

.logo-name{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--accent);
  line-height: 1.15;
  white-space: nowrap;
}

.logo-sub{
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-alt);
  opacity: .6;
  margin-top: 5px;
}

@media (min-width: 861px){
  .logo-text{
    display: flex;
  }
}

.header-right{
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-nav ul{
  display: flex;
  gap: 34px;
  flex-shrink: 0;
}

.site-nav li{
  flex-shrink: 0;
}

.site-nav a{
  position: relative;
  display: inline-block;
  color: var(--paper);
  font-size: 14px;
  letter-spacing: .01em;
  padding-bottom: 5px;
  white-space: nowrap;
}

.site-nav a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .3s var(--ease);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after{
  width: 100%;
}

.nav-has-dropdown{
  position: relative;
}

.nav-has-dropdown > a{
  display: inline-flex;
  align-items: center;
}

.nav-caret{
  margin-left: 3px;
  vertical-align: -1px;
}

.nav-caret path{
  transform-origin: center;
  transition: transform .2s var(--ease);
}

.site-header.uslugi-open .nav-caret path{
  transform: rotate(180deg);
}
.site-header:has(.nav-has-dropdown:hover) .nav-caret path{
  transform: rotate(180deg);
}
.site-header:has(.nav-mega:hover) .nav-caret path{
  transform: rotate(180deg);
}

.site-header.uslugi-open .nav-has-dropdown > a::after{
  width: 100%;
}
.site-header:has(.nav-has-dropdown:hover) .nav-has-dropdown > a::after{
  width: 100%;
}
.site-header:has(.nav-mega:hover) .nav-has-dropdown > a::after{
  width: 100%;
}

.nav-mega{
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 14px;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px -14px rgba(50,47,42,.4), 0 4px 14px rgba(50,47,42,.18);
  padding: clamp(20px, 2.4vw, 32px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}

.site-header.uslugi-open .nav-mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.site-header:has(.nav-has-dropdown:hover) .nav-mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.site-header:has(.nav-mega:hover) .nav-mega{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}

.nav-mega-grid{
  display: flex;
  gap: 8px;
}

.nav-mega-item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: clamp(16px, 2vw, 24px) 12px;
  border-radius: var(--radius-lg);
  color: var(--paper);
  text-align: center;
  transition: background .2s var(--ease);
}

.nav-mega-item:hover,
.nav-mega-item:focus-visible{
  background: rgba(243,241,237,.08);
}

.nav-mega-icon{
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(243,241,237,.08);
  color: var(--accent);
}

.nav-mega-label{
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.header-social{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid var(--paper);
  color: var(--paper);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.header-social:hover,
.header-social:focus-visible{
  background: var(--paper);
  color: var(--ink);
}

.cta-button{
  display: inline-block;
  border: 1px solid var(--paper);
  border-radius: 999px;
  padding: 13px 28px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--paper);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}

.cta-button:hover,
.cta-button:focus-visible{
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

/* Mobile nav toggle */
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
}

.nav-toggle span{
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-xs);
  background: var(--paper);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: var(--header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px -14px rgba(50,47,42,.4), 0 4px 14px rgba(50,47,42,.18);
  transition: max-height .35s var(--ease);
}

.mobile-nav.is-open{
  max-height: 420px;
}

.mobile-nav ul{
  padding: 10px 24px 20px;
  display: flex;
  flex-direction: column;
}

.mobile-nav a,
.mobile-nav-uslugi-label{
  display: block;
  width: 100%;
  color: var(--paper);
  padding: 14px 0;
  font-size: 16px;
  text-align: left;
  border-bottom: 1px solid rgba(243,241,237,.14);
}

.mobile-nav-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(243,241,237,.14);
}

.mobile-nav-row a,
.mobile-nav-row .mobile-nav-uslugi-label{
  flex: 1;
  border-bottom: none;
}

.mobile-nav-expand{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--paper);
  transition: transform .25s var(--ease);
}

.mobile-nav-expand[aria-expanded="true"]{
  transform: rotate(180deg);
}

.mobile-nav .mobile-nav-dropdown{
  display: block;
  max-height: 0;
  padding: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}

.mobile-nav-dropdown.is-open{
  max-height: 320px;
}

.mobile-nav-dropdown a{
  padding: 12px 0 12px 18px;
  font-size: 14px;
  color: var(--paper-alt);
  border-bottom: 1px solid rgba(243,241,237,.08);
}

.mobile-nav .mobile-cta{
  margin-top: 18px;
  border: 1px solid var(--paper);
  border-radius: 999px;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 14px 0;
}

@media (max-width: 860px){
  .site-nav{ display: none; }
  .cta-button{ display: none; }
  .header-social{ display: none; }
  .nav-toggle{ display: flex; }
  .mobile-nav{ display: block; }
  .nav-mega{ display: none; }
}

@media (max-width: 480px){
  .logo-image{ height: 34px; }
  :root{ --header-h: 56px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 100px;
}

.hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(50,47,42,.85) 0%, rgba(50,47,42,.6) 40%, rgba(50,47,42,.28) 70%, rgba(50,47,42,.12) 100%);
}

.hero-inner{
  position: relative;
  z-index: 1;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.hero-content{
  max-width: 620px;
}

.hero-eyebrow,
.section-eyebrow{
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin: 0 0 20px;
}

.hero-eyebrow{
  color: var(--accent);
  opacity: 0;
  transform: translateY(14px);
  animation: hero-fade-up 500ms var(--ease-out) both;
}

.hero-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
  max-width: 16ch;
}

@keyframes hero-fade-up{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-description{
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: var(--paper-alt);
  margin: 22px 0 0;
  max-width: 42ch;
  opacity: 0;
  transform: translateY(14px);
  animation: hero-fade-up 500ms var(--ease-out) 1850ms both;
}

.hero-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
  opacity: 0;
  transform: translateY(14px);
  animation: hero-fade-up 500ms var(--ease-out) 1950ms both;
}

.btn-primary,
.btn-secondary{
  display: inline-block;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.btn-primary{
  background: var(--paper);
  border: 1px solid var(--paper);
  color: var(--ink);
}

.btn-primary:hover,
.btn-primary:focus-visible{
  background: var(--accent);
  border-color: var(--accent);
}

.btn-secondary{
  background: transparent;
  border: 1px solid var(--paper);
  color: var(--paper);
}

.btn-secondary:hover,
.btn-secondary:focus-visible{
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 860px){
  .hero{
    min-height: 100vh;
    min-height: 100svh;
  }
}

@media (max-width: 480px){
  .hero-title{ max-width: none; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about{
  padding: clamp(56px, 9vw, 112px) 0;
}

.about-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 88px);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-3xl);
  box-shadow: 0 30px 60px -28px rgba(50,47,42,.22);
  padding: clamp(40px, 6vw, 72px) clamp(36px, 5.5vw, 64px);
}

.about-photo{
  flex-shrink: 0;
  width: clamp(260px, 30vw, 380px);
  height: clamp(320px, 32vw, 440px);
  overflow: hidden;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}

.about-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.about-content{
  flex: 1 1 480px;
  min-width: 0;
}

.about-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

[data-reveal-letters] .letter{
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(.5);
}

[data-reveal-letters].in-view .letter{
  animation: letter-jump 480ms cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes letter-jump{
  from{ opacity: 0; transform: translateY(20px) scale(.5); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  [data-reveal-letters] .letter{
    opacity: 1;
    transform: none;
  }
}

.about-role{
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--accent-dark);
  margin: 8px 0 0;
}

.about-bio{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 20px 0 0;
}

.certificates{
  margin-top: clamp(32px, 5vw, 48px);
}

.certificates-label{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.certificates-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.cert-badge{
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}

.cert-badge img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

@media (hover: hover) and (pointer: fine){
  .cert-badge:hover{
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
}

.cert-badge:focus-visible{
  border-color: var(--accent-dark);
}

@media (max-width: 860px){
  .about-inner{
    flex-direction: column;
  }

  .about-photo{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 560px;
    max-width: 420px;
    margin: 0 auto;
  }

  .cert-badge:nth-child(4){
    display: none;
  }

  .certificates-label{
    text-align: center;
  }

  .certificates-row{
    justify-content: center;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 64px);
  background: rgba(50,47,42,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s var(--ease-out), visibility 0s linear .28s;
}

.lightbox.is-open{
  opacity: 1;
  visibility: visible;
  transition: opacity .28s var(--ease-out), visibility 0s linear 0s;
}

.lightbox-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
}

.lightbox-image{
  max-width: min(560px, 100%);
  max-height: 80vh;
  border-radius: var(--radius-lg);
  background: var(--paper-alt);
  box-shadow: 0 40px 80px rgba(0,0,0,.4);
  transform: scale(.94);
  transition: transform .28s var(--ease-out), opacity .18s var(--ease);
}

.lightbox.is-open .lightbox-image{
  transform: scale(1);
}

.lightbox-counter{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--paper-alt);
  opacity: .7;
}

.lightbox-close,
.lightbox-nav{
  position: absolute;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(243,241,237,.1);
  border: 1px solid rgba(243,241,237,.3);
  color: var(--paper);
  transition: background .2s var(--ease);
}

.lightbox-close{
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
}

.lightbox-nav{
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev{ left: clamp(12px, 3vw, 28px); }
.lightbox-next{ right: clamp(12px, 3vw, 28px); }

@media (hover: hover) and (pointer: fine){
  .lightbox-close:hover,
  .lightbox-nav:hover{
    background: rgba(243,241,237,.2);
  }
}

@media (max-width: 600px){
  .lightbox-nav{
    width: 38px;
    height: 38px;
  }
  .lightbox-prev{ left: 8px; }
  .lightbox-next{ right: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .lightbox,
  .lightbox-image{
    transition: opacity .15s ease;
    transform: none;
  }
}

/* ==========================================================================
   Services
   ========================================================================== */
.services{
  padding: clamp(56px, 9vw, 112px) 0;
}

@media (min-width: 861px){
  .services{
    padding-top: clamp(24px, 4vw, 48px);
  }
}

.services-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.services-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.services-intro{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 16px 0 0;
}

.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
}

@media (min-width: 600px) and (max-width: 860px){
  .services-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .service-card:nth-child(5){
    grid-column: span 2;
  }
}

.service-card{
  display: block;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 30px);
  opacity: 0;
  transform: translateX(-28px);
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
}

.services-grid.in-view .service-card{
  animation: card-slide-in 550ms var(--ease-out) both;
}

.services-grid.in-view .service-card:nth-child(1){ animation-delay: 0ms; }
.services-grid.in-view .service-card:nth-child(2){ animation-delay: 110ms; }
.services-grid.in-view .service-card:nth-child(3){ animation-delay: 220ms; }
.services-grid.in-view .service-card:nth-child(4){ animation-delay: 330ms; }
.services-grid.in-view .service-card:nth-child(5){ animation-delay: 440ms; }

@keyframes card-slide-in{
  from{ opacity: 0; transform: translateX(-28px); }
  to{ opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce){
  .service-card{
    opacity: 1;
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine){
  .service-card:hover{
    transform: translateY(-4px);
    border-color: var(--accent-dark);
    box-shadow: 0 24px 48px -24px rgba(50,47,42,.28);
  }
}

.service-icon{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  margin-bottom: 22px;
}

.service-name{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

.service-desc{
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing{
  padding: clamp(56px, 9vw, 112px) 0;
}

@media (min-width: 861px){
  .pricing{
    padding-top: 0;
  }
}

.pricing-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.pricing-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.pricing-list{
  margin-top: clamp(32px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.price-tile{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 22px 30px;
}

.price-name{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
}

.price-value{
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--accent-dark);
  white-space: nowrap;
}

/* ==========================================================================
   Story
   ========================================================================== */
.story{
  padding: clamp(56px, 9vw, 112px) 0;
  overflow: hidden;
}

@media (min-width: 861px){
  .story{
    padding-top: 0;
  }
}

.story-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}

.story-content{
  flex: 1 1 440px;
  min-width: 0;
}

.story-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}

.story-text{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 20px 0 0;
}

.story-photos{
  position: relative;
  flex-shrink: 0;
  width: clamp(280px, 32vw, 420px);
  height: clamp(340px, 34vw, 460px);
}

@media (min-width: 861px){
  .story-photos{
    margin-top: 32px;
  }
}

.story-photo{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 50px -22px rgba(50,47,42,.3);
  color: var(--accent-dark);
  overflow: hidden;
}

.story-photo img,
.service-hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-photo-1{
  top: 2%;
  left: 0;
  width: 68%;
  height: 58%;
  z-index: 1;
  animation: story-drift-1 7.5s ease-in-out infinite;
}

.story-photo-2{
  right: 0;
  bottom: 6%;
  width: 58%;
  height: 50%;
  z-index: 2;
  animation: story-drift-2 8.5s ease-in-out infinite;
  animation-delay: -3s;
}

.story-photo-3{
  top: 40%;
  left: 22%;
  width: 46%;
  height: 38%;
  z-index: 3;
  animation: story-drift-3 6.5s ease-in-out infinite;
  animation-delay: -1.5s;
}

@keyframes story-drift-1{
  0%, 100%{ transform: translateY(0) rotate(-6deg); }
  50%{ transform: translateY(-14px) rotate(-4deg); }
}

@keyframes story-drift-2{
  0%, 100%{ transform: translateY(0) rotate(5deg); }
  50%{ transform: translateY(-10px) rotate(7deg); }
}

@keyframes story-drift-3{
  0%, 100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-17px) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce){
  .story-photo-1,
  .story-photo-2,
  .story-photo-3{
    animation: none;
  }
  .story-photo-1{ transform: rotate(-6deg); }
  .story-photo-2{ transform: rotate(5deg); }
  .story-photo-3{ transform: rotate(-2deg); }
}

@media (max-width: 860px){
  .story-inner{
    flex-direction: column;
    align-items: stretch;
  }

  .story-content{
    width: 100%;
    flex: 0 0 auto;
  }

  .story-photos{
    width: 100%;
    max-width: 380px;
    height: 340px;
    align-self: center;
  }
}

@media (min-width: 600px) and (max-width: 860px){
  .story{
    padding-bottom: 16px;
  }

  .story-inner{
    gap: 72px;
  }

  .story-title,
  .story-text{
    max-width: none;
  }

  .story-photos{
    max-width: 560px;
    height: 340px;
  }
}

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{
  padding: clamp(56px, 9vw, 112px) 0;
}

@media (min-width: 861px){
  .reviews{
    padding-top: 0;
  }
}

.reviews-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.reviews-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.reviews-summary{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.reviews-summary-text{
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-soft);
  margin: 0;
}

.reviews-summary-link{
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reviews-carousel{
  margin-top: clamp(32px, 5vw, 48px);
  margin-left: -4px;
  margin-right: -4px;
  padding: 6px 4px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.reviews-carousel::-webkit-scrollbar{
  display: none;
}

.reviews-track{
  display: flex;
  gap: 20px;
}

.review-card{
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 3vw, 30px);
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}

@media (hover: hover) and (pointer: fine){
  .review-card:hover{
    border-color: var(--ink);
    transform: translateY(-2px);
  }
}

@media (min-width: 601px){
  .review-card{
    flex: 0 0 calc((100% - 20px) / 2);
  }
}

@media (min-width: 861px){
  .review-card{
    flex: 0 0 calc((100% - 40px) / 3);
  }
}

.reviews-controls{
  display: flex;
  gap: 12px;
  margin-top: 24px;
  justify-content: center;
}

.reviews-nav{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

@media (hover: hover) and (pointer: fine){
  .reviews-nav:hover{
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }
}

.review-header{
  display: flex;
  align-items: center;
  gap: 12px;
}

.review-avatar{
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.review-meta{ min-width: 0; }

.review-name{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}

.review-date{
  margin: 2px 0 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}

.review-stars{
  display: flex;
  gap: 3px;
  margin: 14px 0 12px;
}

.review-stars .star{
  width: 15px;
  height: 15px;
}

.review-stars .star.filled{ fill: #FBBC04; }
.review-stars .star.empty{ fill: var(--line); }

.review-text{
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{
  padding: clamp(56px, 9vw, 112px) 0;
  overflow: hidden;
}

@media (min-width: 861px){
  .contact{
    padding-top: 0;
  }
}

.contact-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(48px, 7vw, 96px);
}

.contact-content{
  flex: 1 1 440px;
  min-width: 0;
}

.contact-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  max-width: 18ch;
}

.contact-text{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 20px 0 0;
}

.contact-details{
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 24px 0 0;
}

.contact-detail{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
}

a.contact-detail:hover{
  color: var(--accent-dark);
}

.contact-detail svg{
  flex-shrink: 0;
  color: var(--accent-dark);
}

.contact-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
  max-width: 440px;
}

.form-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label{
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .03em;
  color: var(--ink-soft);
}

.form-row input,
.form-row select,
.form-row textarea{
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  resize: vertical;
  transition: border-color .2s var(--ease);
}

.form-row select{
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%235C574F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline: none;
  border-color: var(--accent-dark);
}

.form-submit{
  align-self: center;
  margin-top: 4px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}

.form-submit:hover,
.form-submit:focus-visible{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.form-submit:disabled{
  opacity: .6;
  cursor: default;
}

.form-honeypot{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.checkbox-label{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"]{
  width: 17px;
  height: 17px;
  accent-color: var(--accent-dark);
  flex-shrink: 0;
}

.slot-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.slot-hint{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
}

.slot-btn{
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

@media (hover: hover) and (pointer: fine){
  .slot-btn:hover{
    border-color: var(--accent-dark);
  }
}

.slot-btn.is-selected{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.form-status{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 1em;
}

.form-status.is-success{
  color: var(--accent-dark);
}

.form-status.is-error{
  color: #A3432E;
}

.contact-photos{
  position: relative;
  flex-shrink: 0;
  width: clamp(320px, 36vw, 480px);
  height: clamp(380px, 38vw, 520px);
}

.contact-photo{
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 50px -22px rgba(50,47,42,.3);
  color: var(--accent-dark);
  overflow: hidden;
}

.contact-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-photo-1{
  top: 0;
  left: 0;
  width: 72%;
  height: 66%;
  z-index: 1;
  animation: contact-drift-1 8s ease-in-out infinite;
}

.contact-photo-2{
  right: 0;
  bottom: 0;
  width: 58%;
  height: 52%;
  z-index: 2;
  animation: contact-drift-2 9s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes contact-drift-1{
  0%, 100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(-16px) rotate(-2deg); }
}

@keyframes contact-drift-2{
  0%, 100%{ transform: translateY(0) rotate(4deg); }
  50%{ transform: translateY(-12px) rotate(6deg); }
}

@media (prefers-reduced-motion: reduce){
  .contact-photo-1,
  .contact-photo-2{
    animation: none;
  }
  .contact-photo-1{ transform: rotate(-4deg); }
  .contact-photo-2{ transform: rotate(4deg); }
}

@media (max-width: 860px){
  .contact-inner{
    flex-direction: column;
  }

  .contact-photos{
    width: 100%;
    max-width: 380px;
    height: 360px;
  }
}

.contact-map-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: clamp(40px, 6vw, 64px) auto 0;
}

.contact-map{
  width: 100%;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 30px 50px -22px rgba(50,47,42,.3);
}

.contact-map-frame{
  width: 100%;
  height: clamp(280px, 32vw, 400px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.contact-map-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(.3) contrast(1.05);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background: var(--ink);
  padding: clamp(48px, 7vw, 80px) 0 clamp(24px, 3vw, 32px);
}

.footer-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: clamp(32px, 5vw, 48px);
  border-bottom: 1px solid rgba(243,241,237,.12);
}

.footer-brand{
  flex: 1 1 220px;
  max-width: 340px;
}

.footer-brand-desc{
  margin: 16px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-alt);
  opacity: .55;
}

.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.footer-logo-image{
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

.footer-logo-text{
  display: flex;
  flex-direction: column;
}

.footer-logo-name{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 17px;
  color: var(--accent);
  line-height: 1.15;
  white-space: nowrap;
}

.footer-logo-sub{
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-alt);
  opacity: .6;
  margin-top: 5px;
}

.footer-heading{
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer-nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav a{
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.footer-nav a:hover,
.footer-nav a:focus-visible{
  color: var(--accent);
}

.footer-contact{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-item{
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.footer-contact-item svg{
  flex-shrink: 0;
  color: var(--accent);
}

a.footer-contact-item:hover,
a.footer-contact-item:focus-visible{
  color: var(--accent);
}

.footer-legal-ids{
  margin: 2px 0 0 26px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--paper-alt);
  opacity: .5;
}

.footer-bottom{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  padding-top: clamp(20px, 3vw, 28px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
}

.footer-bottom p{
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--paper-alt);
  opacity: .5;
  text-align: center;
}

.footer-bottom p.footer-credit{
  opacity: .7;
}

.footer-credit a{
  color: var(--paper-alt);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s var(--ease);
}

.footer-credit a:hover,
.footer-credit a:focus-visible{
  color: var(--accent);
}

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

  .footer-brand{
    flex: 0 0 auto;
  }

  .footer-nav ul,
  .footer-contact{
    align-items: center;
  }

  .footer-legal-ids{
    margin-left: 0;
  }
}

/* ==========================================================================
   Service hero (podstrony usług, np. Fizjoterapia ortopedyczna)
   ========================================================================== */
.service-hero{
  padding: clamp(100px, 14vw, 160px) 0 clamp(56px, 9vw, 112px);
}

.service-hero-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.service-hero-card{
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-3xl);
  padding: clamp(32px, 4.5vw, 64px);
}

.service-hero-content{
  flex: 1 1 440px;
  min-width: 0;
}

.service-hero-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
  max-width: 16ch;
}

.service-hero-text{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 20px 0 0;
}

.service-hero-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.service-hero-cta,
.service-hero-cta-secondary{
  display: inline-block;
  border-radius: 999px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.service-hero-cta{
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.service-hero-cta:hover,
.service-hero-cta:focus-visible{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.service-hero-cta-secondary{
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}

.service-hero-cta-secondary:hover,
.service-hero-cta-secondary:focus-visible{
  background: var(--ink);
  color: var(--paper);
}

.service-hero-photo{
  position: relative;
  flex-shrink: 0;
  width: clamp(240px, 26vw, 340px);
  height: clamp(280px, 30vw, 400px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 50px -22px rgba(50,47,42,.3);
  color: var(--accent-dark);
  overflow: hidden;
  animation: service-hero-float 8s ease-in-out infinite;
}

@keyframes service-hero-float{
  0%, 100%{ transform: rotate(-5deg) translateY(0); }
  50%{ transform: rotate(-3deg) translateY(-16px); }
}

@media (prefers-reduced-motion: reduce){
  .service-hero-photo{
    animation: none;
    transform: rotate(-5deg);
  }
}

@media (max-width: 860px){
  .service-hero-card{
    flex-direction: column;
    text-align: center;
  }

  .service-hero-content{
    width: 100%;
  }

  .service-hero-title{
    max-width: none;
  }

  .service-hero-buttons{
    justify-content: center;
  }

  .service-hero-photo{
    width: 100%;
    max-width: 280px;
    height: 260px;
  }
}

.notfound-links{
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.notfound-links a{
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}

.notfound-links a:hover,
.notfound-links a:focus-visible{
  color: var(--accent-dark);
  text-decoration-color: var(--accent-dark);
}

@media (max-width: 860px){
  .notfound-links{
    justify-content: center;
  }
}

/* ==========================================================================
   Service FAQ
   ========================================================================== */
.service-faq{
  padding: clamp(56px, 9vw, 112px) 0;
}

.service-faq-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6vw, 88px);
}

.service-faq-content{
  flex: 1 1 480px;
  min-width: 0;
}

.service-faq-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.faq-list{
  margin-top: clamp(28px, 4vw, 40px);
}

.faq-item{
  border-bottom: 1px solid var(--line);
}

.faq-item:first-child{
  border-top: 1px solid var(--line);
}

.faq-question-wrap{
  margin: 0;
  font: inherit;
}

.faq-question{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 2px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}

.faq-question:hover,
.faq-question:focus-visible{
  color: var(--accent-dark);
}

.faq-caret{
  flex-shrink: 0;
  color: var(--accent-dark);
  transition: transform .25s var(--ease);
}

.faq-item.is-open .faq-caret{
  transform: rotate(180deg);
}

.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s var(--ease);
}

.faq-item.is-open .faq-answer{
  max-height: 400px;
}

.faq-answer-inner{
  padding: 0 2px 22px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 56ch;
}

@media (max-width: 860px){
  .service-faq-inner{
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .service-faq-content{
    width: 100%;
  }

  .faq-question{
    text-align: left;
  }
}

/* ==========================================================================
   Process (Jak wygląda wizyta)
   ========================================================================== */
.process{
  padding: clamp(56px, 9vw, 112px) 0;
}

.process-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--container);
  margin: 0 auto;
}

.process-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.process-intro{
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 20px 0 0;
}

.process-steps{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: clamp(36px, 5vw, 56px);
}

.process-step{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 30px);
}

.process-number{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 22px;
}

.process-notes{
  margin-top: clamp(28px, 4vw, 40px);
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  padding: clamp(28px, 4vw, 44px);
}

.process-notes-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 20px;
}

.process-notes-list{
  display: grid;
  gap: 14px;
}

.process-notes-list li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.process-notes-check{
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-dark);
}

@media (min-width: 601px) and (max-width: 860px){
  .process-steps{
    grid-template-columns: repeat(2, 1fr);
  }

  .process-step:nth-child(3){
    grid-column: span 2;
  }
}

/* ==========================================================================
   Consent banner (cookies / prywatność)
   ========================================================================== */
.consent-banner{
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 300;
  width: min(380px, calc(100vw - 48px));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-2xl);
  box-shadow: 0 30px 60px -28px rgba(50,47,42,.4), 0 8px 24px rgba(50,47,42,.16);
  padding: clamp(24px, 3vw, 30px);
  transform: translateX(calc(-100% - 48px));
  opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out);
}

.consent-banner.is-visible{
  transform: translateX(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .consent-banner{
    transition: opacity .3s ease;
    transform: none;
  }
}

.consent-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--accent-dark);
  margin-bottom: 16px;
}

.consent-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.consent-text{
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.consent-text a{
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.consent-accept{
  flex: 1 1 auto;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.consent-accept:hover,
.consent-accept:focus-visible{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

@media (max-width: 480px){
  .consent-banner{
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}

/* ==========================================================================
   Strony prawne (polityka prywatności)
   ========================================================================== */
.legal{
  padding: clamp(100px, 14vw, 160px) 0 clamp(56px, 9vw, 112px);
}

.legal-inner{
  width: calc(100% - var(--gutter) * 2);
  max-width: 760px;
  margin: 0 auto;
}

.legal-title{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 10px;
}

.legal-updated{
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 40px;
}

.legal h2{
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin: 40px 0 14px;
}

.legal p{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.legal ul{
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal li{
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.legal a{
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}