/* Oko na Dziecko 4.6
 * Focused changes: three genuinely distinct hero compositions, unboxed help,
 * clean portrait composition in contact and visual break before footer.
 * Fixed client palette: #A1DFE1 / #005550 / #BCEBE9 / #222222.
 */
:root{--oko46-sky:#A1DFE1;--oko46-green:#005550;--oko46-aqua:#BCEBE9;--oko46-black:#222222}

/* Hero shared. Do not change the approved A photo geometry. */
.oko46-hero .hero-grid{position:relative}
.oko46-hero .hero-copy{min-width:0}
.oko46-hero .hero-copy h1,.oko46-hero .oko46-hero-headline h1{color:#222222;font-family:'Poppins',Arial,sans-serif;overflow-wrap:normal}
.oko46-hero .hero-visual{min-width:0}
.oko46-hero .oko45-montage{isolation:isolate}
.oko46-hero .hero-quote{transition:transform .28s ease,box-shadow .28s ease}
.oko46-hero .hero-visual:hover .hero-quote{transform:translateY(-3px);box-shadow:0 13px 30px rgba(0,85,80,.10)}

/* The old mint rectangle beneath the help text looked like an unrelated card. */
.oko46-hero .oko46-hero-help,
.oko46-hero .oko45-hero-help{
  display:flex;align-items:flex-start;flex-direction:column;gap:3px;
  width:fit-content;max-width:100%;min-height:0;
  padding:1px 0 2px 16px;margin-top:24px;
  border:0;border-left:3px solid #005550;
  border-radius:0;background:transparent!important;box-shadow:none!important;
  color:#222222;
}
.oko46-hero .oko46-hero-help strong{font-size:clamp(.9rem,1.03vw,1rem);font-weight:650;line-height:1.45;margin:0;color:#222222}
.oko46-hero .oko46-hero-help a{font-size:clamp(.85rem,.97vw,.95rem);font-weight:500;color:#005550;line-height:1.45;text-decoration:underline;text-decoration-color:rgba(0,85,80,.35);text-underline-offset:4px}
.oko46-hero .oko46-hero-help a:hover{text-decoration-color:#005550}
.oko46-hero .oko46-hero-help a span{display:inline-block;transition:transform .2s ease}
.oko46-hero .oko46-hero-help a:hover span{transform:translate(2px,-2px)}
.oko46-hero .hero-foot{margin-top:24px}

/* A - original client-approved side-by-side collage, not changed structurally. */
.oko46-hero--classic{background:#fff}
.oko46-hero--classic .hero-grid{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr)}
.oko46-hero--classic .hero-copy{padding:0}
.oko46-hero--classic .hero-visual{order:0}

/* B - editorial with photography first and clear half-panel background.
   Image remains transparent and unboxed, quote acts as magazine-style footnote. */
.oko46-hero--framed{
  background:linear-gradient(90deg,rgba(188,235,233,.58) 0 46%,#fff 46% 100%);
}
.oko46-hero--framed .hero-grid{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,6vw,104px);
  padding-block:clamp(82px,7.5vw,120px)!important;
}
.oko46-hero--framed .hero-visual{order:-1;max-width:640px;justify-self:center}
.oko46-hero--framed .hero-copy{order:1;padding:0 0 0 clamp(0px,1vw,18px);background:none;border:0}
.oko46-hero--framed h1{font-size:clamp(2.4rem,3.1vw,3.5rem);max-width:13.8ch}
.oko46-hero--framed .oko45-hero-visual,.oko46-hero--framed .hero-visual{
  padding:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;
}
.oko46-hero--framed .hero-quote{
  bottom:-16px;left:3%;right:auto;max-width:min(90%,395px);padding:13px 16px;
  border-radius:12px;box-shadow:0 14px 30px rgba(0,85,80,.12);
}
.oko46-hero-pretitle{display:block;font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#005550;margin-bottom:18px}
.oko46-hero-rule{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:-18px;padding-bottom:32px;color:#005550;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.oko46-hero-rule>span:first-child{height:1px;background:rgba(0,85,80,.20);flex:1}

/* C - statement / campaign landing: one large heading ABOVE a second row.
   The second row has collage left and call-to-action content on right. */
.oko46-hero--statement{background:rgba(161,223,225,.20)}
.oko46-hero--statement .oko46-hero-headline{padding-top:clamp(66px,6vw,100px);text-align:left;position:relative}
.oko46-hero--statement .oko46-hero-headline h1{
  font-size:clamp(2.7rem,5vw,5.5rem);line-height:1.08;letter-spacing:-.055em;
  max-width:19ch;margin:0 0 32px;color:#222222;
}
.oko46-hero--statement .hero-grid{
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(44px,6vw,104px);
  padding-block:0 clamp(60px,5.5vw,90px)!important;align-items:center;
}
.oko46-hero--statement .hero-visual{order:-1;max-width:550px;justify-self:start}
.oko46-hero--statement .hero-copy{
  display:flex;flex-direction:column;align-items:flex-start;order:1;align-self:center;
  border:0;border-left:2px solid #005550;background:transparent!important;border-radius:0;
  padding:8px 0 8px clamp(24px,3vw,50px);box-shadow:none;
}
.oko46-hero--statement .hero-copy .lead{font-size:clamp(1rem,1.32vw,1.2rem);line-height:1.8;color:#222222;max-width:50ch}
.oko46-hero--statement .action-row{display:flex;flex-wrap:wrap;gap:12px}
.oko46-hero--statement .hero-quote{
  left:auto;right:0;bottom:6px;max-width:min(90%,390px);padding:12px 17px;border-radius:14px;
}
.oko46-hero--statement .hero-foot{margin-top:21px}
.oko46-hero--statement .oko46-hero-help{margin-top:26px}
.oko46-hero--statement .oko46-hero-visual{padding:0!important;background:transparent!important;border-radius:0!important}

/* Contact: use transparent collage against the site's actual white surface,
   with a very thin outline flourish rather than a filled pastel container. */
.oko45-contact .oko45-contact-photo,
.oko45-contact--reverse .oko45-contact-photo,
.oko45-contact--feature .oko45-contact-photo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:0;min-width:0;padding:18px 16px 6px!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;overflow:visible!important;isolation:isolate;
}
.oko45-contact .oko45-contact-photo::before{
  content:"";position:absolute;z-index:-1;
  width:42%;aspect-ratio:1;right:4%;top:1%;
  border:1px solid rgba(0,85,80,.17);border-radius:50%;pointer-events:none;
}
.oko45-contact .oko45-contact-photo::after{
  content:"";position:absolute;z-index:-1;
  width:11px;height:11px;border-radius:50%;background:#A1DFE1;
  right:11%;top:12%;pointer-events:none;
}
.oko45-contact .oko45-contact-photo img{max-width:100%;width:min(100%,570px);height:auto;object-fit:contain;display:block;position:relative;z-index:1}
.oko45-contact .oko45-contact-photo figcaption,
.oko45-contact--feature .oko45-contact-photo figcaption{
  display:block;width:max-content;max-width:100%;margin:0 auto 0;
  font-family:'Poppins',Arial,sans-serif;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-size:.7rem;line-height:1.6;text-align:center;color:#005550!important;
}
.oko45-contact--feature .oko45-contact-main{align-items:center}

/* Distinguish conversion CTA from actual footer without introducing off-palette colors. */
.closing-cta{background:#005550!important;border-bottom:4px solid #A1DFE1;position:relative;isolation:isolate}
.footer{
  background:linear-gradient(rgba(34,34,34,.21),rgba(34,34,34,.21)),#005550!important;
  border-top:1px solid rgba(255,255,255,.08);position:relative;
}

@media (max-width:1100px){
 .oko46-hero--framed .hero-grid,.oko46-hero--statement .hero-grid{gap:clamp(22px,3vw,42px)}
 .oko46-hero--framed h1{font-size:clamp(2.15rem,3.65vw,3.2rem)}
}
@media (max-width:850px){
 .oko46-hero--classic .hero-grid,.oko46-hero--framed .hero-grid,.oko46-hero--statement .hero-grid{
   display:grid;grid-template-columns:1fr!important;gap:28px;padding-block:42px 60px!important;
 }
 .oko46-hero--framed{background:linear-gradient(180deg,rgba(188,235,233,.52) 0 53%,#fff 53% 100%)}
 .oko46-hero--framed .hero-grid{gap:36px}
 .oko46-hero--framed .hero-visual{order:0;justify-self:center;width:min(100%,520px)}
 .oko46-hero--framed .hero-copy{order:-1;padding:0}
 .oko46-hero--framed .hero-quote{left:3%;right:auto}
 .oko46-hero--statement .oko46-hero-headline{padding-top:45px}
 .oko46-hero--statement .oko46-hero-headline h1{font-size:clamp(2.3rem,6.6vw,3.8rem);margin-bottom:28px}
 .oko46-hero--statement .hero-grid{padding-top:0!important}
 .oko46-hero--statement .hero-copy{order:1;padding:0 0 0 20px;align-items:stretch}
 .oko46-hero--statement .hero-visual{order:0;justify-self:center;width:min(100%,520px)}
 .oko46-hero-rule{display:none}
 .oko45-contact .oko45-contact-photo{max-width:100%;padding:12px 0!important}
}
@media (max-width:620px){
 .oko46-hero--classic .hero-grid,.oko46-hero--framed .hero-grid,.oko46-hero--statement .hero-grid{gap:22px;padding-block:28px 55px!important}
 .oko46-hero .hero-copy h1{font-size:clamp(2rem,8.1vw,2.75rem);max-width:100%}
 .oko46-hero--framed .hero-grid{padding-top:28px!important}
 .oko46-hero--framed .oko46-hero-pretitle{font-size:.65rem;margin-bottom:12px}
 .oko46-hero--framed .hero-quote{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:100%;margin-top:8px}
 .oko46-hero--statement .oko46-hero-headline{padding-top:28px}
 .oko46-hero--statement .oko46-hero-headline h1{font-size:clamp(2.2rem,8.5vw,3.3rem);line-height:1.12;margin-bottom:20px}
 .oko46-hero--statement .hero-copy{border-left:0;border-top:2px solid #005550;padding:18px 0 0;gap:0}
 .oko46-hero--statement .hero-quote{position:relative;max-width:100%;left:auto;right:auto;bottom:auto;margin-top:8px}
 .oko46-hero .oko46-hero-help{margin-top:18px}
 .oko46-hero .oko46-hero-help strong{font-size:.91rem}
 .oko46-hero .oko46-hero-help a{font-size:.84rem}
 .oko46-hero--framed .hero-visual,.oko46-hero--statement .hero-visual{width:100%}
 .oko45-contact .oko45-contact-photo figcaption{font-size:.67rem}
}
@media (prefers-reduced-motion:reduce){.oko46-hero .hero-quote,.oko46-hero .oko46-hero-help a span{transition:none!important;transform:none!important}}
/* Final desktop typography: avoid an over-tall editorial headline. */
@media (min-width:1101px){
 .oko46-hero--framed h1{font-size:clamp(2.2rem,2.82vw,3.25rem);line-height:1.12;max-width:17ch}
 .oko46-hero--statement .oko46-hero-headline{padding-top:clamp(56px,5vw,82px)}
 .oko46-hero--statement .oko46-hero-headline h1{font-size:clamp(2.7rem,4.55vw,4.9rem);line-height:1.085;margin-bottom:26px}
 .oko46-hero--statement .hero-visual{max-width:500px}
 .oko46-hero--statement .hero-grid{padding-bottom:62px!important}
}