.hero {
  height: 100svh;
  margin: 0;
  min-height: 620px;
}

@media (max-width: 760px) {
  .hero {
    height: 100svh;
    margin: 0;
    min-height: 550px;
  }
}

/* One shared CTA treatment, with the hero as the only light exception. */
.button,
.button-light,
.button-dark,
.section-heading .text-link {
  align-items: center;
  background: var(--accent);
  border-radius: var(--radius-pill, 999px);
  color: oklch(100% 0 0);
  display: inline-flex;
  font-size: var(--type-meta);
  justify-content: center;
  min-height: 3.5rem;
  min-width: 13.5rem;
  padding: .95rem 1.5rem;
}

.hero .button-light {
  background: var(--paper);
  color: var(--accent);
}

.contact .button-light {
  background: oklch(100% 0 0);
  border-color: transparent;
  color: oklch(0% 0 0);
}

.button:hover,
.button-light:hover,
.button-dark:hover,
.section-heading .text-link:hover {
  background: var(--accent-hover);
  color: oklch(100% 0 0);
}

.hero .button-light:hover {
  background: oklch(91% .006 85);
  color: var(--accent);
}

/* Compact service-title role with a consistent title-to-body gap. */
.service h3 {
  font-size: clamp(1.75rem, 1.55rem + .8vw, 2.5rem);
  margin-bottom: var(--space-4);
}

/* Larger project imagery with a restrained editorial hover. */
.project figure { position: relative; }
.project figure::after {
  background: oklch(0% 0 0 / .16);
  content: "";
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity .55s cubic-bezier(.16, 1, .3, 1);
}
.project img { height: clamp(34rem, 43vw, 42rem); }
.project span { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.project:hover figure::after { opacity: 1; }
.project:hover span { transform: translateX(.55rem); }

/* Service cards remain a quiet, static information grid. */
.service:hover figure img { filter: saturate(.78); transform: scale(1.02); }
.service:hover h3 { color: var(--ink); }

@media (max-width: 760px) {
  .project img { height: min(125vw, 38rem); }
}

/* Overflowing horizontal project gallery. */
.projects-viewport {
  cursor: grab;
  margin-right: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  touch-action: pan-y;
  user-select: none;
  width: calc(50vw + 50%);
}
.projects-viewport::-webkit-scrollbar { display: none; }
.projects-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.project-grid {
  display: flex;
  gap: var(--space-3);
  grid-template-columns: none;
  padding-right: 3.5vw;
  width: max-content;
}
.project {
  flex: 0 0 clamp(30rem, 43vw, 43rem);
  scroll-snap-align: start;
}
.project-controls {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-6);
  padding-right: 3.5vw;
}
.project-controls p {
  color: var(--muted);
  font-size: var(--type-meta);
  letter-spacing: .04em;
  margin: 0;
}
.project-controls p span:first-child { color: var(--ink); }
.project-controls div { display: flex; gap: var(--space-2); }
.project-control {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: oklch(100% 0 0);
  cursor: pointer;
  font: 600 var(--type-meta)/1.2 var(--sans);
  min-height: 3rem;
  padding: .75rem 1.1rem;
  transition: background var(--duration-hover, 150ms) ease, color var(--duration-hover, 150ms) ease, opacity var(--duration-hover, 150ms) ease, transform var(--duration-press, 140ms) var(--ease-out);
}
.project-control:hover:not(:disabled) { background: var(--accent-hover); color: oklch(100% 0 0); transform: none; }
.project-control:disabled { cursor: not-allowed; opacity: .28; }

@media (max-width: 760px) {
  .projects-viewport { margin-right: 0; width: calc(50vw + 50%); }
  .project-grid { padding-right: 22px; }
  .project { flex-basis: min(82vw, 31rem); }
  .project-controls { align-items: flex-start; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); padding-right: 22px; }
  .project-control { min-height: 2.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .projects-viewport { scroll-behavior: auto; }
  .project-control, .project span, .project figure::after { transition: none; }
}

/* Static 2 × 2 project grid. */
.project-grid {
  display: grid;
  gap: var(--space-5) var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-right: 0;
  width: 100%;
}
.project { flex: initial; min-width: 0; }
.project img { height: clamp(30rem, 36vw, 40rem); }

@media (max-width: 760px) {
  .project-grid { grid-template-columns: 1fr; }
  .project img { height: min(115vw, 38rem); }
}

/* HERO APPEAR STORYBOARD
   0ms: first title line lifts into focus
   170ms: second title line follows
   820ms: CTA settles into place */
.hero h1 {
  animation: none;
  font-size: clamp(3rem, 9.4vw, 8.6rem);
  line-height: 1.08;
  margin-bottom: var(--space-6);
  padding-block: .08em .16em;
}
.hero-copy { width: min(80rem, calc(100% - 4rem)); }
.hero h1 span {
  display: block;
  overflow: visible;
  white-space: nowrap;
}
.hero .button { animation-delay: .82s; }

@keyframes hero-line-fade-in {
  from { opacity: 0; transform: translateY(.28em); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .hero-copy { width: calc(100% - 2.75rem); }
  .hero h1 { font-size: clamp(2.85rem, 11.5vw, 5rem); }
  .hero h1 span { white-space: normal; }
}

/* Compact site navigation. */
.site-header {
  background: transparent;
  color: oklch(100% 0 0);
  display: flex;
  height: 5rem;
  padding-left: 3.5vw;
  padding-right: 3.5vw;
}
.site-header .wordmark { font-family: var(--serif); font-size: 1.65rem; letter-spacing: -.06em; }
.site-header nav { gap: var(--space-5); margin-left: auto; }
.site-header nav a { font-size: clamp(.95rem, .9rem + .18vw, 1.08rem); letter-spacing: -.025em; }
.site-header .header-contact { display: none; }
.site-header.is-scrolled { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: oklch(100% 0 0 / .78); color: oklch(0% 0 0); }

/* Shared rhythm between the page's major narrative sections. */
:root { --section-gap: clamp(8rem, 12vw, 13.5rem); }
.intro { padding-bottom: var(--section-gap); padding-top: var(--section-gap); }
.work { padding-bottom: var(--section-gap); }
.promise { padding-bottom: var(--space-section); padding-top: var(--space-section); }
.promise { border-top: 0; }
.services { padding-bottom: var(--section-gap); padding-top: 0; }
.contact { padding-bottom: var(--section-gap); padding-top: var(--section-gap); }

@media (max-width: 760px) {
  .site-header { height: 4.25rem; padding-left: 22px; padding-right: 22px; }
  .site-header nav { display: none; }
  .site-header .menu-toggle { display: block; }
  body.menu-open .site-header nav { display: flex; }
  :root { --section-gap: 6rem; }
  .promise { padding-bottom: var(--space-section); padding-top: var(--space-section); }
}

/* More restrained scale for section-level headings. */
.section-heading h2 { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); }
.promise-copy h2 { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); }
.contact h2 { font-size: clamp(4rem, 2.8rem + 5.3vw, 7rem); }

#praca .section-heading {
  align-items: center;
  text-align: center;
}
#praca .section-heading > div { text-align: center; }
#praca .section-heading .lead { margin-left: auto; margin-right: auto; max-width: 44ch; }

/* Intro follows the same heading + lead hierarchy as the section headers. */
.intro { font-size: inherit; }
.intro h2 {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  letter-spacing: -.055em;
  line-height: .96;
  margin: 0;
  max-width: var(--copy-width);
}
.intro .lead {
  color: var(--muted);
  margin: var(--space-4) 0 0;
  max-width: var(--copy-width);
}
.intro { text-align: center; }
.intro h2,
.intro .lead { margin-left: auto; margin-right: auto; max-width: var(--feature-copy-width); }
.intro .button { margin-top: var(--space-6); }
.intro-media {
  aspect-ratio: 16 / 9;
  margin: var(--space-8) auto 0;
  max-width: var(--process-width);
  overflow: hidden;
  width: 100%;
}
.intro-media img { display: block; height: 100%; object-fit: cover; width: 100%; }

/* More confident button labels in a tighter pill. */
.button,
.button-light,
.button-dark,
.section-heading .text-link {
  font-size: var(--button-font-size, 1rem);
  letter-spacing: -.02em;
  min-height: var(--button-height, 3.25rem);
  padding: var(--button-padding, .8rem 1.2rem);
}

/* Unified spacing and heading tracking */
:root { --section-gap: var(--space-section); }
.intro h2 { letter-spacing: var(--tracking-heading); }
.intro .lead { margin-top: var(--space-heading-copy); }
.intro .button { margin-top: var(--space-copy-action); }
.intro-media { margin-top: var(--space-heading-content); }