@import url("../components/case-button.css?v=3af7b6d55037");
/* Page-specific layout from Figma 512:655; all shared styles stay in ../styles.css. */

/* Match authored text-box widths, independent of the shared site's narrow container. */
@media(min-width:1400px) {
  .blizkie-case [data-figma="518:927"] { width:160px; }
  .blizkie-case [data-figma="525:19773"] { width:97px; }
  .blizkie-case [data-figma="525:19774"] { width:130px; }
  .blizkie-case [data-figma="525:19"] { width:200px; }
  .blizkie-case [data-figma="571:632"] { width:99px; }
  .blizkie-case [data-figma="571:1456"] { width:160px; }
  .blizkie-case [data-figma="571:1465"] { width:70px; }
  .blizkie-case [data-figma="571:675"] { width:130px; }
  .blizkie-case [data-figma="571:685"] { width:832.4667358398438px; }
  .blizkie-case [data-figma="571:688"] { width:713px; }
  .blizkie-case [data-figma="571:691"] { width:762px; }
  .blizkie-case [data-figma="571:694"] { width:709px; }
  .blizkie-case [data-figma="571:697"] { width:607px; }
  .blizkie-case [data-figma="571:700"] { width:532px; }
  .blizkie-case [data-figma="571:747"] { width:104px; }
  .blizkie-case [data-figma="I586:1791;586:1747"] { width:360px; }
  .blizkie-case [data-figma="571:1550"] { width:230px; }
  .blizkie-case [data-figma="571:1552"] { width:743px; }
  .blizkie-case [data-figma="592:1919"] { width:743px; }
  .blizkie-case [data-figma="592:1922"] { width:743px; }
  .blizkie-case [data-figma="592:1924"] { width:743px; }
  .blizkie-case [data-figma="592:1928"] { width:743px; }
  .blizkie-case [data-figma="592:1930"] { width:743px; }
  .blizkie-case [data-figma="571:1580"] { width:135px; }
  .blizkie-case [data-figma="614:1277"] { width:250px; }
}

.blizkie-case { padding-top:50px; display:flex; flex-direction:column; gap:50px; }
.blizkie-case > section { width:100%; max-width:1440px; margin-inline:auto; }
.blizkie-case h1,.blizkie-case h2 { width:auto; max-width:100%;   font-weight:inherit; text-align:left; }
.blizkie-case figure { margin:0; }
.blizkie-intro { padding:100px 40px 50px; display:flex; flex-direction:column; gap:50px; }
.blizkie-intro-copy { display:grid; grid-template-columns:345px 805px 1fr; align-items:start; }
.intro-description { width:670px; margin-top:11px; }
.blizkie-meta { padding-top:11px; font-size:16px; line-height:22px; opacity:.5; display:flex; flex-direction:column; gap:8px; white-space:nowrap; }



.blizkie-section { padding:50px 40px; display:grid; grid-template-columns:345px minmax(0,1fr); align-items:start; }
.blizkie-case .section-label {   opacity:.5; }
.reason-copy { width:804px;   }
.blizkie-audience { grid-template-columns:343px minmax(0,1fr); }
.audience-content { width:741px; display:flex; flex-direction:column; gap:30px; }
.audience-cards { display:grid; grid-template-columns:repeat(2,324px); gap:20px; }
.audience-cards img { width:24px; height:24px; }
.blizkie-challenges { grid-template-columns:344px minmax(0,1fr); }
.challenges-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px;   color:#000; }
.challenges-list li { display:grid; grid-template-columns:41px minmax(0,1fr); gap:76px; }
.challenge-number { font-weight:600; }
.blizkie-flow { padding:50px 40px; display:flex; flex-direction:column; gap:40px; }
.flow-intro { padding:0; }
.flow-intro>p { width:741px; }
.flow-figure { height:479px; border-radius:16px; background:#fafafa; overflow:hidden; position:relative; }
.flow-figure img { position:absolute; width:1104.5px; height:397.5px; left:calc(50% - 547.1936px); top:40.76px; }
.blizkie-examples { padding:50px 40px 0; display:flex; flex-direction:column; gap:50px; }
.case-example { display:grid; grid-template-columns:620px 668px; justify-content:space-between; gap:40px; }
.case-example-copy { padding-top:20px; display:flex; flex-direction:column; align-items:flex-start; gap:30px; }
.example-title { margin-bottom:20px; }
.example-description {   min-height:308px; }
.example-visual { background:#fafafa; border-radius:14.282828px; height:663px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.example-media { position:relative; flex:none; width:255.758px; height:524.894px; }
.example-media > :is(img,video) { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; border-radius:6% / 3%; }
.example-media > video { opacity:0; transition:opacity 300ms ease-in; }
.example-media > video.is-ready { opacity:1; }
.example-media > video[hidden] { display:none; }
.detail-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding-block:100px; }
.detail-gallery figure { height:385px; overflow:hidden; border-radius:16px; background:#fafafa; position:relative; }
.detail-widget img { position:absolute; left:calc(50% - 146.4103px); top:91.827px; width:292.154px; height:200.346px; }
.detail-services img { position:absolute; left:calc(50% - 139px); top:41px; width:278.333px; height:auto; }
.detail-list img { position:absolute; left:calc(50% - 124.6667px); top:41px; width:251.6667px; height:305px; }
.evolution-cards { display:flex; flex-direction:column; gap:20px; width:100%; min-width:0; }

.evolution-card h3 {   font-weight:600; margin-bottom:10px; }
.evolution-number { font-weight:600; }
.evolution-card>div>p { width:790px; max-width:100%; }
.blizkie-results { grid-template-columns:232px minmax(0,1fr); padding-bottom:100px; }
.result-cards { width:1069px; display:grid; grid-template-columns:repeat(3,343px); gap:20px; text-align:center; }
.result-value {   margin-bottom:10px; }
.result-note { margin-top:26px; font-size:14px; line-height:19px; color:rgba(7,7,7,.5); }
.result-note a { text-decoration:none; text-underline-position:from-font; }
.blizkie-case > .blizkie-vision { max-width:none; border-radius:0; }
.blizkie-vision { padding:120px 40px 100px; background-color:#0b0b0b; background-image:radial-gradient(ellipse 85% 260px at 100% 8%, rgba(137,160,25,.52) 0%, rgba(90,108,9,.26) 40%, rgba(90,108,9,0) 100%), radial-gradient(ellipse 110% 650px at 100% 0%, rgba(61,73,0,.48) 0%, rgba(38,46,0,.28) 55%, rgba(38,46,0,0) 100%); background-repeat:no-repeat; color:white; overflow:hidden; position:relative; }
.vision-content { max-width:1360px; margin-inline:auto; position:relative; display:grid; grid-template-columns:620px 668px; justify-content:space-between; gap:40px; }
.vision-description {   margin-top:20px; }
.vision-visual { height:663px; position:relative; }
.vision-visual>img { position:absolute; top:-16.069px; left:0; width:668px; height:679.333px; }
/* Figma contains only a desktop artboard; smaller screens reflow its content. */
@media(max-width:1399px) {
  .blizkie-intro-copy { grid-template-columns:25.36765% minmax(0,1fr) 158px; gap:24px; }
  .intro-description { width:auto; }
  .blizkie-section { grid-template-columns:25.36765% minmax(0,1fr); }
  .reason-copy,.audience-content,.flow-intro>p { max-width:100%; }

  .challenges-list li { gap:clamp(20px,5.278vw,76px); }
  .case-example,.vision-content { grid-template-columns:minmax(0,620px) minmax(0,668px); gap:40px; }

  .result-cards { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); }

  .vision-visual>img { width:100%; height:auto; }
  .blizkie-intro-copy br,.blizkie-section br,.example-description br,.vision-description br { display:none; }
}
@media(max-width:1100px) {
  .blizkie-intro-copy { grid-template-columns:1fr 2fr; }
  .blizkie-meta { grid-column:2; flex-direction:row; gap:20px; }
  .audience-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }


  .flow-figure { height:auto; aspect-ratio:1360 / 479; }
  .flow-figure img { width:81.213%; height:82.985%; left:9.765%; top:8.51%; }
  .detail-gallery { gap:20px; }
  .detail-gallery figure { height:300px; }
  .detail-widget img { width:90%; height:auto; left:5%; top:calc(50% - 70px); }
  .detail-services img { width:90%; height:auto; left:5%; }
  .detail-list img { width:75%; height:auto; left:12.5%; }
}
@media(max-width:740px) {
  .blizkie-case { gap:30px; padding-top:0; }
  .blizkie-intro { padding:70px 24px 30px; gap:32px; }
  .blizkie-intro-copy { display:flex; flex-direction:column; gap:24px; }
  .intro-description,.blizkie-meta { padding:0; margin:0; }



  .blizkie-section { padding:30px 24px; display:flex; flex-direction:column; gap:24px; }


  .audience-content { width:100%; }
  .audience-cards { gap:12px; }

  .challenges-list {   gap:24px; }
  .challenges-list li { grid-template-columns:32px minmax(0,1fr); gap:18px; }
  .blizkie-flow { padding:30px 24px; gap:30px; }
  .flow-intro { padding:0; }
  .flow-figure { overflow-x:auto; aspect-ratio:auto; height:300px; }
  .flow-figure img { width:773.15px; height:278.25px; top:10px; left:10px; max-width:none; }
  .blizkie-examples { padding:30px 24px 0; gap:40px; }
  .case-example,.vision-content { display:flex; flex-direction:column; gap:36px; }
  .case-example-copy { padding:0; gap:30px; }
  .example-description {   min-height:0; }
  .example-visual { width:100%; height:603px; }
  .detail-gallery { grid-template-columns:1fr; padding-block:30px; }
  .detail-gallery figure { height:385px; }
  .detail-widget img { width:292.154px; height:200.346px; left:calc(50% - 146.077px); top:91.827px; }
  .detail-services img { width:278.333px; height:auto; left:calc(50% - 139.167px); top:41px; }
  .detail-list img { width:251.667px; height:305px; left:calc(50% - 125.833px); top:41px; }

  .result-cards { grid-template-columns:1fr; gap:40px; }

  .result-cards br { display:initial; }
  .blizkie-vision { padding:70px 24px 100px; background-image:radial-gradient(ellipse 110% 230px at 100% 5%, rgba(137,160,25,.52) 0%, rgba(90,108,9,.26) 40%, rgba(90,108,9,0) 100%), radial-gradient(ellipse 150% 620px at 100% 0%, rgba(61,73,0,.48) 0%, rgba(38,46,0,.28) 55%, rgba(38,46,0,0) 100%); }

  .vision-visual { height:auto; aspect-ratio:668 / 663; }
  .vision-visual>img { position:relative; top:0; }
}

/* Keep the desktop home-state heading independent of the paragraph width. */
@media(min-width:1101px) {
  .blizkie-case .example-text-layer[data-panel="home"] .example-title {
    width:max-content;
    max-width:none;
    white-space:nowrap;
  }
}

/* Content-driven tablet layouts: labels never compete with the body column. */
@media(max-width:1399px) {
  .result-cards {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    row-gap:40px;
  }
  .case-example-copy { min-width:0; }
  .example-description { min-height:0; }
  .blizkie-case .case-example .example-title {
    width:auto;
    max-width:100%;
    white-space:normal;
  }
  .example-visual { height:auto; aspect-ratio:668 / 663; }
  .example-media { width:38.29%; height:auto; aspect-ratio:255.758 / 524.894; }
}
@media(max-width:1100px) {
  .blizkie-case .blizkie-section {
    grid-template-columns:minmax(0,1fr);
    gap:24px;
  }
  .blizkie-section > * { min-width:0; max-width:100%; }
}
@media(max-width:740px) {
  .result-cards { grid-template-columns:minmax(0,1fr); }
}

/* On phone landscape, the visual contributes its natural image height instead
   of reserving the desktop 663px canvas. Existing image offsets stay intact. */
@media (min-width:741px) and (orientation:landscape) {
  :root[data-case-type-mode="phone"] .vision-visual { height:auto; align-self:start; }
  :root[data-case-type-mode="phone"] .vision-visual > img { position:relative; }
}

/* Phone landscape only: retain safe content insets while painting to the screen edges. */
@media (orientation:landscape) {
  :root[data-case-type-mode="phone"] .blizkie-page {
    padding-inline:env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  }
  :root[data-case-type-mode="phone"] .blizkie-page .example-visual {
    align-self:start;
    margin-top:20px;
    height:clamp(277.488px, 36.9984vw, 354.568px);
    aspect-ratio:auto;
    padding:14px 24px;
  }
  :root[data-case-type-mode="phone"] .blizkie-page .example-media {
    width:auto;
    max-width:100%;
    height:100%;
    aspect-ratio:255.758 / 524.894;
  }
  :root[data-case-type-mode="phone"] .blizkie-case > .blizkie-vision {
    width:calc(100% + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
    margin-left:calc(-1 * env(safe-area-inset-left, 0px));
    margin-right:calc(-1 * env(safe-area-inset-right, 0px));
    padding-left:calc(40px + env(safe-area-inset-left, 0px));
    padding-right:calc(40px + env(safe-area-inset-right, 0px));
  }
}
@media (max-width:740px) and (orientation:landscape) {
  :root[data-case-type-mode="phone"] .blizkie-page .case-example-copy { min-height:309px; }
  :root[data-case-type-mode="phone"] .blizkie-page .example-visual {
    margin-top:0;
    height:min(calc((100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 8px) * .7708), calc(100svh - 40px));
  }
  :root[data-case-type-mode="phone"] .blizkie-case > .blizkie-vision {
    padding-left:calc(24px + env(safe-area-inset-left, 0px));
    padding-right:calc(24px + env(safe-area-inset-right, 0px));
  }
}

/* Local wheel/swipe interaction; geometry stays in normal document flow. */
.example-scroll { position:relative; width:100%; }
.example-sticky { position:relative; }
.example-sticky .case-example { position:relative; }
.example-sticky #example-copy { display:grid; }
.example-text-layer { grid-area:1 / 1; opacity:0; transform:translateY(8px); transition:opacity 300ms ease, transform 300ms ease; pointer-events:none; }
.example-text-layer.is-active { opacity:1; transform:none; pointer-events:auto; }
.example-sticky .example-visual { position:relative; }
.example-media-layer { position:absolute; inset:0; opacity:0; transition:opacity 300ms ease; pointer-events:none; }
.example-media-layer.is-active { opacity:1; }
.example-media-layer > :is(img,video) { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:6% / 3%; }
.example-media-layer video { opacity:0; transition:opacity 300ms ease; }
.example-media-layer.is-active video { opacity:1; }
.example-pagination { position:absolute; left:calc(100% + 24px); transform:translateY(-50%); display:flex; flex-direction:column; gap:12px; z-index:2; pointer-events:none; }
.example-pagination span { position:relative; width:6px; height:6px; border-radius:50%; background:#ededed; transition:background-color 300ms ease; }
.example-pagination span.is-active { background:#000; }
@media(max-width:740px) {
  .example-pagination { left:calc(100% + 10px); }
}
@media(min-width:1101px) {
  .example-sticky .example-text-layer[data-panel="home"] .example-title { width:max-content; max-width:none; white-space:nowrap; }
}
@media(orientation:landscape) and (max-width:1000px) {

  .example-sticky .case-example { display:grid; grid-template-columns:1fr 1fr; gap:40px; }

}
@media(prefers-reduced-motion:reduce) {
  .example-text-layer,.example-media-layer,.example-media-layer video,.example-pagination span { transition:none; transform:none; }
}

@media(orientation:landscape) {
  :root[data-case-type-mode="phone"] .example-sticky .case-example-copy { padding-top:0; }
  :root[data-case-type-mode="phone"] .blizkie-page .example-sticky .example-visual { margin-top:0; }
}

/* Reuse the shared menu transition while the phone interaction owns scrolling. */
@media(orientation:landscape) {
  :root[data-case-type-mode="phone"].blizkie-interaction-active .menu {
    transform:translateY(-100%);
    pointer-events:none;
  }
}

/* Visible keyboard focus without changing the composition geometry. */
.example-sticky .case-example:focus-visible { outline:2px solid currentColor; outline-offset:6px; border-radius:16px; }