/* SAF CONSULTING V13 — Visual continuity and reliable persistent navigation.
   Inspired by Studio Strony behavior, preserving SAF brand, sections, and copy. */

/* 1. Logo + consultation CTA follow the visitor, with a deliberate compact state. */
html { scroll-padding-top: 100px; }
section[id], #obszary-karty { scroll-margin-top: 100px; }
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 700;
  border-bottom: 1px solid transparent;
  background: rgba(3, 18, 30, 0);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.header-row { transition: height .25s ease; }
.brand-mark-v8,.brand-wordmark-v8 { transition: width .25s ease,height .25s ease; }
.header.is-scrolled {
  background: rgba(4, 22, 34, .95);
  border-bottom-color: rgba(214,175,115,.24);
  box-shadow: 0 14px 36px rgba(1,13,23,.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.header.is-scrolled .header-row {height: 76px;}
.header.is-scrolled .brand-mark-v8 {width:37px;height:48px;}
.header.is-scrolled .brand-wordmark-v8 {width:164px;}
.header-action { background: var(--gold-fill); color: var(--ink); box-shadow:0 6px 18px rgba(3,18,30,.08); }
.header.is-scrolled .header-action {min-height:44px;padding:11px 20px;}
.header.is-scrolled .nav a {color:#f6f3ec;}
@media (min-width:1100px) and (max-width:1300px){
  .header-row{gap:17px}
  .nav{gap:17px}
  .header-action{padding-inline:17px;gap:10px;font-size:11px}
  .brand-wordmark-v8{width:170px}
  .brand-mark-v8{width:40px;height:51px}
}
/* Desktop: the anchored header CTA is the permanent invitation. */
@media (min-width:1100px){.floating-cta{display:none!important}}

/* Tablet and mobile keep the logo at top; a dedicated bottom CTA appears
   only when the hero's own CTA has scrolled off screen. */
@media (max-width:1099px){
  html {scroll-padding-top:82px}
  section[id],#obszary-karty{scroll-margin-top:82px}
  .header.is-scrolled .header-row{height:68px}
  .header.is-scrolled .brand-mark-v8{width:32px;height:43px}
  .header.is-scrolled .brand-wordmark-v8{width:149px}
  .header.is-scrolled .nav {top:68px}
  .header-action{display:none}
  .floating-cta{
    position:fixed;left:24px;right:24px;bottom:calc(15px + env(safe-area-inset-bottom,0px));
    z-index:660;width:auto;max-width:530px;margin-inline:auto;
    min-height:54px;padding:10px 13px 10px 22px;
    background:#eddbb8;border:1px solid #e9ce9e;border-radius:100px;
    box-shadow:0 14px 36px rgba(2,14,24,.24);
  }
  .floating-cta strong{font-size:13px;letter-spacing:0}
  .cta-cta-icon{width:34px;height:34px}
  .footer-bottom{padding-bottom:100px}
}
@media(max-width:600px){
  html{scroll-padding-top:74px}
  section[id],#obszary-karty{scroll-margin-top:74px}
  .header.is-scrolled .header-row{height:60px}
  .header.is-scrolled .brand-mark-v8{width:26px;height:37px}
  .header.is-scrolled .brand-wordmark-v8{width:133px}
  .header.is-scrolled .nav{top:60px}
  .floating-cta{left:12px;right:12px;max-width:none;bottom:calc(12px + env(safe-area-inset-bottom,0px));min-height:52px;padding-left:20px}
  .floating-cta strong{font-size:12px}
  .footer-bottom{padding-bottom:102px}
}
@media(max-width:370px){
  .header.is-scrolled .brand-mark-v8{width:24px;height:34px}
  .header.is-scrolled .brand-wordmark-v8{width:117px}
  .floating-cta strong{font-size:11.5px}
}

/* 2. Preserve the architecture premium rhythm from hero to footer.
   Editorial hierarchy and purposeful section dividers, no new gimmicks. */
.value-band{border-bottom:1px solid rgba(214,175,115,.25)}
.sit2{padding-block:clamp(84px,8.5vw,124px)}
.sit2 .s-h{font-size:clamp(50px,4.65vw,70px);line-height:1.07;letter-spacing:-.017em}
.sit2-card{box-shadow:0 20px 54px rgba(13,31,43,.045)}
.offer-intro .headline,.faq .headline,.pr2-head .s-h{letter-spacing:-.017em}
.offer-intro,.faq-layout{align-items:start}
.services{border-top:1px solid rgba(176,144,99,.18)}
.faq{border-top:1px solid rgba(176,144,99,.16)}
.faq-layout>.reveal::before{width:92px}
.faq .headline{max-width:12ch}
.faq-items details{position:relative}
.faq-items details::before{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:rgba(168,121,63,.8);transition:width .28s var(--ease);pointer-events:none}
.faq-items details[open]::before{width:100%}
.footer{border-top:1px solid rgba(214,175,115,.44)}
@media(max-width:600px){
  .sit2{padding-block:72px}
  .sit2 .s-h{font-size:40px;line-height:1.08}
  .faq .headline{max-width:none}
}
@media(prefers-reduced-motion:reduce){.header,.header-row,.brand-mark-v8,.brand-wordmark-v8,.faq-items details::before{transition:none!important}}