/* Authentic project photographs supplied by Marcin Oparski. Fades are CSS-only. */
h1,h2,h3 { text-wrap: balance; }
p,li { text-wrap: pretty; }
.hero { position: relative; isolation: isolate; min-height: 650px; grid-template-columns: 1.15fr 1fr; }
.hero > div:first-child { position: relative; z-index: 1; }
.hero h1 { max-width: 650px; }
.hero .lead { max-width: 560px; }
.hero-visual { position: absolute; inset: 0 -34px 0 30%; z-index: -1; background: url('assets/inwestycja-wnetrze.webp') center / cover no-repeat; filter: blur(1.5px); opacity: .5; mask-image: linear-gradient(to right, transparent, #000 45%), linear-gradient(to bottom, transparent, #000 12%, #000 85%, transparent); mask-composite: intersect; }
.equipment { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 45px; padding: 38px; background: #edf3f1; border-top: 3px solid var(--teal); }
.equipment h3 { font-size: 30px; }
.equipment h4 { margin: 0 0 10px; font-size: 18px; line-height: 1.4; }
.equipment p { font-size: 16px; }
.equipment p:last-child { margin-bottom: 0; }
.portrait { display: block; width: 100%; max-width: 360px; height: auto; margin-top: 34px; border-radius: 4px; }
.plans-section { position: relative; isolation: isolate; }
.plans-section::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('assets/inwestycja-plan.webp') center top / 100% auto no-repeat; filter: blur(1px); opacity: .18; mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 32%, transparent 92%); }
.construction-section { position: relative; isolation: isolate; background: linear-gradient(90deg, #e7f1ee 20%, #e7f1eee8 55%, #e7f1ee70), url('assets/inwestycja-realizacja.webp') center 60% / cover no-repeat; }
.draft-note { border-style: solid; }
.contact-links a { overflow-wrap: anywhere; }
.hero > *, .equipment > *, .about-grid > *, .area-grid > *, .practice > *, .steps > * { min-width: 0; }
@media (max-width: 850px) {
  .hero { grid-template-columns: 1fr; min-height: 590px; }
  .hero > div:first-child { max-width: 600px; }
  .hero-visual { inset: 0 -10px 0 15%; opacity: .4; }
  .equipment { gap: 30px; padding: 30px; }
}
@media (max-width: 600px) {
  .hero { min-height: 580px; }
  .hero h1 { font-size: clamp(34px, 9vw, 40px); letter-spacing: -1.2px; }
  .hero-visual { inset: 0; opacity: .28; background-position: 65% center; }
  .equipment { grid-template-columns: 1fr; padding: 24px; gap: 28px; }
  .equipment h3 { font-size: 27px; }
  .portrait { max-width: 320px; margin-bottom: 25px; }
  .construction-section { background: linear-gradient(#e7f1eee8, #e7f1eedb), url('assets/inwestycja-realizacja.webp') center / cover; }
  /* On narrow screens, keep the authentic drawing visible behind the heading, then fade it gently across the full text block. */
  .plans-section::before { top: 0; bottom: auto; height: min(900px, 78%); background-size: cover; background-position: center center; mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 30%, transparent 100%); }
  .steps { grid-template-columns: 1fr; }
  h2 { font-size: clamp(28px, 8vw, 33px); }
}

/* Subtle, progressive-enhancement photo entrance. Static by default. */
.photo-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js-photo-motion .photo-reveal.photo-pending { opacity: 0; transform: translate3d(-36px,0,0); transition: opacity 910ms ease 1000ms, transform 1040ms cubic-bezier(.2,.7,.2,1) 1000ms; }
  .js-photo-motion .photo-reveal.photo-pending.from-right { transform: translate3d(36px,0,0); }
  .js-photo-motion .photo-reveal.photo-pending.photo-visible { opacity: 1; transform: translate3d(0,0,0); }
}

/* Scroll-in for authentic decorative background photos; intact masks and mobile fade. */
.construction-section { background: #e7f1ee; }
.construction-section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #e7f1ee 20%, #e7f1eee8 55%, #e7f1ee70), url('assets/inwestycja-realizacja.webp') center 60% / cover no-repeat; }
@media (max-width: 600px) {
  .construction-section::before { background: linear-gradient(#e7f1eee8, #e7f1eedb), url('assets/inwestycja-realizacja.webp') center / cover no-repeat; }
}
/* Backgrounds fade in without translation; keep their existing final opacity. */
.hero-visual { --bg-photo-opacity: .5; opacity: var(--bg-photo-opacity); }
.plans-section::before { --bg-photo-opacity: .18; opacity: var(--bg-photo-opacity); }
.construction-section::before { --bg-photo-opacity: 1; opacity: var(--bg-photo-opacity); }
@media (max-width: 850px) {
  .hero-visual { --bg-photo-opacity: .4; }
}
@media (max-width: 600px) {
  .hero-visual { --bg-photo-opacity: .28; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Portrait moves in after 0.5 s; other gallery photographs keep their timing. */
  .js-photo-motion .portrait.photo-pending {
    transition-delay: 500ms, 500ms;
  }
  .js-photo-motion .bg-pending .hero-visual,
  .js-photo-motion .bg-pending.plans-section::before,
  .js-photo-motion .bg-pending.construction-section::before {
    transform: none;
    opacity: 0;
    transition: opacity 1040ms ease 500ms;
  }
  .js-photo-motion .bg-pending.bg-visible .hero-visual,
  .js-photo-motion .bg-pending.bg-visible.plans-section::before,
  .js-photo-motion .bg-pending.bg-visible.construction-section::before {
    transform: none;
    opacity: var(--bg-photo-opacity);
  }
}

/* Prevent horizontally translated images and blurred decorative layers from enlarging the page's scrollable width. */
html, body { overflow-x: clip; }
.hero, .plans-section, .construction-section { overflow: clip; }
.photo-reveal { max-width: 100%; }

/* Hero is visible at initial load: CSS keyframes avoid JS briefly hiding it after first paint. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-photo-appear {
    from { opacity: 0; }
    to { opacity: var(--bg-photo-opacity); }
  }
  .hero-visual { animation: hero-photo-appear 1040ms ease 500ms both; }
}


/* HOPAR optional accessibility controls; ordinary page remains unchanged. */
.accessibility-tools{position:fixed;right:16px;bottom:18px;z-index:9999;font:15px/1.45 system-ui,sans-serif}
.accessibility-toggle{background:#093650;color:white;border:2px solid white;border-radius:50px;box-shadow:0 2px 12px #0004;padding:12px 16px;cursor:pointer;font:600 15px system-ui,sans-serif}
.accessibility-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(345px,calc(100vw - 32px));max-height:75vh;overflow-y:auto;padding:22px;background:#fff;color:#173348;border:2px solid #006d72;border-radius:12px;box-shadow:0 8px 30px #0004}
.accessibility-panel[hidden]{display:none}
.accessibility-head{display:flex;align-items:start;justify-content:space-between;gap:10px}
.accessibility-head h2{font:700 19px/1.3 system-ui,sans-serif;letter-spacing:0;margin:0 0 10px}
.accessibility-head button{font:26px/1 system-ui,sans-serif;background:transparent;border:0;cursor:pointer;color:#173348}
.accessibility-panel p{font-size:14px;margin:0 0 12px;color:#394d57}
.accessibility-panel label{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #dce5e6;cursor:pointer;font:500 16px/1.4 system-ui,sans-serif}
.accessibility-panel input{width:20px;height:20px;accent-color:#006d72;flex:none}
.accessibility-reset{background:#093650;color:white;padding:11px 13px;border:0;border-radius:5px;margin-top:15px;font:600 14px system-ui,sans-serif;cursor:pointer}
.accessibility-tools button:focus-visible,.accessibility-tools input:focus-visible{outline:3px solid #ffb700;outline-offset:3px}
html.a11y-large body{font-size:20px}
html.a11y-large main p,html.a11y-large main li,html.a11y-large main a,html.a11y-large main .small,html.a11y-large footer{font-size:1.15em;line-height:1.8}
html.a11y-large h1{font-size:clamp(42px,5vw,66px)}
html.a11y-large h2{font-size:clamp(35px,4vw,48px)}
html.a11y-large h3{font-size:27px}
html.a11y-simple body{font-family:Arial,Helvetica,sans-serif}
html.a11y-simple h1,html.a11y-simple h2,html.a11y-simple h3{letter-spacing:0;text-wrap:wrap}
html.a11y-simple .hero-visual,html.a11y-simple .plans-section::before,html.a11y-simple .construction-section::before{display:none}
html.a11y-contrast{--navy:#000;--teal:#004f56;--ink:#000;--muted:#101010;--paper:#fff;--line:#444}
html.a11y-contrast body,html.a11y-contrast .areas,html.a11y-contrast .contact,html.a11y-contrast .equipment,html.a11y-contrast .deliverables,html.a11y-contrast .lean,html.a11y-contrast .about{background:#fff!important;color:#000!important}
html.a11y-contrast main p,html.a11y-contrast main li,html.a11y-contrast main h1,html.a11y-contrast main h2,html.a11y-contrast main h3,html.a11y-contrast main h4,html.a11y-contrast main .eyebrow,html.a11y-contrast main em,html.a11y-contrast main .num,html.a11y-contrast footer{color:#000!important}
html.a11y-contrast .strip,html.a11y-contrast .button,html.a11y-contrast .accessibility-toggle{background:#000;color:#fff}
html.a11y-contrast a{text-decoration:underline;text-underline-offset:3px}
html.a11y-contrast .hero-visual,html.a11y-contrast .plans-section::before,html.a11y-contrast .construction-section::before{display:none}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-motion .photo-reveal,html.a11y-motion .photo-pending{opacity:1!important;transform:none!important}
html.a11y-motion .hero-visual,html.a11y-motion .plans-section::before,html.a11y-motion .construction-section::before{opacity:var(--bg-photo-opacity,1)!important}
@media(max-width:600px){.accessibility-toggle span{display:none}.accessibility-toggle{padding:11px 13px}.accessibility-tools{right:10px;bottom:12px}}