/* Animace pro karty ve službách - scope to .card-grid so standalone
   .card elements (summary-card / case-study CTA) remain visible by
   default and are not hidden by animation CSS. JS also scopes to
   .card-grid so both CSS+JS match. */
.card-grid .card {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
.card-grid .card.card-in {
  opacity: 1;
  transform: translateX(0);
}
/* style.css pro Process Consulting */

:root{
  --bg:#0f0f0e;
  --fg:#ffffff;
  --muted:#cfcfcf;
  --accent:#ffffff;
  --header-h:72px;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  /* Use a relative path so this CSS works when the site is served from a subfolder
    (e.g. http://localhost/ProcessC-laravel/public). The CSS file lives in /css/, so
    ../assets points to the public/assets folder. */
  /* Fallback: PNG background for browsers that don't support image-set/WebP */
  background:var(--bg) url('../assets/images/desk.png') center bottom/cover no-repeat;
  /* Prefer WebP where supported — override the background-image on capable browsers
     to reduce decode/paint time. Browsers that don't support image-set will ignore
     this declaration and keep the PNG fallback above. */
  background-image: image-set(url('../assets/images/desk.webp') type('image/webp') 1x, url('../assets/images/desk.png') type('image/png') 1x);
  color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Open Sans',sans-serif;
}
.site-head{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; background:rgba(0,0,0,.72); backdrop-filter:saturate(120%) blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06); z-index:10;
}
.brand{font-weight:700; letter-spacing:.2px}
.nav a{
  color:#fff; text-decoration:none; margin-left:28px; font-weight:600; opacity:.9;
}
.nav a:hover{opacity:1; text-decoration:underline}
.mobile-nav { display: none; }
.burger-menu { display: none; }
.hero{
  min-height:calc(100vh - var(--header-h));
  margin-top:0;
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  padding:calc(48px + var(--header-h)) 6vw 48px 6vw;
  background:transparent;
  position:relative;
}
@media(min-width:900px){
  .hero{grid-template-columns:1.1fr .9fr}
}
@media (max-width: 700px) {
  .hero {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    /* Keep hero-inner within the parent's padding to avoid apparent left offset
       on small screens. */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 2vw !important;
    box-sizing: border-box !important;
  }
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 2vw !important;
    box-sizing: border-box !important;
  }
  .hero-objects {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    min-width: 0 !important;
    min-height: unset !important;
    margin-left: 0 !important;
  }
  .hero-objects-row {
    gap: 12px !important;
    width: 100%;
    justify-content: center !important;
    align-items: flex-end;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-objects .cellphone {
    height: 120px !important;
    width: auto !important;
    margin-right: 0 !important;
  }
  .hero-objects .diary {
    height: 160px !important;
    width: auto !important;
    margin-left: 0 !important;
  }
  .hero-objects .pen {
    height: 32px !important;
    width: auto !important;
    margin-top: 10px !important;
  }
  h1#h1 {
    font-size: 2.1em;
  }
  .burger-menu {
    display: block !important;
  }
  .nav {
    display: none !important;
  }
  .mobile-nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    width: 100vw;
    background: rgba(20,20,20,0.98);
    z-index: 99;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 16px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .mobile-nav.open {
    display: flex;
  }
  .mobile-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    padding: 12px 28px;
    width: 100%;
    font-weight: 600;
    display: block;
  }
}
.hero-objects {
  margin: 0 !important;
}
.hero-inner, .hero-objects, .hero-objects-row {
  margin: 0 !important;
}
.hero-objects {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 400px;
  min-height: 760px;
  z-index: 2;
  margin-left: 48px;
}
.diary-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-objects-row {
  display: flex;
  flex-direction: row;
  gap: 48px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.hero-objects img {
  display: block;
  height: auto;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Intro "placing" animation for hero objects (cellphone, diary, pen).
   On page load JS will add the .objects-in class to .hero-objects to
   trigger a staggered drop/rotate animation that simulates placing the
   items on the desk. We respect user "prefers-reduced-motion".
*/
.hero-objects .cellphone,
.hero-objects .diary,
.hero-objects .pen {
  opacity: 0;
  transform-origin: center center;
  /* prepare for a smooth shadow fade-in */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  transition: filter 420ms cubic-bezier(.22,.9,.32,1), transform 420ms cubic-bezier(.22,.9,.32,1);
}

@keyframes place-in-drop {
  0% {
    transform: translateY(-180px) rotate(-20deg) scale(0.98);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  70% {
    transform: translateY(10px) rotate(3deg) scale(1.02);
    opacity: 1;
    /* stronger mid-shadow for a heavier feel */
    filter: drop-shadow(0 16px 24px rgba(0,0,0,0.36));
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
    /* final, more pronounced shadow */
    filter: drop-shadow(0 28px 40px rgba(0,0,0,0.52));
  }
}

@keyframes place-in-pen {
  0% {
    transform: translateY(-120px) rotate(30deg) scale(0.9);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  }
  75% {
    transform: translateY(6px) rotate(-6deg) scale(1.02);
    opacity: 1;
    filter: drop-shadow(0 10px 16px rgba(0,0,0,0.36));
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.44));
  }
}

/* Triggered state (JS will add .objects-in to .hero-objects). Staggered
   delays produce the sequential placing effect. */
.hero-objects.objects-in .cellphone {
  /* Even slower placement: longer duration and slightly increased delay
     for a gentle, natural landing. */
  animation: place-in-drop 2000ms cubic-bezier(.22,.9,.32,1) 220ms both;
}
.hero-objects.objects-in .diary {
  animation: place-in-drop 2400ms cubic-bezier(.22,.9,.32,1) 420ms both;
}
.hero-objects.objects-in .pen {
  animation: place-in-pen 1800ms cubic-bezier(.22,.9,.32,1) 620ms both;
}

/* Ensure a stable, pronounced shadow after animation finishes */
.hero-objects.objects-in .cellphone,
.hero-objects.objects-in .diary {
  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.52));
}
.hero-objects.objects-in .pen {
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.44));
}

/* Accessibility: if user prefers reduced motion, disable animations */
@media (prefers-reduced-motion: reduce) {
  .hero-objects .cellphone,
  .hero-objects .diary,
  .hero-objects .pen {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.hero-objects .diary {
  height: 640px;
  width: auto;
  margin-bottom: 0;
  margin-left: 0;
}
.hero-objects .cellphone {
  height: 500px;
  width: auto;
  margin-bottom: 0;
  margin-right: 0;
}
.hero-objects .pen {
  height: 75px;
  width: auto;
  margin-top: 24px;
  filter: none !important;
  align-self:center;
}
h1{
  font-size:clamp(40px,7vw,96px);
  line-height:.95; margin:0 0 16px; font-weight:800; letter-spacing:.3px;
  text-shadow:0 10px 30px rgba(0,0,0,.35);
}
.lead{color:var(--muted); font-size:clamp(16px,2.5vw,20px); margin:0 0 28px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px;
  background:#fff; color:#111; font-weight:700; text-decoration:none; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}

/* Global site-wide parity: unify button appearance and remove underlines
   for button-like links across the whole site and every section. This is
   intentionally broad per your request (one style for all pages/sections). */
.btn, a.btn, button.btn {
  background: #ffffff !important;
  color: #111111 !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  display: inline-block !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.32) !important;
}
.btn * { text-decoration: none !important; }

/* Ensure text-fill (used by some browsers) matches color and is not forced
   to white by other aggressive rules. This fixes invisible/white text inside
   white buttons on WebKit/Blink browsers. */
.btn, a.btn, button.btn {
  -webkit-text-fill-color: #111111 !important;
  -moz-text-fill-color: #111111 !important;
  color: #111111 !important;
}

.btn:focus,.btn:hover{transform:translateY(-1px)}
section{padding:72px 28px}
.container{max-width:var(--maxw); margin:0 auto}
.section-title{font-size:34px; margin:0 0 16px}
.card-grid{display:grid; gap:16px}
@media(min-width:700px){ .card-grid{grid-template-columns:repeat(3,1fr)} }

/* Override/update for service pages: use a flexible row of cards that wraps
   on smaller screens and stacks vertically in narrow viewports. This avoids
   fixed-width cards pushing the hero content and creating an empty stripe. */
.card-grid {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap; /* allow cards to wrap to next line on narrow screens */
  margin-top: 18px;
}
.card-grid .card {
  min-width: 180px; /* desktop minimum */
  flex: 0 1 180px;   /* allow shrinking on small screens */
}

/* Make cards in the main "Nabízíme" section wider rectangles (more
   landscape than portrait). Scope to #sluzby so other card contexts
   (service-page cards, summary-card) are not affected. */
#sluzby .card-grid {
  gap: 20px;
  justify-content: center;
}
#sluzby .card-grid .card {
  flex: 0 1 320px; /* base width */
  min-width: 260px;
  /* increase height slightly to allow up to 3 lines of descriptive text
     while keeping the compact, landscape card shape. On small screens
     we fall back to auto height (see media query below). */
  height: 160px; /* was 140px */
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center content */
  padding: 18px 28px;
  border-radius: 12px;
}
@media (max-width: 700px) {
  /* On small screens let cards stack and be full-width-ish */
  #sluzby .card-grid .card {
    flex: 0 1 auto;
    width: calc(100% - 56px);
    min-width: 0 !important;
    height: auto;
    padding: 14px 18px;
  }
}

/* Service-page specific overrides: make cards fill available width on small screens */
@media (max-width: 700px) {
  .service-page .card-grid {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .service-page .card-grid .card {
    flex: 0 1 auto;
    min-width: 0 !important;
    width: calc(100% - 56px); /* respect the 28px horizontal padding on .hero */
    max-width: 420px;
  }
}
.card{
  background:#141414; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:18px 18px 14px;
}
.card h3{margin:0 0 6px; font-size:20px}
/* Limit supplementary/description text in the "Nabízíme" (#sluzby) cards
   to a maximum of 3 lines with an ellipsis. We use -webkit-line-clamp for
   modern browsers and overflow:hidden as a safe fallback. On small screens
   the cards switch to height:auto so content can wrap naturally. */
#sluzby .card p,
#sluzby .card .muted {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  /* standard (non-prefixed) property for newer browsers that support it */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.muted{color:#bdbdbd}

/* Specific styling for the Laba card so it visually matches the provided
   sample: the card uses a green background (#a7bba2) with the logo centered
   inside. The card keeps the same rounded corners and height as the other
   cards. If the image file is missing the green background will still show. */
#sluzby .card.card--laba {
  padding: 0;
  overflow: hidden;
  background: #a7bba2; /* fallback/bg color to match the sample */
  border-radius: 12px; /* match .card radius */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image: keep entire logo visible and centered. Use contain so the whole
   artwork is shown and the green background remains visible around it. */
#sluzby .card.card--laba .card-image {
  display: block;
  width: auto;         /* let image keep its aspect ratio */
  height: 100%;       /* scale to card height when appropriate */
  max-width: 92%;     /* leave small horizontal padding inside the card */
  max-height: 92%;    /* leave small vertical padding inside the card */
  object-fit: contain; /* preserve whole logo */
  margin: 0 auto;
  background: transparent;
}
.contact{
  display:grid; gap:24px;
  background:linear-gradient(180deg,#111 0%, #0f0f0e 100%);
  border-top:1px solid rgba(255,255,255,.06);
  padding-bottom:100px;
}
.contact a{color:#fff}
.spacer{height:10px}
.unified-gradient-overlay {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100vw;
  height: calc(100vh + 600px);
  background: linear-gradient(90deg, rgba(15,15,14,.75) 0%, rgba(15,15,14,.35) 45%, rgba(15,15,14,0) 100%);
  pointer-events: none;
  /* Put the overlay behind page content so it tints the background but
     does not sit above or desaturate CTAs/text. Negative z-index is fine
     for a fixed decorative layer; header remains above (z-index:10). */
  z-index: -1;
}
#sluzby, .hero, .hero-inner, .hero-objects, .hero-objects-row { position:relative; z-index:1; }
#sluzby .container{ position:relative; z-index:2; }
@media (max-width: 900px) {
  .nav {
    display: none !important;
  }
  .burger-menu {
    display: block !important;
  }
  .mobile-nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    width: 100vw;
    background: rgba(20,20,20,0.98);
    z-index: 99;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 0 16px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  }
  .mobile-nav.open {
    display: flex;
  }
  .mobile-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2em;
    padding: 12px 28px;
    width: 100%;
    font-weight: 600;
    display: block;
  }
  .burger-menu {
    position: absolute;
    right: 28px;
    top: 18px;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 100;
  }
  .burger-menu span,
  .burger-menu span:before,
  .burger-menu span:after {
    display: block;
    position: absolute;
    width: 28px;
    height: 4px;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s;
    left: 50%;
    transform: translateX(-50%);
  }
  .burger-menu span {
    top: 16px;
  }
  .burger-menu span:before {
    content: '';
    top: -10px;
  }
  .burger-menu span:after {
    content: '';
    top: 10px;
  }
  .hero-objects-row {
    gap: 0px !important;
    width: 100%;
    justify-content: flex-start !important;
    align-items: flex-end;
    margin: 0 !important;
    padding: 0 !important;
  }
  .hero-objects {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    /* Mobile: don't force a large min-width/height — let images scale and
       stack naturally. Previously .hero-objects had min-width:400px which
       could create a fixed column and push content left. */
    min-width: 0 !important;
    min-height: auto !important;
    margin-left: 0 !important;
  }
  h1#h1 {
    font-size: 2.1em;
  }
}

/* Service pages (centered, light text, same left→right gray gradient as hero) */
.service-page { color: #fff; }
.service-page .container { text-align: center; margin-left: auto; margin-right: auto; }
.service-page h1, .service-page h2, .service-page h3, .service-page p, .service-page .muted, .service-page li {
  color: #f6f6f6;
}
.service-page .hero { align-items: center; justify-content: center; text-align: center; position: relative; }

  /* Ensure the hero on service pages sits below the fixed header so the
     H1 is never visually covered by the header/menu. We use calc to keep
     a small gap under the header. */
  .service-page .hero {
    padding-top: calc(var(--header-h) + 12px) !important;
  }
  
  /* Keep the hero-inner width controlled by CSS (scoped to service pages)
     so inline styles won't cause unexpected horizontal shifts on small
     viewports. This makes centering predictable. */
  .service-page .hero-inner {
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
.service-page ul { list-style-position: inside; display: inline-block; text-align: left; }
.service-page .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); color: #fff; }
.service-page .card.full { background: rgba(255,255,255,0.03); }
.service-page .btn { margin-top: 18px; }

/* Ensure .btn on service pages keeps the same light button look as on the
   homepage: white background, dark text and the same shadow. The global
   .service-page color rules (used to force body copy white) unintentionally
   made button text white on white, so we restore the intended contrast here. */
.service-page a.btn,
.service-page button.btn {
  background: #fff !important;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  text-decoration: none !important;
}

/* Ensure buttons placed inside cards (summary cards, CTAs) look identical
   to the primary hero button. Some card contexts applied muted/filtered
   styles that made the CTA look grayed out — force parity here. */
.service-page .card a.btn,
.service-page .card button.btn,
.service-page .card .btn {
  background: #fff !important;
  color: #111 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  text-decoration: none !important;
}

/* Ensure copy inside .card is clearly readable (force white) to avoid
   muted/gray inheritance that produced a desaturated look in some cards. */
.service-page .card,
.service-page .card p,
.service-page .card strong,
.service-page .card h3 {
  color: #ffffff !important;
}

/* If a semi-transparent box or overlay sits inside the card it can reduce
   the perceived contrast of the button. Ensure the CTA sits above any
   translucent layers by creating a stacking context on the card and
   raising the button's z-index. */
.service-page .card { position: relative; isolation: isolate; }
.service-page .card .btn { position: relative; z-index: 5; }

/* Remove decorative translucent box for the centered, inline summary card
   that contains the CTA on service pages. This targets cards that are
   direct children of a .container to avoid touching card-grid cards. */
/* Use a dedicated class so we can remove decoration safely without
   affecting the grid cards or other cards site-wide. */
.service-page .summary-card {
  display: inline-block; /* match previous inline style */
  padding: 16px 20px;    /* previously inline, move to CSS for clarity */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  isolation: isolate !important;
}
.service-page .summary-card p { margin: 8px 0 0 0; padding: 12px 0 !important; color: #ffffff !important; }
.service-page .summary-card::before,
.service-page .summary-card::after { display: none !important; }

/* Focused reset for the inline summary card only. Avoid broad "*" rules
  that force color/background on every descendant — that can unintentionally
  override the CTA's colors. Keep the container visually simple and let the
  CTA use an explicit rule below. */
.service-page .summary-card {
  display: inline-block; /* match previous inline style */
  padding: 16px 20px;    /* previously inline, move to CSS for clarity */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  text-align: center !important;
  position: relative !important;
  isolation: isolate !important;
}

/* Keep textual content inside the card white, but do not force color on
  every element (buttons must be able to set their own color). This targets
  only common typographic elements. */
.service-page .summary-card h3,
.service-page .summary-card p,
.service-page .summary-card strong {
  color: #ffffff !important;
}

/* Minimal CTA styling: explicit, high-contrast, but not globally destructive.
  Keep the button readable and above subtle decorative layers via a modest z-index. */
.service-page .summary-card .btn {
  background: #ffffff !important;
  color: #111111 !important;
  padding: 12px 28px !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  position: relative !important;
  z-index: 999 !important;
  text-decoration: none !important;
}

/* Highly-specific override: ensure buttons inside the summary-card render
   exactly like primary CTAs (text visible, dark fill). This beats the
   aggressive `.summary-card *` selectors that previously forced white text. */
.service-page .summary-card a.btn,
.service-page .summary-card button.btn {
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Make the unified overlay sit behind page content (if present) but do not
  remove it here — keep it behind (z-index: 0) so it doesn't mute CTAs. */
.service-page .unified-gradient-overlay { position: fixed; top: var(--header-h); left: 0; width: 100vw; height: calc(100vh + 600px); z-index: -1; pointer-events: none; }

/* Ensure core content sits above the decorative overlay. We apply a small
   stacking boost to the main content wrappers so that neither the overlay
   nor accidental stacking contexts can push copy/buttons underneath. */
#sluzby, .hero, .hero-inner, .service-page, .service-page .container, .card {
  position: relative;
  z-index: 2;
}

@media (max-width: 700px) {
  .service-page .container { padding: 0 18px; }
  .service-page ul { display:block; text-align:left; }
    /* Mobile: align the hero content with the fixed header padding (28px)
       so the heading lines up horizontally with the brand/menu. Move the
       horizontal padding to .hero (the container) and remove extra padding
       from .hero-inner which caused an apparent shift. */
    .service-page .hero {
      padding-left: 28px !important;
      padding-right: 28px !important;
    }
    .service-page .hero-inner {
      /* let the inner fill the available content box and remove extra offsets */
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }
    .service-page h1 { text-align: center !important; padding: 0 !important; }
}

  /* Make service pages match homepage background and typographic scale */
  .service-page {
    background-position: center bottom;
    background-size: cover;
  }
  .service-page .hero { min-height: calc(100vh - var(--header-h)); display:flex; align-items:center; }
  .service-page h1 {
    font-size: clamp(40px,7vw,96px);
    /* increase line-height from the tight default so wrapped lines visually align */
    line-height: 1.02;
    /* ensure multi-line headings are centered and constrained for predictable wrapping */
    text-align: center;
    max-width: 760px;
    margin: 0 auto 16px;
  }

  /* Small-screen tweak: allow the heading to use the available width while
     keeping comfortable horizontal padding so long words don't push the visual
     center. */
  @media (max-width: 520px) {
    .service-page h1 {
      max-width: 100%;
      padding: 0 2vw;
      line-height: 1.06; /* slightly more breathing room for very narrow widths */
    }
  }
  .service-page h2 { font-size: 34px; }
  .service-page h3 { font-size: 20px; }
  .service-page p, .service-page .muted, .service-page li { color: #eaeaea; }

/* Force white/near-white text for service pages to ensure visual parity with homepage
   Use specific element selectors and a mild !important to override inline/legacy rules
   but avoid touching images/backgrounds. Inputs and textarea text are also set to white. */
.service-page,
.service-page h1,
.service-page h2,
.service-page h3,
.service-page h4,
.service-page h5,
.service-page h6,
.service-page p,
.service-page li,
.service-page span,
.service-page a,
.service-page summary,
.service-page details {
  color: #ffffff !important;
}
.service-page .muted {
  color: rgba(255,255,255,0.92) !important;
}
.service-page a { text-decoration: none !important; color: inherit !important; }
.service-page input,
.service-page textarea,
.service-page select {
  color: #ffffff !important;
}

/* Ensure the case-study section text is explicitly white (overrides any
   inherited muted/gray styles). This fixes instances where the text looked
   gray despite the page being a service page. */
#pripadova-studie,
#pripadova-studie p,
#pripadova-studie li,
#pripadova-studie h3,
#pripadova-studie h2 {
  color: #ffffff !important;
}

/* More aggressive contrast/clear rendering for the case-study copy.
   Some browsers or parent layers may apply blend modes, filters or
   background textures that make white text look desaturated. These
   rules force normal blending, remove filters and ensure full opacity
   for the textual content inside the case-study section. We also add
   a subtle text-shadow to improve perceived contrast on textured
   backgrounds (adjust or remove if undesired). */
.service-page #pripadova-studie,
.service-page #pripadova-studie * {
  color: #ffffff !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  -webkit-text-stroke: 0 !important;
}
.service-page #pripadova-studie p,
.service-page #pripadova-studie li,
.service-page #pripadova-studie h2,
.service-page #pripadova-studie h3 {
  text-shadow: 0 1px 0 rgba(0,0,0,0.28);
  font-weight: 400 !important; /* keep normal weight for readability */
}

/* Final aggressive reset for any remaining overlays inside the summary card.
   This targets pseudo-elements and any deeply nested elements that still
   provide background layers. It is intentionally narrow (summary-card only).
   If you later add decorative layers inside this card, adjust selectors. */
.service-page .summary-card,
.service-page .summary-card *,
.service-page .summary-card *::before,
.service-page .summary-card *::after {
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Ensure the CTA is still visually dominant */
.service-page .summary-card .btn {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.65) !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  z-index: 2147483646 !important; /* near-top to beat overlays */
}

/* Ensure the case-study container centers and uses only the CSS width
   (prevent unexpected large left/right margins coming from elsewhere). */
#pripadova-studie {
  max-width: 800px !important;
  margin: 48px auto !important;
  padding: 72px 28px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Utility wrapper to explicitly mark page copy that should follow site typography
   Use on main or a central wrapper (e.g. <main class="site-copy">). This mirrors
   the homepage scale and ensures consistent type rhythm. */
.site-copy {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Open Sans', sans-serif;
  color: var(--fg);
  line-height: 1.5;
}
.site-copy h1, .site-copy h2, .site-copy h3, .site-copy h4 {
  color: inherit;
}
.site-copy p, .site-copy li, .site-copy span {
  color: inherit;
}

  /* Background tuning: avoid upscaling/"zoom" and make service pages match homepage
     - Set a max natural width for the background image (set to the image's pixel width).
     - Use fixed attachment on desktop so longer pages don't force different cover-cropping.
     - Disable fixed attachment on small screens for performance.
     If you know the exact pixel width of assets/images/desk.png, set --bg-max-w to that value (e.g. 1920px).
  */
  :root { --bg-max-w: 1920px; }
  body {
    background-repeat: no-repeat;
    background-position: center bottom;
    /* keep cover by default for consistent fill on normal screens */
    background-size: cover;
  }

  /* On very wide viewports don't upscale beyond the image's natural pixel width */
  @media (min-width: 1920px) {
    body { background-size: var(--bg-max-w) auto; }
  }

  /* Fix the background to viewport on desktop so different page lengths don't change the crop/scale */
  @media (min-width: 900px) {
    body { background-attachment: fixed; }
  }

  /* Mobile: disable fixed background for performance and known issues on mobile browsers */
  @media (max-width: 899px) {
    body { background-attachment: scroll; }
  }

/* Quick parity fix: ensure service pages use the exact same type stack as the
   homepage. This is intentionally specific and non-destructive — it mirrors the
   site's system font stack and uses !important to override any stray inline
   rules that might be causing differences between pages. */
.service-page,
.service-page h1,
.service-page h2,
.service-page h3,
.service-page p,
.service-page li,
.service-page a,
.service-page input,
.service-page textarea {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Open Sans', sans-serif !important;
}

/* debug outlines removed */