/* =====================================================
   MAK INSTAL — tokens
   ===================================================== */
:root{
  /* surfaces */
  --bg:        #F7F4EE;            /* warm off-white, never pure */
  --bg-2:      #F1ECE2;            /* differentiated section */
  --bg-3:      #EDE7DA;            /* hairline contrast */
  --paper:     #FBF9F4;            /* card surface */
  --ink:       #1B1A17;            /* never pure black */
  --ink-2:     #43413C;
  --ink-3:     #7A766D;
  --ink-4:     #B6B0A2;
  --rule:      rgba(27,26,23,0.10);
  --rule-2:    rgba(27,26,23,0.06);

  /* brand */
  --red:       #E11D2A;            /* primary CTA — sparingly */
  --red-700:   #B8121D;
  --blue:      #1F3FB2;            /* secondary, links, icons */
  --blue-700:  #16308C;
  --blue-50:   #EAEEFB;

  /* santander accent (typographic only) */
  --santander: #EC0000;

  /* radii */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* type */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:    "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --ease:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);

  /* layout */
  --pad-x:   clamp(20px, 5vw, 88px);
  --section: clamp(96px, 12vw, 160px);
  --max:     1440px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
  background:var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */
.h-display{
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:0.98;
  text-wrap:balance;
  color:var(--ink);
}
.h1{ font-size: clamp(48px, 7.2vw, 112px); }
.h2{ font-size: clamp(40px, 5.4vw, 76px); letter-spacing:-0.022em; line-height:1.02; font-family:var(--display); font-weight:600; color:var(--ink); margin:0; text-wrap:balance; }
.h3{ font-size: clamp(24px, 2.4vw, 34px); letter-spacing:-0.015em; line-height:1.1;  font-family:var(--display); font-weight:600; margin:0; color:var(--ink); }
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:500;
}
.eyebrow .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--red);vertical-align:middle;margin-right:10px;transform:translateY(-1px);
}
.lead{
  font-size:clamp(17px,1.3vw,20px);
  line-height:1.55;
  color:var(--ink-2);
  max-width:54ch;
  text-wrap:pretty;
}
.muted{ color:var(--ink-3) }

/* =====================================================
   LAYOUT PRIMITIVES
   ===================================================== */
.shell{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
section{ padding-block: var(--section); }
.section-head{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:end;
  margin-bottom: 72px;
}
.section-head .lead{ justify-self:end; }
@media (max-width: 900px){
  .section-head{ grid-template-columns:1fr; gap:24px; }
  .section-head .lead{ justify-self:start; }
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn{
  --bh: 56px;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:var(--bh);
  padding:0 26px;
  border-radius:999px;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.005em;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  isolation:isolate;
  overflow:hidden;
  white-space:nowrap;
}
.btn .arr{
  width:18px;height:18px;display:inline-block;
  transition: transform .4s var(--ease);
}
.btn:hover{ transform: scale(1.02); }
.btn:hover .arr{ transform: translateX(4px); }

.btn-primary{
  background:var(--red); color:#fff;
}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:var(--red-700);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
  z-index:-1;
}
.btn-primary:hover::before{ transform:translateX(0); }

.btn-secondary{
  border:1.5px solid var(--blue);
  color:var(--blue);
  background:transparent;
}
.btn-secondary::before{
  content:""; position:absolute; inset:0; background:var(--blue);
  transform:translateX(-101%);
  transition:transform .5s var(--ease);
  z-index:-1;
}
.btn-secondary:hover{ color:#fff; border-color:var(--blue);}
.btn-secondary:hover::before{ transform:translateX(0); }

.btn-ghost{
  height:auto; padding:0;
  background:none; border:0; border-radius:0;
  color:var(--blue);
  border-bottom:1px solid currentColor;
  padding-bottom:4px;
}
.btn-ghost:hover{ transform:none; color:var(--blue-700); }

.btn-sm{ --bh:44px; padding:0 20px; font-size:14px; }

/* =====================================================
   NAVBAR
   ===================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:88px;
}
.nav.scrolled{
  background: rgba(247,244,238,0.86);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom:1px solid var(--rule);
}
.nav.scrolled .nav-inner{ height:76px; }

.brand{ flex:0 0 auto; display:flex; align-items:center; }
.brand img{ height:52px; width:auto; }
.nav.scrolled .brand img{ height:46px; transition: height .4s var(--ease); }
/* mobile: keep the logo at full size — shrink the CTA instead */
@media (max-width: 980px){
  .nav-cta{ gap:10px; }
  .nav-cta .btn-primary.btn-sm{
    --bh: 42px; padding: 0 16px; font-size: 13px; gap: 8px;
  }
}
@media (max-width: 560px){
  .nav-cta .btn-primary.btn-sm{
    --bh: 38px; padding: 0 13px; font-size: 12px; gap: 0;
  }
  .nav-cta .btn-primary.btn-sm .arr{ display:none; }
}
.nav-links{
  display:flex; align-items:center; gap:36px;
}
.nav-links a{
  font-size:15px; font-weight:600;
  color:var(--ink);
  position:relative;
  letter-spacing:-0.005em;
  transition: color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--blue);
  transition: width .35s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-phone{
  font-family:var(--mono);font-size:14px;color:var(--ink);
  letter-spacing:0.02em; font-weight:500;
}
.nav-phone strong{color:var(--ink);font-weight:600}

.nav-burger{ display:none; }
.nav-burger .ico{ transition: opacity .25s var(--ease), transform .35s var(--ease); }
.nav-burger .ico-close{ display:none; }

/* mobile menu panel — hidden / inert on desktop */
.nav-mobile{ display:none; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-phone{ display:none; }
  .nav-burger{
    display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
    border-radius:999px; border:1px solid var(--rule);
    transition: background .3s var(--ease), border-color .3s var(--ease);
  }
  .nav.menu-open{
    background: rgba(247,244,238,0.96);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border-bottom:1px solid var(--rule);
  }
  .nav.menu-open .nav-burger{ background: var(--ink); border-color: var(--ink); color:#fff; }
  .nav.menu-open .nav-burger .ico-open{ display:none; }
  .nav.menu-open .nav-burger .ico-close{ display:inline-flex; }

  .nav-mobile{
    display:block;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform: translateY(-8px);
    pointer-events:none;
    background: rgba(247,244,238,0.98);
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    border-bottom:1px solid var(--rule);
    transition: max-height .5s var(--ease), opacity .35s var(--ease), transform .45s var(--ease);
  }
  .nav.menu-open .nav-mobile{
    max-height: 80vh;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .nav-mobile-links{ display:flex; flex-direction:column; padding: 8px var(--pad-x) 0; }
  .nav-mobile-links a{
    display:flex; align-items:baseline; gap:18px;
    padding: 20px 2px;
    font-family:var(--display); font-weight:600; font-size: clamp(22px, 6vw, 30px);
    letter-spacing:-0.02em; color:var(--ink);
    border-bottom:1px solid var(--rule);
    transition: color .25s var(--ease), padding-left .3s var(--ease);
  }
  .nav-mobile-links a .i{
    font-family:var(--mono); font-size:12px; font-weight:500;
    letter-spacing:0.16em; color:var(--blue);
  }
  .nav-mobile-links a:hover,
  .nav-mobile-links a:active{ color:var(--blue); padding-left:8px; }
  .nav-mobile-links a:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
  .nav-mobile-foot{
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    flex-wrap:wrap;
    padding: 26px var(--pad-x) 32px;
  }
  .nav-mobile-phone{
    font-family:var(--mono); font-size:15px; font-weight:500; letter-spacing:0.02em; color:var(--ink);
    border-bottom:1px solid var(--rule); padding-bottom:3px;
  }
  .nav-mobile-phone:hover{ color:var(--blue); }
}
html.nav-locked{ overflow:hidden; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative;
  padding-top: 152px;
  padding-bottom: 80px;
  min-height: 92vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-bg::after{
  /* desaturate + brighten + blend with off-white */
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, var(--bg) 0%, rgba(247,244,238,0.78) 32%, rgba(247,244,238,0.25) 60%, rgba(247,244,238,0.55) 100%),
    linear-gradient(180deg, rgba(247,244,238,0.55) 0%, rgba(247,244,238,0.10) 30%, rgba(247,244,238,0.85) 100%);
  pointer-events:none;
}
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: 62% 50%;
  filter: saturate(0.55) brightness(1.18) contrast(0.95);
}
.hero-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items:end;
}
.hero-text .eyebrow{ margin-bottom:32px; display:block; }
.hero-text h1{
  margin: 0 0 28px;
  font-family:var(--display);
  font-weight:600;
}
.hero-text h1 .accent{
  display:inline-block; position:relative;
}
.hero-text h1 .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:0.04em; height:0.14em;
  background: var(--red); opacity:0.18; z-index:-1;
}
.hero-text .lead{ margin-bottom:44px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }

.hero-meta{
  align-self:end;
  display:flex; flex-direction:column; gap:28px;
  margin-bottom: 6px;
  padding: 32px 32px 32px 36px;
  position:relative;
  background: rgba(247,244,238,0.78);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.hero-meta::before{
  content:""; position:absolute; left:0; top:24px; bottom:24px; width:2px;
  background: var(--blue); opacity:0.85; border-radius:2px;
}
.hero-meta .mlabel{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:8px; display:block; font-weight:500;}
.hero-meta .mval{ font-family:var(--display); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; line-height:1.1;}
.hero-meta .mval small{ font-size:13px; color:var(--ink-2); font-weight:500; display:block; margin-top:6px;font-family:var(--body); letter-spacing:0; line-height:1.4;}
@media (max-width:900px){
  .hero{ min-height:auto; padding-top:128px; }
  .hero-grid{ grid-template-columns:1fr; gap:48px; }
  .hero-meta{ flex-direction:row; flex-wrap:wrap; gap:24px 32px; padding:24px 24px 24px 28px;}
  .hero-meta > div{ flex:1 1 200px;}
}

/* hero ticker (location + scroll cue) */
.hero-foot{
  position:relative; z-index:2;
  margin-top: 80px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
}
.hero-foot .sep{display:inline-block;width:24px;height:1px;background:currentColor;margin:0 12px;vertical-align:middle;opacity:0.4}
.scroll-cue{display:inline-flex;align-items:center;gap:10px}
.scroll-cue .line{display:block;width:32px;height:1px;background:var(--ink-3);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{
  0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)}
}

/* =====================================================
   MARQUEE
   ===================================================== */
.marquee-wrap{
  padding-block: 56px;
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  background:var(--bg);
  overflow:hidden;
  position:relative;
}
.marquee-label{
  font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.2em;
  color:var(--ink-3); margin-bottom:28px; padding-inline: var(--pad-x);
  display:flex; align-items:center; gap:14px;
}
.marquee-label .ln{ flex:1; height:1px; background:var(--rule);}
.marquee{
  display:flex; gap:0;
  width:max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover{ animation-play-state: paused; }
.marquee .row{ display:flex; gap:0; align-items:center; }
.marquee .item{
  flex:0 0 auto;
  height:56px;
  padding: 0 64px;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--rule-2);
}
.marquee .item img{
  height:100%; width:auto; max-height:48px; object-fit:contain;
  filter: grayscale(1) opacity(0.62);
  transition: filter .4s var(--ease);
}
.marquee .item:hover img{ filter: grayscale(0) opacity(1); }
@keyframes marquee{
  0%{transform:translateX(0)} 100%{transform:translateX(-50%)}
}

/* =====================================================
   PROCESS
   ===================================================== */
.process{
  background:var(--bg);
}
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top:1px solid var(--rule);
}
.step{
  position:relative;
  padding: 56px 40px;
  border-right:1px dashed var(--rule);
  min-height: 260px;
}
.step:last-child{ border-right:0; }
.step .ghost{
  position:absolute; top:24px; right:40px;
  font-family:var(--display); font-weight:700; font-size:120px;
  color:var(--ink); opacity:0.05; line-height:1; letter-spacing:-0.04em;
  pointer-events:none;
}
.step .num{
  font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:0.18em;
}
.step h3{ margin-top:80px; margin-bottom:14px; }
.step p{ color:var(--ink-2); font-size:15px; line-height:1.6; max-width:32ch; }
.step .arrow{ position:absolute; right:40px; bottom:32px; color:var(--ink-4); width:18px; height:18px;}
@media (max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(1),.step:nth-child(2){border-bottom:1px dashed var(--rule)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px dashed var(--rule);padding:40px 0}
}

/* =====================================================
   SERVICES — asymmetric
   ===================================================== */
.services{
  background:var(--bg);
}
.svc-grid{
  display:grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 28px;
  align-items: stretch;
}
.svc-card{
  position:relative;
  border:1px solid var(--rule);
  border-radius: var(--r-lg);
  background:var(--paper);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.svc-card:hover{ transform: translateY(-4px); border-color: rgba(27,26,23,0.18); }
.svc-card .photo{
  position:relative; overflow:hidden; aspect-ratio: 16/10;
  background:var(--bg-3);
}
.svc-card .photo img{
  width:100%;height:100%;object-fit:cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease);
}
.svc-card:hover .photo img{ transform: scale(1.06); }
.svc-card .photo .ghost-no{
  position:absolute; top:18px; left:22px;
  font-family:var(--display); font-weight:700; font-size:64px; line-height:1;
  color:#fff; opacity:0.85; text-shadow: 0 0 24px rgba(0,0,0,0.18);
  letter-spacing:-0.04em;
}
.svc-card .body{ padding: 32px 32px 36px; }
.svc-card .eyebrow{ margin-bottom:12px; display:block; }
.svc-card h3{ margin-bottom: 14px; }
.svc-card p{ color:var(--ink-2); font-size:15px; margin:0 0 22px; max-width:48ch;}
.svc-card ul{
  list-style:none; margin:0 0 24px; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.svc-card li{
  position:relative; padding-left:22px; font-size:14.5px; color:var(--ink-2);
}
.svc-card li::before{
  content:""; position:absolute; left:0; top:9px; width:10px; height:1.5px;
  background:var(--blue);
}
.svc-card .more{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; color:var(--blue); font-weight:600;
  border-bottom:1px solid var(--blue-50); padding-bottom:4px;
  transition: gap .3s var(--ease), border-color .3s var(--ease);
}
.svc-card .more:hover{ gap:14px; border-color: var(--blue);}

/* secondary column (40%) */
.svc-side{ display:flex; flex-direction:column; gap:28px;}
.svc-side .svc-card{ flex: 1; display:flex; flex-direction:column;}
.svc-side .svc-card .photo{ aspect-ratio: auto; flex: 1; min-height: 240px;}
.svc-side .svc-card .photo img{ width:100%; height:100%; object-fit:cover;}
.svc-side .svc-card .body{ padding: 28px 28px 32px;}

/* additional services row — wider, less prominent */
.svc-more-grid{
  margin-top: 64px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:0;
  border-top:1px solid var(--rule);
}
.svc-mini{
  display:block;
  padding: 40px;
  border-right:1px dashed var(--rule);
  position:relative;
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.svc-mini:last-child{ border-right:0; }
a.svc-mini:hover{ background:var(--paper); }
a.svc-mini:hover .icn{ color:var(--blue); transform:translateX(4px); }
a.svc-mini .icn{ transition: color .3s var(--ease), transform .4s var(--ease); }
a.svc-mini:focus-visible{ outline:2px solid var(--blue); outline-offset:-3px; }
.svc-mini .num{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--blue); text-transform:uppercase; margin-bottom:24px; display:block;}
.svc-mini h4{ font-family:var(--display); font-size:22px; font-weight:600; margin:0 0 10px; letter-spacing:-0.01em; color:var(--ink);}
.svc-mini p{ font-size:14.5px; color:var(--ink-2); margin:0; max-width:32ch;}
.svc-mini .icn{ position:absolute; right:40px; top:36px; color:var(--ink-4); }

@media (max-width:980px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc-more-grid{ grid-template-columns:1fr; }
  .svc-mini{ border-right:0; border-bottom:1px dashed var(--rule); padding:28px 0;}
}

/* =====================================================
   WHY US — stats
   ===================================================== */
.why{
  background:var(--bg-2);
}
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.stat{
  padding: 56px 40px;
  border-right:1px solid var(--rule);
  position:relative;
}
.stat:last-child{ border-right:0; }
.stat .label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--ink-3); text-transform:uppercase;
  margin-bottom: 24px; display:block;
}
.stat .num{
  font-family:var(--display); font-weight:600;
  font-size: clamp(64px, 8vw, 128px);
  line-height:0.95; letter-spacing:-0.04em;
  color:var(--ink);
  display:flex; align-items:flex-start; gap:6px;
}
.stat .num .suffix{
  font-size: 0.42em;
  font-weight:500;
  color:var(--blue);
  margin-top: 0.2em;
  letter-spacing:0;
}
.stat .desc{
  font-size: 15px; color:var(--ink-2); margin-top: 18px; max-width: 26ch;
}
@media (max-width: 980px){
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--rule); }
}
@media (max-width: 560px){
  .stats{ grid-template-columns: 1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--rule); padding: 40px 0;}
  .stat:last-child{ border-bottom:0;}
}

/* =====================================================
   CONDENSATE / SKROPLINY
   ===================================================== */
.cond{ background:var(--bg); }
.cond-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
}
.cond-photos{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.cond-photo{
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-3);
  aspect-ratio: 4/3;
}
.cond-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.4s var(--ease);}
.cond-photos:hover .cond-photo img{ transform:scale(1.03);}
.cond-photo--main{
  grid-column: 1 / -1;
  aspect-ratio: 16/9;
}
.cond-text{ display:flex; flex-direction:column; gap:20px; align-items:flex-start;}
.cond-text .lead{ color:var(--ink); font-size: clamp(17px, 2vw, 19px); line-height:1.55; margin:0;}
.cond-text p{ color:var(--ink-2); font-size:16px; line-height:1.75; margin:0;}
@media (max-width: 900px){
  .cond-grid{ grid-template-columns:1fr; gap:36px;}
}

/* =====================================================
   CALCULATOR
   ===================================================== */
.calc{
  background:var(--bg);
}
.calc-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items:start;
}
.calc-form{
  display:flex; flex-direction:column; gap:48px;
}
.calc-row{}
.calc-row .label{
  display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px;
}
.calc-row .label .ttl{
  font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:0.18em; color:var(--ink-3);
}
.calc-row .label .val{
  font-family:var(--display); font-size:28px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;
}
.calc-row .label .val small{ font-family:var(--body); font-size:14px; color:var(--ink-3); font-weight:500; margin-left:4px; letter-spacing:0;}

/* custom range */
.range{
  --p: 50%;
  width:100%; appearance:none; -webkit-appearance:none;
  height: 4px; background:transparent; outline:none; cursor:pointer;
  position:relative;
}
.range-track{
  position:relative; height:4px; background:var(--bg-3); border-radius:99px; overflow:hidden;
}
.range-fill{
  position:absolute; left:0; top:0; bottom:0; width: var(--p);
  background: var(--ink);
  border-radius:99px;
  transition: width .25s var(--ease);
}
.range-wrap{ position:relative; padding: 14px 0; }
.range-wrap input[type=range]{
  position:absolute; left:0; right:0; top:0; height:100%; opacity:0; cursor:pointer; margin:0; width:100%;
}
.range-thumb{
  position:absolute; left:var(--p); top:50%;
  width:24px; height:24px; border-radius:50%; background:var(--red);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(225,29,42,0.10);
  transition: width .25s var(--ease);
  pointer-events:none;
}
.range-ticks{
  display:flex; justify-content:space-between; margin-top:12px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.06em;
}

.calc-result{
  padding: 56px 48px;
  background: var(--paper);
  border:1px solid var(--rule);
  border-radius: var(--r-xl);
  position:relative;
  overflow:hidden;
}
.calc-result::before{
  content:""; position:absolute; top:-40%; right:-30%; width:80%; height:160%;
  background: radial-gradient(closest-side, rgba(31,63,178,0.06), transparent 70%);
  pointer-events:none;
}
.calc-result .lab{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--ink-3); text-transform:uppercase; margin-bottom:24px; display:block;
}
.calc-result .num-big{
  font-family:var(--display); font-weight:600; font-size: clamp(96px, 12vw, 168px);
  line-height: 0.9; letter-spacing:-0.045em; color:var(--ink);
  display:flex; align-items:flex-start; gap: 10px;
}
.calc-result .num-big .unit{
  font-size:0.18em; font-weight:500; color:var(--blue);
  margin-top: 0.55em; letter-spacing:0.04em; font-family:var(--mono); text-transform:uppercase;
}
.calc-result .desc{
  margin-top: 28px; color: var(--ink-2); font-size:15px; line-height:1.6; max-width:36ch;
}
.calc-result .cta-row{ margin-top: 36px; }

@media (max-width: 980px){
  .calc-grid{ grid-template-columns:1fr; gap:48px; }
}

/* =====================================================
   REALIZATIONS
   ===================================================== */
.real{ background: var(--bg); }
.real-list{
  display:grid; grid-template-columns: 1fr; gap: 0;
  border-top:1px solid var(--rule);
}
.real-item{
  padding: 56px 0;
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items:center;
}
.real-item:nth-child(even){ grid-template-columns: 1.15fr 0.85fr;}
.real-item:nth-child(even) .real-photo{ order:2; }

.real-photo{
  position:relative;
  border-radius: var(--r-lg);
  overflow:hidden;
  aspect-ratio: 4/3;
  background:var(--bg-3);
}
.real-photo img{ width:100%; height:100%; object-fit:cover; transition: transform 1.4s var(--ease);}
.real-item:hover .real-photo img{ transform:scale(1.04);}
.real-no{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--blue); text-transform:uppercase; margin-bottom:18px; display:block;
}
.real-item h3{ margin-bottom:14px; max-width: 18ch;}
.real-item p{ color:var(--ink-2); font-size:15.5px; max-width: 50ch; margin: 0 0 24px;}
.real-meta{
  display:flex; flex-wrap:wrap; gap: 28px 40px;
  border-top:1px solid var(--rule); padding-top:22px; margin-top:8px;
}
.real-meta dt{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3);
  margin-bottom:6px;
}
.real-meta dd{ margin:0; font-size:14.5px; color:var(--ink); font-weight:500;}
.real-bottom{
  display:flex; justify-content:space-between; align-items:center;
  gap: 24px; flex-wrap:wrap;
  padding-top: 56px;
}
@media (max-width: 900px){
  .real-item, .real-item:nth-child(even){ grid-template-columns:1fr; gap:28px;}
  .real-item:nth-child(even) .real-photo{ order:0;}
}
@media (max-width: 640px){
  .real-bottom{ flex-direction:column; align-items:flex-start; gap:20px; }
  .real-bottom .btn{ width:100%; justify-content:center; }
}

/* gallery — „wiaderko" na zdjęcia realizacji (bez opisów) */
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:18px;
  margin-top: 8px;
}
.gallery .g-item{
  position:relative;
  margin:0;
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio: 4/3;
  background:var(--bg-3);
}
.gallery .g-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease);
  cursor: zoom-in;
}
.gallery .g-item:hover img{ transform:scale(1.04); }
.gallery .g-item img:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
@media (max-width: 560px){
  .gallery{ grid-template-columns:1fr; gap:14px; }
}

/* lightbox — pełnoekranowy podgląd zdjęć galerii */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  background:rgba(15,15,17,.92);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ display:flex; opacity:1; }
.lb-img{
  max-width:92vw; max-height:88vh; object-fit:contain;
  border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.55);
  transform:scale(.97); transition:transform .35s var(--ease);
}
.lightbox.is-open .lb-img{ transform:scale(1); }
.lb-close, .lb-nav{
  position:absolute; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); border-radius:999px; cursor:pointer;
  transition:background .25s var(--ease), transform .2s var(--ease);
}
.lb-close:hover, .lb-nav:hover{ background:rgba(255,255,255,.24); }
.lb-close:focus-visible, .lb-nav:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.lb-close:active, .lb-nav:active{ transform:scale(.92); }
.lb-nav:active{ transform:translateY(-50%) scale(.92); }
.lb-close{ top:18px; right:18px; width:46px; height:46px; }
.lb-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; }
.lb-prev{ left:16px; } .lb-next{ right:16px; }
.lb-count{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.85); font-family:var(--mono);
  font-size:12px; letter-spacing:.14em;
}
@media (max-width: 560px){
  .lb-nav{ width:44px; height:44px; }
  .lb-prev{ left:10px; } .lb-next{ right:10px; }
  .lb-img{ max-width:94vw; max-height:82vh; }
}

/* =====================================================
   FINANCING (Santander)
   ===================================================== */
.fin{ background:var(--bg-2); }
.fin-grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:88px; align-items:center;
}
.fin h2{ margin-bottom:24px;}
.fin p{ color:var(--ink-2); font-size: 17px; max-width:48ch; line-height:1.55;}
.fin-card{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 36px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
.fin-card .pl{
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--ink-3); text-transform:uppercase; margin-bottom: 24px; display:flex; align-items:center; gap:10px;
}
.fin-card .pl .dot{ width:6px;height:6px;border-radius:50%; background:var(--santander); display:inline-block;}
.san-frame{
  display:flex; align-items:center; justify-content:center;
  padding: 36px 28px;
  background: linear-gradient(180deg, rgba(236,0,0,0.045), rgba(236,0,0,0.012));
  border: 1px solid rgba(236,0,0,0.10);
  border-radius: var(--r-lg);
  margin-bottom: 22px;
}
.san-frame img{ height: 120px; width:auto; max-width: 100%;}
.fin-meta{
  display:grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--rule);
  margin-bottom: 22px;
}
.fin-meta > div{ padding: 22px 0 0;}
.fin-meta > div + div{ padding-left: 24px; border-left: 1px solid var(--rule);}
.fin-meta .lab{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.16em; text-transform:uppercase; margin-bottom:8px; display:block;}
.fin-meta .val{ font-family:var(--display); font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.fin-card p.small{ font-size:14px; color:var(--ink-2); margin: 0; line-height:1.6;}
@media (max-width: 560px){
  .san-frame img{ height:80px;}
}
@media (max-width: 980px){
  .fin-grid{ grid-template-columns:1fr; gap:48px;}
}

/* =====================================================
   FAQ
   ===================================================== */
.faq{ background:var(--bg); }
.faq-tabs{
  display:flex; gap:0;
  border-bottom:1px solid var(--rule);
  margin-bottom: 0;
  flex-wrap:wrap;
}
.faq-tab{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
  padding: 22px 28px;
  position:relative;
  transition: color .3s var(--ease);
}
.faq-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ink);
  transform:scaleX(0); transform-origin:left;
  transition: transform .4s var(--ease);
}
.faq-tab.active{ color:var(--ink);}
.faq-tab.active::after{ transform:scaleX(1);}
.faq-tab:first-child{ padding-left:0;}

.faq-list{ display:flex; flex-direction:column; }
.faq-item{
  border-bottom:1px solid var(--rule);
}
.faq-q{
  width:100%;
  display:grid;
  grid-template-columns: 80px 1fr 48px;
  gap: 28px;
  align-items:center;
  padding: 32px 0;
  text-align:left;
  cursor:pointer;
}
.faq-q .qn{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; color:var(--blue);
}
.faq-q .qt{
  font-family:var(--display); font-size: clamp(20px, 1.8vw, 26px); font-weight:500; letter-spacing:-0.01em; color:var(--ink);
  text-wrap:balance;
}
.faq-q .qicon{
  width:36px; height:36px; border:1px solid var(--rule); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .4s var(--ease);
  justify-self:end;
}
.faq-q .qicon svg{ transition: transform .4s var(--ease);}
.faq-item.open .qicon{ background:var(--ink); color:#fff; border-color:var(--ink); transform: rotate(45deg);}

.faq-a{
  overflow:hidden; max-height:0;
  transition: max-height .55s var(--ease);
}
.faq-a-inner{
  padding: 0 0 36px 108px;
  max-width: 64ch;
  color:var(--ink-2);
  font-size: 16px; line-height:1.65;
}
@media (max-width: 700px){
  .faq-q{ grid-template-columns: 48px 1fr 32px; gap:14px;}
  .faq-a-inner{ padding-left: 62px;}
}

.faq-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 48px;
  flex-wrap:wrap; gap:16px;
}

/* =====================================================
   REVIEWS
   ===================================================== */
.reviews{ background:var(--bg-2); }
.reviews-head{
  display:grid; grid-template-columns: auto 1fr auto; gap:40px; align-items:end;
  border-bottom:1px solid var(--rule);
  padding-bottom: 48px; margin-bottom: 56px;
}
.rating-big{
  display:flex; align-items:flex-end; gap: 20px;
}
.rating-big .score{
  font-family:var(--display); font-weight:600; font-size: clamp(80px, 9vw, 132px);
  line-height: 0.9; letter-spacing:-0.045em; color:var(--ink);
}
.rating-big .right{
  padding-bottom: 14px;
}
.rating-big .stars{
  display:flex; gap:4px; color: #E11D2A; margin-bottom: 6px;
}
.rating-big .stars svg{ width:18px;height:18px;}
.rating-big .right .src{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:0.16em; text-transform:uppercase;}

.reviews-meta{ align-self:end; padding-bottom: 14px;}
.reviews-meta .l{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.16em; text-transform:uppercase; margin-bottom:6px; display:block;}
.reviews-meta .v{ font-family:var(--display); font-size:32px; font-weight:600; color:var(--ink); letter-spacing:-0.02em;}

.reviews-grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
}
.review{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 36px;
  display:flex; flex-direction:column; gap: 24px;
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.review:hover{ border-color: rgba(27,26,23,0.18); transform: translateY(-4px);}
.review .stars{ display:flex; gap:3px; color:var(--red);}
.review .stars svg{ width:14px; height:14px;}
.review .quote{
  font-family:var(--display); font-size: 21px; line-height:1.4; letter-spacing:-0.01em;
  color: var(--ink); text-wrap:balance; flex:1;
}
.review .who{
  display:flex; align-items:center; gap:14px;
  padding-top: 18px; border-top:1px solid var(--rule);
}
.review .avatar{
  width:44px; height:44px; border-radius:50%;
  background: var(--blue-50); color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size: 15px;
  letter-spacing:-0.01em;
}
.review .who .nm{ font-weight:600; font-size:14px; color:var(--ink);}
.review .who .lo{ font-size:13px; color:var(--ink-3);}

@media (max-width: 980px){
  .reviews-head{ grid-template-columns:1fr; gap:24px;}
  .reviews-grid{ grid-template-columns:1fr; }
}

/* =====================================================
   CONTACT
   ===================================================== */
.contact{ background:var(--bg); }
.contact-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 88px;
  align-items:center;
}
.contact-left h2{ margin-bottom: 32px; }
.contact-left .lead{ margin-bottom: 40px;}
.contact-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 56px;}
.contact-direct{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
.contact-direct .lab{ font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.18em; text-transform:uppercase; margin-bottom: 10px; display:block;}
.contact-direct a{ font-family:var(--display); font-size:22px; font-weight:500; color:var(--ink); letter-spacing:-0.01em; border-bottom:1px solid transparent; padding-bottom:2px; transition: border-color .3s var(--ease);}
.contact-direct a:hover{ border-color: var(--blue); color:var(--blue);}

.consultant{
  position:relative;
  border-radius: var(--r-xl);
  overflow:hidden;
  background:var(--bg-3);
  aspect-ratio: 4/5;
}
.consultant img{ width:100%; height:100%; object-fit:cover;}
.consultant .ovl{
  position:absolute; left:24px; bottom:24px; right:24px;
  background:rgba(251,249,244,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 22px;
  display:flex; flex-direction:column;
}
.consultant .ovl .l{ font-family:var(--mono); font-size:11px; color:var(--blue); letter-spacing:0.18em; text-transform:uppercase; margin-bottom:6px;}
.consultant .ovl .n{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--ink); letter-spacing:-0.01em;}
.consultant .ovl .r{ font-size:13px; color:var(--ink-3); margin-top: 2px;}

@media (max-width: 980px){
  .contact-grid{ grid-template-columns:1fr; gap:48px;}
  .consultant{ max-width: 480px;}
}

/* =====================================================
   FOOTER
   ===================================================== */
footer.foot{
  background:var(--bg-3);
  padding: 80px 0 32px;
  border-top:1px solid var(--rule);
}
.foot-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule);
}
.foot-grid .b img{ height:54px; width:auto; margin-bottom: 22px;}
.foot-grid .b p{ font-size:14px; color:var(--ink-2); max-width:32ch; margin: 0;}
.foot-col h5{ font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); margin: 0 0 20px;}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
.foot-col a{ font-size:14.5px; color:var(--ink); transition: color .3s var(--ease);}
.foot-col a:hover{ color: var(--blue);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top: 28px;
  font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.12em; text-transform:uppercase;
  flex-wrap:wrap; gap:12px;
}
.foot-bottom a{
  color:inherit; transition: color .3s var(--ease);
}
.foot-bottom a:hover{ color:var(--blue); }
.foot-legal{
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items:start;
}
.foot-legal .l{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;}
.foot-legal .v{ display:block; font-size:14.5px; color:var(--ink); font-weight:500;}
.foot-legal .legal-name .v{
  font-family:var(--display); font-size:18px; font-weight:600; letter-spacing:-0.01em;
}
.foot-legal .legal-grid{
  display:grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px;
}
@media (max-width: 760px){
  .foot-legal{ grid-template-columns:1fr; gap:24px;}
  .foot-legal .legal-grid{ grid-template-columns:1fr; gap: 18px;}
}
@media (max-width: 900px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width: 560px){
  .foot-grid{ grid-template-columns:1fr;}
}

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
[data-reveal]{
  opacity:0; transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in{ opacity:1; transform:none;}

[data-reveal-stagger] > *{
  opacity:0; transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal-stagger].in > *{ opacity:1; transform:none; }
[data-reveal-stagger].in > *:nth-child(1){ transition-delay:0.00s;}
[data-reveal-stagger].in > *:nth-child(2){ transition-delay:0.08s;}
[data-reveal-stagger].in > *:nth-child(3){ transition-delay:0.16s;}
[data-reveal-stagger].in > *:nth-child(4){ transition-delay:0.24s;}
[data-reveal-stagger].in > *:nth-child(5){ transition-delay:0.32s;}

/* word reveal */
.split-w .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
}
.split-w .w > span{
  display:inline-block; transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.split-w.in .w > span{ transform:none;}
.split-w .w:nth-child(2) > span{ transition-delay:0.06s;}
.split-w .w:nth-child(3) > span{ transition-delay:0.12s;}
.split-w .w:nth-child(4) > span{ transition-delay:0.18s;}
.split-w .w:nth-child(5) > span{ transition-delay:0.24s;}
.split-w .w:nth-child(6) > span{ transition-delay:0.30s;}
.split-w .w:nth-child(7) > span{ transition-delay:0.36s;}
.split-w .w:nth-child(8) > span{ transition-delay:0.42s;}

/* image mask reveal — clip-path wipe */
[data-mask]{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease);
}
[data-mask].in{ clip-path: inset(0 0 0 0);}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important;}
  [data-reveal], [data-reveal-stagger] > *, .split-w .w > span, [data-mask]{ opacity:1 !important; transform:none !important; clip-path:none !important;}
}

/* =====================================================
   SUBPAGES — shared
   ===================================================== */
.page-hero{
  position:relative;
  padding-top: clamp(132px, 17vh, 188px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--bg-2) 0%, rgba(241,236,226,0) 55%),
    radial-gradient(120% 120% at 100% 0%, var(--blue-50) 0%, rgba(234,238,251,0) 50%),
    var(--bg);
  overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; right:calc(-1 * var(--pad-x)); top:-40%;
  width:46vw; height:46vw; max-width:620px; max-height:620px;
  background: radial-gradient(circle, rgba(31,63,178,0.05) 0%, rgba(31,63,178,0) 70%);
  pointer-events:none;
}
.page-hero .ph-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.25fr 0.75fr; gap:48px; align-items:end;
}
.page-hero .crumb{
  font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:22px; display:flex; gap:10px; align-items:center;
}
.page-hero .crumb a{ color:var(--ink-3); transition: color .25s var(--ease);}
.page-hero .crumb a:hover{ color:var(--blue);}
.page-hero .crumb .sep{ width:14px; height:1px; background:var(--ink-4);}
.page-hero h1{
  font-family:var(--display); font-weight:600;
  font-size: clamp(38px, 5vw, 68px); letter-spacing:-0.022em; line-height:1.02;
  margin:14px 0 0; color:var(--ink); text-wrap:balance;
}
.page-hero .lead{ justify-self:end; }
@media (max-width:900px){
  .page-hero .ph-grid{ grid-template-columns:1fr; gap:22px;}
  .page-hero .lead{ justify-self:start;}
}

/* anchored sections clear the fixed nav */
section[id]{ scroll-margin-top: 96px; }

/* generic feature list (reuses svc-card list look outside cards) */
.feat-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px;}
.feat-list li{ position:relative; padding-left:26px; font-size:15.5px; color:var(--ink-2);}
.feat-list li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--blue);
}

/* service deep-dive blocks reuse .real-item layout; tag chip */
.svc-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-50);
  padding:7px 13px; border-radius:999px; margin-bottom:18px;
}
.svc-tag .pr{ color:var(--red);}

/* =====================================================
   FILTER BAR (realizacje)
   ===================================================== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:56px; padding-bottom:4px;
}
.filter-chip{
  font-family:var(--body); font-weight:600; font-size:14px;
  color:var(--ink-3); padding:11px 20px; border-radius:999px;
  border:1px solid var(--rule); background:transparent;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.filter-chip:hover{ color:var(--ink); border-color:var(--ink-4); }
.filter-chip:focus-visible{ outline:2px solid var(--blue); outline-offset:2px;}
.filter-chip.active{ color:#fff; background:var(--ink); border-color:var(--ink);}
.real-item.is-hidden{ display:none; }
.real-empty{
  display:none; padding:64px 0; text-align:center;
  font-family:var(--mono); font-size:13px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3);
}
.real-empty.show{ display:block; }

/* =====================================================
   WIEDZA (knowledge) — articles
   ===================================================== */
.know-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:28px;
}
.know-card{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.know-card.is-soon{ background:transparent; border-style:dashed; }
a.know-card:hover{ transform:translateY(-4px); border-color: rgba(27,26,23,0.18);}
.know-card .kc-top{
  aspect-ratio: 16/9; overflow:hidden; background:var(--bg-3);
}
.know-card .kc-top img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease);}
a.know-card:hover .kc-top img{ transform:scale(1.05);}
.know-card .kc-body{ padding:30px 30px 32px; display:flex; flex-direction:column; flex:1;}
.know-card .kc-cat{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:14px;
}
.know-card h3{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-0.012em; margin:0 0 12px; color:var(--ink); line-height:1.18;}
.know-card p{ font-size:15px; color:var(--ink-2); margin:0 0 22px;}
.know-card .kc-more{
  margin-top:auto; font-weight:600; font-size:14px; color:var(--blue);
  display:inline-flex; align-items:center; gap:8px;
}
.know-card.is-soon .kc-more{ color:var(--ink-4);}
a.know-card:hover .kc-more{ gap:12px;}
@media (max-width:760px){ .know-grid{ grid-template-columns:1fr;} }

/* full article body */
.article{ max-width: 760px; }
.article + .article{ margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(56px, 7vw, 96px); border-top:1px solid var(--rule);}
.article .a-cat{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--blue); margin-bottom:16px; display:block;
}
.article h2{ font-family:var(--display); font-weight:600; font-size: clamp(28px, 3.4vw, 42px); letter-spacing:-0.018em; line-height:1.08; margin:0 0 8px; color:var(--ink);}
.article .a-meta{ font-size:13px; color:var(--ink-3); margin:0 0 32px;}
.article h3{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:-0.01em; margin:36px 0 12px; color:var(--ink);}
.article p{ font-size:16px; line-height:1.75; color:var(--ink-2); margin:0 0 18px;}
.article ul{ margin:0 0 18px; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.article ul li{ position:relative; padding-left:26px; font-size:16px; line-height:1.7; color:var(--ink-2);}
.article ul li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%; background:var(--blue);}
.article strong{ color:var(--ink); font-weight:600;}
.article figure{ margin:0;}
.article-img{ border-radius:var(--r-lg); overflow:hidden; background:var(--bg-3); margin:28px 0;}
.article-img img{ width:100%; height:auto; display:block;}
.article-img--wide{ aspect-ratio: 16/9;}
.article-img--wide img{ width:100%; height:100%; object-fit:cover;}
.article-img-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0;}
.article-img-grid .article-img{ margin:0; aspect-ratio:4/3;}
.article-img-grid .article-img img{ width:100%; height:100%; object-fit:cover;}
@media (max-width: 560px){ .article-img-grid{ grid-template-columns:1fr;} }

/* =====================================================
   KONTAKT page
   ===================================================== */
.kontakt-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items:start;}
@media (max-width:900px){ .kontakt-grid{ grid-template-columns:1fr; gap:48px;} }
.contact-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin: 8px 0 36px;}
@media (max-width:520px){ .contact-cards{ grid-template-columns:1fr;} }
.cc{
  display:block; padding:24px; border:1px solid var(--rule); border-radius:var(--r-lg);
  background:var(--paper); transition: transform .35s var(--ease), border-color .35s var(--ease);
}
a.cc:hover{ transform:translateY(-3px); border-color: rgba(27,26,23,0.18);}
.cc .l{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:10px;}
.cc .v{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-0.01em; line-height:1.25;}
.cc .s{ font-size:13.5px; color:var(--ink-3); margin-top:6px;}
.map-embed{
  position:relative; width:100%; aspect-ratio: 4/3;
  border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-3);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; filter: grayscale(0.25) contrast(1.02);}
.hours-list{ list-style:none; padding:0; margin:18px 0 0; border-top:1px solid var(--rule);}
.hours-list li{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--rule); font-size:15px;
}
.hours-list li .d{ color:var(--ink-2);}
.hours-list li .h{ font-family:var(--mono); font-size:13.5px; color:var(--ink); letter-spacing:0.02em;}
.hours-list li.closed .h{ color:var(--ink-4);}

/* =====================================================
   COOKIE CONSENT — modal zgody
   ===================================================== */
.cc-overlay{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  padding: clamp(16px, 4vw, 40px);
  background: rgba(27,26,23,0.62);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity:0;
  transition: opacity .45s var(--ease-out);
}
.cc-overlay.is-in{ opacity:1; }
.cc-card{
  width:100%; max-width:560px;
  max-height: calc(100vh - 32px);
  overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--r-xl);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 40px -18px rgba(27,26,23,0.32),
    0 60px 90px -50px rgba(31,63,178,0.22);
  transform: translateY(14px) scale(0.985);
  transition: transform .55s var(--ease-out);
}
.cc-overlay.is-in .cc-card{ transform: none; }

.cc-pane{ padding: clamp(28px, 4vw, 44px); }
.cc-pane--main{ text-align:center; }

.cc-icon{
  width:58px; height:58px; margin:0 auto;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--red);
  background: rgba(225,29,42,0.09);
}
.cc-title{
  font-family:var(--display); font-weight:600;
  font-size: clamp(26px, 3.4vw, 36px); letter-spacing:-0.02em; line-height:1.05;
  color:var(--ink); margin: 22px 0 0;
}
.cc-title--left{ margin:0; }
.cc-text{
  font-size:15.5px; line-height:1.6; color:var(--ink-2);
  margin: 16px 0 0; max-width:46ch;
}
.cc-pane--main .cc-text{ margin-left:auto; margin-right:auto; }
.cc-text--left{ max-width:54ch; }

.cc-actions{
  margin-top: 30px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.cc-card:focus{ outline:none; }
.cc-accept{ width:100%; justify-content:center; }
.cc-accept:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.cc-link{
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--ink-3);
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.cc-link:hover{ color:var(--ink); border-color:var(--ink-4); }
.cc-link:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

.cc-note{
  font-size:12px; line-height:1.6; color:var(--ink-3);
  margin: 24px 0 0;
}
.cc-pane--main .cc-note{ text-align:center; }
.cc-note--center{ text-align:center; }
.cc-note a{
  color:var(--blue); border-bottom:1px solid var(--blue-50);
  transition: border-color .3s var(--ease);
}
.cc-note a:hover{ border-color:var(--blue); }

/* settings rows */
.cc-rows{ margin-top: 26px; border-top:1px solid var(--rule); }
.cc-row{
  display:flex; align-items:flex-start; gap:22px;
  padding: 22px 0; border-bottom:1px solid var(--rule);
}
.cc-row-body{ flex:1; }
.cc-row-head{ display:flex; align-items:center; gap:9px; }
.cc-row-title{
  font-family:var(--display); font-weight:600;
  font-size:18px; letter-spacing:-0.01em; color:var(--ink); margin:0;
}
.cc-lock{ color:var(--ink-3); display:inline-flex; }
.cc-row-desc{
  font-size:13px; line-height:1.62; color:var(--ink-3);
  margin: 9px 0 0;
}
.cc-pane--settings .cc-accept{ width:100%; margin-top: 28px; }

/* switch */
.cc-switch{
  position:relative; flex-shrink:0;
  width:46px; height:26px; border-radius:999px;
  background:var(--ink-4);
  transition: background .3s var(--ease);
}
.cc-switch.is-on{ background:var(--red); }
.cc-switch[disabled]{
  background:var(--ink-4); opacity:0.45; cursor:not-allowed;
}
.cc-switch.is-on[disabled]{ background:var(--red); opacity:0.5; }
.cc-knob{
  position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(27,26,23,0.35);
  transition: transform .3s var(--ease-out);
}
.cc-switch.is-on .cc-knob{ transform: translateX(20px); }
.cc-switch:not([disabled]):hover{ filter:brightness(0.97); }
.cc-switch:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.cc-switch:not([disabled]):active .cc-knob{ width:23px; }

@media (max-width:520px){
  .cc-row{ gap:16px; }
  .cc-card{ border-radius:var(--r-lg); }
}
@media (prefers-reduced-motion: reduce){
  .cc-overlay, .cc-card, .cc-knob{ transition-duration:0.01ms !important; }
  .cc-card{ transform:none !important; }
}

/* =====================================================
   LEGAL DOC — polityka prywatności
   ===================================================== */
.legal-doc{ max-width: 74ch; }
.legal-doc h2{
  font-family:var(--display); font-weight:600;
  font-size: clamp(21px, 2.2vw, 27px); letter-spacing:-0.015em; line-height:1.15;
  color:var(--ink); margin: 52px 0 16px;
}
.legal-doc > .legal-block:first-child h2{ margin-top:0; }
.legal-doc h3{
  font-family:var(--display); font-weight:600;
  font-size:18px; letter-spacing:-0.01em; color:var(--ink);
  margin: 28px 0 10px;
}
.legal-doc p{
  font-size:15.5px; line-height:1.72; color:var(--ink-2);
  margin: 0 0 14px;
}
.legal-doc ul{
  list-style:none; padding:0; margin: 0 0 14px;
  display:flex; flex-direction:column; gap:11px;
}
.legal-doc ul li{
  position:relative; padding-left:24px;
  font-size:15px; line-height:1.7; color:var(--ink-2);
}
.legal-doc ul li::before{
  content:""; position:absolute; left:0; top:10px;
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.legal-doc a{
  color:var(--blue); border-bottom:1px solid var(--blue-50);
  transition: border-color .3s var(--ease);
}
.legal-doc a:hover{ border-color:var(--blue); }
.legal-doc strong{ color:var(--ink); font-weight:600; }
.legal-cookie-cta{ margin-top: 22px; }
.legal-meta{
  margin-top: 14px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  color:var(--ink-3);
}

/* =====================================================
   FLOATING INSTAGRAM CTA
   ===================================================== */
.ig-float{
  position:fixed; right:24px; top:50%;
  transform:translateY(-50%);
  z-index:45;
  display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bg);
  padding:12px 18px 12px 14px;
  border-radius:100px;
  text-decoration:none;
  font-family:var(--body); font-size:13px; font-weight:500; letter-spacing:0.01em;
  box-shadow:0 2px 20px rgba(27,26,23,.20), 0 1px 4px rgba(27,26,23,.12);
  transition:
    background 260ms var(--ease),
    transform 260ms var(--ease-out),
    box-shadow 260ms var(--ease);
  will-change:transform;
}
.ig-float:hover{
  background:#2e2d29;
  transform:translateY(calc(-50% - 2px));
  box-shadow:0 6px 28px rgba(27,26,23,.26), 0 2px 8px rgba(27,26,23,.14);
}
.ig-float:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px;
}
.ig-float:active{ transform:translateY(calc(-50% + 1px)); }
.ig-float__icon{ width:18px; height:18px; flex-shrink:0; }
.ig-float__label{ white-space:nowrap; }

@media(max-width:767px){
  .ig-float{
    right:16px; bottom:80px;
    top:auto; transform:none;
    padding:11px; border-radius:50%;
  }
  .ig-float:hover{ transform:translateY(-2px); }
  .ig-float:active{ transform:translateY(1px); }
  .ig-float__label{ display:none; }
}

/* =====================================================
   REVIEWS — SOCIAL PROOF BLOCK
   ===================================================== */
.reviews-social{
  margin-top:56px; padding-top:32px;
  border-top:1px solid var(--rule);
  display:flex; align-items:center;
  justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  /* push links away from fixed ig-float pill on desktop */
  padding-right:200px;
}
@media(max-width:767px){
  .reviews-social{ padding-right:0; }
}
.reviews-social__text{
  font-family:var(--body); font-size:15px;
  color:var(--ink-2); line-height:1.55; margin:0;
}
.reviews-social__links{
  display:flex; gap:12px; flex-shrink:0;
}
.soc-link{
  display:flex; align-items:center; gap:7px;
  font-family:var(--body); font-size:13px; font-weight:500;
  color:var(--ink-2);
  text-decoration:none;
  padding:8px 14px;
  border:1px solid rgba(27,26,23,.18); border-radius:var(--r);
  background:var(--bg-2);
  transition:
    color 220ms var(--ease),
    border-color 220ms var(--ease),
    background 220ms var(--ease);
}
.soc-link svg{ width:15px; height:15px; flex-shrink:0; }
.soc-link:hover{
  color:var(--ink);
  border-color:rgba(27,26,23,.30);
  background:var(--bg-3);
}
.soc-link:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}

@media(max-width:560px){
  .reviews-social{
    flex-direction:column; align-items:flex-start; gap:16px;
  }
}