/* =========================================================
   prograFík — Static landing page styles
   Palette
     bg page       #F8F6F1
     bg section    #F4F2ED
     dark text     var(--color-1) / var(--color-1)
     muted text    var(--color-muted) / var(--color-5)
     green accent  var(--color-3)
     orange accent var(--color-2)
     card bg       var(--color-6)
     mock dark bg  #1F2230
     divider line  var(--color-5)
   ========================================================= */

/* ---------------- FONTS ---------------- */
@font-face {
  font-family: 'HeadingGrotesk';
  src: url('/assets/HeadingGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HeadingGrotesk';
  src: url('/assets/HeadingGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HeadingGrotesk';
  src: url('/assets/HeadingGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BodyFont';
  src: url('/assets/body-font-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BodyFont';
  src: url('/assets/body-font-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* BodyFont only ships in 400 and 500. Browsers default <strong>/<b> to
   weight 700, which would either fall back to whichever face is closer
   (still 500) or render synthetic bold depending on the engine. Force
   weight 500 explicitly everywhere a BodyFont stack is in effect so the
   real 500 file is used and no faux-bold synthesis kicks in. */
strong, b { font-weight: 500; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 62.5%; /* 1rem = 10px */
}

/* Headings: HeadingGrotesk has large built-in vertical leading.
   Modern browsers trim it perfectly via text-box-trim (Chrome 133+, Safari 18.2+).
   Older browsers fall back to small line-height that still allows diacritics. */
h1, h2, h3, h4, h5, h6,
.hero-h1, .section-title, .footer-bigq, .testimonial-q,
.eyebrow, .section-eyebrow, .footer-hmm,
.service-title, .portfolio-item-title, .portfolio-item-content, .founder-name,
.testimonial-name, .testimonial-d, .stat-num, .stat-lbl, .nav a, .footer-nav a,
.footer-hmm, .footer-bigq, .hero-desc, .btn,
.client-prografik, .client-amunex, .client-donut-text {
  font-family: 'HeadingGrotesk', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.03em;    /* -3% */
  line-height: 1.05;
  /* Trim only the bottom leading; keep top intact so diacritics (Ž, Č, ť, ú…) don't get clipped. */
  text-box: trim-end alphabetic;
  text-box-trim: trim-end;
  text-box-edge: auto alphabetic;
}

:root {
  /* Reaches ~32px at 400px viewport (matching the original min) and
     scales up to the 48px max around 1000px (also matching the
     original). Min 2.6rem catches the very narrow 320-360px range
     so the title doesn't overflow there — H1 still stays larger than
     H2 (which mins at 2.8rem) across the whole range. */
  --h1:        clamp(2.6rem, 2.1rem + 2.7vw, 4.8rem);
  --h2:        clamp(2.8rem, 2.048rem + 2.007vw, 3.6rem);
  --h2-sec:    clamp(2rem,   1.3061rem + 1.4547vw, 3rem);
  --h3:        clamp(1.8rem, 1.725rem + 0.2vw, 2rem);
  --h4:        1.8rem;
  --text-body: clamp(1.6rem, 1.525rem + 0.2vw, 1.8rem);

  /* Brand palette — Bricks colors */
  --color-1: #171d1c;  /* dark — text, button bg, dividers */
  --color-2: #ffa630;  /* orange — accents, brush underlines */
  --color-3: #768948;  /* olive green — decorative scribbles */
  --color-4: #fdfff7;  /* cream — page bg / inverse text */
  --color-5: #b9bbbb;  /* light gray — muted lines, secondary text */
  --color-6: #d9d9d9;  /* pale gray — card bg, ghost button bg */
  --color-muted: #3A3A3A;  /* dark muted gray — body copy, descriptions */
}

body {
  font-family: 'BodyFont', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  background: #FFFFFF;
  color: var(--color-1);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('/assets/pozadie.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.05;
  z-index: -1;
  pointer-events: none;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 80px;
}

/* ---------------- HEADER ---------------- */
.header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 70;
  /* Transition tuned to match the Lenis smooth-scroll feel (expo-out) */
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform;
}
/* Paper-texture overlay (same pozadie.webp used on body) — sits behind the
   header content and fades in only when the header is in `.is-scrolled`. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pozadie.webp');
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.header > .container { position: relative; }
/* Hidden state — slides up out of view */
.header.is-hidden { transform: translateY(-100%); }
/* Scrolled state — solid cream + paper texture overlay. */
.header.is-scrolled {
  background-color: var(--color-4);
  box-shadow: 0 1px 0 rgba(23, 29, 28, 0.06);
}
.header.is-scrolled::before { opacity: 0.06; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  padding-bottom: 32px;
}
.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  height: 70px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 38px;
}
/* CMS render_menu() wraps items in <ul class="nav-menu">. Treat the inner
   ul as the actual flex strip so items space correctly regardless of
   whether the nav comes from CMS (with the ul wrapper) or the hardcoded
   fallback (flat <a> children). */
.nav .nav-menu {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav .nav-menu-item { list-style: none; }
.nav a {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-1);
  position: relative;
  display: inline-block;
  transition: opacity .2s ease;
}

/* Menu underline (header + footer): injected by JS, revealed on hover/active.
   Tight 2px offset matches the mobile spacing — felt cramped at -10px on
   desktop because the underline was floating below the text. */
.nav a .menu-underline,
.footer-nav a .menu-underline {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 8px;
  pointer-events: none;
  color: currentColor;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav a:hover .menu-underline,
.footer-nav a:hover .menu-underline,
.nav a.nav-active .menu-underline,
.nav .nav-menu-item.nav-active a .menu-underline,
.footer-nav a.footer-nav-active .menu-underline,
.footer-nav .nav-menu-item.footer-nav-active a .menu-underline,
/* CMS render_menu() now stamps the matching <li> + <a> with `is-active`
   based on REQUEST_URI. Reveals the underline the same way as :hover so
   the current page reads as "selected" in both header and footer nav. */
.nav .nav-menu-item.is-active a .menu-underline,
.nav a.is-active .menu-underline,
.footer-nav .nav-menu-item.is-active a .menu-underline,
.footer-nav a.is-active .menu-underline {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ---------------- HERO ---------------- */
.hero {
  background: transparent;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 80px;
  padding-top: 140px;
  padding-bottom: 10rem;
  z-index: 1;
}
.hero-left { max-width: 760px; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2; }
.hero-orange-circle {
  position: absolute;
  top: -110px;
  left: 31%;
  width: 298px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.hero-green-line {
  position: absolute;
  right: 23%;
  bottom: 30%;
  width: 274px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.eyebrow {
  font-size: var(--h2);
  font-weight: 300;
  color: var(--color-1);
}
.hero-h1 {
  position: relative;
  font-size: var(--h1);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-1);
}
/* Pre-hide animated SVG paths so they don't flash fully-drawn before GSAP
   sets the actual stroke-dashoffset based on getTotalLength(). */
#orange-circle-path,
#green-hero-path,
#ampersand-draw-path,
.green-curve-path-onas,
.portfolio-item .orange-circle-path,
.portfolio-item .green-curve-path,
.archive-project .orange-circle-path,
.archive-scribble--poznatky-green .orange-circle-path {
  stroke-dasharray: 99999;
  stroke-dashoffset: 99999;
}
/* Filled green curves on the archive can't be stroke-drawn — pre-hide via
   visibility so JS reveals them with a fade/scale animation. */
.archive-project .green-curve-svg {
  visibility: hidden;
}
/* Generic staggered reveal targets — JS (animateSlideInUp) sets autoAlpha
   on init and tweens them in on scroll. The opacity:0 here just prevents
   the brief flash between page paint and the script's gsap.set(). Use
   opacity instead of visibility so screen readers still see the content
   before the trigger fires. */
.slide-in-up-first,
.slide-in-up-second,
.slide-in-up-third,
.slide-in-up-fourth {
  opacity: 0;
}
.hero-h1-line {
  display: block;
}
.hero-h1-line-2 {
  padding-left: clamp(80px, calc(60px + 3vw), 120px);
}
.hero-title-ampersand {
  position: absolute;
  left: clamp(-20px, calc(100vw * 0.08), 40px);
  /* Anchored from bottom — bumping the whole clamp up by 10px lifts
     the ampersand 10px higher across all viewport sizes. */
  bottom: clamp(-70px, calc(-20px - 0.6vw), 30px);
  width: clamp(80px, calc(60px + 3vw), 120px);
  height: auto;
  pointer-events: none;
}
.hero-desc {
  max-width: 560px;
  margin-top: clamp(8px, 1.5vw, 24px);
  font-size: var(--h4);
  font-weight: 300;
  letter-spacing: 0;
  color: var(--color-muted);
  line-height: 1.55;
}
.cta-row {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  flex-wrap: wrap;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 18px 40px;
  border-radius: 999px;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
/* Hand-drawn underline — revealed left-to-right via clip-path on hover */
.btn-primary .btn-underline,
.btn-secondary .btn-underline {
  position: absolute;
  bottom: 16px;
  left: 10%;
  width: 80%;
  height: 6px;
  overflow: visible;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-primary:hover .btn-underline,
.btn-secondary:hover .btn-underline {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.btn-primary {
  background: var(--color-1);
  color: var(--color-4);
}
.btn-secondary {
  background: var(--color-6);
  color: var(--color-1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-end;
  padding-top: 12px;
  width: 200px;
  position: relative;
  z-index: 2;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.stat-num {
  font-size: var(--h2);
  font-weight: 500;
  line-height: 1;
  color: var(--color-1);
}
.stat-num-sm { font-size: var(--h2); }
.stat-lbl {
  font-size: var(--h4);
  font-weight: 300;
  letter-spacing: 0;
  color: var(--color-muted);
}

.hero-scribble {
  position: absolute;
  width: 380px;
  height: 240px;
  right: 20%;
  bottom: 20%;
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

/* ---------------- SERVICES ---------------- */
.services {
  background: transparent;
  padding: 10rem 0 0;
  position: relative;
  overflow: hidden;
}
.services .container { position: relative; z-index: 1; }
.section-heading { display: flex; flex-direction: column; gap: 6px; margin-bottom: 80px; }
.section-eyebrow {
  font-size: var(--h2);
  color: var(--color-1);
  font-weight: 300;
  line-height: 1.5;
}
.section-title {
  font-size: var(--h2);
  font-weight: 500;
  color: var(--color-1);
}
/* References title wraps in a 320px column. The global trim-end's auto
   top edge clips caron/acute accents on the first line in that wrapping
   case (services/about don't hit this because their titles fit on one
   line or break manually with <br>). Override only here. */
.references-head .section-title {
  text-box: none;
  text-box-trim: none;
  line-height: 1.15;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1fr;
  gap: 0;
}
.service-col { padding: 0 32px; display: flex; flex-direction: column; gap: 3rem; }
.service-col:first-child { padding-left: 0; }
.service-col:last-child { padding-right: 0; }
.service-divider { background: var(--color-1); width: 1px; height: 130px; align-self: center; }

.service-title {
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
}
.service-list { display: flex; flex-direction: column; gap: 1rem; }
.service-list li {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-1);
  position: relative;
  padding-bottom: 14px;
}
.service-list li::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 12px;
  background-image: url('/assets/orange-long-underline.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

/* Column heading + list-item links to the related sluzba page. They
   inherit colour and font from the parent so the homepage styling
   stays untouched; the hover state just nudges opacity to signal
   interactivity without competing with the orange underline below
   each list item. */
.service-col-link,
.service-list-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.service-col-link:hover,
.service-list-link:hover { opacity: 0.65; }

/* ---------------- CLIENTS ---------------- */
.clients {
  background: transparent;
  padding: 20rem 0 0;
}

/* Infinite horizontal marquee — fades at both edges, pauses on hover. */
.clients-marquee {
  overflow: clip;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.clients-marquee:hover .clients-marquee-track { animation-play-state: paused; }

.clients-marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  inline-size: fit-content;
  will-change: transform;
}
.clients-marquee-track .client-logo {
  height: 80px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  flex-shrink: 0;
  filter: saturate(0);
  opacity: 0.6;
  transition: filter .3s ease, opacity .3s ease;
}
.clients-marquee-track .client-logo.is-light {
  /* Light/white logos inverted so they're visible on the cream background. */
  filter: saturate(0) invert(1);
}
.clients-marquee-track .client-logo:hover {
  filter: none;
  opacity: 1;
}
.clients-marquee-track .marquee-dot {
  width: 8px;
  height: 8px;
  background: var(--color-1);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .clients-marquee-track { animation: none !important; }
}
.client {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-1);
}
.client-prografik {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
}
.client-amunex {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
}
.client-square {
  width: 32px; height: 32px;
  background: var(--color-1);
  border-radius: 4px;
}
.client-circle {
  width: 28px; height: 28px;
  background: var(--color-1);
  border-radius: 50%;
  position: relative;
}
.client-circle::after {
  content: '';
  position: absolute;
  inset: 30%;
  background: var(--color-4);
  border-radius: 50%;
}
.client-spiral { font-size: 2.8rem; line-height: 1; }
.client-donut-text { font-size: 1.5rem; font-weight: 500; line-height: 1; }
.client-donut-text small { font-size: 0.9rem; font-weight: 500; }
.client-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-1);
}

/* ---------------- ABOUT ---------------- */
.about {
  background: transparent;
  padding: 0;
  position: relative;
  overflow: hidden;
}
/* Section spacing lives on the container so absolute decorations
   (e.g. .green-curve-svg-onas) can sit in that empty band above the heading */
.about > .container { padding-top: 20rem; }
.about-sketch {
  position: absolute;
  width: 280px; height: 220px;
  top: 30px; left: 130px;
  pointer-events: none;
  z-index: 0;
}
.about .container { position: relative; z-index: 1; }
.green-curve-svg-onas {
  position: absolute;
  top: 150px;
  left: 180px;
  width: 233px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.about-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Grid areas: eyebrow sits alone in row 1 (left column),
     title and text share row 2 — title left, text right. The text
     column therefore begins at the title's vertical position rather
     than the eyebrow's, so the description is flush with "NETVORÍME…". */
  grid-template-areas:
    "eyebrow ."
    "title   text";
  column-gap: 80px;
  row-gap: 6px;
  padding-top: 80px;
}
.about-eyebrow { grid-area: eyebrow; }
.about-title   { grid-area: title; }
.about-text    { grid-area: text; display: flex; flex-direction: column; gap: 20px; }
.about-text p {
  font-size: var(--text-body);
  color: var(--color-1);
  line-height: 1.6;
}

.founders {
  display: flex;
  justify-content: center;
  gap: 120px;
  padding: 60px 0 40px;
}
.founder { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.founder-avatar {
  display: none;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D8D2BF, #B8AE8E);
  margin-bottom: 8px;
}
.founder-name {
  font-size: var(--h3);
  font-weight: 500;
}
.founder-role {
  font-size: var(--h4);
  font-weight: 300;
  color: var(--color-muted);
}

/* ---------------- PORTFOLIO CARDS STACK ---------------- */
.portfolio {
  background: transparent;
  padding: 20rem 0 0;
}
.portfolio-heading { text-align: center; margin-bottom: 60px; }
.portfolio-cta {
  display: flex;
  justify-content: center;
  /* Scale with viewport height: enough to feel like a beat after the
     last sticky card on big monitors (10rem ≈ original spec) without
     stranding the button on shorter laptop viewports where 10rem felt
     like "the button is far away". */
  margin-top: clamp(3rem, 7vh, 10rem);
}

/* Stack of edge-to-edge cards.
   Each .portfolio-item is `position: sticky` so cards pile on top of each
   other at the same offset. JS sets per-card z-index and runs the GSAP
   "recede" animation on the previous card when the next one slides in. */
.cards-stack {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* JS injects this wrapper around each card. The wrap is sticky and defines
   the scroll range during which its card stays pinned. Wraps run in flex
   column with their own (JS-set) heights. */
.portfolio-sticky-wrap {
  position: sticky;
  /* Staggered top so multiple wraps stay visible at once. Each subsequent
     wrap sits a bit lower than the previous, allowing the cards beneath
     to peek out as the new card stacks on top. */
  top: calc(2.5vh + (var(--i, 0) * 30px));
  width: 100%;
  max-width: 100%;
}

.portfolio-item {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 95vh;
  height: 95svh;
  background: var(--color-4);
  border-radius: 50px;
  box-shadow: 0 8px 60px rgba(0,0,0,0.12);
  will-change: transform;
  transform-origin: center center;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Inner padding centres a 1300px content area within the full-bleed card */
  padding: 10rem max(50px, calc((100% - 1300px) / 2)) 0 max(50px, calc((100% - 1300px) / 2));
}

/* Subtle texture overlay (matches the body background pattern at low opacity) */
.portfolio-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/pozadie.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
  border-radius: 50px;
}
.portfolio-item > * { position: relative; z-index: 1; }

/* Decorative scribbles — two per card. One sits below the text column
   (text side), one above the image column (image side). Even cards have
   orange below text + green above image; odd cards (.is-reversed) flip both
   the colour pairing and the horizontal side. */
.portfolio-item .portfolio-scribble {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: 220px;
  height: auto;
}
/* Text side — bottom corner, on the same horizontal side as the text column */
.portfolio-item .portfolio-scribble-text { bottom: 120px; }
.portfolio-item:not(.is-reversed) .portfolio-scribble-text { left: 120px; }
.portfolio-item.is-reversed          .portfolio-scribble-text { right: 120px; }
/* Image side — top corner, on the same horizontal side as the image column */
.portfolio-item .portfolio-scribble-image { top: 120px; }
.portfolio-item:not(.is-reversed) .portfolio-scribble-image { right: 120px; }
.portfolio-item.is-reversed          .portfolio-scribble-image { left: 120px; }

.portfolio-item-inner {
  width: 100%;
  height: 100%;
  display: grid;
  /* Text 40% / Image 60% by default; reversed swaps the column ratio. */
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 4rem;
}
.portfolio-item.is-reversed .portfolio-item-inner {
  grid-template-columns: 1.5fr 1fr;
}
/* Reversed: image left, text right (with right-aligned content). */
.portfolio-item.is-reversed .portfolio-item-text  { order: 2; align-items: flex-end; text-align: right; }
.portfolio-item.is-reversed .portfolio-item-image { order: 1; }

.portfolio-item-text {
  display: flex;
  flex-direction: column;
  align-self: start;             /* text anchored to top of card content area */
  min-width: 0;
}
.portfolio-item-title {
  font-size: var(--h3);
  font-weight: 300;
  color: var(--color-1);
  padding-bottom: 3rem;
  margin: 0;
  text-transform: uppercase;
}
.portfolio-item-content {
  font-size: var(--h2-sec);
  font-weight: 500;
  color: var(--color-1);
  line-height: 1.2;
  text-transform: uppercase;
}
.portfolio-item-content p { margin: 0; }
.portfolio-item-desc {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--h4);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-1);
  line-height: 1.55;
  margin-top: 1.5rem;
  max-width: 540px;
}
.portfolio-item-btn {
  align-self: flex-start;
  margin-top: 9rem;
}
.portfolio-item.is-reversed .portfolio-item-btn {
  align-self: flex-end;
}

.portfolio-item-image {
  /* Image cell — fills its grid row; image sits at the bottom and never
     overflows the card boundary. */
  align-self: stretch;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.portfolio-item-image img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  background: transparent;
}

/* By default show the desktop image; mobile variant is hidden until breakpoint.
   Selector specificity must beat `.portfolio-item-image img { display: block }`. */
.portfolio-item-image img.portfolio-img-mobile { display: none; }

/* Make sure heading group also covers the new portfolio classes */
.portfolio-item-title,
.portfolio-item-content {
  font-family: 'HeadingGrotesk', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-box: trim-end alphabetic;
  text-box-trim: trim-end;
  text-box-edge: auto alphabetic;
}


/* ---------------- REFERENCES ---------------- */
.references {
  background: transparent;
  padding: 20rem 0 0;
}
.references-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
}
.references-head { display: flex; flex-direction: column; gap: 6px; }
.references-content { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
/* Two testimonial sliders are rendered server-side (desktop chunk-by-2, mobile flat).
   Visibility flips at the 1100px breakpoint. */
.references-content--mobile { display: none; }
/* Desktop pair page: lay the two testimonials side by side */
.testimonials-page--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
/* Slider — transform-driven track for buttery animation.
   JS controls autoplay, dot clicks, and pointer swipe. */
.testimonials-slider {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
}
.testimonials-track {
  display: flex;
  width: 100%;
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.testimonials-track.is-dragging {
  transition: none;
  cursor: grabbing;
}
.testimonials-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}
/* Allow shrinking so long words wrap inside the page width */
.testimonials-page > .testimonial { min-width: 0; }
.testimonial-q, .testimonial-d { overflow-wrap: anywhere; }

.dot {
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-5);
  transition: background .2s ease, transform .2s ease;
}
.dot:hover { transform: scale(1.15); }
.dot-active { background: var(--color-2); }
.testimonial { display: flex; flex-direction: column; gap: 18px; }
.testimonial-q {
  font-size: var(--h3);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-1);
  text-transform: uppercase;
}
.testimonial-q::before { content: '\201C'; }
.testimonial-q::after  { content: '\201D'; }
.testimonial-d {
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.55;
  color: var(--color-1);
}
.testimonial-divider { width: 100%; height: 18px; }
.testimonial-name {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-1);
}
.testimonial-role {
  font-family: 'BodyFont', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-muted);
  /* Pull tight against the name (overrides .testimonial gap of 18px) */
  margin-top: calc(4px - 18px);
}
.pagination { display: flex; gap: 10px; justify-content: flex-end; padding-top: 24px; }

/* ---------------- FOOTER ---------------- */
.footer {
  background: transparent;
  position: relative;
  min-height: 50rem;
  padding: 20rem 0 2rem;
  overflow: hidden;
  /* Footer-grid centred vertically, footer-bottom stuck to the bottom. */
  display: grid;
  grid-template-rows: 1fr auto;
  background-image: url('/assets/Prografik-logo-footer-scaled.webp');
  background-repeat: no-repeat;
  background-position: center center;
  /* Always show the whole logo — scale down if the footer is short. */
  background-size: contain;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  /* Sit lower in the footer so the watermark's "TVORBA WEB STRÁNOK & GRAFICKÝ
     DIZAJN" decorative text shows above the content. */
  align-self: end;
  margin-bottom: 0;
}
.footer-col-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
/* Match the section eyebrow / title pair used in Services, About, etc. */
.footer-hmm {
  font-size: var(--h2);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-1);
}
.footer-bigq {
  font-size: var(--h2);
  font-weight: 500;
  color: var(--color-1);
  margin-bottom: 32px;
}
.footer-btn {
  align-self: flex-start;
}

.footer-col-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.footer-socials {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
}
.footer-socials a {
  display: inline-flex;
  transition: transform .2s ease, opacity .2s ease;
}
.footer-socials a:hover { transform: translateY(-2px); opacity: .85; }
.footer-socials img {
  width: 67px;
  height: 67px;
  display: block;
}

.footer-nav {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* CMS render_menu() wraps items in <ul class="nav-menu">. Promote that
   ul to be the actual flex strip so the footer keeps its horizontal
   layout (same approach as .nav .nav-menu in the header). */
.footer-nav .nav-menu {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav .nav-menu-item { list-style: none; }
.footer-nav a {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-1);
  position: relative;
  display: inline-block;
  transition: opacity .2s;
}

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 80px;
}
.footer-copy {
  font-size: var(--text-body);
  color: var(--color-1);
}
.footer-privacy {
  font-size: var(--text-body);
  color: var(--color-1);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer-privacy:hover { opacity: .65; }

/* ---------------- RESPONSIVE ---------------- */
/* ---------------- MOBILE NAV TOGGLE ---------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 101;
}
.nav-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--color-1);
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------------- ARCHIVE — PROJEKT ----------------
   Single-column flat list of every published project. Header mirrors the
   homepage hero (title left, description right, orange scribble bridging
   the two). Each row alternates: image left / text right on even rows,
   image right / text left on odd rows. */
.archive-hero { position: relative; overflow-x: clip; overflow-y: visible; }
.archive-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 80px;
  padding-top: 140px;
  padding-bottom: 8rem;
  align-items: end;
  z-index: 1;
}
/* Same scale + position language as the homepage hero circle: hovers above
   the heading row, sitting between the title (left) and copy (right). */
.archive-hero-circle {
  position: absolute;
  top: -110px;
  left: 31%;
  width: 298px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.archive-hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.archive-hero-title {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-1);
  text-box: trim-end alphabetic;
  text-box-trim: trim-end;
  text-box-edge: auto alphabetic;
}
.archive-hero-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  /* Bottom-aligned with the heading column (align-items: end on the grid)
     pulls the copy down so the last line sits flush with the last line of
     the h1, matching the mockup. */
}
.archive-hero-right p {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  letter-spacing: -0.03em;
  color: var(--color-1);
  line-height: 1.5;
  margin: 0;
}
.archive-hero-lead { font-weight: 300; color: var(--color-muted); }
.archive-hero-bold { font-weight: 500; }

.archive-projects {
  padding: 6rem 0 12rem;
}
.archive-projects > .container {
  display: flex;
  flex-direction: column;
  gap: 14rem;
}
.archive-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 6rem;
  align-items: center;
}
/* Reversed rows: text left, image right */
.archive-project.is-reversed { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.archive-project.is-reversed .archive-project-image { order: 2; }
.archive-project.is-reversed .archive-project-text  { order: 1; }

.archive-project-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.archive-project-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

.archive-project-text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
}
.archive-project-eyebrow {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--color-1);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.archive-project-heading {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h2-sec);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--color-1);
  text-transform: uppercase;
  text-box: trim-end alphabetic;
  text-box-trim: trim-end;
  text-box-edge: auto alphabetic;
}
.archive-project-desc {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
  max-width: 520px;
}

/* "Zobraziť stránku" — minimal text link with a hand-drawn underline
   (underline-button-secondary.svg, injected by JS) that's hidden by
   default and revealed on hover, mirroring the menu-link pattern.
   Anchored to the start of the row regardless of layout direction. */
.archive-project-link {
  position: relative;
  align-self: flex-start;
  margin-top: 1.4rem;
  display: inline-block;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  font-weight: 300;
  color: var(--color-1);
  letter-spacing: 0;
}
/* No is-reversed override — link always sits on the left of the row. */
.archive-project-link-label {
  position: relative;
  display: inline-block;
}
.archive-project-link .btn-underline {
  position: absolute;
  left: 0;
  /* Tighter offset — sits just below the text, matching menu-link feel. */
  bottom: -2px;
  width: 100%;
  height: 6px;
  pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.archive-project-link:hover .btn-underline {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Decorative scribble — sits in the empty corner above the image column.
   Variant widths chosen so each scribble's natural mass feels balanced
   against the image: orange circle is squarish, green-1 is the wider
   "big" squiggle, green-2 is the smaller mirrored squiggle. */
.archive-scribble {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: auto;
  opacity: 0.85;
}
.archive-scribble--orange  { width: 240px; }
.archive-scribble--green-1 { width: 300px; }
.archive-scribble--green-2 { width: 240px; }
.archive-scribble--service-green-circle { width: 280px; }
.archive-scribble--service-orange-curve { width: 240px; }

/* Z-index hierarchy inside content rows: scribbles render BEHIND text and
   image. The scribble is absolutely positioned, so we just promote text
   and image into their own stacking context above it. */
.archive-project { isolation: isolate; }
.archive-scribble { z-index: 0; }
.archive-project-text,
.archive-project-image {
  position: relative;
  z-index: 1;
}
.archive-project:not(.is-reversed) .archive-scribble { right: -40px; top: -60px; }
.archive-project.is-reversed       .archive-scribble { left:  -40px; top: -60px; }

/* Service-section green-circle override — comes AFTER the corner rules
   above so equal-specificity (0,3,0) source order picks this one. */
.archive-project.is-reversed .archive-scribble--service-green-circle,
.archive-project:not(.is-reversed) .archive-scribble--service-green-circle {
  left: 30%;
  right: auto;
}

@media (max-width: 1100px) {
  .container { padding: 0 2rem; }

  /* HEADER */
  .header-inner { padding: 18px 0; }
  .logo { padding-left: 2rem; }
  .nav-toggle { display: flex; }
  body.nav-open { overflow: hidden; }
  /* Logo + toggle stay rendered above the menu panel */
  .logo,
  .nav-toggle {
    position: relative;
    z-index: 10;
  }

  /* Mobile menu panel — slides down from the top with a white background
     overlaid by the same pozadie.webp pattern as the body.
     Logo and X stay visible above it. */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: #FFFFFF;
    padding: 130px 2rem 50px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    transform: translateY(-100%);
    /* Expo-out easing — approximates the Lenis smooth-scroll feel */
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
  }
  .nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/pozadie.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }
  .nav > * {
    position: relative;
    z-index: 1;
  }
  /* Stack the menu items vertically when nav opens as the mobile drawer.
     The desktop default is row (horizontal in the header strip). */
  .nav .nav-menu {
    flex-direction: column;
    gap: 24px;
  }
  .nav a { font-size: 1.8rem; }
  body.nav-open .nav {
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Dark backdrop on the page area below the open menu */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 60;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.nav-open::after {
    opacity: 1;
    pointer-events: auto;
  }

  /* HERO */
  .hero-green-line { display: none; }
  /* Orange circle bleeds off the top-left corner, sitting behind the logo */
  .hero-orange-circle {
    top: -180px;
    left: -20px;
    width: 250px;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 10rem;
    padding: 30px 0 0;
    min-height: auto;
  }
  .hero-left {
    align-items: stretch;
    gap: 16px;
    max-width: 100%;
  }
  .eyebrow {
    align-self: center;
    font-size: var(--h3);
  }
  .hero-h1 {
    text-align: left;
    width: fit-content;
    margin: 0 auto;
  }
  .hero-h1-line { display: block; }
  /* Ampersand sits before line 2's text. em-based so it scales with
     the H1 font-size. */
  .hero-h1-line-2 { padding-left: 1.55em; }
  .hero-title-ampersand {
    position: absolute;
    left: 0;
    bottom: -0.15em;
    top: auto;
    right: auto;
    width: 1.5em;
    height: auto;
  }
  .hero-desc {
    text-align: center;
    margin-top: 4px;
    max-width: 100%;
  }
  .cta-row {
    justify-content: center;
    width: 100%;
    padding-top: 4px;
  }

  .hero-stats {
    /* 2×2 grid, narrower than full-width — feels more centered on the page */
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4rem;
    column-gap: 0;
    width: 80%;
    margin: 0 auto;
    padding-top: 0;
    align-items: start;
  }
  .stat {
    width: auto;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .stat-lbl { text-align: center; }

  /* SERVICES */
  .services { padding: 10rem 0 0; }
  .section-heading { margin-bottom: 5rem; gap: 2px; }

  .services-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .service-divider { display: none; }
  .service-col {
    padding: 16px 12px;
    gap: 12px;
    position: relative;
  }
  .service-col:nth-child(1),
  .service-col:nth-child(5) { padding-left: 0; }
  .service-col:nth-child(3),
  .service-col:nth-child(7) { padding-right: 0; }
  /* Vertical centre divider — shorter than full grid height; pseudo on
     col 1 covers the lower part of row 1, pseudo on col 5 covers the upper
     part of row 2, together forming one centred line that doesn't reach
     the top of the grid or the bottom. */
  .service-col:nth-child(1)::before,
  .service-col:nth-child(5)::before {
    content: '';
    position: absolute;
    right: 0;
    width: 1px;
    background: var(--color-1);
  }
  .service-col:nth-child(1)::before { top: 20%; bottom: 0; }
  .service-col:nth-child(5)::before { top: 0; bottom: 20%; }
  /* Short horizontal divider between row 1 and row 2 — meets at the centre */
  .service-col:nth-child(1)::after,
  .service-col:nth-child(3)::after {
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 50%;
    background: var(--color-1);
  }
  .service-col:nth-child(1)::after { right: 0; }
  .service-col:nth-child(3)::after { left: 0; }
  .service-list { gap: 6px; }
  /* Shrink li to its text width so the underline sits under the text only,
     not stretched across the whole column. Tiny right padding adds the
     hand-drawn overhang past the last letter. */
  .service-list li {
    align-self: flex-start;
    width: fit-content;
    padding-right: 0.6em;
    padding-bottom: 8px;
  }
  .service-list li::after { height: 8px; width: 100%; }

  /* Section eyebrows (SLUŽBY, O NÁS, PORTFÓLIO, REFERENCIE, HMMM…) at h3 */
  .section-eyebrow,
  .footer-hmm { font-size: var(--h3); }

  /* CLIENTS */
  .clients { padding: 10rem 0 0; }
  .clients-marquee-track { gap: 24px; }

  /* ABOUT */
  .about { padding: 0; }
  .about > .container { padding-top: 10rem; }
  /* About — green curve bleeds off the left edge above the eyebrow */
  .green-curve-svg-onas {
    top: 0;
    left: -50px;
    width: 270px;
  }
  .about-top {
    grid-template-columns: 1fr;
    /* Mobile: stack everything in one column — eyebrow → title → text. */
    grid-template-areas:
      "eyebrow"
      "title"
      "text";
    column-gap: 0;
    row-gap: 5rem;
    padding-top: 0;
  }
  .about-text { padding-top: 0; gap: 12px; }
  .founders {
    gap: 32px;
    padding: 40px 0 0;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .founder { align-items: center; gap: 4px; text-align: center; }

  /* PORTFOLIO — keeps desktop sticky-stack behaviour, adjusts sizing */
  .portfolio { padding: 10rem 0 0; }
  .portfolio-heading { margin-bottom: 5rem; }
  .portfolio-item {
    /* Less top padding so the image cell gets more height */
    padding: 30px 20px 16px 20px;
    border-radius: 24px;
    box-shadow: 0 4px 40px rgba(0,0,0,0.08);
  }
  .portfolio-item::before { border-radius: 24px; }
  /* On mobile only the text-side scribble is shown (alternates orange/green
     per card). Hide the image-side one and place the visible one in the
     empty area below the text + button, horizontally centred in the card.
     `bottom` is a percentage of card height (cards are 95vh) so the
     scribble sits inside the visible viewport even when the next sticky
     card starts to cover the bottom of the current one.
     Both selectors are duplicated to match the desktop rules' specificity
     so left/right values are correctly overridden. */
  .portfolio-item .portfolio-scribble-image { display: none; }
  .portfolio-item:not(.is-reversed) .portfolio-scribble-text,
  .portfolio-item.is-reversed       .portfolio-scribble-text {
    top: auto;
    bottom: 18%;
    left: 10%;
    right: auto;
    transform: none;
    width: 200px;
  }
  /* Single-column inner: image then text+button, both anchored to the top
     of the card (empty space falls through to the bottom). */
  .portfolio-item-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    /* Gap scales with viewport height (≈ card height) */
    gap: 5vh;
    gap: 5svh;
    align-content: start;
  }
  /* Remove the 3rem padding-bottom inherited from desktop */
  .portfolio-item-title { padding-bottom: 0; }
  .portfolio-item.is-reversed .portfolio-item-inner {
    grid-template-columns: 1fr;
  }
  /* Always: image first, text second — regardless of `is-reversed` */
  .portfolio-item-image { order: 1; }
  .portfolio-item-text {
    order: 2;
    align-self: start;
    align-items: flex-start;
    text-align: left;
  }
  .portfolio-item.is-reversed .portfolio-item-text {
    order: 2;
    align-items: flex-start;
    text-align: left;
  }
  .portfolio-item.is-reversed .portfolio-item-image { order: 1; }
  .portfolio-item-desc { display: none; }
  .portfolio-item-btn {
    align-self: flex-start;
    margin-top: 14px;
  }
  .portfolio-item.is-reversed .portfolio-item-btn { align-self: flex-start; }
  /* Override desktop's flex container so width/height on the img apply
     predictably as a block-level element. */
  .portfolio-item-image {
    display: block;
    align-self: stretch;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  .portfolio-item-image img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .portfolio-cta { margin-top: 4rem; }

  /* ARCHIVE — single column, image then text per row */
  .archive-hero-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
    padding-top: 80px;
    padding-bottom: 4rem;
  }
  .archive-hero-circle { left: auto; right: -40px; top: -20px; width: 200px; }
  .archive-hero-right { gap: 1.4rem; }
  .archive-hero-right { padding-bottom: 0; }
  .archive-hero-right p { max-width: none; }

  .archive-projects { padding: 4rem 0 8rem; }
  .archive-projects > .container { gap: 8rem; }
  .archive-project,
  .archive-project.is-reversed {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* Always: image first, text second — regardless of is-reversed */
  .archive-project .archive-project-image,
  .archive-project.is-reversed .archive-project-image { order: 1; }
  .archive-project .archive-project-text,
  .archive-project.is-reversed .archive-project-text  { order: 2; }
  .archive-project-link,
  .archive-project.is-reversed .archive-project-link { align-self: flex-start; }
  /* Service green-circle keeps its desktop width (280px) — only the
     archive-page scribbles shrink on this breakpoint. */
  .archive-scribble:not(.archive-scribble--service-green-circle) { width: 140px; }
  .archive-project:not(.is-reversed) .archive-scribble { right: -20px; top: -40px; }
  .archive-project.is-reversed       .archive-scribble { left:  -20px; top: -40px; }

  /* REFERENCES */
  .references { padding: 10rem 0 0; }
  .references-grid { grid-template-columns: 1fr; gap: 5rem; }
  /* Swap which slider is visible: hide desktop pairs, show single-per-slide */
  .references-content--desktop { display: none; }
  .references-content--mobile { display: flex; }
  .testimonial {
    align-items: center;
    text-align: center;
  }
  .pagination { padding-top: 12px; gap: 8px; justify-content: center; }

  /* FOOTER */
  .footer {
    min-height: auto;
    padding: 10rem 0 2rem;
    /* Inherit `background-size: contain` from desktop so the watermark
       is fully visible inside the footer, not cropped. */
  }
  .footer-grid {
    grid-template-columns: 1fr auto;
    gap: 24px;
    padding-top: 0;
    align-self: start;
  }
  .footer-col-left { gap: 4px; }
  .footer-bigq { margin-bottom: 16px; }
  /* Reverse stacking so menu sits above the social icons */
  .footer-col-right {
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 24px;
  }
  .footer-nav,
  .footer-nav .nav-menu {
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
  }
  .footer-socials { justify-content: flex-end; gap: 14px; }
  .footer-bottom {
    padding-top: 32px;
    gap: 8px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ---------------- IMAGE SWAP (mobile only) ----------------
   On true mobile (≤ 720 px) we swap to the dedicated detail image.
   Tablet and desktop keep showing the featured image. */
@media (max-width: 720px) {
  .portfolio-item-image img.portfolio-img-desktop { display: none; }
  .portfolio-item-image img.portfolio-img-mobile { display: block; }
}

/* =============================================================
   SERVICE DETAIL — /sluzba/{slug}
   Layered on top of .archive-hero / .archive-project rules; the
   service template reuses those classes for its content sections
   so we only declare what's genuinely new here.
   ============================================================= */

/* Hero — same structure & spacing as archive hero. Title reuses the
   homepage `.hero-h1` styling (split into two lines around the
   hand-drawn ampersand) and is forced to uppercase so the admin can
   type the title in normal case in the CMS. */
.service-hero-title { text-transform: uppercase; }
.service-hero { position: relative; overflow-x: clip; overflow-y: visible; }
.service-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 80px;
  padding-top: 140px;
  padding-bottom: 8rem;
  /* Top-align so the right-column copy starts at the same line as the
     left-column eyebrow ("WEB DEVELOPMENT") rather than dropping to the
     bottom of the grid row. */
  align-items: start;
  z-index: 1;
}
.service-hero-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.service-hero-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* WYSIWYG hero copy — paragraphs inherit the archive-hero typography.
   <strong> renders as the "bold" weight (500), regular paragraphs the
   muted lead style — matches the archive split-paragraph pattern. */
.service-hero-popis { display: flex; flex-direction: column; gap: 1.6rem; }
.service-hero-popis p {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  letter-spacing: -0.03em;
  color: var(--color-muted);
  line-height: 1.5;
  margin: 0;
  font-weight: 300;
}
.service-hero-popis strong,
.service-hero-popis b {
  font-weight: 500;
  color: var(--color-1);
}

/* Anchor nav — horizontal pill list with a decorative green scribble.
   Top padding is 12rem so the combined gap from the hero copy
   (hero-inner padding-bottom: 8rem + this 12rem = 20rem) matches the
   standard section spacing language used elsewhere on the site. */
.service-anchor-nav {
  position: relative;
  /* Bottom padding (5rem) + .service-sections top padding (10rem) =
     15rem total gap to the first content section, matching the site's
     standard section-rhythm. */
  padding: 12rem 0 5rem;
}
.service-anchor-nav-inner {
  position: relative;
  display: flex;
  align-items: center;
}
.service-anchor-nav .archive-scribble {
  position: absolute;
  right: 8%;
  top: -90px;
  width: 240px;
  pointer-events: none;
  z-index: 0;
}
.service-anchor-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 2rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}
/* Hand-drawn pill outline (nav-pill.svg) is injected as inline SVG by JS.
   Default state: no border at all — the pill is invisible. On hover the
   path stroke-draws around the link via GSAP (mirroring the orange
   circle / hero-ampersand reveal language). The SVG sits absolutely
   behind the text, stretched to the link's full bounding box. */
.service-anchor-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 4rem;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-1);
  text-decoration: none;
}
.anchor-pill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.anchor-pill path {
  stroke: var(--color-1);
}

/* Sections — reuse .archive-project layout, just adjust scroll-anchor
   offset and the text typography to match the service brief. */
.service-sections { padding: 10rem 0 8rem; }
.service-sections > .container {
  display: flex;
  flex-direction: column;
  /* No gap — each .service-section owns its own top/bottom padding so
     the parallax (which now runs on the image wrapper) has buffer
     space on either side of the wrapper inside the article. */
}
/* Override the archive-project grid for service sections: image and
   text live at opposite edges of the container, with all extra space
   distributed between them (space-between). This way the row spans
   the full container width regardless of how short the text is.
   gap: 4rem is the minimum guaranteed breathing room.
   7rem top/bottom padding on each section also doubles as parallax
   buffer for the image wrapper so it can translate ±60px during
   scroll without ever leaving the article's own bounds. */
.service-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  /* 10rem top + 10rem bottom = 20rem gap between adjacent articles. */
  padding: 10rem 0;
  scroll-margin-top: 100px;
}
/* Reversal handled by the existing .archive-project.is-reversed `order`
   rules (image: 2, text: 1) which apply in flex layout too — no
   flex-direction override needed. */
.service-section:first-child { padding-top: 0; }
.service-section:last-child  { padding-bottom: 0; }
.service-section .archive-project-text {
  flex: 0 1 auto;
  max-width: 600px;
  min-width: 0;
}
.service-section-heading {
  text-transform: uppercase;
  font-size: var(--h2);
  font-weight: 500;
  margin-bottom: 0.4rem;
}
.service-section-body {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
  max-width: 520px;
}
.service-section-body p { margin: 0 0 1rem; }
.service-section-body p:last-child { margin-bottom: 0; }
.service-section-body strong { font-weight: 500; color: var(--color-1); }

/* Section images — fixed portrait frame on desktop. Overrides the
   archive-project-image rules (which size the image fluidly to its
   grid column for the projects archive). Parallax runs on the wrapper
   (see initArchiveProjectAnimations), not the inner img, so the img
   itself can stay at simple 100% × 100% with object-fit: cover. */
.service-section .archive-project-image {
  position: relative;
  width: 465px;
  height: 510px;
  flex-shrink: 0;
  border-radius: 50px;
  overflow: hidden;
}
.service-section .archive-project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Poznatky z praxe — 2-col: eyebrow+title left, numbered tips right.
   Decorative green scribble sits in the negative space above the list. */
.service-tips { padding: 6rem 0 10rem; position: relative; }
.service-tips-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6rem;
  /* Vertically center the eyebrow + title block against the longer
     numbered list on the right — the title floats in the middle of
     the row instead of sticking to the top. */
  align-items: center;
}
.service-tips .service-tips-inner > .archive-scribble {
  position: absolute;
  left: 26%;
  top: 15%;
  right: auto;
  bottom: auto;
  width: 280px;
  pointer-events: none;
  z-index: 0;
}
.service-tips-head {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}
.service-tips-title {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-1);
  text-transform: uppercase;
}
.service-tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: relative;
  z-index: 1;
}
.service-tip-title {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
.service-tip-body {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.55;
  margin: 0;
}

/* FAQ — eyebrow + title centered, accordion list below. Custom border /
   chevron assets will be swapped in once supplied; for now the chevron
   is an inline SVG that flips on open. */
.service-faq { padding: 6rem 0 0; position: relative; }
.service-faq-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.service-faq-inner > .archive-scribble {
  position: absolute;
  left: -120px;
  top: -60px;
  width: 240px;
  pointer-events: none;
  z-index: 0;
}
.service-faq-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.service-faq-title {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-1);
  text-transform: uppercase;
  margin: 0;
}
.service-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.service-faq-item {
  background: transparent;
  padding: 0;
}
/* Hand-drawn pill outline — akordeon-line.svg stretches to fill the
   summary row. The pill spans the full width of the FAQ container
   (which already caps at 880px via .service-faq-inner), so the brush
   line aligns with the answer paragraph below. The chevron sits INSIDE
   the pill on the right via absolute positioning, so it doesn't push
   the centered question text off-center. */
.service-faq-q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.8rem 3rem;
  cursor: pointer;
  list-style: none;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  background-image: url('/assets/akordeon-line.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.service-faq-q::-webkit-details-marker { display: none; }
/* Text + chevron sit as flex siblings centered together, so the chevron
   is always immediately next to the question (matching the design)
   regardless of pill width. Pill spans the full container width — same
   as the answer paragraph below — via the flex parent's width:100%. */
.service-faq-q-text { flex: 0 1 auto; }
.service-faq-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 23px;
  height: 18px;
  /* Optical centering — the arrow's mass sits in its lower half (it's
     a roof-shape with the tip up), so flex-baseline-aligning leaves it
     visually low against the cap-line of the question text. Nudging up
     by ~4px aligns the arrow's visual center with the text's x-height. */
  margin-top: -4px;
  transition: transform 0.3s ease;
}
.service-faq-chevron img {
  width: 100%;
  height: 100%;
  display: block;
}
/* Rotation is now driven by GSAP on summary click so it can share the
   easing/timeline with the height tween — no CSS transition or [open]
   selector needed here. */
.service-faq-a {
  padding: 1.2rem 0.4rem 0.4rem;
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.6;
  /* Hidden during height animation so partially-revealed text doesn't
     spill outside the animating box. */
  overflow: hidden;
}
.service-faq-a p { margin: 0 0 1rem; }
.service-faq-a p:last-child { margin-bottom: 0; }

/* Pre-hide animated children of service template so the slide-in-up
   reveal lands the same as on the archive page. */
.service-tip.slide-in-up-third { opacity: 0; }
.service-faq-item.slide-in-up-third { opacity: 0; }

/* ── Service detail responsive ── */
@media (max-width: 960px) {
  .service-hero-inner {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    padding-top: 8rem;
    padding-bottom: 5rem;
  }
  /* Centre everything in the service hero on mobile — eyebrow,
     title, and description all share the column centre line. */
  .service-hero-left {
    text-align: center;
    align-items: center;
  }
  .service-hero-right {
    text-align: center;
  }
  .service-hero-popis p { text-align: center; }
  /* Hero-inner padding-bottom is 5rem on mobile, so 5rem here = 10rem total. */
  .service-anchor-nav { padding: 5rem 0 4rem; }
  .service-anchor-nav .archive-scribble { width: 160px; top: -70px; right: 4%; }
  .service-anchor-list { gap: 0.8rem 1rem; }
  .service-anchor-link { padding: 0.7rem 2.4rem; }
  /* Anchor bottom (4rem) + this top (4rem) = 8rem total gap on mobile. */
  .service-sections { padding: 4rem 0 6rem; }
  /* Mobile stacks the row vertically: image on top, text below.
     5rem top + 5rem bottom = 10rem gap between adjacent sections. */
  .service-section,
  .service-section.is-reversed {
    flex-direction: column;
    align-items: stretch;
    gap: 2.4rem;
    padding: 5rem 0;
  }
  .service-section .archive-project-text {
    max-width: none;
  }
  /* Image becomes a wide landscape band. Aspect ratio 350:230 gives
     230px tall on a 350px-wide phone and scales proportionally on
     wider/narrower devices (no fixed pixel height). */
  .service-section .archive-project-image {
    width: 100%;
    height: auto;
    aspect-ratio: 350 / 230;
  }
  .service-tips-inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .service-tips .service-tips-inner > .archive-scribble { left: auto; right: -20px; top: -40px; width: 160px; }
  .service-faq-inner > .archive-scribble { left: -40px; top: -40px; width: 160px; }
  .service-faq-q { padding: 1.2rem 1.6rem; gap: 0.8rem; }
  .service-faq-a { padding: 1rem 0.4rem 1.2rem; }
}

/* =============================================================
   Contact page — /kontakt
   Reuses .hero / .hero-inner / .hero-orange-circle from the homepage
   so the orange circle sits in the same position. The right column
   here is replaced by the two contact pill buttons (instead of stats).
   ============================================================= */

/* Right-column on contact hero: stack the 2 pill buttons under the
   orange circle's natural footprint. Bottom-aligned so they sit at
   the same baseline as the H1 (mirrors hero-stats vertical rhythm). */
/* Match the homepage/archive hero rhythm: tight 16px gap between
   eyebrow and the H1 (same value as .archive-hero-left). The shared
   .hero-left rule uses 24px which is too loose for the kontakt design. */
.contact-hero .hero-left { gap: 16px; }

.contact-hero-buttons {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.6rem;
  /* Vertically centered with the H1 / left column instead of bottom-aligned.
     `align-self: center` works because the grid row's intrinsic height is
     dominated by the (taller) left column. */
  align-self: center;
  justify-content: flex-end;
  max-width: 100%;
}
/* Buttons are plain .btn.btn-primary — keep the default dark pill +
   cream text + h3 sizing. Only override what's needed for the contact
   layout: prevent the phone number from wrapping. */
.contact-pill-btn {
  white-space: nowrap;
}

/* Form section ───────────────────────────────────────────── */

.contact-form-wrap { padding: 4rem 0 10rem; position: relative; }
.contact-form-inner { position: relative; }
.contact-form {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 80px;
  row-gap: 4rem;
  align-items: start;
}
.contact-form-head { grid-column: 1; }
.contact-form-title { text-transform: uppercase; line-height: 1.1; }
.contact-form-success {
  grid-column: 1;
  padding: 1.6rem 2rem;
  background: rgba(118, 137, 72, 0.12);
  border-radius: 8px;
  color: var(--color-1);
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
}
.contact-form-errors {
  grid-column: 1;
  padding: 1.6rem 2rem;
  background: rgba(255, 166, 48, 0.18);
  border-left: 4px solid var(--color-2);
  border-radius: 8px;
  color: var(--color-1);
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-form-errors p { margin: 0; }

.contact-fields {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.contact-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.contact-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  cursor: text;
}
.contact-field--full { grid-column: 1 / -1; }
/* Kept for the select fields below (which still need a heading label
   above them — selects can't host placeholder text). Same h3 / 500
   stack as input placeholders so the form reads at one rhythm. */
.contact-field-label {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
/* Inputs render their placeholder as the visible "label" — same brand
   look as a heading: dark colour, h3 size, medium weight, uppercase.
   No text-transform on the input itself so when the user types, their
   own casing is preserved. The placeholder text in HTML is already in
   the right uppercase form. */
.contact-field input {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  letter-spacing: -0.02em;
  padding: 0;
  outline: none;
  width: 100%;
}
.contact-field input::placeholder {
  color: var(--color-1);
  opacity: 1;
}
.contact-field-line {
  display: block;
  width: 100%;
  height: 8px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  pointer-events: none;
}
.contact-field-line--short { background-image: url('/assets/contact-line-short.svg'); }
.contact-field-line--long  { background-image: url('/assets/contact-line-long.svg'); }

/* Custom select with hand-drawn border */
.contact-field-row--selects { gap: 4rem 4rem; align-items: start; }
.contact-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.contact-select-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 1.8rem 3rem;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  letter-spacing: -0.02em;
  text-align: left;
  width: 100%;
  min-height: 6rem;
  background-image: url('/assets/contact-select-border.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
/* Placeholder ("Vybrať možnosť...") rendered in the muted gray from
   the brand palette; switches to dark when the user picks an option. */
.contact-select-value { color: var(--color-5); transition: color 0.15s ease; }
.contact-select.is-filled .contact-select-value { color: var(--color-1); }
.contact-select-arrow {
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}
.contact-select.is-open .contact-select-arrow { transform: rotate(180deg); }
.contact-select-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  list-style: none;
  margin: 0;
  padding: 2.4rem 3rem 2.8rem;
  background-image: url('/assets/contact-select-open.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 14rem;
}
/* The native [hidden] attribute defaults to `display: none`, but the rule
   above explicitly sets `display: flex` and wins by specificity, so the
   menu would stay visible. Restore the hide behavior explicitly. */
.contact-select-menu[hidden] { display: none; }
/* Options match the form's heading-style typography so they read as
   confident choices, not muted hints. Same h3 + 500 stack as input
   placeholders. */
.contact-select-menu li {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  letter-spacing: -0.02em;
  padding: 0.2rem 0;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.contact-select-menu li:hover { opacity: 0.65; }

/* Services checklist (right column) */
.contact-services {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-top: 14rem;
  /* Without min-width: 0, grid items default to min-width: auto, which
     means a wide flex child (e.g. the GDPR + submit row) can push the
     column past its allotted track and overflow the container. */
  min-width: 0;
}
.contact-green-curve {
  position: absolute;
  right: 8%;
  top: -2rem;
  width: 240px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.contact-services-title {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.contact-services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 4rem;
  position: relative;
  z-index: 1;
}

.contact-check {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  cursor: pointer;
  user-select: none;
}
.contact-check input { position: absolute; opacity: 0; pointer-events: none; }
/* Default (services): black hand-drawn circle. */
.contact-check-box {
  display: inline-block;
  width: 36px;
  height: 34px;
  flex-shrink: 0;
  background-image: url('/assets/contact-checkbox-black.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
}
/* Service checkmark = orange. The check shape has more visual weight
   at the bottom-right (long up-stroke + bottom point), so a geometric
   centre reads as offset inside the circle. Pull it up + slightly left
   so it sits visually centred. Percentages so the GDPR variant scales
   proportionally on its smaller box. */
.contact-check input:checked + .contact-check-box::after {
  content: '';
  position: absolute;
  inset: -2px -2px -2px -1px;
  background-image: url('/assets/contact-check-orange.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(10%, -22%);
}
/* GDPR variant: gray circle, green checkmark when checked. */
.contact-check-box--gdpr {
  background-image: url('/assets/contact-checkbox.svg');
  width: 28px;
  height: 26px;
}
.contact-gdpr input:checked + .contact-check-box--gdpr::after {
  content: '';
  position: absolute;
  inset: -2px -2px -2px -1px;
  background-image: url('/assets/contact-check-green.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(10%, -22%);
}
.contact-check-label {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  font-weight: 500;
  color: var(--color-1);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Footer of form: GDPR + submit. Sits inside .contact-services so it
   stacks naturally below the services list (independent of the left
   column's height) — 2rem gap to the last service checkbox row. */
.contact-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.contact-form-foot .contact-submit { flex-shrink: 0; }
.contact-gdpr {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: 1.4rem;
  color: var(--color-1);
  font-weight: 300;
  letter-spacing: -0.02em;
  max-width: 26rem;
  line-height: 1.3;
}
.contact-gdpr input { position: absolute; opacity: 0; pointer-events: none; }
.contact-gdpr-text a { color: inherit; text-decoration: underline; }
.contact-gdpr-text a:hover { opacity: 0.7; }
.contact-submit {
  padding: 18px 40px;
  font-size: var(--h3);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Inline validation errors (rendered by JS on submit). */
.contact-field-error,
.contact-gdpr-error {
  display: block;
  margin-top: 0.6rem;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #c0392b;
}
.contact-gdpr-error { flex-basis: 100%; margin-top: 0.4rem; }
.contact-field--error input::placeholder { color: #c0392b; }
.contact-field--error .contact-field-line { filter: hue-rotate(-20deg) saturate(2.5) brightness(0.85); }
.contact-form-foot--error .contact-check-box--gdpr {
  outline: 2px solid #c0392b;
  outline-offset: 2px;
  border-radius: 50%;
}

@media (max-width: 920px) {
  /* On mobile the hero collapses to a single column (homepage rule);
     the contact buttons stack full-width below the H1. */
  .contact-hero .hero-inner { gap: 6rem; }
  .contact-hero-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.4rem;
  }

  .contact-form-wrap { padding: 2rem 0 6rem; }
  .contact-form {
    grid-template-columns: 1fr;
    row-gap: 3rem;
  }
  .contact-form-head,
  .contact-fields,
  .contact-services,
  .contact-form-foot { grid-column: 1; }
  .contact-services { grid-row: auto; padding-top: 4rem; }
  .contact-green-curve { right: -10px; top: -30px; width: 160px; }
  .contact-field-row,
  .contact-field-row--selects { grid-template-columns: 1fr; gap: 3rem; }
  .contact-services-list { grid-template-columns: 1fr; gap: 1.2rem; }
  .contact-form-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
  .contact-submit { width: 100%; }
  .contact-gdpr { max-width: 100%; }
}

/* ─── Blog archive (/blog) ──────────────────────────────────────────────
   Hero reuses .archive-hero from the projekt archive (above). Layout
   override: drop to a single column so the perex sits under the H1
   (homepage rhythm), and let the green-curve scribble sit in the empty
   right side — same SVG and same approximate position as the homepage
   `.hero-green-line`. Category filter tabs reuse the .service-anchor-nav
   markup so the hand-drawn pill hover effect (initAnchorPillDraw in
   script.js) wires up automatically. */

.blog-hero-inner {
  /* Override the two-column .archive-hero-inner grid so eyebrow + h1 +
     perex stack vertically, matching the homepage hero. The right-side
     column collapses to nothing — the green-curve SVG below floats over
     the empty space. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.blog-hero-left {
  max-width: 760px;
  gap: 24px;
}
.blog-hero-title { text-transform: uppercase; }
.blog-hero-perex {
  /* Same typographic rhythm as the homepage `.hero-desc` so the perex
     sits below the H1 with the same width and weight as on /. */
  max-width: 560px;
  margin-top: clamp(8px, 1.5vw, 24px);
  font-size: var(--h4);
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.55;
}
/* Green curve mirrors the homepage `.hero-green-line` position language —
   floats top-right within the hero, drawn by the same stroke-draw hook
   the homepage uses (id="green-hero-svg"). */
.blog-hero-green-line {
  right: 14%;
  bottom: 25%;
}

/* ── Category filter tabs ──
   Markup is `.service-anchor-nav > .service-anchor-list > .service-anchor-link`
   (same as on /sluzba/*) so the JS pill-draw hover (initAnchorPillDraw)
   binds without changes. Override only the active state below: keep the
   pill outline visible permanently to mark the current filter. */
.blog-cats { padding: 6rem 0 2rem; }
/* Inherits `justify-content: center` from .service-anchor-list, so the
   second row of pills (CASE STUDIES on narrower viewports) sits centred
   under the first instead of flushing to the left edge. */
/* Active tab — pill stays drawn statically. JS skips the dashoffset
   init for `.is-active` links (see initAnchorPillDraw), so the path
   renders in its full, undashed form by default. Background tint matches
   the home-services hover language. */
.service-anchor-link.is-active {
  pointer-events: none;
}

/* ── Posts listing ──
   Reuses .archive-project grid (alternating image/text). Image gets
   rounded corners to match the mockup; the text column drops the
   uppercase eyebrow (date+readmore go in a meta row beneath). */
.blog-posts {
  padding: 4rem 0 10rem;
}
.blog-posts > .container {
  display: flex;
  flex-direction: column;
  gap: 10rem;
}
.blog-post.archive-project {
  align-items: center;
}
.blog-post-image {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
}
.blog-post-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.blog-post-image:hover img {
  transform: scale(1.03);
}
.blog-post-title {
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h2);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-1);
  margin: 0;
}
/* Inside blog post rows, let the scribble SVGs render at their natural
   intrinsic size (the markup carries width="…"/height="…" attributes
   that are correct for this layout). The global .archive-scribble--*
   width overrides further up the file are scoped to the projekt and
   service archives — blog rows opt out. */
.blog-post .archive-scribble,
.blog-post .archive-scribble--orange,
.blog-post .archive-scribble--blog-green {
  width: auto;
}
/* Position override: orange circle on non-reversed rows sits closer to
   the centre (right: 30%) instead of hanging off the row's right edge.
   Reversed rows (where the mirrored green curve appears) keep their
   default left-anchored placement from the shared archive-project
   rule above. */
.blog-post.archive-project:not(.is-reversed) .archive-scribble {
  right: 30%;
}
.blog-post-title a {
  color: inherit;
  text-decoration: none;
}
.blog-post-title a:hover {
  text-decoration: none;
}
.blog-post-excerpt {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 540px;
  margin: 0;
}
.blog-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  margin-top: 1.6rem;
}
.blog-post-date {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  color: var(--color-muted);
}
.blog-post-readmore {
  margin-top: 0;
  align-self: auto;
}

/* ── Pagination ──
   Numbered circular markers; the active page is enclosed in a
   hand-drawn circle (same circle SVG used as the focus ring on
   home/menu items). Inactive numbers stay grey. */
.blog-pagination {
  padding: 0 0 8rem;
}
.blog-pagination-inner {
  display: flex;
  justify-content: flex-start;
}
.blog-pagination-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
.blog-pagination-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4em;
  height: 2.4em;
  padding: 0 0.4em;
  border-radius: 999px;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h4);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.blog-pagination-num:hover {
  color: var(--color-1);
}
.blog-pagination-num.is-active {
  color: var(--color-1);
  border-color: var(--color-1);
}

.blog-empty {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  color: var(--color-muted);
  padding: 4rem 0;
}

@media (max-width: 900px) {
  .blog-cats-list { gap: 0.6rem 1.4rem; }
  .blog-cat { padding: 0.7rem 1.4rem; font-size: 1.4rem; }
  .blog-posts > .container { gap: 6rem; }
  .blog-post.archive-project,
  .blog-post.archive-project.is-reversed {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .blog-post.archive-project.is-reversed .blog-post-image,
  .blog-post.archive-project.is-reversed .archive-project-image { order: 1; }
  .blog-post.archive-project.is-reversed .blog-post-text,
  .blog-post.archive-project.is-reversed .archive-project-text  { order: 2; }
  .blog-post-meta { flex-wrap: wrap; }
}

/* ─── Single blog post (/blog/{slug}) ────────────────────────────────
   Two-column layout: article on the left, sticky sidebar on the right.
   Sidebar starts vertically aligned with the BLOG eyebrow and stays
   pinned to the top of the viewport while scrolling. FAQ block below
   the body reuses the full .service-faq markup (akordeon-line.svg pill
   + GSAP height tween + accordeon-arrow chevron) so it renders
   identically to the per-service FAQ. */

.blog-single {
  position: relative;
  padding: 8rem 0 0;
}

.blog-single-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(4rem, 6vw, 8rem);
  /* `align-items: stretch` (the grid default) is required for the
     sticky sidebar to work — it lets the sidebar grid cell stretch to
     the height of the article column, giving `position: sticky` room to
     "scroll" within. With `align-items: start` the cell would shrink to
     content height and the sticky child would have nowhere to stick. */
}

.blog-single-main {
  min-width: 0; /* let content shrink so long words don't overflow */
}

.blog-single-header {
  position: relative;
  margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
  /* Header stays the positioning context for both decorative SVGs.
     No clipping — the orange-circle hangs above and the green-curve
     hangs to the right of the perex. */
}

/* Hero scribbles — same SVGs and same approximate placement language as
   archive-blog.php. Orange circle hovers over the eyebrow/title row;
   green curve floats to the right of the perex. Both behind text. */
.blog-single-circle {
  position: absolute;
  top: -100px;
  /* Sits over the right portion of the header, like the archive hero
     where the circle overlaps the title/copy boundary. */
  right: 8%;
  width: 240px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}
.blog-single-green {
  position: absolute;
  right: 4%;
  bottom: -20px;
  width: 240px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

.blog-single-eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 1.6rem;
  font-size: var(--h2-sec);
  letter-spacing: 0.02em;
}

.blog-single-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: clamp(3.2rem, 1.8rem + 3vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-1);
  text-transform: uppercase;
}

.blog-single-perex {
  position: relative;
  z-index: 1;
  margin: clamp(1.6rem, 2vw, 2.4rem) 0 0;
  max-width: 640px;
  font-family: 'BodyFont', sans-serif;
  font-size: var(--h4);
  font-weight: 300;
  color: var(--color-muted);
  line-height: 1.55;
}

.blog-single-figure {
  margin: 0 0 clamp(3.2rem, 4vw, 5rem);
  border-radius: 50px;
  overflow: hidden;
  background: var(--color-6);
}
.blog-single-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Body content typography ──
   Targets WYSIWYG output: paragraphs, headings, lists, links. */
.blog-single-body {
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  color: var(--color-muted);
  line-height: 1.7;
}
.blog-single-body > * + * { margin-top: 1.4rem; }
.blog-single-body h2 {
  margin: 4rem 0 1.6rem;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h2-sec);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-1);
  scroll-margin-top: 60px; /* anchor offset for in-page TOC links */
}
.blog-single-body h2:first-child { margin-top: 0; }
.blog-single-body h3 {
  margin: 2.8rem 0 1.2rem;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: var(--h3);
  font-weight: 500;
  color: var(--color-1);
}
.blog-single-body p { margin: 0; }
.blog-single-body strong, .blog-single-body b {
  font-weight: 500;
  color: var(--color-1);
}
.blog-single-body ul, .blog-single-body ol {
  margin: 0;
  padding-left: 2rem;
}
.blog-single-body li { margin-bottom: 0.6rem; }
.blog-single-body a {
  color: var(--color-1);
  text-decoration: underline;
  text-decoration-color: var(--color-3);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.blog-single-body a:hover {
  color: var(--color-3);
}

/* ── Tables in WYSIWYG content ──
   The CMS editor outputs plain <table>/<thead>/<tbody>/<tr>/<th>/<td>.
   Wrap visually as a clean card: header row in dark brand colour with
   inverse text, body rows separated by hairline dividers (no zebra
   striping — keeps the table readable when columns contain longer prose
   without feeling busy). Horizontal scroll fallback on narrow viewports
   so wide tables don't break the article column. */
.blog-single-body table {
  width: 100%;
  margin: 2rem 0;
  border-collapse: collapse;
  font-family: 'BodyFont', sans-serif;
  font-size: var(--text-body);
  color: var(--color-muted);
  border: 1px solid var(--color-5);
  /* Smaller radius than the article images (50px) — the table's dark
     header strip plus rectangular inner cell grid look awkward when
     the outer corners curve too aggressively. 24px reads as "card"
     without fighting the table geometry. */
  border-radius: 24px;
  overflow: hidden;
  /* `border-radius` only clips the table itself, not its inner cells —
     pair with `border-collapse: separate; border-spacing: 0;` if you
     ever need rounded inner corners. The current collapse + outer
     border combo gives a clean rectangular look that matches the rest
     of the article cards. */
}
.blog-single-body thead {
  background: var(--color-1);
  color: var(--color-4);
}
.blog-single-body th {
  padding: 1.2rem 1.6rem;
  text-align: left;
  font-family: 'HeadingGrotesk', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--color-4);
  vertical-align: top;
}
.blog-single-body td {
  padding: 1.2rem 1.6rem;
  border-top: 1px solid var(--color-5);
  vertical-align: top;
  line-height: 1.55;
}
.blog-single-body tbody tr:first-child td { border-top: 0; }
.blog-single-body td strong, .blog-single-body td b {
  color: var(--color-1);
}
/* Remove default paragraph margins inside cells — the editor often
   wraps cell text in <p>, which would otherwise add extra padding. */
.blog-single-body td > p,
.blog-single-body th > p { margin: 0; }
.blog-single-body td > p + p,
.blog-single-body th > p + p { margin-top: 0.6rem; }

@media (max-width: 700px) {
  /* Wrap wide tables so they scroll horizontally instead of breaking
     the article column. The body's `display: block` is intentional —
     it lets `overflow-x` work on the table itself without needing a
     wrapping div from the editor. */
  .blog-single-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
  }
  .blog-single-body th,
  .blog-single-body td {
    padding: 0.9rem 1.2rem;
    font-size: 1.4rem;
    white-space: nowrap;
  }
}

/* ── Sidebar (TOC + recommended) ──
   Sidebar renders at the top of the article column (eyebrow's vertical
   position) and stays pinned there as the user scrolls. The small `top`
   offset just keeps a comfortable gap from the viewport edge once the
   auto-hiding site header slides away. */
.blog-single-sidebar {
  position: relative;
}
.blog-single-sidebar-inner {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  /* Cap the sidebar's height so long TOCs scroll inside the sticky box
     instead of getting clipped at the bottom of the viewport. */
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* TOC */
.blog-toc-eyebrow {
  margin: 0 0 1.6rem;
  font-size: var(--h4);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-1);
  /* The shared .eyebrow rule sets a tight line-height that clips the
     descender on Č/CL when the text is sized down here. Unset it so the
     glyph box sizes from the font's natural metrics. */
  line-height: unset;
}
.blog-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.blog-toc-list li {
  position: relative;
  padding-left: 1.4rem;
}
.blog-toc-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-3);
  font-size: 1.6em;
  line-height: 1;
  top: 0.05em;
}
.blog-toc-link {
  font-family: 'BodyFont', sans-serif;
  font-size: 1.5rem;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.45;
  transition: color 0.2s ease;
}
.blog-toc-link:hover {
  color: var(--color-1);
}

/* Recommended cards */
.blog-recommended {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
.blog-rec-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.blog-rec-image-link {
  display: block;
  border-radius: 50px;
  overflow: hidden;
  background: var(--color-6);
  aspect-ratio: 16 / 10;
}
.blog-rec-image-link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.blog-rec-image-link:hover img {
  transform: scale(1.04);
}
.blog-rec-title {
  margin: 0.4rem 0 0;
  font-family: 'HeadingGrotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-1);
}
.blog-rec-title a {
  color: inherit;
  text-decoration: none;
}
.blog-rec-title a:hover {
  color: var(--color-3);
}
.blog-rec-perex {
  margin: 0;
  font-family: 'BodyFont', sans-serif;
  font-size: 1.4rem;
  color: var(--color-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-rec-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 0.4rem;
  font-family: 'BodyFont', sans-serif;
  font-size: 1.3rem;
}
.blog-rec-date { color: var(--color-muted); }
/* Sidebar Čítať viac uses .archive-project-link for the hand-drawn
   underline reveal. Inside the recommended card it sits inline with the
   date, so we drop the inherited top margin and bump the size down to
   fit the smaller card scale. */
.blog-rec-readmore.archive-project-link {
  margin-top: 0;
  font-size: 1.5rem;
  align-self: auto;
}

/* ── FAQ block (reuses .service-faq markup) ──
   .service-faq globally sets max-width: 880px + margin: 0 auto on its
   inner. Inside the article column of the blog grid we want the FAQ to
   span the column instead, so the override below uncaps it. */
.blog-single-faq {
  margin-top: clamp(4rem, 6vw, 7rem);
  padding-top: 0;
  scroll-margin-top: 60px;
}
.blog-single-faq .service-faq-inner {
  max-width: 100%;
  margin: 0;
}
/* The shared service-faq orange-circle position assumes a wider
   horizontal canvas; nudge it back inside the narrower article column
   so it doesn't fall off the viewport on smaller screens. */
.blog-single-faq .service-faq-inner > .archive-scribble {
  left: -60px;
  top: -80px;
  width: 200px;
}

/* ── Newer / Older nav strip ──
   Two `archive-project-link`s left/right — same hand-drawn underline as
   "Čítať viac" on the archive. The disabled stub stays grey + non-
   interactive so the layout doesn't shift on the first/last article. */
.blog-prevnext {
  position: relative;
  margin-top: clamp(4rem, 6vw, 8rem);
  padding: clamp(3rem, 5vw, 6rem) 0;
  border-top: 1px solid var(--color-5);
}
.blog-prevnext-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.blog-prevnext-cell { min-width: 0; }
.blog-prevnext-older { margin-left: auto; }
.blog-prevnext-link.archive-project-link {
  /* Bump font size up — these are the page's primary nav, not a meta-
     row link. Margin-top reset because they aren't following body copy. */
  margin-top: 0;
  font-size: var(--h2);
}
.blog-prevnext-link.is-disabled {
  color: var(--color-5);
  pointer-events: none;
}

/* ── Mobile collapse ── */
@media (max-width: 900px) {
  .blog-single-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .blog-single-sidebar-inner {
    position: static;
    gap: 3rem;
    max-height: none;
    overflow: visible;
  }
  .blog-single-circle { right: -20px; top: -60px; width: 160px; }
  .blog-single-green { right: -20px; bottom: -20px; width: 180px; }
  .blog-single-faq .service-faq-inner > .archive-scribble {
    left: -30px;
    top: -40px;
    width: 140px;
  }
}