/* =========================================================================
   IMPERUS GROUP s. r. o. — Stylesheet
   -------------------------------------------------------------------------
   Structure:
     1. Design tokens (CSS variables)   -> tweak brand colors/spacing here
     2. Reset & base
     3. Layout helpers (container, section, grid)
     4. Typography
     5. Buttons & form elements
     6. Header / navigation
     7. Hero (+ canvas network animation styles)
     8. About
     9. Services
    10. Why us
    11. Clients / testimonials
    12. Contact
    13. Footer
    14. Utilities & animations (reveal-on-scroll)
    15. Responsive breakpoints
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   TODO(brand): This is the single place to fine-tune the gold shade, spacing
   scale and type ramp. Everything in the site reads from these variables.
   ----------------------------------------------------------------------- */
:root {
  /* Brand gold scale — derived from the exact gold in the crest logo (#c9922f) */
  --color-gold-50:  #fbf7f1;
  --color-gold-100: #f5ead6;
  --color-gold-300: #e4c181;
  --color-gold-500: #c9922f;   /* primary brand gold — matches logo */
  --color-gold-600: #a27524;   /* hover / pressed */
  --color-gold-700: #7f5b1b;   /* deep accent */
  --color-gold-900: #3b2b0f;

  --color-primary: var(--color-gold-500);
  --color-primary-hover: var(--color-gold-600);
  --color-primary-deep: var(--color-gold-700);

  /* Neutrals — dark-mode navy/grey scale. Deliberately avoids pure black;
     every tone keeps a visible blue undertone even at its darkest. */
  --color-black: #0a0e1a;
  --color-ink: #080f1e;        /* deepest tone — hero/footer/why-us/page-hero */
  --color-gray-900: #16233f;   /* dark navy-gray fill, e.g. image placeholders */
  --color-gray-700: #4b5568;
  --color-gray-500: #8b93a7;
  --color-gray-300: #2b3852;
  --color-gray-100: #101c30;
  --color-white: #ffffff;

  /* Semantic — three dark surfaces for depth (page < alt < elevated card),
     deepest reserved for hero/footer/why-us via --color-bg-dark */
  --color-bg: #0f1c33;
  --color-bg-alt: #0b1626;
  --color-bg-dark: var(--color-ink);
  --color-surface: #182746;    /* elevated card/chip background */
  --color-text: #eef1f7;
  --color-text-muted: #98a2ba;
  --color-text-on-dark: rgba(255, 255, 255, 0.92);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.66);
  --color-border: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --fs-h1: clamp(2.4rem, 1.7rem + 3vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-tight: 1.12;
  --lh-heading: 1.25;
  --lh-body: 1.65;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --container-width: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.06), 0 1px 1px rgba(17, 17, 20, 0.04);
  --shadow-md: 0 12px 24px -8px rgba(17, 17, 20, 0.16);
  --shadow-lg: 0 24px 48px -12px rgba(17, 17, 20, 0.28);
  --shadow-gold: 0 14px 30px -10px rgba(201, 146, 47, 0.45);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 180ms var(--ease-out);
  --transition-base: 280ms var(--ease-out);

  --header-height: 76px;
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 12px);
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* Focus visibility — accessibility requirement, do not remove */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-2xl);
}
.section--alt { background: var(--color-bg-alt); }
.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}
.section--dark .section-eyebrow { color: var(--color-gold-300); }
.section-head {
  max-width: 700px;
  margin-bottom: var(--space-xl);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}
.section-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}
.section-desc {
  color: var(--color-text-muted);
  font-size: var(--fs-lead);
  margin-top: var(--space-sm);
}
.section--dark .section-desc { color: var(--color-text-on-dark-muted); }

.grid {
  display: grid;
  gap: var(--space-lg);
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY
   ----------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: #fff;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); }
.text-strong { color: var(--color-text); font-weight: 600; }

/* -------------------------------------------------------------------------
   5. BUTTONS & FORM ELEMENTS
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 18px 34px -10px rgba(201, 146, 47, 0.55);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}
.btn-block { width: 100%; }
.btn-sm { padding: 0.65rem 1.25rem; font-size: 0.875rem; }

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-md);
  text-align: left;
}
.field label {
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-text);
}
.field input,
.field textarea {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus,
.field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(201, 146, 47, 0.18);
  outline: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: var(--fs-small); color: var(--color-text-muted); }
.field-required::after {
  content: " *";
  color: var(--color-primary);
}
.form-status {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status.is-success {
  background: rgba(52, 199, 116, 0.14);
  color: #6fdb92;
}
.form-status.is-error {
  background: rgba(201, 146, 47, 0.14);
  color: var(--color-gold-300);
}
.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
/* flex-shrink:0 so the long consent text next to it can't squash the box. */
.checkbox-field input { margin-top: 0.2rem; flex-shrink: 0; }

/* Inline validation states. The form carries novalidate and is validated in
   main.js §6 instead, so these are what the user actually sees — the browser's
   own bubbles are off (they can't be styled or translated). */
.field-error {
  font-size: var(--fs-small);
  font-weight: 600;
  color: #ff9d8a;
  margin-top: var(--space-2xs);
}
.field-error:empty { display: none; }
.field.has-error input,
.field.has-error textarea {
  border-color: #ff9d8a;
}
.field.has-error input:focus,
.field.has-error textarea:focus {
  border-color: #ff9d8a;
  box-shadow: 0 0 0 4px rgba(255, 157, 138, 0.18);
}
/* The checkbox row is a flex label, so its error message has to break onto its
   own line rather than sit inline beside the consent text. */
.checkbox-field.has-error { flex-wrap: wrap; }
.checkbox-field.has-error .field-error { flex-basis: 100%; }

/* Replaces the whole form once the send succeeds — matches .form-status.is-success. */
.form-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: rgba(52, 199, 116, 0.14);
  color: #6fdb92;
  font-size: var(--fs-small);
}
.form-success strong { font-size: var(--fs-body); }
.form-success span { color: var(--color-text-muted); }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden inputs,
   and this one needs to look fillable to them while staying unreachable for
   real users (also aria-hidden + tabindex="-1" in the markup). */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   ----------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  /* Dark navy chosen to sit flush with the shield emblem's own interior
     shading in logo-full-gold.png (now transparent outside the mark
     itself), so the crest reads as part of one continuous dark surface. */
  background: rgba(8, 18, 41, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--transition-base), background-color var(--transition-base);
}
.site-header.is-scrolled {
  background: rgba(8, 18, 41, 0.97);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}
.site-header .nav-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
}
/* The crest logo is a detailed multi-element lockup (not something to
   recreate as live text), so header/footer just display the image itself.
   Header uses logo-full-gold.png, footer logo-full-white.png — both sit on
   dark grounds since the whole-site dark mode landed. */
.brand-logo {
  /* As tall as the 76px header bar comfortably allows, leaving a small
     margin so it doesn't touch the top edge or the header's bottom border. */
  height: 68px;
  width: auto;
  display: block;
}
/* Sized by WIDTH with height:auto, not the other way round. With a fixed
   height the inherited img{max-width:100%} clamps the width in a narrow
   column while the height stays put, which squashes the logo horizontally —
   on a phone it was rendering at aspect 1.23 against a true 2.37. Driving
   width instead means the clamp scales both axes together. 228px matches
   the previous 96px-tall rendering. */
.footer-brand .brand-logo { width: 228px; height: auto; max-width: 100%; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.4rem 0.1rem;
  position: relative;
  transition: color var(--transition-fast);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--color-gold-300); }
.nav-links a:hover::after,
.nav-links a.is-active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: var(--space-md); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }

.nav-toggle {
  display: none;
  background: transparent;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 110;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 10px;
  transition: transform var(--transition-fast), opacity var(--transition-fast), background-color var(--transition-fast);
}
.nav-open .nav-toggle span,
.nav-open .nav-toggle span::before,
.nav-open .nav-toggle span::after { background: #fff; }
.nav-toggle span { top: 20px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   7. HERO
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Flat charcoal fallback beneath the layered .hero-bg (visible for an
     instant before CSS paints, and a safety net if that layer is ever
     removed). */
  background: #0b0b0c;
  color: #fff;
  padding-top: var(--header-height);
}
/* Deep charcoal radial gradients + a soft white/gold glow, layered for
   depth, on their own element (not .hero's own background) so they can be
   sized larger than the section and drifted slowly without revealing an
   edge. Neutral charcoal rather than navy — deliberately desaturated so
   the gold crest and gold UI accents stay the only warm color on screen. */
.hero-bg {
  position: absolute;
  inset: -12%;
  z-index: 0;
  /* Deliberately flat and near-black now that .hero-sweep carries the light.
     The old build stacked several broad glows here, which lifted the whole
     ground to a mid charcoal and left the sweep nothing to read against —
     the diagonal only registers if the surface around it stays dark. The
     warm patch behind the crest is kept (it's what makes the gold look lit)
     but pulled in tighter, and the flat top-left white wash is gone. */
  background:
    radial-gradient(26% 30% at 72% 38%, rgba(255, 208, 138, 0.13) 0%, rgba(224, 170, 88, 0.045) 46%, transparent 72%),
    radial-gradient(18% 26% at 64% 0%, rgba(255, 240, 210, 0.07) 0%, transparent 70%),
    radial-gradient(125% 100% at 50% 46%, transparent 38%, rgba(0, 0, 0, 0.62) 100%),
    radial-gradient(150% 125% at 30% -10%, #141417 0%, #0d0d0f 44%, #060608 100%);
  animation: heroBgDrift 46s ease-in-out infinite;
}
@keyframes heroBgDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-1.6%, 1.2%) scale(1.03); }
}
/* Glancing diagonal light sweep — the hero's main backdrop feature, in
   place of the old ambient fog blobs. It's its own rotated element because
   CSS radial gradients are axis-aligned: an elongated ellipse can only be
   angled by rotating the box it lives in, which a background layer on
   .hero-bg can't do. Two stacked ellipses — a tight bright core and a
   broader dim halo — so the band has falloff along its length as well as
   across it, instead of reading as a hard-edged stripe.

   Sits at z-index 0 (behind the crest and all copy) and inset well past
   the section's edges so the rotated corners never come into view; .hero
   clips it with overflow:hidden. No animation: the reference look is a
   still, glancing light, and a drifting one reads as fog again. */
.hero-sweep {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  transform: rotate(-19deg);
  background:
    radial-gradient(ellipse 50% 4.5% at 50% 58%, rgba(255, 248, 235, 0.5) 0%, rgba(255, 240, 214, 0.2) 36%, transparent 68%),
    radial-gradient(ellipse 66% 12% at 47% 59%, rgba(208, 180, 134, 0.18) 0%, rgba(178, 152, 112, 0.07) 44%, transparent 74%);
}
.hero-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hero-dust--back { z-index: 0; }
.hero-dust--front { z-index: 2; }
.hero-fallback-gradient {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(201, 146, 47, 0.35), transparent 60%),
    radial-gradient(40% 40% at 10% 90%, rgba(201, 146, 47, 0.18), transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.no-js .hero-fallback-gradient,
.reduced-motion .hero-fallback-gradient { opacity: 1; }

/* Decorative crest artwork as the hero's visual anchor — true alpha
   transparency, delivered as a responsive <picture> (AVIF/WebP). Height is
   pushed past 100svh on purpose — .hero's overflow:hidden crops the top
   and bottom of it, so it reads as too large to fully fit in frame. Pulled
   in from the right edge (rather than parked off-screen) so it fills more
   of the hero's middle instead of just the far corner.
   --parallax-y is written by main.js on scroll (a few px either way) for a
   very subtle parallax; it's simply unused/0 wherever JS doesn't set it,
   and the mobile override below drops the transform entirely. */
.hero-visual {
  position: absolute;
  top: 50%;
  right: clamp(-20px, 4vw, 180px);
  width: clamp(720px, 76vw, 1450px);
  /* 100% of .hero's own (content-driven, not just viewport) height, then
     scaled up — guarantees the box is always taller than the hero itself
     by a fixed margin, however tall the section's actual content makes
     it, instead of a vh figure that can fall short when text wraps.
     transform-origin is pinned to the right edge so growth spreads
     leftward + vertically instead of pushing the right edge further off. */
  height: 100%;
  /* The +330px pushes the crop window down from dead-center — crops more
     off the bottom and reveals the top of the lion's head and the crown
     above it, instead of centering the art (which cropped the crown
     off-frame). */
  transform: translateY(calc(-50% + 330px + var(--parallax-y, 0px))) scale(1.4);
  transform-origin: right center;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.hero-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  /* Darker + a bit more contrast so it sits back in the scene while the
     gold gradient baked into the artwork still reads as shiny. A layered
     drop-shadow gives it real cast-shadow depth (a tight contact shadow
     plus a broader ambient one) instead of a bright ambient glow. */
  filter:
    brightness(0.8) contrast(1.18)
    drop-shadow(-14px 18px 22px rgba(0, 0, 0, 0.5))
    drop-shadow(-60px 90px 110px rgba(1, 4, 10, 0.55));
}
/* Fade so the crest's left side melts into the hero background instead of
   ending in a hard silhouette edge — strongest (near-opaque, matching
   .hero-bg's own charcoal) around the artwork's own left edge, fully
   clear again by roughly its horizontal middle. Lives on .hero-visual
   (not .hero-visual-img — generated content doesn't render on <img>),
   positioned above the picture via source order, and inherits
   pointer-events: none from its parent (set explicitly too, to be safe).

   This is a radial ellipse, not a left-to-right linear gradient — on
   purpose. A linear gradient only fades out toward the left/right; its
   top and bottom edges are hard box edges, and depending on viewport
   (short/wide windows especially) .hero-visual's own top or bottom edge
   can end up inside the visible hero, showing a seam there against
   .hero-bg. An ellipse centered on roughly where the artwork's own left
   edge sits (object-fit:contain + object-position:center right leaves an
   empty margin on the box's left that varies with viewport, roughly a
   third to two-fifths of the box width) and sized to stay inside the box
   on every axis fades to fully transparent before ANY edge of the box —
   left, right, top or bottom — so there's nothing left to seam against
   regardless of aspect ratio.

   filter:blur smooths out the remaining alpha-stepping between colors
   that no amount of extra gradient stops fully removes (this is the main
   fix for visible banding); the tiled noise layer, blended in via
   background-blend-mode, dithers what little the blur doesn't catch.

   The stops hold fully opaque out to 30% of the ellipse's radius (a wider
   solid core than before, so the crest reads as genuinely hidden there,
   not just dimmed) then step down to transparent by 83% — a shorter,
   more defined transition than the old one, which bled gradually all the
   way out to 100%. Within that shorter run the steps are still small
   (mostly 0.1-0.16 alpha at a time) so it reads as one smooth blend
   rather than visible rings. */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  filter: blur(7px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(
      ellipse 40% 46% at 33% 50%,
      rgba(3, 3, 4, 1) 0%,
      rgba(3, 3, 4, 1) 30%,
      rgba(3, 3, 4, 0.98) 40%,
      rgba(4, 4, 5, 0.93) 46%,
      rgba(4, 4, 5, 0.82) 51%,
      rgba(5, 5, 6, 0.68) 55%,
      rgba(6, 6, 7, 0.52) 59%,
      rgba(6, 6, 7, 0.37) 63%,
      rgba(7, 7, 8, 0.24) 67%,
      rgba(7, 7, 8, 0.14) 71%,
      rgba(8, 8, 9, 0.07) 75%,
      rgba(8, 8, 10, 0.02) 79%,
      rgba(8, 8, 10, 0) 83%
    );
  background-size: 180px 180px, 100% 100%;
  background-blend-mode: overlay, normal;
}


.hero::after {
  /* Subtle vignette so text stays legible over the animation at every viewport */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4,7,15,0.1) 0%, rgba(4,7,15,0.38) 78%, rgba(4,7,15,0.6) 100%);
  pointer-events: none;
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-block: var(--space-2xl);
}
.hero-content { max-width: 760px; }
.hero h1 { color: #fff; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(201, 146, 47, 0.35);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-family: "Chakra Petch", var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
  color: var(--color-text-on-dark);
}
.hero-badge .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(201, 146, 47, 0.25);
}
.hero h1 { margin-bottom: var(--space-md); }
.hero h1 .accent { color: var(--color-gold-300); }
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--color-text-on-dark-muted);
  max-width: 560px;
  margin-bottom: var(--space-lg);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-md);
}
.hero-stat {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-inline: var(--space-lg);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; padding-right: 0; }
.hero-stat dd { margin: 0; }
.hero-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(201, 146, 47, 0.14);
  border: 1px solid rgba(201, 146, 47, 0.3);
  color: var(--color-gold-300);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hero-stat-icon svg { width: 19px; height: 19px; }
.hero-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem);
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.15;
}
.hero-stat dd span {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
}
.hero-scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xs);
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-small);
}
.hero-scroll-cue .mouse {
  width: 22px;
  height: 34px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  position: relative;
}
.hero-scroll-cue .mouse::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  background: var(--color-gold-300);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollCue 1.8s infinite ease-in-out;
}
@keyframes scrollCue {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 10px); }
  100% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   8. ABOUT
   ----------------------------------------------------------------------- */
.about-grid {
  grid-template-columns: 1fr;
  align-items: center;
}
.about-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-gray-900);
  box-shadow: var(--shadow-lg);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

/* O nás only: the office photo is the section's main visual, so it runs the
   full container width as its own row rather than sharing a half column —
   roughly 4x the area it had before. Scoped to #o-nas on purpose: .about-grid
   is reused by the service sections on sluzby.html, which must keep their
   side-by-side image/text layout.

   The aspect ratio widens with the viewport instead of being fixed. At full
   container width a locked 4/3 would be enormously tall, while a locked 16/9
   would collapse to a letterbox strip on a phone — so it steps 4/3 -> 3/2 ->
   16/9 as space allows. object-fit: cover handles the crop at every step, and
   object-position keeps the windows and the city view in frame rather than
   centring on the desks. */
#o-nas .about-grid { grid-template-columns: 1fr; }
#o-nas .about-media { aspect-ratio: 4 / 3; }
#o-nas .about-media img { object-position: center 42%; }
/* Keep the body copy at a readable measure now that its column is full width. */
#o-nas .about-grid > :last-child { max-width: 72ch; }
@media (min-width: 700px) {
  #o-nas .about-media { aspect-ratio: 3 / 2; }
}
@media (min-width: 1100px) {
  #o-nas .about-media { aspect-ratio: 16 / 9; }
}
.about-media-badge {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  background: #fff;
  color: var(--color-ink);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 800;
}
.about-media-badge span {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.about-list { margin-top: var(--space-lg); display: grid; gap: var(--space-sm); }
.about-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-weight: 600;
  color: var(--color-text);
}
.about-list .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(201, 146, 47, 0.14);
  border: 1px solid rgba(201, 146, 47, 0.3);
  color: var(--color-gold-300);
  display: grid;
  place-items: center;
}

/* -------------------------------------------------------------------------
   9. SERVICES
   ----------------------------------------------------------------------- */
.sluzby-section {
  position: relative;
  overflow: hidden;
}
.sluzby-section > .container {
  position: relative;
  z-index: 1;
}
.sluzby-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 88% 15%, rgba(201, 146, 47, 0.10) 0%, transparent 70%),
    radial-gradient(45% 55% at 6% 100%, rgba(13, 27, 51, 0.06) 0%, transparent 70%);
}
.sluzby-bg-watermark {
  position: absolute;
  bottom: -8%;
  right: -6%;
  width: clamp(360px, 42vw, 640px);
  height: auto;
  opacity: 0.06;
  transform: rotate(-4deg);
}
.services-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.service-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: rgba(201, 146, 47, 0.14);
  border: 1px solid rgba(201, 146, 47, 0.3);
  color: var(--color-gold-300);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-md);
  transition: background-color var(--transition-base), color var(--transition-base);
}
.service-icon svg { width: 26px; height: 26px; }
.service-card:hover .service-icon {
  background: var(--color-primary);
  color: #fff;
}
.service-card h3 { margin-bottom: var(--space-2xs); }
.service-card p { margin-bottom: 0; font-size: 0.95rem; }
.services-footnote {
  margin-top: var(--space-xl);
  text-align: center;
}

/* -------------------------------------------------------------------------
   10. WHY US
   ----------------------------------------------------------------------- */
.why-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.why-index {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--color-gold-300);
  opacity: 0.85;
  line-height: 1;
}
.why-card h3 { color: #fff; }
.why-card p { color: var(--color-text-on-dark-muted); margin-bottom: 0; }

/* -------------------------------------------------------------------------
   11. CLIENTS / REFERENCES
   ----------------------------------------------------------------------- */
.logo-strip {
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.logo-strip img {
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity var(--transition-fast), filter var(--transition-fast);
  margin-inline: auto;
}
.logo-strip img:hover { filter: grayscale(0); opacity: 1; }

.testimonials-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.testimonial-stars { color: var(--color-primary); letter-spacing: 2px; }
.testimonial-quote {
  font-size: 1.05rem;
  color: var(--color-text);
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(201, 146, 47, 0.14);
  border: 1px solid rgba(201, 146, 47, 0.3);
  color: var(--color-gold-300);
  display: grid;
  place-items: center;
  font-weight: 700;
  flex-shrink: 0;
}
.testimonial-author strong { display: block; font-size: 0.95rem; color: var(--color-text); }
.testimonial-author span { font-size: var(--fs-small); color: var(--color-text-muted); }

/* -------------------------------------------------------------------------
   12. CONTACT
   ----------------------------------------------------------------------- */
.contact-grid {
  grid-template-columns: 1fr;
}
.contact-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.contact-info-list { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.contact-info-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(201, 146, 47, 0.14);
  border: 1px solid rgba(201, 146, 47, 0.3);
  color: var(--color-gold-300);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.contact-info-item h4 { margin-bottom: 0.15rem; font-size: 1rem; }
.contact-info-item p { margin-bottom: 0; font-size: 0.95rem; }
.contact-info-item a:hover { color: var(--color-primary); }

.contact-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}

/* -------------------------------------------------------------------------
   13. FOOTER
   ----------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer-grid {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: var(--space-lg);
}
.footer-brand p { color: var(--color-text-on-dark-muted); max-width: 320px; }
.footer-col h4 {
  color: #fff;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: grid; gap: var(--space-2xs); }
.footer-col a { color: var(--color-text-on-dark-muted); transition: color var(--transition-fast); font-size: 0.95rem; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: grid;
  place-items: center;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.footer-social a:hover { background: var(--color-primary); border-color: var(--color-primary); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-small);
}
.footer-bottom-links { display: flex; gap: var(--space-md); }
.footer-bottom-links a:hover { color: #fff; }

/* -------------------------------------------------------------------------
   14. UTILITIES & SCROLL-REVEAL ANIMATION
   ----------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   4c. PLACEHOLDER QA MARKERS (temporary — remove before launch)
   -------------------------------------------------------------------------
   A visual "still needs real content" flag, so placeholder text/images are
   obvious at a glance instead of hiding in code comments. Two ways content
   gets flagged:

   1. `.placeholder-text` / `.placeholder-image-wrap` — added directly on a
      specific element in the HTML. To clear one: once real content is in,
      just delete the class (and the wrapper span, for images) — there's
      nothing else to clean up, the markup underneath is already correct.

   2. The `a[href="tel:..."]` / `a[href="mailto:..."]` rules below target
      the exact placeholder phone number and email by their href, wherever
      they appear (header, footer, contact sections, on every page) — no
      class needed. These clear themselves automatically: the moment the
      href is updated to the real number/address, the selector no longer
      matches and the highlight is just gone.

   Every flagged item is tracked in PUNCH_LIST.md. Nothing already replaced
   with real client-supplied copy (hero tagline, "O nás", "Prečo my", the
   service cards, etc.) is marked here. */
.placeholder-text {
  background: #ffd400;
  color: #1a1200 !important;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.placeholder-text a { color: #1a1200; text-decoration: underline; }
.placeholder-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.placeholder-image-wrap::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 3px solid #ffd400;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.5);
  pointer-events: none;
}

/* Simple page hero used on sluzby.html / kontakt.html subpages */
.page-hero {
  padding-top: calc(var(--header-height) + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  background: var(--color-ink);
  color: #fff;
}
.page-hero h1 { color: #fff; }
.page-hero .section-eyebrow { color: var(--color-gold-300); }
.page-hero p { color: var(--color-text-on-dark-muted); max-width: 640px; }
/* The subheadline paragraph right after the H1 had no top margin at all
   (the base h1{margin:0} + p{margin:0 0 var(--space-sm)} rules leave zero
   gap between them) — this targets just that paragraph via the adjacent
   sibling combinator, not .page-hero p generally, so the breadcrumb and
   eyebrow (also <p> elements, positioned before the H1) are untouched. */
.page-hero h1 + p { margin-top: var(--space-md); }
.breadcrumb {
  font-size: var(--fs-small);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-md);
}
.breadcrumb a:hover { color: #fff; }

/* Legal placeholder pages (privacy / terms) */
.legal-content {
  max-width: 760px;
  margin-inline: auto;
}
.legal-content h2 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-size: 1.3rem; }
.legal-content h2:first-child { margin-top: 0; }

/* -------------------------------------------------------------------------
   15. RESPONSIVE
   ----------------------------------------------------------------------- */
@media (min-width: 640px) {
  .logo-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); }
  .footer-brand { grid-column: span 1; }
}
@media (min-width: 900px) {
  .logo-strip { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: block; }
  .nav-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    position: fixed;
    /* Explicit viewport units, not inset:0 — .site-header's backdrop-filter
       makes it the containing block for fixed descendants (a CSS quirk),
       which would otherwise size this to the 76px header box instead of
       the full screen. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    padding: calc(var(--header-height) + var(--space-lg)) var(--space-lg) var(--space-lg);
    background: var(--color-bg-dark);
    z-index: 105;
  }
  .nav-open .nav-links a { color: var(--color-text); font-size: 1.15rem; }
  .nav-open .nav-actions {
    display: flex;
    position: fixed;
    /* Same containing-block quirk as .nav-open .nav-links above — "bottom"
       would resolve against the 76px header box, not the viewport. */
    left: var(--space-lg);
    right: var(--space-lg);
    top: calc(100svh - 172px);
    z-index: 106;
  }
  .nav-open .nav-actions .btn { display: inline-flex; width: 100%; }
  .hero-stat { padding-inline: var(--space-md); }
}
@media (max-width: 1024px) and (min-width: 641px) {
  /* Tablet-width sits between the desktop clamp floor and the mobile
     corner-accent override — without this the desktop sizing nearly
     fills the whole viewport edge-to-edge and drowns out the copy. */
  .hero-visual {
    width: clamp(500px, 64vw, 920px);
    transform: translateY(calc(-50% + 330px + var(--parallax-y, 0px))) scale(1.18);
  }
}
@media (max-width: 640px) {
  .hero-stats { flex-direction: column; gap: var(--space-md); }
  .hero-stat { border-right: none; padding-inline: 0; }
  /* Deliberately oversized (2x the box that fit the whole crest) and pushed
     right, so the artwork runs past the hero's right edge and gets clipped
     by its overflow:hidden — a close, cropped treatment rather than a whole
     logo sitting in the corner. Top-anchored so it's in frame the moment the
     page opens; it used to sit at bottom: -70px, entirely below the fold.

     The right offset is the fiddly part. object-position is `center right`,
     so the art hugs the box's right edge and pushing the box right slides
     the artwork right too — meaning you see progressively MORE of its left
     side. Past about -150px the only thing left on screen is the crest's
     dark navy shield, which at this opacity is invisible against the
     near-black ground, so the lion appears to vanish entirely. -90px is
     tuned to keep the crown, mane and face in view.

     Opacity is well below the old 0.9 because the headline and body copy
     now cross the busiest part of the artwork; it sits behind them either
     way (.hero-visual is z-index 1, .hero .container is 2). */
  .hero-visual {
    top: 20px;
    bottom: auto;
    right: -90px;
    width: 800px;
    height: 1040px;
    opacity: 0.55;
    /* Reset the desktop-only enlarge/parallax transform — mobile positions
       and sizes the box directly, with no scale or scroll parallax. */
    transform: none;
    transform-origin: center;
  }
  /* The left-to-right fade is calibrated against the desktop/tablet box,
     where .hero-visual spans nearly the full hero height and blends into
     its surroundings. Mobile's box is small and isolated (see above), so
     the same overlay reads as a hard dark rectangle rather than a fade —
     switch it off here rather than force a mismatched look. */
  .hero-visual::after { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  /* Full width rather than sharing a 2-col row: the brand block holds the
     logo and a paragraph, and a ~118px half-column left no room for either. */
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .logo-strip { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   16. COOKIE CONSENT + CONSENT-GATED MAP
   -------------------------------------------------------------------------
   The site sets no cookies of its own — no analytics, no tracking, and the
   site's JS stores nothing. The ONLY third party that sets anything is the
   Google Maps embed, so that embed is what this banner actually gates: the
   iframe carries `data-src` instead of `src` and is only loaded once the
   visitor accepts. A banner that merely hid itself would be decoration.

   Markup is injected by main.js §8 rather than duplicated across five
   pages. Declining leaves the map unloaded behind a click-to-load button,
   so the address is still reachable without consenting.
   ----------------------------------------------------------------------- */
.cookie-banner {
  position: fixed;
  z-index: 200;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  width: min(720px, calc(100vw - 2 * var(--space-md)));
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font-size: var(--fs-small);
  transition: opacity 260ms ease, transform 260ms ease;
}
.cookie-banner[hidden] { display: none; }
/* Entry/exit state — animated by adding/removing .is-visible in main.js so
   the banner never flashes at full opacity before its position settles. */
.cookie-banner:not(.is-visible) {
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  pointer-events: none;
}
.cookie-banner p { margin: 0; flex: 1 1 260px; color: var(--color-text-on-dark-muted); }
.cookie-banner-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.cookie-banner .btn { white-space: nowrap; }

/* Shown in the map's place when consent is absent or declined. Keeps the
   same box as .contact-map so nothing shifts once the map does load. */
.map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  text-align: center;
  padding: var(--space-lg);
  background: var(--color-surface);
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-small);
}
.map-consent p { margin: 0; max-width: 34ch; }

@media (max-width: 560px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-banner-actions .btn { flex: 1; text-align: center; }
}