/* ===== DESIGN TOKENS ===== */
:root{
  --background:30 20% 94%;
  --foreground:130 15% 21%;
  --card:0 0% 100%;
  --primary:97 29% 47%;
  --primary-foreground:0 0% 100%;
  --secondary:100 26% 87%;
  --muted:100 26% 87%;
  --muted-foreground:130 10% 40%;
  --accent:97 16% 63%;
  --border:100 15% 82%;
  --nav:112 47% 15%;          /* #1A3A15 — dark green top bar, white text on it */
  --nav-accent:84 45% 76%;    /* #C9DDA5 — light green: nav hover + the Kontakt pill */
  --container:80rem;          /* 1280px content width, matching malovkovo.vercel.app */
  --radius:.75rem;
  --font-sans:Inter,sans-serif;
  --font-display:"Playfair Display",serif;
}

/* ===== RESET / BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  letter-spacing:.01em;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}

/* ===== LAYOUT HELPERS ===== */
.container{max-width:var(--container);margin-inline:auto}
/* Keep the fixed nav from covering a section we jump to. */
#app section[id]{scroll-margin-top:4rem}
@media(min-width:768px){#app section[id]{scroll-margin-top:5rem}}
/* 5rem (80px) top/bottom on every breakpoint, matching malovkovo's section rhythm. */
.section{padding:5rem 1rem}
@media(min-width:768px){.section{padding:5rem 2rem}}
.section-bg{background:hsl(var(--background))}
.section-sec{background:hsl(var(--secondary))}
.section-dark{background:hsl(var(--foreground));color:#fff}
.center{text-align:center}
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em}
.muted{color:hsl(var(--muted-foreground))}

/* ===== HEADER ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .5s,box-shadow .5s;
  background:transparent;
}
.nav.solid{
  background:hsl(var(--nav));
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
/* Full-width bar; the inline padding mirrors a .container inside a .section, so
   the logo/links line up with the section cards at every width. */
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:max(1rem, (100% - var(--container)) / 2);height:4rem;
}
@media(min-width:768px){.nav-inner{padding-inline:max(2rem, (100% - var(--container)) / 2);height:5rem}}
/* Sizes are 25% up from the original 1.25/1.5/.75rem. Grows from the left so the
   hover nudge doesn't push it into the nav links. */
.logo{
  display:flex;align-items:center;gap:.625rem;
  transform-origin:left center;transition:transform .3s ease-out;
}
.logo:hover{transform:scale(1.05)}
.logo-img{height:3.25rem;width:auto;display:block;flex-shrink:0}
@media(min-width:768px){.logo-img{height:3.77rem}}
.logo-main{font-family:var(--font-display);font-size:1.5625rem;font-weight:600;letter-spacing:-.02em;color:#fff;transition:color .3s}
@media(min-width:768px){.logo-main{font-size:1.875rem}}
.logo-sub{font-size:.9375rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:#fff;transition:color .3s}
/* The bar is dark in both states, so the white base colours already apply. */
/* Wordmark is hidden over the hero — only the logo mark shows there. It appears
   (drawn bottom-up, per letter) once you scroll past the hero (.nav.show-wordmark). */
:root{--wordmark-draw:1.6s}
/* Wordmark = biely obrázok loga (nahradil textové "Greenline servis"). Skrytý nad
   hero — vedľa je len značka; objaví sa (draw-up odspodu) po odscrollovaní k službám
   (.nav.show-wordmark). Rovnaké pravidlá zobrazovania ako mal pôvodný text. */
.logo-wordmark{display:none;height:2.25rem;width:auto;clip-path:inset(100% 0% -0.14em 0%)}
@media(min-width:768px){.logo-wordmark{height:2.7rem}}
.nav.show-wordmark .logo-wordmark{display:block;animation:drawUp var(--wordmark-draw) cubic-bezier(.45,.05,.55,.95) both}
@keyframes drawUp{from{clip-path:inset(100% 0% -0.14em 0%)}to{clip-path:inset(0% 0% -0.14em 0%)}}
@media(prefers-reduced-motion:reduce){.logo-wordmark{clip-path:none!important;animation:none!important}}
.nav-links{display:none;align-items:center;gap:2rem}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:.875rem;font-weight:500;letter-spacing:.02em;color:#fff;transition:color .3s,background .3s}
.nav-links a:hover,.nav-links a.active{color:hsl(var(--nav-accent))}
/* Kontakt sits in a light green pill, so it needs dark text to stay legible. */
.nav-links a.nav-cta,.nav-links a.nav-cta.active{
  background:hsl(var(--nav-accent));color:hsl(var(--nav));
  padding:.5rem 1.125rem;border-radius:9999px;
}
.nav-links a.nav-cta:hover{background:#fff;color:hsl(var(--nav))}
/* Social icons in the nav (between Blog and Kontakt). */
.nav-social{display:inline-flex;align-items:center;gap:.85rem}
.nav-social-ico{display:inline-flex;color:#fff;transition:color .3s,transform .2s}
.nav-social-ico:hover{color:hsl(var(--nav-accent));transform:translateY(-1px)}
.nav-social-ico svg{width:1.25rem;height:1.25rem;display:block}
.burger{display:flex;color:#fff;padding:.25rem}
@media(min-width:768px){.burger{display:none}}
.mobile-menu{
  display:none;background:hsl(var(--nav));border-top:1px solid rgba(255,255,255,.12);
  padding:1rem;flex-direction:column;gap:.25rem;
}
.mobile-menu.open{display:flex}
@media(min-width:768px){.mobile-menu.open{display:none}}
.mobile-menu a{padding:.75rem .5rem;font-size:.9375rem;font-weight:500;color:#fff;border-radius:.5rem;transition:color .3s,background .3s}
.mobile-menu a:hover,.mobile-menu a.active{color:hsl(var(--nav-accent))}
.mobile-menu a:hover{background:rgba(255,255,255,.1)}
.mobile-menu a.nav-cta,.mobile-menu a.nav-cta.active{
  background:hsl(var(--nav-accent));color:hsl(var(--nav));
  border-radius:9999px;text-align:center;margin-top:.5rem;
}
.mobile-menu a.nav-cta:hover{background:#fff;color:hsl(var(--nav))}

/* ===== FLOATING CTA (mid-page, malovkovo-style) ===== */
/* Lives outside #app so it survives route changes; JS toggles .show based on
   scroll position (visible from the services section down to the bottom CTA). */
.float-cta{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:9999px;
  font-weight:600;font-size:1rem;white-space:nowrap;
  color:#fff;
  background:hsl(var(--nav));
  box-shadow:0 20px 25px -5px rgba(0,0,0,.20),0 8px 10px -6px rgba(0,0,0,.16);
  opacity:0;transform:translateY(1rem);pointer-events:none;
  transition:opacity .3s ease-out,transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease-out,background .3s ease-out;
}
.float-cta.show{opacity:1;transform:none;pointer-events:auto}
/* Hover only while visible, so it never fights the slide-in transform. */
.float-cta.show:hover{
  transform:translateY(-3px);
  background:color-mix(in srgb,hsl(var(--nav)),#fff 12%);
  box-shadow:0 26px 34px -6px rgba(0,0,0,.28),0 10px 14px -6px rgba(0,0,0,.20);
}
.float-cta.show:active{transform:translateY(-1px)}
.float-cta svg{width:1.05rem;height:1.05rem}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  white-space:nowrap;border-radius:.75rem;font-weight:500;font-size:1rem;
  height:2.5rem;padding:.5rem 1rem;
  transition:background .3s ease-out,transform .3s ease-out,box-shadow .3s ease-out,color .3s ease-out;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover{background:hsl(var(--primary)/.9);box-shadow:0 10px 15px -3px hsl(var(--foreground)/.15)}
/* Light green pill with dark green text — matches the Kontakt pill in the nav. */
.btn-accent{background:hsl(var(--nav-accent));color:hsl(var(--nav));border-radius:9999px;padding:.5rem 1.5rem}
.btn-accent:hover{background:#fff;box-shadow:0 10px 15px -3px hsl(var(--foreground)/.25)}
/* Solid dark green pill keeping its white outline. Hover lightens the same green —
   a translucent white here would wash the green out instead. */
.btn-outline{
  background:hsl(var(--nav));color:#fff;
  border:2px solid #fff;border-radius:9999px;padding:.5rem 1.5rem;
}
.btn-outline:hover{background:color-mix(in srgb, hsl(var(--nav)), #fff 14%)}
.btn svg{width:1rem;height:1rem;flex-shrink:0}

/* ===== HERO (home) ===== */
/* padding-top = nav height. The bar is fixed and overlays the hero, so without
   this the block centres in the full 100vh and reads high against the space
   actually visible below the bar. box-sizing keeps the hero at 100vh. */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-top:4rem}
@media(min-width:768px){.hero{padding-top:5rem}}
/* Slow Ken Burns drift. The zoom never drops below 1.08, which leaves 4% slack
   per edge against a 1.3% max pan — proportional, so it can never expose an edge
   at any viewport width. .hero's overflow:hidden clips the rest. Reduced-motion
   users fall back to the untransformed image via the global animation:none rule. */
.hero-bg{
  position:absolute;inset:0;
  background-image:url("/images/hero-garden.webp");   /* fallback */
  background-image:-webkit-image-set(url("/images/hero-garden.avif") type("image/avif"), url("/images/hero-garden.webp") type("image/webp"));
  background-image:image-set(url("/images/hero-garden.avif") type("image/avif"), url("/images/hero-garden.webp") type("image/webp"));
  background-position:center;background-size:cover;
  animation:heroDrift 44s ease-in-out infinite;
  will-change:transform;
}
@keyframes heroDrift{
  0%  {transform:scale(1.08) translate3d(-1.2%, -0.6%, 0)}
  50% {transform:scale(1.16) translate3d( 1.4%,  0.9%, 0)}
  100%{transform:scale(1.08) translate3d(-1.2%, -0.6%, 0)}
}
.hero-veil{position:absolute;inset:0;background:hsl(var(--foreground)/.5)}
.hero-inner{position:relative;z-index:10;text-align:center;padding:0 1rem;max-width:48rem;margin-inline:auto}
.hero h1{font-family:var(--font-display);font-weight:600;color:#fff;font-size:2.25rem;line-height:1.1;letter-spacing:-.01em}
@media(min-width:768px){.hero h1{font-size:3.75rem}}
@media(min-width:1024px){.hero h1{font-size:4.5rem}}
/* Direct child only — the tagline is also a <p>, and `.hero p` would outrank
   `.hero-tagline` and override its size, weight and margin. */
.hero-inner > p{margin-top:1.5rem;font-size:1.125rem;font-weight:300;color:#fff;line-height:1.625}
@media(min-width:768px){.hero-inner > p{font-size:1.25rem}}
.hero-cta{margin-top:2.5rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
/* Grid + width:max-content sizes both columns to the widest button, so the two
   pills stay equal length without hardcoding a width. */
@media(min-width:640px){
  .hero-cta{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    width:max-content;margin-inline:auto;
  }
}

/* ===== FIREFLIES (hero) ===== */
/* Ambient only: pointer-events:none lets clicks reach the buttons underneath.
   The spans themselves are built in mountFireflies() so each gets its own
   randomised drift + flicker keyframes. */
.fireflies{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.fireflies span{
  position:absolute;border-radius:9999px;
  background:#FEF08A;will-change:transform,opacity;
}

/* ===== "S nami to rastie." HERO EYEBROW (light green, above the title) ===== */
/* Firemný logotyp v hero (biely horizontálny variant). Ostáva ako <h1> kvôli SEO –
   názov firmy nesie alt obrázka. Drop-shadow aby biele logo čitateľne sadlo nad
   rušivé pozadie hero. */
.hero-brand{margin:0;line-height:0}
.hero-brand img{
  display:block;height:auto;margin:0 auto;
  width:min(86vw,21rem);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
@media(min-width:768px){.hero-brand img{width:28rem}}
/* .about-copy .tagline (not just .tagline) so it outranks `.about-copy p`'s colour. */
.about-copy .tagline{
  font-family:var(--font-display);font-weight:600;font-size:1.375rem;
  color:hsl(var(--nav));margin:1.75rem 0;
}

/* ===== PAGE HEADER (inner pages) ===== */
.page-head{padding:8rem 1rem 3rem;background:hsl(var(--secondary));text-align:center}
@media(min-width:768px){.page-head{padding-inline:2rem}}
.page-head h1{font-family:var(--font-display);font-weight:600;font-size:2.25rem;color:hsl(var(--foreground))}
@media(min-width:768px){.page-head h1{font-size:3rem}}
.page-head p{margin-top:1rem;color:hsl(var(--muted-foreground));max-width:36rem;margin-inline:auto}

/* ===== ACCENT SECTION (home services) ===== */
/* Light green (--nav-accent) background with dark green (--nav) heading + subtitle,
   both matching the Kontakt pill. The heading and the cards share this one section. */
.section-accent{background:hsl(var(--nav-accent))}
.section-accent .h2,.section-accent .head-block p{color:hsl(var(--nav))}

/* ===== HEADINGS ===== */
.h2{font-family:var(--font-display);font-weight:600;font-size:1.875rem;color:hsl(var(--foreground));letter-spacing:-.01em}
@media(min-width:768px){.h2{font-size:2.25rem}}
.section-dark .h2,.cta-photo .h2{color:#fff}
.head-block{text-align:center;margin-bottom:4rem}
.head-block p{margin-top:1rem;color:hsl(var(--muted-foreground));max-width:36rem;margin-inline:auto}
/* Services subtitle matches the hero subtitle's line length (48rem inner − 2rem padding). */
#sluzby .head-block p{max-width:46rem}

/* ===== GRIDS ===== */
.grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:768px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
}

/* ===== CARDS ===== */
.card-link{display:block;height:100%}
.card{
  border-radius:.75rem;overflow:hidden;background:hsl(var(--card));height:100%;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px hsl(var(--foreground)/.06);
  transition:box-shadow .3s,transform .3s;
}
.card-link:hover .card{box-shadow:0 8px 20px hsl(var(--foreground)/.12);transform:translateY(-4px)}
.card-media{overflow:hidden;aspect-ratio:4/3;position:relative}
.card-media.wide{aspect-ratio:16/10}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card-link:hover .card-media img{transform:scale(1.05)}
.card-body{padding:1.5rem;flex:1;display:flex;flex-direction:column}
.card-body h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:hsl(var(--foreground));transition:color .3s}
.card-link:hover .card-body h3{color:hsl(var(--primary))}
.card-body p{margin-top:.75rem;font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.625;flex:1}
.card-date{font-size:.75rem;color:hsl(var(--muted-foreground));margin-bottom:.5rem}
.card-more{margin-top:1rem;font-size:.875rem;font-weight:500;color:hsl(var(--primary))}

/* ===== SERVICE CARDS (compact, expandable) ===== */
.svc-card{
  background:hsl(var(--card));border-radius:.75rem;overflow:hidden;height:100%;
  display:flex;flex-direction:column;cursor:pointer;
  box-shadow:0 1px 2px hsl(var(--foreground)/.06);
  transition:box-shadow .3s,transform .3s;
}
.svc-card:hover{box-shadow:0 8px 20px hsl(var(--foreground)/.12);transform:translateY(-4px)}
.svc-card:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:3px}
.svc-media{height:8.5rem;overflow:hidden;position:relative}
.svc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.svc-card:hover .svc-media img{transform:scale(1.05)}
.svc-media.is-placeholder{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,hsl(var(--secondary)) 0%,hsl(var(--nav-accent)) 100%);
}
.svc-ph-icon{color:hsl(var(--primary)/.55)}
.svc-ph-icon svg{width:2.5rem;height:2.5rem}
.svc-body{padding:1.375rem 1.5rem 1.5rem;flex:1;display:flex;flex-direction:column}
.svc-body h3{font-family:var(--font-display);font-size:1.0625rem;font-weight:600;color:hsl(var(--foreground));line-height:1.3}
.svc-excerpt{margin-top:.5rem;font-size:.875rem;color:hsl(var(--muted-foreground));line-height:1.6}
.svc-toggle{
  margin-top:auto;padding-top:1rem;align-self:flex-start;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.875rem;font-weight:600;color:hsl(var(--primary));
  transition:gap .2s;
}
.svc-card:hover .svc-toggle{gap:.65rem}
.svc-toggle svg{width:1rem;height:1rem}
/* Dark green note pill at the foot of the services section (nav colour, white text). */
.svc-note{
  width:fit-content;max-width:100%;margin:3.5rem auto 0;
  background:hsl(var(--nav));color:#fff;
  border-radius:1rem;padding:1rem 1.75rem;text-align:center;
  box-shadow:0 8px 20px hsl(var(--foreground)/.15);
}
/* Same size as the services subtitle (16px / 1.5 / normal weight). */
.svc-note p{margin:0;font-size:1rem;font-weight:400;line-height:1.5}

/* ===== SERVICE DETAIL MODAL ===== */
.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.modal.open{opacity:1;visibility:visible}
.modal-overlay{position:absolute;inset:0;background:hsl(var(--foreground)/.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-dialog{
  position:relative;background:hsl(var(--background));
  border-radius:1.25rem;width:100%;max-width:78rem;
  padding:2rem;box-shadow:0 30px 70px rgba(0,0,0,.4);
  transform:translateY(14px) scale(.98);transition:transform .25s;
}
/* Tall desktop shows everything at once (no scroll). Narrow (phone) or short
   viewports can't fit the content, so they keep a scroll to avoid clipping. */
@media(max-width:819px),(max-height:820px){.modal-dialog{max-height:90vh;overflow-y:auto}}
.modal.open .modal-dialog{transform:none}
.modal-close{
  position:absolute;top:1rem;right:1rem;z-index:2;
  width:2.5rem;height:2.5rem;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--card));color:hsl(var(--foreground));
  box-shadow:0 2px 6px hsl(var(--foreground)/.2);transition:background .2s,transform .2s;
}
.modal-close:hover{background:hsl(var(--secondary));transform:rotate(90deg)}
.modal-close svg{width:1.25rem;height:1.25rem}

.svc-modal-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:820px){.svc-modal-grid{grid-template-columns:24rem 1fr;gap:2rem}}
/* Left column sits in a light-green bubble (image + white highlight box inside). */
/* Stretch to match the right column; photo at the top, highlight box centered in the
   green space below it. No bottom padding, so "centered" reaches the bubble's bottom edge. */
.svc-modal-left{background:hsl(var(--nav-accent));border-radius:1.25rem;padding:1.25rem 1.25rem 0;align-self:stretch;display:flex;flex-direction:column}
.svc-modal-photo{border-radius:.75rem;overflow:hidden;aspect-ratio:4/3}
.svc-modal-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.svc-modal-photo.is-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,hsl(var(--secondary)),#fff)}
.svc-modal-highlight{margin:auto 0;background:hsl(var(--card));border-radius:.75rem;padding:1.5rem 1.25rem;text-align:center}
.svc-modal-highlight p{margin:0;font-family:var(--font-display);font-weight:600;font-size:1.0625rem;color:hsl(var(--nav));line-height:1.4}
/* padding-right clears the absolutely-positioned close (✕) button. */
.svc-modal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-right:3.25rem}
.svc-modal-badge{background:hsl(var(--nav-accent));color:hsl(var(--nav));font-size:.8125rem;font-weight:700;letter-spacing:.06em;padding:.4rem 1rem;border-radius:.6rem}
/* Prev / next service buttons sit together on the right of the modal head. */
.svc-modal-navbtns{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.svc-nav-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  background:hsl(var(--nav));color:#fff;font-size:.8125rem;font-weight:600;
  padding:.5rem 1rem;border-radius:9999px;transition:background .2s,gap .2s;
}
.svc-nav-btn:hover{background:color-mix(in srgb,hsl(var(--nav)),#fff 12%);gap:.65rem}
.svc-nav-btn svg{width:1rem;height:1rem}
.svc-modal-title{font-family:var(--font-display);font-weight:600;font-size:1.875rem;color:hsl(var(--nav));line-height:1.15;margin:.75rem 0 1rem}
@media(min-width:768px){.svc-modal-title{font-size:2.375rem}}
.svc-modal-desc{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:1.25rem 1.5rem;box-shadow:0 1px 2px hsl(var(--foreground)/.05)}
.svc-modal-desc p{margin:0;color:hsl(var(--foreground));font-weight:600;line-height:1.65;font-size:.9375rem}
.svc-modal-tags{display:flex;flex-wrap:wrap;gap:.625rem;margin:1rem 0}
.svc-tag{background:hsl(var(--nav-accent)/.5);border:1px solid hsl(var(--nav-accent));color:hsl(var(--nav));font-size:.8125rem;font-weight:600;padding:.4rem .9rem;border-radius:9999px}
.svc-modal-list{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:1rem;padding:1.25rem 1.5rem}
.svc-modal-list ul{columns:2;column-gap:2rem}
@media(max-width:560px){.svc-modal-list ul{columns:1}}
/* Long checklists (≥15 items) widen the dialog and flow into 3 columns so the
   whole popup still fits on screen without scrolling. */
@media(min-width:820px){
  .modal-dialog--wide{max-width:92rem}
  .modal-dialog--wide .svc-modal-list ul{columns:3}
}
.svc-modal-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;break-inside:avoid;font-size:.875rem;color:hsl(var(--foreground))}
.svc-modal-list li svg{width:1.125rem;height:1.125rem;flex-shrink:0;color:hsl(var(--primary));margin-top:.1rem}

/* ===== ABOUT (home) ===== */
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media(min-width:900px){.about-grid{grid-template-columns:3fr 2fr;gap:4rem}}
.about-copy p{color:hsl(var(--nav));line-height:1.8;margin-bottom:1rem}
.about-copy .h2{margin-bottom:1.5rem}
.about-media{border-radius:.75rem;overflow:hidden;box-shadow:0 8px 24px hsl(var(--foreground)/.14)}
.about-media img{width:100%;height:auto;display:block}
/* Fotka o 15 % menšia a zarovnaná vpravo (len desktop – v pravom stĺpci). */
@media(min-width:900px){.about-media{width:85%;margin-left:auto}}

/* ===== WHY-US CARDS (malovkovo-style pillars, at the foot of the O nás section) ===== */
.why-head{text-align:center;margin:4.5rem 0 2.5rem}
.why-cards{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media(min-width:768px){.why-cards{grid-template-columns:repeat(3,1fr)}}
/* Dark green cards: light-green icon, white heading, light body text. */
.pillar{
  background:hsl(var(--nav));border:1px solid hsl(var(--nav-accent)/.2);
  border-radius:1rem;padding:1.75rem;height:100%;
  transition:box-shadow .3s,transform .3s;
}
.pillar:hover{box-shadow:0 8px 20px hsl(var(--foreground)/.18);transform:translateY(-4px)}
.pillar-icon{color:hsl(var(--nav-accent));margin-bottom:1rem;line-height:0}
.pillar-icon svg{width:2.25rem;height:2.25rem}
.pillar h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.pillar p{color:rgba(255,255,255,.8);font-size:.9375rem;line-height:1.7}

/* ===== TESTIMONIALS ===== */
.quote{border-left:2px solid hsl(var(--primary)/.3);padding:.5rem 0 .5rem 1.5rem}
.stars{display:flex;gap:.25rem;margin-bottom:.75rem;color:hsl(var(--primary))}
.stars svg{width:14px;height:14px;fill:hsl(var(--primary))}
.quote-text{color:hsl(var(--muted-foreground));line-height:1.75;font-style:italic}
.quote-name{margin-top:1rem;font-weight:600;font-size:.9375rem}
.quote-loc{font-size:.8125rem;color:hsl(var(--muted-foreground))}
/* white testimonial card used on the home page (per PDF) */
.quote-card{
  background:hsl(var(--card));border-radius:.75rem;padding:1.75rem;height:100%;
  box-shadow:0 1px 2px hsl(var(--foreground)/.06);
}
.quote-card h3{font-family:var(--font-display);font-size:1.125rem;font-weight:600;margin-bottom:.75rem}
.quote-card .quote-text{font-size:.9375rem}

/* ===== REVIEWS CAROUSEL (3 per view, slide for the rest) ===== */
.reviews-carousel{margin-top:.5rem}
.car-track{
  display:flex;gap:2rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.5rem 0 1rem;
  scrollbar-width:none;-ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{display:none}
/* Exactly three cards + two gaps fill the container, so page one is edge-aligned. */
.review-card{
  flex:0 0 calc((100% - 4rem) / 3);scroll-snap-align:start;
  background:hsl(var(--card));border-radius:.75rem;padding:1.75rem;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px hsl(var(--foreground)/.06);
}
@media(max-width:767px){.review-card{flex-basis:85%}}
.review-quote{color:hsl(var(--muted-foreground));font-style:italic;line-height:1.7;font-size:.9375rem;margin-top:.5rem}
.review-name{margin-top:1rem;font-weight:600;font-size:.9375rem}
.review-loc{font-size:.8125rem;color:hsl(var(--muted-foreground))}
/* Divider (čiara) above the work list; "Na zákazke sme realizovali" bullets. */
.rev-did{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid hsl(var(--border));margin-bottom:1.15rem}
.rev-did-label{
  font-family:var(--font-display);font-weight:600;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:hsl(var(--foreground));margin-bottom:.6rem;
}
.rev-did ul{display:flex;flex-direction:column;gap:.45rem}
.rev-did li{display:flex;align-items:flex-start;gap:.5rem;font-size:.875rem;line-height:1.45;color:hsl(var(--foreground)/.85)}
.rev-did li svg{width:1.05rem;height:1.05rem;flex-shrink:0;margin-top:.12rem;color:hsl(var(--primary))}
/* Photos of the realizácia at the bottom (placeholders until real photos come);
   margin-top:auto anchors them to the card bottom so they line up across cards. */
.rev-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:auto}
.rev-photo{position:relative;aspect-ratio:4/3;border-radius:.5rem;overflow:hidden;cursor:pointer}
.rev-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.rev-photo:hover img{transform:scale(1.08)}   /* jemné zväčšenie pri hoveri */
.rev-photo:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}
.rev-photo.is-placeholder{
  display:flex;align-items:center;justify-content:center;cursor:default;
  background:linear-gradient(135deg,hsl(var(--secondary)) 0%,hsl(var(--nav-accent)) 100%);
}
.rev-photo.is-placeholder .svc-ph-icon svg{width:1.5rem;height:1.5rem}

/* ===== LIGHTBOX (zväčšené fotky referencií) ===== */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
.lb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(2px);cursor:zoom-out}
.lb-figure{position:relative;z-index:1;margin:0;display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:min(94vw,1100px);animation:lbIn .25s ease-out}
.lb-img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:.5rem;box-shadow:0 24px 60px rgba(0,0,0,.5);display:block}
.lb-counter{color:rgba(255,255,255,.85);font-size:.875rem;letter-spacing:.02em}
.lb-close,.lb-nav{
  position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:9999px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  cursor:pointer;transition:background .2s,transform .2s;
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-close{top:1.25rem;right:1.25rem}
.lb-close svg{width:1.4rem;height:1.4rem}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.lb-nav svg{width:1.5rem;height:1.5rem}
.lb-prev{left:1rem}
.lb-next{right:1rem}
@keyframes lbIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.lb-figure{animation:none}.rev-photo img{transition:none}}
.car-nav{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}
.car-arrow{
  width:2.75rem;height:2.75rem;border-radius:9999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--nav));color:#fff;
  box-shadow:0 6px 14px hsl(var(--foreground)/.22);
  transition:background .2s,transform .2s,opacity .2s;
}
.car-arrow:hover:not(:disabled){background:color-mix(in srgb,hsl(var(--nav)),#fff 12%);transform:translateY(-1px)}
.car-arrow:disabled{opacity:.35;cursor:default}
.car-arrow svg{width:1.25rem;height:1.25rem}

/* ===== BLOG CAROUSEL (same one-row + arrows pattern as references) ===== */
.blog-carousel{margin-top:.5rem}
/* Three cards + two gaps fill the container; extra articles stay in one row and
   are reached with the arrows. */
#blogTrack > .card-link{flex:0 0 calc((100% - 4rem) / 3);scroll-snap-align:start}
@media(max-width:767px){#blogTrack > .card-link{flex-basis:85%}}

/* ===== CTA ===== */
.cta{text-align:center}
/* Solid dark green, same as the top nav bar (--nav). */
.cta-photo{background:hsl(var(--nav));position:relative;overflow:hidden}
/* Menšia spodná medzera – copyright má byť tesne nad koncom stránky (id prebíja .section). */
#kontakt{padding-bottom:1.5rem}
.cta-grass{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.cta{position:relative;z-index:1}

/* ----- Kontakt: left intro + right info cards ----- */
.kontakt-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;text-align:left}
@media(min-width:900px){.kontakt-grid{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:stretch}}
/* Ľavý stĺpec ako flex – tlačidlo "Pokosiť trávnik" sa margin-top:auto zatlačí na spodok,
   takže lícuje so spodkom bubliny "Fakturačné údaje" v pravom stĺpci. */
.kontakt-intro{display:flex;flex-direction:column}
/* Dvojica tlačidiel (Pokosiť / Obnoviť) zatlačená na spodok ľavého stĺpca. */
.mow-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
/* Pútavé pulzujúce tlačidlo; klik spustí scroll na spodok + animáciu kosenia trávy. */
.mow-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  background:hsl(var(--primary));color:#fff;border:0;
  border-radius:9999px;padding:.85rem 1.6rem;
  font-weight:700;font-size:1.0625rem;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  animation:mowPulse 1.9s ease-in-out infinite;
  transition:transform .2s ease-out,background .2s ease-out;
}
.mow-btn svg{width:1.15rem;height:1.15rem}
.mow-btn:hover{filter:brightness(1.06)}
.mow-btn:active{transform:scale(.97)}
.mow-btn.is-mowing{animation:none}
/* Blikanie: celé tlačidlo sa jemne zväčší/zmenší a farba prejde do svietivejšej zelene. */
@keyframes mowPulse{
  0%,100%{transform:scale(1);background:hsl(var(--primary));box-shadow:0 8px 20px rgba(0,0,0,.25)}
  50%    {transform:scale(1.06);background:hsl(95 58% 60%);box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 22px hsl(var(--nav-accent)/.6)}
}
/* Sekundárne "Obnoviť" tlačidlo – iba ikona šípok; skryté do prvého pokosenia. */
.grow-btn{
  display:none;align-items:center;justify-content:center;
  width:3rem;height:3rem;
  background:transparent;color:hsl(var(--nav-accent));
  border:1px solid hsl(var(--nav-accent)/.5);border-radius:9999px;cursor:pointer;
  transition:transform .2s ease-out,background .2s ease-out,border-color .2s ease-out;
}
.grow-btn.is-visible{display:inline-flex;animation:growAppear .35s ease-out}
.grow-btn svg{width:1.3rem;height:1.3rem;transition:transform .4s ease-out}
.grow-btn:hover{background:hsl(var(--nav-accent)/.14);border-color:hsl(var(--nav-accent));transform:translateY(-2px)}
.grow-btn:hover svg{transform:rotate(-120deg)}
.grow-btn:active{transform:scale(.94)}
@keyframes growAppear{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.mow-btn{animation:none}.grow-btn.is-visible{animation:none}}
.kc-eyebrow{display:flex;align-items:center;gap:.75rem;margin:0;color:hsl(var(--nav-accent));font-size:.8125rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.kc-eyebrow-line{width:2rem;height:2px;background:hsl(var(--nav-accent));display:inline-block;flex-shrink:0}
.kc-heading{font-family:var(--font-display);font-weight:600;font-size:2.25rem;color:#fff;line-height:1.1;margin:1.25rem 0}
@media(min-width:768px){.kc-heading{font-size:3rem}}
.kc-desc{color:rgba(255,255,255,.75);line-height:1.7;margin:0 0 1rem;max-width:34rem}
/* Pre-redesign subtitle look: Playfair, light green, larger. */
.kc-sub{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.5;color:hsl(var(--nav-accent));margin:0 0 1.25rem;max-width:34rem}
@media(min-width:768px){.kc-sub{font-size:1.5rem}}
.kontakt-cards{display:flex;flex-direction:column;gap:1rem}
.kc-card{
  display:flex;gap:1.1rem;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid hsl(var(--nav-accent)/.18);
  border-radius:1rem;padding:1.15rem 1.35rem;
}
.kc-icon{
  flex-shrink:0;width:3rem;height:3rem;border-radius:.85rem;
  background:hsl(var(--primary));color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
}
.kc-icon svg{width:1.4rem;height:1.4rem}
.kc-info{min-width:0}
.kc-cardlabel{margin:0 0 .25rem;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:hsl(var(--nav-accent))}
.kc-cardvalue{margin:0;color:#fff;font-weight:600;font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
.kc-cardvalue a{color:#fff;transition:color .2s}
.kc-cardvalue a:hover{color:hsl(var(--nav-accent))}
/* max-width 46rem = the hero subtitle's line length (48rem inner − 2rem padding). */
.cta-sub{
  font-family:var(--font-display);font-weight:600;font-size:1.25rem;
  color:hsl(var(--nav-accent));margin:1.25rem auto 0;max-width:46rem;line-height:1.5;
}
@media(min-width:768px){.cta-sub{font-size:1.5rem}}
.cta-lead{color:rgba(255,255,255,.8);max-width:46rem;margin:1.25rem auto 0;line-height:1.7}

/* Four-step process cards */
.cta-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin:3rem auto 0;max-width:64rem}
@media(min-width:768px){.cta-steps{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.cta-step{
  background:hsl(var(--card));border-radius:1rem;padding:1.75rem 1rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.cta-step-num{
  width:2.25rem;height:2.25rem;border-radius:9999px;flex-shrink:0;
  background:hsl(var(--primary));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;
}
.cta-step p{margin:0;color:hsl(var(--nav));font-weight:700;font-size:.9375rem;line-height:1.35}

/* Contact pills (light green, enlarged, with icons) */
.cta-contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:3rem 0 0}
.cta-contact{
  display:inline-flex;align-items:center;gap:.75rem;
  background:hsl(var(--nav-accent));color:hsl(var(--nav));
  border-radius:9999px;padding:.875rem 1.5rem;
  font-size:1.0625rem;font-weight:600;transition:background .2s,transform .2s;
}
a.cta-contact:hover{background:#fff;transform:translateY(-2px)}
.cta-contact svg{width:1.35rem;height:1.35rem;flex-shrink:0}

/* Social icons (Instagram + Facebook), centered under the contact pills */
.cta-social{display:flex;justify-content:center;gap:1rem;margin:1.75rem 0 0}
.cta-social-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:4.5rem;height:4.5rem;border-radius:1.25rem;
  border:1px solid hsl(var(--nav-accent)/.4);color:hsl(var(--nav-accent));
  transition:transform .2s,border-color .2s,background .2s;
}
.cta-social-ico:hover{transform:translateY(-3px);border-color:hsl(var(--nav-accent));background:hsl(var(--nav-accent)/.12)}
.cta-social-ico svg{width:2.75rem;height:2.75rem;display:block}

/* Closing sign-off (per screenshot 3) */
.cta-signoff{margin-top:3.5rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.15)}
/* Sign-off brand = biely logotyp "Greenline servis" (nahradil text). <p> obal
   ostáva – JS trávy z neho číta pozíciu (výška stebiel siaha pod logotyp). */
.cta-signoff-brand{margin:0;line-height:0}
.cta-signoff-brand img{display:block;height:1.18rem;width:auto;max-width:88%;margin:0 auto}
@media(min-width:768px){.cta-signoff-brand img{height:1.4rem}}
.cta-signoff-desc{color:rgba(255,255,255,.8);max-width:46rem;margin:1rem auto 0;line-height:1.7}
.cta-signoff-tag{font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:hsl(var(--nav-accent));margin:1.25rem 0 0}
.cta-copy{color:rgba(255,255,255,.55);font-size:.8125rem;margin:1.5rem 0 0}

/* ===== DETAIL PAGES ===== */
.detail{padding:3rem 1rem 5rem}
@media(min-width:768px){.detail{padding-inline:2rem}}
.detail-media{border-radius:.75rem;overflow:hidden;margin-bottom:3rem;aspect-ratio:16/9}
.detail-media img{width:100%;height:100%;object-fit:cover}
.prose{max-width:44rem;margin-inline:auto}
.prose p{color:hsl(var(--muted-foreground));line-height:1.8;margin-bottom:1.25rem}
.prose h2{font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:hsl(var(--foreground));margin:2.5rem 0 1rem}
.benefits{margin:1rem 0 0}
.benefits li{display:flex;gap:.75rem;align-items:flex-start;padding:.5rem 0;color:hsl(var(--muted-foreground))}
.benefits svg{width:1.25rem;height:1.25rem;flex-shrink:0;color:hsl(var(--primary));margin-top:.15rem}
.includes{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1rem}
@media(min-width:640px){.includes{grid-template-columns:repeat(2,1fr)}}
.includes li{
  display:flex;gap:.625rem;align-items:flex-start;
  background:hsl(var(--secondary));border-radius:.5rem;padding:.75rem .875rem;
  font-size:.9375rem;color:hsl(var(--foreground));
}
.includes svg{width:1.125rem;height:1.125rem;flex-shrink:0;color:hsl(var(--primary));margin-top:.15rem}
.steps{counter-reset:step;margin-top:1rem}
.step{display:flex;gap:1rem;align-items:flex-start;padding:.75rem 0}
.step-num{
  flex-shrink:0;width:2rem;height:2rem;border-radius:9999px;
  background:hsl(var(--primary)/.1);color:hsl(var(--primary));
  display:flex;align-items:center;justify-content:center;
  font-size:.875rem;font-weight:600;
}
.step p{margin:0;padding-top:.25rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));margin-bottom:2rem;transition:color .3s}
.back-link:hover{color:hsl(var(--primary))}
.back-link svg{width:1rem;height:1rem}

/* ===== REVIEW DETAIL ===== */
.meta-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin:2rem 0 3rem;padding:1.5rem;background:hsl(var(--card));border-radius:.75rem}
@media(min-width:768px){.meta-grid{grid-template-columns:repeat(4,1fr)}}
.meta-label{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:hsl(var(--muted-foreground));margin-bottom:.375rem}
.meta-value{font-weight:500;font-size:.9375rem}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.tag{background:hsl(var(--secondary));color:hsl(var(--foreground));font-size:.8125rem;padding:.375rem .75rem;border-radius:9999px}
.pull-quote{margin-top:3rem;padding:2rem;background:hsl(var(--secondary));border-radius:.75rem}
.pull-quote p{font-style:italic;color:hsl(var(--foreground));line-height:1.8;margin:0}
.pull-quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.875rem;color:hsl(var(--muted-foreground))}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid hsl(var(--border))}
.pager a{font-size:.875rem;font-weight:500;color:hsl(var(--primary))}

/* ===== BLOG POST ===== */
.post-meta{font-size:.875rem;color:hsl(var(--muted-foreground));margin-bottom:.75rem}
.callout{background:hsl(var(--secondary));border-left:3px solid hsl(var(--primary));padding:1.25rem 1.5rem;border-radius:.5rem;margin:1.5rem 0}
.callout p{margin:0;color:hsl(var(--foreground));font-size:.9375rem}

/* ===== CONTACT ===== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:3rem;max-width:60rem;margin-inline:auto}
@media(min-width:768px){.contact-grid{grid-template-columns:3fr 2fr}}
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}
.field input,.field textarea{
  width:100%;font:inherit;font-size:.9375rem;
  padding:.625rem .875rem;border:1px solid hsl(var(--border));
  border-radius:.5rem;background:hsl(var(--card));color:hsl(var(--foreground));
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:9rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15)}
.info-block{margin-bottom:2rem}
.info-block h2{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:1rem}
.info-row{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}
.info-row svg{width:1.125rem;height:1.125rem;color:hsl(var(--primary));flex-shrink:0;margin-top:.2rem}
.info-row .k{font-size:.75rem;color:hsl(var(--muted-foreground))}
.info-row .v{font-size:.9375rem;font-weight:500}
.hours p{color:hsl(var(--muted-foreground));font-size:.9375rem;margin-bottom:.375rem}
.form-note{margin-top:1rem;font-size:.8125rem;color:hsl(var(--muted-foreground))}

/* ===== FOOTER ===== */
footer{background:hsl(var(--nav));color:rgba(255,255,255,.82)}
.footer-inner{max-width:var(--container);margin-inline:auto;padding:4rem 1rem 2rem;display:grid;gap:2.5rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-inner{grid-template-columns:2fr 1fr 1fr;padding-inline:2rem}}
.footer-inner h3{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:#fff;margin-bottom:1rem}
.footer-inner h3 span{font-family:var(--font-sans);font-size:.75rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-left:.4rem}
.footer-inner h4{font-size:.875rem;font-weight:600;color:#fff;margin-bottom:1rem;letter-spacing:.02em;text-transform:uppercase}
.footer-inner p,.footer-inner li{font-size:.9375rem;line-height:1.75}
.footer-inner li{margin-bottom:.5rem}
.footer-inner a{color:rgba(255,255,255,.82);transition:color .3s}
.footer-inner a:hover{color:#fff;text-decoration:underline}
.footer-tagline{font-family:var(--font-display);font-weight:600;font-size:1.125rem;color:#fff;margin-top:1.5rem}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:1rem}
.footer-bottom div{max-width:var(--container);margin-inline:auto;padding:1.5rem 1rem;font-size:.8125rem;color:rgba(255,255,255,.7);text-align:center}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .6s ease-out forwards;opacity:0}
.fade-up-1{animation-delay:.2s}
.fade-up-2{animation-delay:.4s}
.fade-up-3{animation-delay:.6s}
.fade-up-4{animation-delay:.8s}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}


/* ===== BLOG ARTICLE PAGE (generated by Eleventy) ===== */
.detail{padding-top:7rem}
.detail .back-link,.detail .post-meta,.article-title,.detail .prose{max-width:44rem;margin-inline:auto}
.detail-media{max-width:52rem;margin-inline:auto}
.article-title{font-family:var(--font-display);font-weight:600;font-size:2rem;line-height:1.15;color:hsl(var(--nav));margin:.25rem auto 1.75rem}
@media(min-width:768px){.article-title{font-size:2.75rem}}
.prose .lead{font-size:1.1875rem;line-height:1.7;color:hsl(var(--foreground));font-weight:500;margin-bottom:1.5rem}
.prose blockquote{background:hsl(var(--secondary));border-left:3px solid hsl(var(--primary));padding:1.1rem 1.4rem;border-radius:.5rem;margin:1.5rem 0}
.prose blockquote p{margin:0;color:hsl(var(--foreground));font-size:.9375rem;line-height:1.7}
.prose img{border-radius:.75rem;margin:1.75rem 0;width:100%;height:auto}
.prose ul,.prose ol{margin:1rem 0 1.25rem;padding-left:1.4rem;color:hsl(var(--muted-foreground));line-height:1.8}
.prose li{margin-bottom:.4rem}