/* Shared visual rules for every page. Photos, editorial accents and copy stay intact. */
:root,
body.offer-page {
  --site-content: 1448px;
  --site-gutter: 56px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --section-space: 80px;
  --section-title: clamp(32px, 4.5vw, 64px);
  --subsection-title: clamp(24px, 2.8vw, 36px);
  --body-size: 16px;
  --intro-size: clamp(16px, 1.5vw, 18px);
  --reading-measure: 64ch;
  --didone: var(--sans);
  --paper-frame: #f4f3ee;
  --line: rgba(10, 10, 10, .16);
}

/* One grid: the header, page content and footer share their outer edges. */
body .wrap {
  width: 100%;
  max-width: calc(var(--site-content) + var(--site-gutter) + var(--site-gutter));
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}
body.offer-page .page-wrap,
body .site-header-inner,
body .site-footer-inner {
  width: min(var(--site-content), calc(100% - var(--site-gutter) - var(--site-gutter)));
  margin-left: auto;
  margin-right: auto;
}
main :is(.copy, .hero-copy, .footer-column, .step, .service-cards > a) { min-width: 0; }
body main :is(h1, h2, h3) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}
body .heading-line { white-space: nowrap; }
body main p { hyphens: none; }
body #contact .contact-intro h2 em { display: block; }
/* Three explicit Playfair accents requested by the author; the logo stays separate. */
body #instagram .insta-head .handle,
body #proces .step .step-no,
body #film .film-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-style: normal;
}
body #film .film-head h2 { text-wrap: balance; }
body #contact .field input::placeholder,
body #contact .field textarea::placeholder {
  color: #b7b7b0;
  font-size: 12px;
  font-weight: 300;
  opacity: 1;
}

/* Inter Bold / Light contrast. Logo lettering is deliberately excluded. */
body :is(.sec-head h2, .service-heading h2, .faq-heading h2, .proces-top h2, .insta-head h2, .value-section h2),
body #portfolio .sec-head h2,
body #pricing .sec-head h2,
body #contact .contact-intro h2 {
  font-size: var(--section-title);
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
}
body :is(.sec-head h2 em, .sec-head h2 .title-serif, .service-heading h2 em, .service-heading h2 .title-serif, .faq-heading h2 em, .proces-top h2 em, .insta-head h2 em, .value-section h2 .title-serif),
body #contact .contact-intro h2 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  line-height: 1.08;
}
body.offer-page h1,
body.offer-page .faq-intro h1,
body .gal-head h1 {
  font-size: var(--section-title);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: var(--space-md) 0;
  overflow-wrap: normal;
}
body.offer-page h1 em,
body .gal-head h1 em {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: 1em;
  line-height: 1.08;
  letter-spacing: -.02em;
}
body.offer-page.engagement-page .offer-hero h1 {
  font-size: clamp(30px, 3.8vw, 56px);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
body.offer-page .offer-section h2 {
  font-size: var(--subsection-title);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}
body .service-cards h3 {
  font-size: var(--subsection-title);
  font-weight: 700;
  line-height: 1.15;
}
body #reels .reels-head h2 { font-size: var(--section-title); line-height: 1.08; }
body #reels .reels-head > p:not(.kick) { margin-left: auto; margin-right: auto; }
/* Captions belong below the films, away from playback controls. */
body #reels .reel { aspect-ratio: auto; max-width: 100%; background: transparent; overflow: visible; box-shadow: none; }
body #reels .reel::after { content: none; }
body #reels .reel video { height: auto; aspect-ratio: 9 / 16; border-radius: 18px; object-fit: contain; }
body #reels .reel-cap { margin-top: 12px; font-family: var(--sans); font-size: 13px; line-height: 1.6; color: var(--grey-d); opacity: 1; }
body :is(.kick, .eyebrow) { font-size: 10px; font-weight: 600; line-height: 1.6; letter-spacing: .24em; }

/* Regular for reading, Light only at display sizes. */
body :is(.service-intro, .proces-top > p:not(.kick), .reels-head > p:not(.kick)),
body #contact .contact-intro .lead,
body .gal-head > p:not(.kick):not(.gallery-note),
body.offer-page :is(.hero-copy > p:not(.eyebrow), .faq-intro > p:not(.eyebrow):not(.article-note), .about-page-hero p:not(.eyebrow)) {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--intro-size);
  line-height: 1.75;
  max-width: var(--reading-measure);
  text-wrap: pretty;
}
body.offer-page .copy,
body :is(.service-cards p, .step p, .faq-list details > p) {
  font-size: var(--body-size);
  line-height: 1.75;
}
body .value-intro { font-size: var(--intro-size); line-height: 1.75; max-width: var(--reading-measure); text-wrap: pretty; }
body #proces .step p { font-size: 15px; line-height: 1.7; }
body.offer-page .copy p { margin-bottom: var(--space-sm); }
body.offer-page .copy p:last-child { margin-bottom: 0; }
body .faq-list { margin-top: var(--space-lg); }
body.offer-page .offer-section > .faq-list { margin-top: 0; }
body .faq-list summary { font-size: clamp(18px, 2vw, 24px); line-height: 1.4; padding: 24px 44px 24px 0; }
body .faq-list summary::after { top: 23px; }

/* Secondary titles keep the reading family; display numerals use Playfair. */
body .hero-lede .manifest strong { font-weight: 700; }
body :is(.value-item h3, .blog-card h2) {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.3;
}
body .value-item h3 { font-size: 18px; }
body .blog-card h2 { font-size: var(--subsection-title); }
body .service-cards h3 em { font-family: var(--sans); font-weight: 300; font-style: normal; }
body :is(.sec-head .idx, .step-no, .service-number, .value-number, .pk-no) { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body #pricing .pk-name { font-weight: 700; line-height: 1.15; }
body #pricing .pk-price { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
body #pricing .pk-cta a { font-family: var(--sans); font-weight: 700; line-height: 1.15; }
body #pricing .pk-cta a em { font-family: var(--sans); font-weight: 300; font-style: normal; }
body #pricing .pk-cta p { font-size: 13px; font-weight: 400; line-height: 1.75; letter-spacing: 0; text-transform: none; text-wrap: pretty; }

/* Clean reading areas: cover the fixed grid only in the selected sections. */
body :is(#sesje, #proces, #contact) { position: relative; z-index: 2; background: var(--paper); border-top: 0; }
body #pricing { position: relative; z-index: 2; }
body #sesje .service-cards > a,
body #proces .proces-grid { border-top: 0; }
body :is(.hero-reels-preview figcaption, .polaroid .hand, .polaroid .frame, .brand-caption),
body.offer-page :is(.offer-hero figcaption, .photo-pair figcaption) {
  font-family: var(--sans);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}
body.offer-page .copy { max-width: var(--reading-measure); text-wrap: pretty; }

/* Stable vertical rhythm; no content-removing shortcuts or arbitrary huge gaps. */
body :is(.sec, .reels-sec) { padding-top: var(--section-space); padding-bottom: var(--section-space); }
body .value-section { padding-top: var(--section-space); padding-bottom: var(--section-space); }
body #portfolio { padding-top: 0; padding-bottom: var(--section-space); }
body #pricing,
body #contact { padding-top: var(--section-space); padding-bottom: var(--section-space); }
body #film { padding-top: var(--space-md); padding-bottom: 0; }
body :is(.service-heading h2, .faq-heading h2, .proces-top h2) { margin: var(--space-md) 0; }
body .proces-top,
body .reels-head,
body .insta-head { margin-bottom: var(--space-xl); }
body.offer-page .offer-hero { padding: 64px 0 var(--section-space); gap: 64px; }
body.offer-page .about-page-hero { padding: 64px 0; gap: 64px; }
body.offer-page .offer-section { padding: 64px 0; gap: var(--space-lg) 64px; }
body.offer-page .faq-intro { padding: 64px 0 var(--space-xl); max-width: 100%; }
body .gal-head { padding-top: 64px; padding-bottom: var(--space-xl); }
body .offer-masthead { padding: var(--space-md) 0; }
body.offer-page .hero-copy .eyebrow::before { content: none; display: none; }
body .team-details { margin-top: 0; padding-top: 0; border-top: 0; }
body .team-details h3 { font-size: 20px; line-height: 1.4; margin: 0 0 var(--space-sm); }
body .team-details h3:not(:first-child) { margin-top: var(--space-lg); }
body .team-details p { font-size: var(--body-size); line-height: 1.75; }
body .site-footer { padding-top: 64px; padding-bottom: var(--space-lg); }

/* One primary action style. Secondary article and motion controls stay outlined. */
body .btn-more,
body.offer-page .page-cta,
body #contact-form > button[type="submit"],
body #pricing .pk-choice {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 50px;
  max-width: 100%;
  padding: 16px 24px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  white-space: normal;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
body .hero-lede .hero-actions .hero-cta { padding: 16px 24px; font-weight: 600; min-height: 50px; }
body .btn-more:hover,
body.offer-page .page-cta:hover,
body #contact-form > button[type="submit"]:hover,
body #pricing .pk-choice:hover { background: #303030; color: #fff; gap: var(--space-md); }
body.offer-page .blog-card .page-cta { background: transparent; color: var(--ink); }
body.offer-page .blog-card .page-cta:hover { background: var(--ink); color: #fff; }
body .btn-more svg { flex-shrink: 0; width: 24px; height: 8px; }
body .blog-card { display: flex; flex-direction: column; }
body .blog-card .page-cta { align-self: flex-start; margin-top: auto; }
body .blog-card > p:last-of-type { margin-bottom: var(--space-md); }
body.offer-page :is(.offer-hero figure, .photo-pair figure),
body .blog-card .blog-cover { background: var(--paper-frame); }

@media (max-width: 900px) {
  :root, body.offer-page { --site-gutter: 20px; --section-space: 48px; }
  body .service-cards { gap: 0 var(--space-lg); }
  body.offer-page .offer-hero,
  body.offer-page .about-page-hero { gap: var(--space-lg); padding: var(--space-xl) 0; }
  body.offer-page .offer-section { gap: var(--space-md); padding: var(--space-xl) 0; }
  body.offer-page .faq-intro { padding: var(--space-xl) 0 var(--space-lg); }
  body .gal-head { padding-top: var(--space-xl); padding-bottom: var(--space-lg); }
  body .site-footer { padding-top: var(--space-xl); }
  body .proces-top,
  body .reels-head,
  body .insta-head { margin-bottom: var(--space-lg); }
  body .hero-body { padding-top: var(--space-xl); }
}
@media (max-width: 650px) {
  body .proces-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  body .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 var(--space-sm); }
  body .step .step-no { grid-row: 1 / 3; font-size: 36px; line-height: 1; }
  body .step h3 { margin: 0 0 var(--space-xs); line-height: 1.6; }
  body .step p { grid-column: 2; }
  body .site-footer-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
  body .footer-brand { grid-column: auto; }
  body .footer-copyright { grid-column: 1; }
  body .btn-more, body .hero-lede .hero-actions .hero-cta, body.offer-page .page-cta, body #contact-form > button[type="submit"] { padding: 16px 20px; }
  body .contact-fallback { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  body .contact-fallback button { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body .btn-more, body.offer-page .page-cta { transition: none; }
}

/* Curated photographs: complete rows with no filler tiles. */
body #instagram img[data-photo-source="images/plenery-dodatkowe/we-dwoje.jpg"] { filter: grayscale(1); }
@media (min-width: 701px) {
  body #instagram .insta-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body #instagram .insta-wall .cell { grid-column: auto; }
}
@media (max-width: 700px) {
  body #instagram .insta-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body #instagram .insta-wall .cell { grid-column: auto; }
  body #instagram .insta-wall .cell:nth-child(5n) { grid-column: 1 / -1; aspect-ratio: 8 / 5; }
}