/* Szeptucha Studio — style strony głównej */

@font-face { font-family: "Ogg"; src: url("../fonts/ogg-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/worksans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/worksans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/worksans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --green: #1E4B3A;
  --green-line: #4E7263;
  --cream: #F2EFE9;
  --sand: #E7E3DA;
  --muted: #3F5E52;
  --muted-light: #D9DED8;
  --gold: #D8C9A8;
  --rule: #C9CFC6;
  --serif: "Ogg", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pad: clamp(20px, 5.5vw, 80px);
  --section: clamp(80px, 9.5vw, 136px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cream); color: var(--green); font-family: var(--sans); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.serif { font-family: var(--serif); font-weight: 400; }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.08; }
.lead { font-size: 18px; line-height: 1.7; color: var(--muted); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; }
.split > .left { grid-column: span 6; display: flex; flex-direction: column; gap: 24px; }
.split > .right { grid-column: 8 / span 5; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 16px 32px; border-radius: 999px; font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s; }
.btn-green { background: var(--green); color: var(--cream); }
.btn-green:hover { background: #163A2D; }
.btn-cream { background: var(--cream); color: var(--green); }
.btn-cream:hover { background: #FFFFFF; }
.btn-outline { color: var(--cream); border: 1px solid var(--cream); }
.btn-outline:hover { background: rgba(242, 239, 233, .12); }
.center { display: flex; justify-content: center; }

/* HERO */
.hero { position: relative; min-height: 100vh; min-height: 100svh; color: var(--cream); background: #2E3F45 url("../img/hero-poster.jpg") center / cover no-repeat; overflow: hidden; display: flex; flex-direction: column; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 44, 34, .72) 0%, rgba(18, 44, 34, .5) 55%, rgba(18, 44, 34, .3) 100%); }
@media (prefers-reduced-motion: reduce) { .hero video { display: none; } }
@media (max-width: 720px) { .hero::after { background: rgba(18, 44, 34, .62); } }
.hero > .wrap { position: relative; z-index: 1; width: 100%; }
.hero-top { padding-top: 36px; }
.hero-top img { width: 208px; height: auto; }
.hero-body { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding-top: 48px; padding-bottom: 80px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8.4vw, 120px); line-height: 1; letter-spacing: -.02em; }
.hero p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; max-width: 880px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* HOTELE */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--green); margin-top: 80px; }
.pillars > div { padding: 40px; display: flex; flex-direction: column; gap: 16px; }
.pillars > div:first-child { padding-left: 0; }
.pillars > div:last-child { padding-right: 0; }
.pillars > div + div { border-left: 1px solid var(--rule); }
.pillars h3 { font-size: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.pillars p { font-size: 16px; color: var(--muted); }

.cms { background: var(--green); color: var(--cream); border-radius: 4px; padding: clamp(32px, 5vw, 72px); margin-top: 80px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; }
.cms .intro { grid-column: span 5; display: flex; flex-direction: column; gap: 24px; }
.cms .eyebrow, .cms .note-label { color: var(--gold); }
.cms h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; }
.cms .intro p { color: var(--muted-light); }
.cms .note { margin-top: 8px; border-top: 1px solid var(--green-line); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.cms .note-label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.cms .note p { color: var(--cream); }
.cms .items { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 32px; align-content: start; }
.cms .items > div { border-top: 1px solid var(--green-line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.cms .items h4 { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.4; }
.cms .items p { font-size: 15px; line-height: 1.6; color: var(--muted-light); }

/* USŁUGI */
.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.services-head .left { display: flex; flex-direction: column; gap: 28px; }
.services-head img { width: 64px; height: auto; }
.services-head p { max-width: 460px; }
.service-list { margin-top: 56px; border-bottom: 1px solid var(--rule); }
.service { display: grid; grid-template-columns: 140px 400px minmax(0, 1fr); gap: 40px; padding: 36px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.service:first-child { border-top-color: var(--green); }
.service .num { font-family: var(--serif); font-size: 56px; line-height: 1; }
.service h3 { font-size: 20px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; line-height: 1.35; }
.service p { color: var(--muted); }

/* SZKOLENIA */
.trainings { background: var(--sand); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.card { background: var(--cream); border-radius: 4px; padding: 44px 40px; display: flex; flex-direction: column; gap: 22px; }
.card .who { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.card h3 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.15; }
.card > p { font-size: 16px; color: var(--muted); }
.card ul { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; }
.card li::before { content: "— "; }
.card .foot { margin-top: auto; padding-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.card.dark { background: var(--green); color: var(--cream); }
.card.dark .who, .card.dark .foot { color: var(--gold); }
.card.dark > p { color: var(--muted-light); }
.card.dark ul { border-top-color: var(--green-line); }
.trainings .center { margin-top: 64px; }

/* JAK ZACZYNAMY */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--green); margin-top: 72px; }
.steps > div { padding: 44px 40px 0; display: flex; flex-direction: column; gap: 18px; }
.steps > div:first-child { padding-left: 0; }
.steps > div:last-child { padding-right: 0; }
.steps > div + div { border-left: 1px solid var(--rule); }
.steps .num { font-family: var(--serif); font-size: 56px; line-height: 1; }
.steps h3 { font-size: 18px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.steps p { font-size: 16px; color: var(--muted); }
.start .center { margin-top: 72px; }

/* O STUDIU */
.about { background: var(--green); color: var(--cream); }
.about .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; align-items: center; }
.about .text { grid-column: span 7; display: flex; flex-direction: column; gap: 32px; }
.about h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5vw, 72px); line-height: 1.05; }
.about p { font-size: 19px; line-height: 1.75; color: #E3E6E1; }
.about .art { grid-column: 9 / span 4; display: flex; justify-content: center; }
.about .art img { width: 100%; max-width: 400px; height: auto; }

/* KONTAKT */
.contact { background: var(--green); color: var(--cream); border-top: 1px solid #2F5D4B; }
.contact .wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 56px; align-items: start; padding-top: clamp(96px, 10vw, 144px); padding-bottom: clamp(96px, 10vw, 144px); }
.contact-intro { grid-column: span 5; display: flex; flex-direction: column; gap: 28px; }
.contact h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 6.7vw, 96px); line-height: 1; }
.contact-intro > p { font-size: 18px; color: var(--muted-light); max-width: 420px; }
.contact .links { display: flex; flex-direction: column; gap: 12px; font-size: clamp(20px, 1.9vw, 26px); margin-top: 8px; }
.contact-form { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.contact-form label { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted-light); }
.contact-form label span { opacity: .7; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-size: 17px; color: var(--cream); background: transparent; border: 0; border-bottom: 1px solid #8FA79B; border-radius: 0; padding: 10px 0; outline: none; -webkit-appearance: none; appearance: none; }
.contact-form select { background-image: linear-gradient(45deg, transparent 50%, #D9DED8 50%), linear-gradient(135deg, #D9DED8 50%, transparent 50%); background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; }
.contact-form select option { color: #1E4B3A; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-bottom-color: var(--gold); }
.contact-form .hp { position: absolute; left: -9999px; }
.form-note { font-size: 13px; color: #B9C4BD; }
.form-note a { color: #D9DED8; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-actions .btn { border: 0; cursor: pointer; font-family: inherit; }
.form-actions .btn:disabled { opacity: .6; cursor: wait; }
.form-status { font-size: 15px; color: var(--gold); }
.contact .links a { text-decoration: none; }
.contact .links a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* TABLET */
@media (max-width: 1080px) {
  .split > .left, .split > .right { grid-column: 1 / -1; }
  .cms .intro, .cms .items { grid-column: 1 / -1; }
  .service { grid-template-columns: 90px minmax(0, 1fr); row-gap: 12px; }
  .service p { grid-column: 2; }
  .cards { grid-template-columns: 1fr; }
  .about .text { grid-column: 1 / -1; }
  .about .art { grid-column: 1 / -1; justify-content: flex-start; }
  .about .art img { max-width: 280px; }
  .contact-intro, .contact-form { grid-column: 1 / -1; }
  .contact .wrap { padding-top: 112px; padding-bottom: 112px; }
}

/* TELEFON */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-top img { width: 160px; }
  .hero-body { gap: 28px; padding-bottom: 56px; }
  .hero .actions .btn { width: 100%; }
  .pillars, .steps { grid-template-columns: 1fr; }
  .pillars > div, .steps > div { padding: 32px 0; }
  .steps > div { padding-bottom: 0; }
  .pillars > div + div, .steps > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .cms .items { grid-template-columns: 1fr; }
  .services-head { flex-direction: column; align-items: flex-start; }
  .service { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .service p { grid-column: 1; }
  .service .num { font-size: 44px; }
  .card { padding: 36px 28px; }
  .card h3 { font-size: 30px; }
  .about p { font-size: 17px; }
  .contact .links { word-break: break-word; }
}

/* ============ NAWIGACJA ============ */
.nav { position: relative; z-index: 5; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 32px; padding-bottom: 32px; }
.nav .logo img { width: 208px; height: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 36px; font-size: 15px; font-weight: 400; }
.nav ul a { text-decoration: none; color: var(--cream); }
.nav ul a:hover, .nav ul a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav .nav-cta { background: var(--cream); color: var(--green) !important; padding: 13px 24px; border-radius: 999px; font-weight: 500; }
.nav .nav-cta:hover { text-decoration: none !important; background: #FFFFFF; }
.nav-toggle { display: none; background: none; border: 1px solid rgba(242, 239, 233, .6); color: var(--cream); border-radius: 999px; padding: 10px 18px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.hero .nav .wrap { padding-left: 0; padding-right: 0; max-width: none; }

/* ============ NAGŁÓWEK PODSTRONY ============ */
.page-head { background: var(--green); color: var(--cream); }
.page-head .intro { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; }
.page-head .intro .left { grid-column: span 7; display: flex; flex-direction: column; gap: 24px; }
.page-head .intro .eyebrow { color: var(--gold); }
.page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 1.02; letter-spacing: -.02em; }
.page-head .intro p { grid-column: 9 / span 4; font-size: 18px; line-height: 1.7; color: var(--muted-light); }

/* ============ TEKST / PROZA ============ */
.prose { max-width: 760px; }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.15; margin: 56px 0 18px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); }
.prose p + p { margin-top: 16px; }
.prose ul { padding-left: 20px; margin: 12px 0 0; }
.prose li + li { margin-top: 8px; }
.prose a { color: var(--green); }

/* ============ SZKOLENIA — PROGRAM ============ */
.program { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; padding-top: 64px; padding-bottom: 64px; border-top: 1px solid var(--rule); }
.program:first-of-type { border-top-color: var(--green); }
.program .side { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.program .side h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; }
.program .side p { color: var(--muted); }
.program .facts { display: flex; flex-wrap: wrap; gap: 8px; }
.program .facts span { font-size: 13px; font-weight: 500; letter-spacing: .06em; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; }
.program ol { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; counter-reset: m; }
.program li { counter-increment: m; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 16px; padding: 22px 0; border-top: 1px solid var(--rule); }
.program li:first-child { border-top: 0; padding-top: 0; }
.program li::before { content: counter(m, decimal-leading-zero); font-family: var(--serif); font-size: 30px; line-height: 1; grid-row: span 2; }
.program li strong { font-weight: 500; font-size: 17px; }
.program li p { color: var(--muted); font-size: 16px; grid-column: 2; }
.program.dark { background: var(--green); color: var(--cream); border-radius: 4px; padding: clamp(32px, 5vw, 64px); border: 0; margin: 24px 0; }
.program.dark .side p, .program.dark li p { color: var(--muted-light); }
.program.dark .facts span { border-color: var(--green-line); }
.program.dark li { border-top-color: var(--green-line); }
.program.dark .side .eyebrow { color: var(--gold); }

/* ============ REALIZACJE ============ */
.case { padding-top: var(--section); padding-bottom: var(--section); border-top: 1px solid #D9D5CC; }
.case:first-of-type { border-top: 0; }
.case-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: end; }
.case-head .left { grid-column: span 7; display: flex; flex-direction: column; gap: 20px; }
.case-head .right { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 14px; }
.case-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.06; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span { font-size: 13px; font-weight: 500; letter-spacing: .04em; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; color: var(--muted); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 64px; margin-top: 64px; }
.cols-2 h3 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
.cols-2 p, .cols-2 li { color: var(--muted); }
.cols-2 ul { margin: 0; padding-left: 20px; }
.cols-2 li + li { margin-top: 6px; }
.stats { background: var(--green); color: var(--cream); border-radius: 4px; padding: clamp(32px, 5vw, 64px); margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.stats .stat { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--green-line); padding-top: 20px; }
.stats .num { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 60px); line-height: 1; }
.stats .stat p { font-size: 15px; line-height: 1.55; color: var(--muted-light); }
.stats .note { grid-column: 1 / -1; font-size: 14px; color: var(--gold); }
.figure { margin: 64px 0 0; display: flex; flex-direction: column; gap: 14px; }
.figure img { width: 100%; height: auto; border-radius: 4px; }
.figure figcaption { font-size: 14px; color: var(--muted); }
.brand-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.brand-pair > div { border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 56px; aspect-ratio: 4 / 3; }
.brand-pair .light { background: #F6F2EA; border: 1px solid #E4DED2; }
.brand-pair .dark { background: #4A3E32; }
.brand-pair img { max-width: 62%; max-height: 100%; height: auto; }
.link-arrow { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.web-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.web-card { background: var(--sand); border-radius: 4px; padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 18px; text-decoration: none; min-height: 320px; transition: background-color .2s; }
.web-card:hover { background: #DDD8CC; }
.web-card .domain { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.web-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; }
.web-card p { color: var(--muted); }
.web-card .link-arrow { margin-top: auto; }

/* zapowiedź realizacji na stronie głównej */
.teaser { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.teaser a { text-decoration: none; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.teaser .t-stat { grid-column: span 5; background: var(--green); color: var(--cream); padding: clamp(32px, 4vw, 48px); gap: 16px; }
.teaser .t-stat .num { font-family: var(--serif); font-size: clamp(64px, 7vw, 96px); line-height: 1; }
.teaser .t-stat p { color: var(--muted-light); }
.teaser .t-stat .eyebrow { color: var(--gold); }
.teaser .t-img { grid-column: span 7; background: var(--sand); }
.teaser .t-img img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.teaser .t-img .cap { padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.teaser .t-img .cap strong { font-family: var(--serif); font-weight: 400; font-size: 28px; }
.teaser .t-img .cap span { color: var(--muted); font-size: 15px; }
.teaser .more { margin-top: auto; padding-top: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }

/* ============ STOPKA ============ */
.bottom-bar { background: var(--green); color: #B9C4BD; font-size: 14px; }
.bottom-bar .wrap { border-top: 1px solid var(--green-line); padding-top: 24px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.bottom-bar a { color: #D9DED8; }

/* ============ RESPONSYWNOŚĆ (dodatki) ============ */
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav ul { display: none; position: absolute; left: var(--pad); right: var(--pad); top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--green); border-radius: 4px; padding: 12px 24px 24px; box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
  .hero .nav ul { left: 0; right: 0; }
  .nav.open ul { display: flex; }
  .nav ul li a { display: block; padding: 14px 0; border-bottom: 1px solid var(--green-line); font-size: 17px; }
  .nav ul li:last-child a { border-bottom: 0; margin-top: 16px; text-align: center; }
  .page-head .intro .left, .page-head .intro p { grid-column: 1 / -1; }
  .program .side, .program ol { grid-column: 1 / -1; }
  .case-head .left, .case-head .right { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .teaser .t-stat, .teaser .t-img { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .nav .logo img { width: 160px; }
  .cols-2, .brand-pair, .web-cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .brand-pair > div { padding: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .program li { grid-template-columns: 48px minmax(0, 1fr); }
  .program li::before { font-size: 24px; }
}

/* ============ TYPOGRAFIA ============ */
p, li, figcaption, blockquote { text-wrap: pretty; hyphens: manual; }
h1, h2, h3, .num, .lead { text-wrap: balance; }

/* ============ REALIZACJE — dodatki ============ */
.case-index { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 56px; }
.case-index a { font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 16px; }
.case-index a:hover { border-color: var(--green); }
.case:first-of-type { border-top: 0; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.duo .figure, .trio .figure { margin-top: 64px; }
.duo.narrow { max-width: 760px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.skills { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.skills li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
@media (max-width: 1080px) {
  .about-side { grid-column: 1 / -1 !important; }
  .prose[style] { grid-column: 1 / -1 !important; }
}
@media (max-width: 720px) {
  .duo, .trio, .contact-form { grid-template-columns: 1fr; }
  .contact-form .full, .contact-form label { grid-column: 1 / -1; }
}

/* menu nad treścią hero */
.hero > .wrap.nav-holder { z-index: 10; }
.page-head .nav { z-index: 10; }
.page-head .intro { position: relative; z-index: 1; }
@media (max-width: 1080px) { .nav ul { border: 1px solid var(--green-line); } }

/* ============ STRONA GŁÓWNA v2 ============ */
.hero h1 { font-size: clamp(56px, 8vw, 116px); }
.hero .hero-lead { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; max-width: 900px; }
.hero .hero-note { font-size: 17px; color: #E4E8E3; margin-top: -16px; }
.trust { list-style: none; margin: 16px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(242, 239, 233, .35); display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.trust li { display: flex; align-items: center; gap: 10px; }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.proof { background: var(--green); color: var(--cream); padding: clamp(72px, 8vw, 112px) 0; }
.proof .wrap { display: flex; flex-direction: column; gap: 48px; }
.proof .eyebrow { color: var(--gold); }
.proof-head { display: flex; flex-direction: column; gap: 20px; }
.proof h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 60px); line-height: 1.08; }
.proof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.proof-stats .stat { border-top: 1px solid var(--green-line); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.proof-stats .num { font-family: var(--serif); font-size: clamp(48px, 5.4vw, 76px); line-height: 1; }
.proof-stats p { font-size: 15px; line-height: 1.55; color: var(--muted-light); }
.proof .link-arrow { color: var(--cream); align-self: flex-start; }

.problems { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.problem { background: #FBF8F2; border: 1px solid #E2DDD2; border-radius: 4px; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.problem .mark { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--muted); }
.problem p { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--green); }

.steps.steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps.steps-4 > div { padding-bottom: 8px; }

.offer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.offer-feature { grid-row: span 2; background: var(--green); color: var(--cream); border-radius: 4px; padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 20px; text-decoration: none; }
.offer-feature .eyebrow { color: var(--gold); }
.offer-feature h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.05; }
.offer-feature p { color: var(--muted-light); }
.offer-feature .link-arrow { margin-top: auto; color: var(--cream); }
.offer-item { border-top: 1px solid var(--green); padding: 24px 0 8px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.offer-item h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.offer-item p { color: var(--muted); font-size: 16px; }
a.offer-item .link-arrow { font-size: 15px; margin-top: 4px; }
.support-line { margin-top: 40px; font-size: 15px; color: var(--muted); }

.cases-home { border-top: 1px solid #D9D5CC; }
.case-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.case-card { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; background: var(--sand); text-decoration: none; }
.case-card img { width: 100%; height: 240px; object-fit: cover; }
.case-card .cc-body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.case-card .cc-body h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; }
.case-card.dark { background: var(--green); color: var(--cream); }
.case-card.dark .cc-top { height: 240px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; border-bottom: 1px solid var(--green-line); }
.case-card.dark .num { font-family: var(--serif); font-size: 72px; line-height: 1; }
.case-card.dark .cc-top p { color: var(--muted-light); font-size: 15px; }
.case-card.dark .eyebrow { color: var(--gold); }
.case-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

.brands { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--green-line); padding-top: 24px; }
.brands-label { font-size: 14px; color: var(--muted-light); }
.brands ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-family: var(--serif); font-size: 24px; }
.about h2 { font-size: clamp(40px, 4.4vw, 60px); }

.contact-steps { list-style: none; margin: 0; padding: 0; counter-reset: c; display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.contact-steps li { counter-increment: c; display: grid; grid-template-columns: 32px minmax(0, 1fr); font-size: 16px; color: var(--muted-light); }
.contact-steps li::before { content: counter(c) "."; font-family: var(--serif); color: var(--gold); font-size: 20px; }
.contact-steps strong { color: var(--cream); font-weight: 500; }
.contact h2 { font-size: clamp(48px, 5.4vw, 80px); }
.contact-form textarea::placeholder { color: #8FA79B; }
.contact-form select:invalid { color: #B9C4BD; }

@media (max-width: 1080px) {
  .proof-stats, .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps.steps-4 > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .offer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-feature { grid-column: 1 / -1; grid-row: auto; }
  .case-cards { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero .hero-note { margin-top: -8px; }
  .trust { flex-direction: column; gap: 8px; }
  .proof-stats, .problems, .offer { grid-template-columns: 1fr; }
  .steps.steps-4 { grid-template-columns: 1fr; }
  .steps.steps-4 > div { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--rule); padding-top: 28px; }
  .steps.steps-4 > div:first-child { border-top: 0; }
  .problem p { font-size: 20px; }
  .brands ul { font-size: 20px; }
}
.offer-feature { grid-row: span 3; }
.offer-item.muted { border-top-color: var(--rule); }
.offer-item.muted h3 { color: var(--muted); }
.contact-steps li { display: block; position: relative; padding-left: 32px; }
.contact-steps li::before { position: absolute; left: 0; top: -2px; }
@media (max-width: 1080px) { .offer-feature { grid-row: auto; } }

/* ============ MARKETING HOTELI ============ */
.hero-hotel { min-height: 88vh; min-height: 88svh; }
.hero-hotel h1 { display: flex; flex-direction: column; gap: 28px; }
.hero-hotel h1 .eyebrow { font-family: var(--sans); font-size: 13px; letter-spacing: .24em; line-height: 1.4; }
.chain { list-style: none; margin: 64px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; counter-reset: ch; }
.chain li { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 32px); padding: 14px 22px; border: 1px solid var(--green); border-radius: 999px; line-height: 1; }
.chain li + li::before { content: "→"; font-family: var(--sans); font-size: 18px; color: var(--muted); margin: 0 14px 0 -8px; display: none; }
.chain li:not(:last-child) { margin-right: 36px; position: relative; }
.chain li:not(:last-child)::after { content: "→"; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 18px; color: var(--muted); }
.chain li.goal { background: var(--green); color: var(--cream); }
.system { background: var(--sand); }
.sys-list { margin-top: 64px; border-top: 1px solid var(--green); }
.sys-row { display: grid; grid-template-columns: 220px repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.sys-title { display: flex; flex-direction: column; gap: 10px; }
.sys-title .num { font-family: var(--serif); font-size: 44px; line-height: 1; }
.sys-title h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.sys-col { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.sys-col p { color: var(--muted); }
.sys-label { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.sys-proof { background: var(--cream); border-radius: 4px; padding: 20px 22px; }
.sys-proof strong { color: var(--green); font-weight: 500; }
.sys-proof .link-arrow { font-size: 15px; }
.mini-stats { display: flex; flex-direction: column; gap: 12px; }
.mini-stats .num { font-family: var(--serif); font-size: 34px; line-height: 1; }
.mini-stats p { font-size: 14px; }
.sys-proof .src { font-size: 12px; }
@media (max-width: 1080px) {
  .sys-row { grid-template-columns: 1fr 1fr; }
  .sys-title { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 16px; }
  .sys-proof { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .sys-row { grid-template-columns: 1fr; gap: 20px; }
  .chain { flex-direction: column; align-items: flex-start; }
  .chain li:not(:last-child) { margin-right: 0; margin-bottom: 20px; }
  .chain li:not(:last-child)::after { content: "↓"; right: auto; left: 24px; top: auto; bottom: -26px; transform: none; }
}
.hero-hotel { background-image: url("../img/hotele-poster.jpg"); }
@media (max-width: 720px) { .hero-hotel { background-image: url("../img/hotele-poster-mobile.jpg"); } }
@media (min-width: 721px) {
  .chain { flex-wrap: nowrap; justify-content: space-between; }
  .chain li { font-size: clamp(16px, 1.6vw, 24px); padding: 12px 18px; white-space: nowrap; }
  .chain li:not(:last-child) { margin-right: 0; }
  .chain li:not(:last-child)::after { right: auto; left: calc(100% + 4px); font-size: 15px; }
}
@media (min-width: 721px) and (max-width: 1080px) { .chain { flex-wrap: wrap; justify-content: flex-start; gap: 12px 28px; } }

/* ============ REALIZACJE v2 ============ */
.case-index .ci-label { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); align-self: center; margin: 0 4px 0 12px; }
.case-index .ci-label:first-child { margin-left: 0; }
.group-title { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 36px); margin-top: 72px; padding-bottom: 16px; border-bottom: 1px solid var(--green); }
.group-title + .case { border-top: 0; }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--rule); }
.flow > div { display: flex; flex-direction: column; gap: 10px; }
.flow p, .flow li { color: var(--muted); font-size: 16px; }
.flow ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.flow-result { background: var(--green); color: var(--cream); border-radius: 4px; padding: 20px 22px; }
.flow-result p { color: var(--cream); }
.flow-result .sys-label { color: var(--gold); }
.case .figure + .flow, .case .brand-pair + .flow { margin-top: 48px; }
.selected { padding-bottom: var(--section); }
.sel-group { font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; margin: 56px 0 24px; color: var(--muted); }
.sel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sel { background: #FBF8F2; border: 1px solid #E2DDD2; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.sel .figure { margin: 0; }
.sel .figure img { border-radius: 0; }
.sel-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px 24px 0; background: var(--sand); }
.sel-pair img { width: 100%; height: 360px; object-fit: cover; object-position: top; border-radius: 4px 4px 0 0; }
.sel-body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.sel-body h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; }
.sel-body p { color: var(--muted); }
.sel-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; }
.sel-wide .figure img { height: 100%; object-fit: cover; }
@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sel-wide { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .flow, .sel-grid { grid-template-columns: 1fr; }
  .sel-pair img { height: 260px; }
  .case-index .ci-label { width: 100%; margin: 8px 0 0; }
}

/* ============ REALIZACJE v3 ============ */
.case-index { row-gap: 10px; }
.before-after { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 56px; }
.before-after figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.before-after img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
.before-after figcaption { font-size: 14px; color: var(--muted); }
.before-after figcaption strong { color: var(--green); font-weight: 500; }
.ba-arrow { font-size: 32px; text-align: center; color: var(--muted); }

.ni-anim { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0; border-radius: 4px; overflow: hidden; border: 1px solid #E2DDD2; }
.ni-stage { background: #F5F6F7; display: flex; align-items: center; justify-content: center; gap: 28px; padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 56px); min-height: 420px; }
.ni-mark { width: clamp(90px, 10vw, 140px); height: auto; overflow: visible; flex: none; }
.ni-word { width: clamp(200px, 26vw, 380px); height: auto; }
.ni-top { fill: #8CB8C2; }
.ni-rot { fill: #8CB8C2; transform-box: view-box; transform-origin: 72.5px 124.5px; }
.ni-steps { background: #FBF8F2; padding: clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.ni-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: baseline; }
.ni-k { font-family: var(--serif); font-size: 26px; color: #307493; }
.ni-step p { color: var(--muted); font-size: 16px; }
.ni-step strong { color: var(--green); font-weight: 500; }
.ni-sum { font-size: 15px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 18px; }
.ni-sum strong { color: #307493; font-weight: 500; }
.ni-replay { align-self: flex-start; border: 1px solid var(--green); padding: 12px 22px; min-height: 0; font-size: 14px; background: transparent; color: var(--green); cursor: pointer; font-family: inherit; }

/* stan końcowy (domyślny, także przy wyłączonych animacjach) */
.ni-rot { transform: rotate(180deg); fill: #307493; }

@media (prefers-reduced-motion: no-preference) {
  .ni-anim .ni-n, .ni-anim .ni-i, .ni-anim .ni-rot, .ni-anim .ni-word, .ni-anim .ni-step { opacity: 0; }
  .ni-anim.play .ni-n { animation: niIn .7s ease-out .1s forwards; }
  .ni-anim.play .ni-i { animation: niIn .6s ease-out .6s forwards; }
  .ni-anim.play .ni-rot { animation: niShow .01s linear 1.3s forwards, niSpin 1.6s cubic-bezier(.65, 0, .35, 1) 1.5s both, niColor 1.6s ease 1.5s both; }
  .ni-anim.play .ni-word { animation: niWipe 1.2s cubic-bezier(.25, .8, .25, 1) 3.3s both; }
  .ni-anim.play .s1 { animation: niFade .5s ease .3s forwards; }
  .ni-anim.play .s2 { animation: niFade .5s ease 1.5s forwards; }
  .ni-anim.play .s3 { animation: niFade .5s ease 2.9s forwards; }
  .ni-anim:not(.play) .ni-step, .ni-anim:not(.play) .ni-rot, .ni-anim:not(.play) .ni-word, .ni-anim:not(.play) .ni-n, .ni-anim:not(.play) .ni-i { opacity: 0; }
}
@keyframes niIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes niShow { to { opacity: 1; } }
@keyframes niSpin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes niColor { from { fill: #8CB8C2; } to { fill: #307493; } }
@keyframes niWipe { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes niFade { to { opacity: 1; } }

.ni-prints { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 8px; align-items: start; }
.ni-inv { display: flex; flex-direction: column; }
@media (max-width: 1080px) {
  .ni-anim { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ni-stage { flex-direction: column; min-height: 0; }
  .ni-word { width: 100%; max-width: 300px; }
  .before-after { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); }
  .ni-prints { grid-template-columns: 1fr; }
}

/* ============ PRZEGLĄD REALIZACJI ============ */
.showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 16px; padding-top: 56px; }
.sc { position: relative; display: block; border-radius: 4px; overflow: hidden; background: var(--sand); text-decoration: none; }
.sc img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sc:hover img { transform: scale(1.03); }
.sc > span:last-child { position: absolute; left: 12px; bottom: 12px; background: rgba(242, 239, 233, .92); color: var(--green); font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; }
.sc-a { grid-column: span 7; grid-row: span 3; }
.sc-b { grid-column: span 5; grid-row: span 3; }
.sc-b img { object-position: top; }
.sc-c { grid-column: span 4; grid-row: span 2; background: #F5F6F7; }
.sc-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.sc-logo svg { width: 52px; height: auto; flex: none; }
.sc-logo img { width: 62%; height: auto; object-fit: contain; }
.sc-d, .sc-e { grid-column: span 4; grid-row: span 2; }
.sc-f, .sc-g { grid-column: span 6; grid-row: span 2; }
@media (max-width: 1080px) {
  .showcase { grid-auto-rows: 110px; }
  .sc-a, .sc-b { grid-column: span 6; }
  .sc-c, .sc-d, .sc-e { grid-column: span 6; }
  .sc-e { grid-column: span 12; }
}
@media (max-width: 720px) {
  .showcase { grid-template-columns: 1fr 1fr; grid-auto-rows: 120px; gap: 10px; padding-top: 32px; }
  .sc-a, .sc-b, .sc-c, .sc-d, .sc-e, .sc-f, .sc-g { grid-column: span 2; grid-row: span 2; }
  .sc-c, .sc-d { grid-column: span 1; }
  .sc > span:last-child { font-size: 11px; left: 8px; bottom: 8px; padding: 4px 8px; }
  .sc-logo svg { width: 32px; }
}

/* ============ REALIZACJE — poprawki kadrowania ============ */
.hero-sub { min-height: 72vh; min-height: 72svh; }
.hero-sub .hero-body { padding-bottom: 72px; }
.hero-sub h1 { font-size: clamp(52px, 7vw, 104px); }
.hero-sub .hero-lead { max-width: 760px; }

/* kolaż bez przycinania: układ kolumnowy, obrazy w naturalnych proporcjach */
.showcase { display: block; column-count: 3; column-gap: 16px; }
.sc { break-inside: avoid; margin-bottom: 16px; grid-column: auto !important; grid-row: auto !important; }
.sc img { height: auto; object-fit: initial; display: block; }
.sc-c { aspect-ratio: 16 / 10; }
.sc-c .sc-logo img { height: auto; }

.before-after img { aspect-ratio: auto; height: auto; object-fit: initial; background: #F0EFEB; }
.before-after figure { min-width: 0; }

.sel-wide .figure img { height: auto; object-fit: initial; }
.sel-wide { align-items: center; }
.sel-pair img { height: auto; object-fit: initial; }

.ni-prints { grid-template-columns: 5fr 7fr; }
@media (max-width: 1080px) { .showcase { column-count: 2; } }
@media (max-width: 720px) {
  .showcase { column-count: 1; }
  .ni-prints { grid-template-columns: 1fr; }
}
.sc-c { aspect-ratio: 1 / 1; }