/* ==========================================================================
   ALAKFA MESTER — Design System
   Style direction: Organic Biophilic (primary, strong fidelity)
   Motif: organic shapes — blobs, leaf silhouettes, growth rings, wave edges
   Stack: plain CSS. No frameworks, no CDN fonts, no build step.
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Organic motif primitives (blob / leaf / ring / wave)
   06  Buttons & links
   07  Header, navigation, mobile menu, mobile action bar
   08  Surfaces & cards (4 distinct treatments)
   09  Hero
   10  Section components
   11  Before / after slider
   12  Process timeline
   13  Shape (formavilág) gallery
   14  Gallery & filters
   14b Ügyfélvélemények
   15  FAQ accordion
   16  Tables
   17  Forms
   18  Footer
   19  Utilities
   20  Responsive
   21  Reduced motion / print
   ========================================================================== */

/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* --- Color: "Erdő & kő" (client palette) -------------------------------
     Every value below was contrast-checked against its intended pairing.
     Ratios noted in comments are vs. --color-bg (#F5F3ED) unless stated. */
  --color-bg:            #F5F3ED;  /* warm off-white field  */
  --color-bg-alt:        #DDE7DF;  /* pale sage, alternating sections */
  --color-surface:       #FFFFFF;  /* paper card */
  --color-surface-2:     #EFEDE4;  /* recessed / inset surface */
  --color-forest:        #173D2D;  /* deep forest — headings, dark blocks  10.9:1 */
  --color-forest-deep:   #102A20;  /* deeper forest — dark block gradients */
  --color-primary:       #2F5D46;  /* moss — CTA, links, icons             6.8:1 */
  --color-primary-hover: #234737;  /* moss, pressed                        9.0:1 */
  --color-primary-soft:  rgba(47, 93, 70, 0.10);
  --color-sage:          #7D9B83;  /* decorative only — never body text */
  --color-sage-light:    #B0C7B6;  /* muted text ON forest   6.7:1 (4.7:1 on the
                                      lightest forest gradient stop + white 6% panel) */
  --color-sage-pale:     #DDE7DF;
  --color-stone:         #D7D2C6;  /* borders, dividers, inputs */
  --color-stone-deep:    #B9B2A2;  /* stronger hairline */
  --color-text:          #202723;  /* anthracite body                     14.3:1 */
  --color-text-muted:    #4A5750;  /* muted body                           6.8:1 */
  --color-bronze:        #B59A61;  /* decorative accent — never text on light */
  --color-bronze-light:  #CFBA8D;  /* bronze text ON forest  6.4:1 (4.8:1 on the
                                      lightest CTA-band gradient stop) */
  --color-danger:        #8A2E1F;  /* form errors                          7.4:1 */
  --color-focus:         #B59A61;

  --color-border:        var(--color-stone);
  --color-border-soft:   rgba(215, 210, 198, 0.6);

  /* --- Elevation: soft, large, low opacity (never hard shadows) --------- */
  --shadow-xs:  0 2px 8px rgba(23, 61, 45, 0.05);
  --shadow-sm:  0 8px 22px rgba(23, 61, 45, 0.06);
  --shadow-md:  0 16px 40px rgba(47, 58, 47, 0.08);
  --shadow-lg:  0 28px 70px rgba(23, 61, 45, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* --- Type scale: modular 1.25, base 16px ------------------------------ */
  --text-xs:      0.8rem;
  --text-sm:      0.9rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.375rem;
  --text-2xl:     clamp(1.45rem, 1.15rem + 1.1vw, 1.953rem);
  --text-3xl:     clamp(1.75rem, 1.3rem + 1.9vw, 2.441rem);
  --text-display: clamp(1.85rem, 1.3rem + 2.1vw, 2.7rem);
  --text-mega:    clamp(2.05rem, 1.4rem + 2.6vw, 3.25rem);

  --font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --leading-tight: 1.16;
  --leading-snug:  1.32;
  --leading-body:  1.65;
  --measure:       82ch;
  --measure-tight: 64ch;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  --space-section: clamp(48px, 5.6vw, 88px);

  /* --- Shape: large, soft, slightly irregular --------------------------- */
  --radius-sm:   12px;
  --radius-md:   24px;
  --radius-lg:   36px;
  --radius-pill: 999px;
  --radius-organic:   28px 34px 26px 32px;
  --radius-organic-2: 34px 26px 32px 28px;
  --radius-leaf:      4px 64% 4px 64%;
  --radius-leaf-alt:  64% 4px 64% 4px;
  --radius-blob:      62% 38% 46% 54% / 60% 47% 53% 40%;
  --radius-blob-2:    44% 56% 63% 37% / 51% 39% 61% 49%;

  /* --- Motion: subtle only ---------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.68, 0.36, 1);
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 300ms;

  /* --- Layout ------------------------------------------------------------ */
  --container: 1180px;
  --container-wide: 1340px;
  --container-narrow: 760px;
  --header-h: 76px;

  /* --- z-index scale ----------------------------------------------------- */
  --z-decor: 0;
  --z-content: 10;
  --z-sticky: 30;
  --z-header: 40;
  --z-menu: 50;
  --z-skip: 60;
}

/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Components here set their own display (flex, grid), which would otherwise
   outrank the browser's default for [hidden]. The script hides a panel whose
   photos are not in place yet by setting that attribute, so it has to win. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); }
p, ul, ol, dl, figure, table { margin: 0 0 var(--space-4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.15em; }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-stone) 22%, var(--color-stone) 78%, transparent);
  margin: var(--space-7) 0;
}

::selection { background: var(--color-sage-pale); color: var(--color-forest); }

/* Deliberate scrollbar treatment (never left at browser default) */
* { scrollbar-color: var(--color-sage) var(--color-bg-alt); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--color-bg-alt); }
::-webkit-scrollbar-thumb {
  background: var(--color-sage);
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-bg-alt);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Focus: a bronze/forest ring that belongs to the palette, never removed */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-forest :focus-visible { outline-color: var(--color-bronze-light); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: var(--z-skip);
  background: var(--color-forest);
  color: #fff;
  padding: 14px 22px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 0; }

/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
  font-family: var(--font-heading);
  color: var(--color-forest);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--text-display); }
h2, .h2 { font-size: var(--text-3xl); line-height: var(--leading-snug); }
h3, .h3 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: -0.005em; }
h4, .h4 { font-size: var(--text-lg); line-height: 1.4; }

.lead {
  font-size: var(--text-lg);
  line-height: 1.62;
  color: var(--color-text-muted);
  max-width: 104ch;
}

.prose { max-width: 84ch; }
.prose p { margin-bottom: var(--space-4); }

/* Eyebrow: repeated typographic mark with a bronze leaf glyph */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--color-bronze);
  border-radius: var(--radius-leaf);
  transform: rotate(-12deg);
}
.on-forest .eyebrow { color: var(--color-bronze-light); }
.on-forest .eyebrow::before { background: var(--color-bronze-light); }

/* Pull quote — a recurring emphasis device */
.pullquote {
  position: relative;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.35;
  color: var(--color-forest);
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  background: var(--color-surface);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border-soft);
}
.pullquote::before {
  content: "";
  position: absolute;
  left: 22px; top: 30px; bottom: 30px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-primary), var(--color-sage));
}
.pullquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Highlighted key claim inside running text */
.mark {
  background: linear-gradient(180deg, transparent 58%, rgba(181, 154, 97, 0.32) 58%);
  padding: 0 2px;
  font-weight: 600;
  color: var(--color-forest);
}

.on-forest { color: #fff; }
.on-forest h1, .on-forest h2, .on-forest h3, .on-forest h4 { color: #fff; }
.on-forest .lead, .on-forest .muted { color: var(--color-sage-light); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--space-5), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--space-5), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--space-5), var(--container-narrow)); }

.section {
  position: relative;
  padding-block: var(--space-section);
  isolation: isolate;
  overflow: hidden; /* decorative blobs must never widen the document */
}
.section--tight { padding-block: clamp(34px, 4vw, 58px); }
.section--flush-top { padding-top: clamp(36px, 4vw, 56px); }
.section--band { padding-block: clamp(14px, 1.6vw, 22px); }
.section--band + .section--band { padding-top: 0; }
.section--band + .wave { margin-top: clamp(10px, 1.2vw, 18px); }

/* Alternating section tones — the page's visual rhythm */
.section--paper  { background: var(--color-bg); }
.section--sage   { background: var(--color-bg-alt); }
.section--stone  { background: linear-gradient(180deg, var(--color-surface-2), var(--color-bg)); }
.section--forest {
  background:
    radial-gradient(120% 90% at 12% 0%, #1d4a37 0%, transparent 60%),
    radial-gradient(90% 80% at 92% 100%, #1b4433 0%, transparent 55%),
    linear-gradient(160deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
  color: #fff;
}
.section--forest a:not(.btn) { color: var(--color-bronze-light); }

.section-head { max-width: none; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 104ch; }
.on-forest .section-head p { color: var(--color-sage-light); }

.section-head--split {
  display: grid;
  gap: var(--space-5);
  max-width: none;
  align-items: center;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.section-head--split .section-head__aside {
  padding-block: 2px;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-stone);
  padding-left: var(--space-5);
}
.on-forest .section-head--split .section-head__aside {
  color: var(--color-sage-light);
  border-left-color: rgba(168, 192, 174, 0.35);
}

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--asym { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.grid--asym-rev { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.grid--gap-lg { gap: var(--space-6); }
/* Cards whose content genuinely differs in length: each keeps its own height
   instead of being padded out to match the tallest one in the row. */
.grid--top { align-items: start; }
/* "Három kiemelt projekt": a slightly narrower column on desktop, so the
   three panels read a touch smaller. Heading, panels and CTA keep one left
   edge. Below 900px the layout stacks and the width rule stands down. */
@media (min-width: 901px) {
  .container--projects { width: min(100% - 2 * var(--space-5), 1180px); }
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--lg { gap: var(--space-4); }

/* ==========================================================================
   05  ORGANIC MOTIF PRIMITIVES
   ========================================================================== */

/* Soft drifting blob glow — the page's background texture */
.blob {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  border-radius: var(--radius-blob);
  filter: blur(2px);
  opacity: 0.9;
}
.blob--moss   { background: radial-gradient(closest-side, rgba(47, 93, 70, 0.16), transparent); }
.blob--sage   { background: radial-gradient(closest-side, rgba(125, 155, 131, 0.24), transparent); }
.blob--bronze { background: radial-gradient(closest-side, rgba(181, 154, 97, 0.20), transparent); }
.blob--light  { background: radial-gradient(closest-side, rgba(221, 231, 223, 0.55), transparent); }
.blob--glow   { background: radial-gradient(closest-side, rgba(168, 192, 174, 0.20), transparent); }

.blob--a { width: 460px; height: 420px; top: -120px; left: -140px; }
.blob--b { width: 540px; height: 480px; bottom: -180px; right: -160px; border-radius: var(--radius-blob-2); }
.blob--c { width: 320px; height: 300px; top: 20%; right: 6%; border-radius: var(--radius-blob-2); }

/* Two decorative elements at most per view drift slowly (subtle motion) */
.blob--drift { animation: drift 26s var(--ease-out) infinite alternate; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(18px, -22px, 0) scale(1.05); }
}

/* Leaf-shaped icon badge — the site's most repeated signature shape */
.leaf-badge {
  --leaf-size: 52px;
  display: grid;
  place-items: center;
  width: var(--leaf-size);
  height: var(--leaf-size);
  flex: none;
  border-radius: var(--radius-leaf);
  background: linear-gradient(145deg, var(--color-primary), #3d7357);
  color: #fff;
  box-shadow: 0 10px 24px rgba(23, 61, 45, 0.18);
  transition: transform var(--dur) var(--ease-out);
}
.leaf-badge svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.leaf-badge--alt { border-radius: var(--radius-leaf-alt); }
.leaf-badge--sage { background: linear-gradient(145deg, var(--color-sage-pale), #cfded2); color: var(--color-forest); box-shadow: none; border: 1px solid rgba(47,93,70,0.16); }
.leaf-badge--bronze { background: linear-gradient(145deg, var(--color-bronze), #cbb17c); color: var(--color-forest); }
.leaf-badge--outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); box-shadow: none; }
.leaf-badge--sm { --leaf-size: 38px; }
.leaf-badge--sm svg { width: 18px; height: 18px; }
.leaf-badge--lg { --leaf-size: 64px; }

/* Numbered leaf marker (process steps) */
.leaf-num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-forest);
  color: #fff;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0;
  box-shadow: 0 10px 22px rgba(23, 61, 45, 0.2);
}
.on-forest .leaf-num { background: var(--color-bronze); color: var(--color-forest); }

/* Wave / leaf-edge divider between sections */
.wave {
  display: block;
  width: 100%;
  height: clamp(34px, 4vw, 66px);
  position: relative;
  z-index: var(--z-content);
  margin-bottom: -1px;
}
/* A wave already reads as breathing room, so the section it introduces
   starts a little tighter. */
.wave + .section { padding-top: clamp(34px, 3.8vw, 60px); }
.wave--top { margin-bottom: 0; margin-top: -1px; }
.wave svg { display: block; width: 100%; height: 100%; }

/* Growth rings: concentric organic contours, used behind key blocks */
.rings {
  position: absolute;
  z-index: var(--z-decor);
  pointer-events: none;
  opacity: 0.5;
}
.rings svg { width: 100%; height: 100%; overflow: visible; }
.rings circle, .rings ellipse { fill: none; }

/* Pill tag / label chip */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-sage-pale);
  color: var(--color-forest);
  border: 1px solid rgba(47, 93, 70, 0.14);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tag--bronze { background: rgba(181, 154, 97, 0.16); border-color: rgba(181, 154, 97, 0.5); }
.tag--forest { background: var(--color-forest); color: #fff; border-color: transparent; }
.tag--outline { background: transparent; border-color: var(--color-stone-deep); color: var(--color-text-muted); }
.tag__dot { width: 7px; height: 7px; border-radius: var(--radius-leaf); background: currentColor; flex: none; }
.on-forest .tag { background: rgba(255,255,255,0.09); color: #fff; border-color: rgba(168,192,174,0.35); }

/* Placeholder frame — every unresolved asset is visibly, honestly marked */
.placeholder {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  min-height: 200px;
  border: 2px dashed var(--color-stone-deep);
  border-radius: var(--radius-organic);
  background:
    repeating-linear-gradient(135deg, rgba(215, 210, 198, 0.20) 0 12px, transparent 12px 24px),
    var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.placeholder__label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-primary);
}
.placeholder svg { width: 40px; height: 40px; stroke: var(--color-sage); fill: none; stroke-width: 1.4; }
.on-forest .placeholder {
  border-color: rgba(168, 192, 174, 0.45);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-sage-light);
}
.on-forest .placeholder__label { color: var(--color-bronze-light); }

/* ==========================================================================
   06  BUTTONS & LINKS
   ========================================================================== */
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-primary-hover); }

.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn svg { width: 19px; height: 19px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.btn--primary { box-shadow: 0 12px 28px rgba(23, 61, 45, 0.22); }
.btn--primary:hover { --btn-bg: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(23, 61, 45, 0.26); color: #fff; }
.btn--primary:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(23, 61, 45, 0.24); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-forest);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 0 var(--color-primary-soft);
}
.btn--secondary:hover { --btn-bg: var(--color-primary-soft); color: var(--color-forest); transform: translateY(-2px); }
.btn--secondary:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-forest);
  border-color: var(--color-stone-deep);
}
.btn--ghost:hover { --btn-bg: var(--color-surface); border-color: var(--color-primary); color: var(--color-forest); transform: translateY(-2px); }

.btn--bronze { --btn-bg: var(--color-bronze); --btn-fg: #14251C; box-shadow: 0 12px 28px rgba(23, 61, 45, 0.3); }
.btn--bronze:hover { --btn-bg: #c6ab74; color: #14251C; transform: translateY(-2px); }

.on-forest .btn--secondary, .btn--on-dark {
  --btn-fg: #fff;
  border-color: rgba(168, 192, 174, 0.6);
}
.on-forest .btn--secondary:hover, .btn--on-dark:hover { --btn-bg: rgba(255,255,255,0.10); color: #fff; }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: var(--text-sm); }
.btn--lg { min-height: 58px; padding: 17px 32px; font-size: var(--text-lg); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* Loading state (never a frozen UI) */
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with an animated underline that also responds to focus */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 650;
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.link-arrow svg {
  width: 17px; height: 17px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur) var(--ease-out);
}
/* The arrow slides; the box never changes size, so neighbours cannot jump. */
.link-arrow:hover svg, .link-arrow:focus-visible svg { transform: translateX(4px); }
.link-arrow:hover, .link-arrow:focus-visible { border-bottom-color: var(--color-bronze); color: var(--color-primary-hover); }
.on-forest .link-arrow { color: var(--color-bronze-light); }
.on-forest .link-arrow:hover, .on-forest .link-arrow:focus-visible { border-bottom-color: var(--color-bronze-light); color: #fff; }
/* Rows that mix a button and a link keep a stable baseline. */
.cluster { align-items: center; }
.cluster .link-arrow { flex: none; }

/* ==========================================================================
   07  HEADER / NAVIGATION
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(245, 243, 237, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.header.is-stuck {
  border-bottom-color: var(--color-border-soft);
  box-shadow: 0 10px 30px rgba(23, 61, 45, 0.06);
  background: rgba(245, 243, 237, 0.96);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  flex-wrap: nowrap;
}

/* Brand mark: a 3:2 logo plate. The logo has a white ground of its own, so
   the plate is white too and the picture sits in it whole (contain) – nothing
   is cropped, and the plate reads the same on the light header and on the
   dark footer. Until the file is in place the leaf silhouette behind it stays
   visible, so the header never shows a broken image. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  gap: 12px;
  text-decoration: none;
  color: var(--color-forest);
  padding: 6px 4px;
  border-radius: var(--radius-sm);
}
.brand__mark {
  position: relative;
  width: 69px; height: 46px;   /* 3:2 */
  flex: none;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(23, 61, 45, 0.14);
  transition: transform var(--dur) var(--ease-out);
}
.brand__logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
.brand__mark svg { width: 24px; height: 24px; }
.brand:hover .brand__mark { transform: rotate(-3deg) scale(1.04); }
/* +2px breathing room between the brand name and the tagline (header + footer) */
.brand__text { display: flex; flex-direction: column; line-height: 1.1; gap: 4px; }
.brand__name {
  font-family: var(--font-heading);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-forest);
}
.brand__tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
}

.nav { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 13px;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.nav__link:hover { background: var(--color-primary-soft); color: var(--color-forest); }
.nav__link[aria-current="page"] {
  background: var(--color-sage-pale);
  border-color: rgba(47, 93, 70, 0.2);
  color: var(--color-forest);
}
.nav__link.is-section {
  background: var(--color-sage-pale);
  border-color: rgba(47, 93, 70, 0.2);
}
.nav__link[aria-current="page"]::after {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-leaf);
  background: var(--color-bronze);
}
.nav__caret { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; transition: transform var(--dur) var(--ease-out); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__item { position: relative; }
.nav__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 268px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px 26px 22px 26px;
  box-shadow: var(--shadow-lg);
  list-style: none;
  margin: 0;
  display: none;
  z-index: var(--z-menu);
}
.nav__item.is-open .nav__panel { display: block; }
.nav__panel li { margin: 0; }
.nav__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.nav__panel a::before {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-sage);
  transition: background-color var(--dur) var(--ease-out);
}
.nav__panel a:hover { background: var(--color-sage-pale); transform: translateX(3px); }
.nav__panel a:hover::before { background: var(--color-bronze); }
.nav__panel a[aria-current="page"] { background: var(--color-sage-pale); }
.nav__panel a[aria-current="page"]::before { background: var(--color-bronze); }
.nav__panel .nav__panel-note {
  display: block;
  padding: 8px 12px 4px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}

.header__actions { display: flex; align-items: center; flex: none; gap: var(--space-3); }
.header__actions .btn { white-space: nowrap; }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-weight: 650;
  font-size: 0.92rem;
  color: var(--color-forest);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out);
}
.header__phone svg { width: 18px; height: 18px; stroke: var(--color-primary); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.header__phone:hover { background: var(--color-primary-soft); color: var(--color-forest); }

/* Hamburger */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid var(--color-stone-deep);
  border-radius: 14px 16px 14px 16px;
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.menu-toggle:hover { border-color: var(--color-primary); }
.menu-toggle__bars { display: block; width: 22px; height: 15px; position: relative; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-forest);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6.5px; }
.menu-toggle__bars span:nth-child(3) { top: 13px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-menu);
  background: var(--color-bg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-5) 0 var(--space-9);
  display: none;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid var(--color-border-soft); }
.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 14px 4px;
  background: none;
  border: 0;
  font-family: var(--font-heading);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--color-forest);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.mobile-nav__link .nav__caret { width: 16px; height: 16px; }
.mobile-nav__sub { list-style: none; margin: 0 0 var(--space-4); padding: 0 0 0 var(--space-4); display: none; }
.mobile-nav__sub.is-open { display: block; }
.mobile-nav__sub li { border-bottom: 0; }
.mobile-nav__sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.mobile-nav__sub a::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: var(--radius-leaf);
  background: var(--color-sage);
  flex: none;
}
.mobile-nav__meta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 2px solid var(--color-stone); }
.mobile-nav__contact { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.mobile-nav__contact a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-forest);
  font-weight: 650;
  font-size: 0.95rem;
  text-decoration: none;
  word-break: break-word;
}
.mobile-nav__contact svg { width: 18px; height: 18px; flex: none; stroke: var(--color-primary); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Floating contact dock — bottom right on every page, a full-width bar on phones */
.dock {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 44px rgba(23, 61, 45, 0.18);
}
.dock__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-sage-pale);
  border: 1px solid rgba(47, 93, 70, 0.18);
  color: var(--color-forest);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.dock__icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock__icon:hover, .dock__icon:focus-visible {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.dock__cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.dock__cta:hover, .dock__cta:focus-visible { background: var(--color-primary-hover); color: #fff; transform: translateY(-2px); }

/* ==========================================================================
   08  SURFACES & CARDS — four deliberately distinct treatments
   ========================================================================== */

/* (a) Paper card: white, irregular radius, soft large shadow, leaf watermark */
.card {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card::after {
  content: "";
  position: absolute;
  right: -46px; bottom: -56px;
  width: 150px; height: 150px;
  border-radius: var(--radius-leaf);
  background: var(--color-primary);
  opacity: 0.045;
  transform: rotate(-16deg);
  pointer-events: none;
}
.card > * { position: relative; z-index: 1; }

/* A panel clips its decorative corner blob with `overflow`, and a blob that
   reaches past the panel's own box makes that panel a scroll container. The
   browser is then free to scroll the panel itself when an anchor inside it is
   targeted, which lifts the panel's own heading by its padding and leaves it
   there. `clip` clips exactly like `hidden` but never creates a scroll
   container, so the panel can no longer be scrolled. Browsers that do not know
   `overflow: clip` keep the `hidden` declared above. */
.section, .hero, .split, .card, .project-card, .route-card, .concern,
.disclosure, .cta-band, .form-panel, .faq__item, .trust-strip, .stat,
.video-feature, .video-card, .gallery__item, .carousel__viewport {
  overflow: clip;
}
.card h3 { margin-bottom: var(--space-3); }
.card p { color: var(--color-text-muted); max-width: 78ch; }
.card--alt { border-radius: var(--radius-organic-2); }
.card--interactive { cursor: pointer; }
.card--interactive:hover, .card--interactive:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(47, 93, 70, 0.28);
}

/* (b) Sage card: flat tinted panel, no shadow, botanical hairline top */
.card--sage {
  background: var(--color-bg-alt);
  border: 1px solid rgba(47, 93, 70, 0.16);
  box-shadow: none;
}
.card--sage::after { background: var(--color-forest); opacity: 0.05; }
.card--sage::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 3px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--color-sage), var(--color-bronze), transparent);
}

/* (c) Forest card: dark block with an inner glow */
.card--forest {
  background: linear-gradient(155deg, var(--color-forest), var(--color-forest-deep));
  border-color: rgba(168, 192, 174, 0.2);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.card--forest h3, .card--forest h4 { color: #fff; }
.card--forest p { color: var(--color-sage-light); }
.card--forest::after { background: var(--color-bronze); opacity: 0.14; }

/* (d) Outline card: paper-free, hairline only — used for lists & secondary info */
.card--outline {
  background: transparent;
  border: 1px solid var(--color-stone-deep);
  box-shadow: none;
}
.card--outline::after { opacity: 0.03; }

.card--flush { padding: 0; }
.card--tight { padding: var(--space-5); }
.card__body { padding: var(--space-5) var(--space-6) var(--space-6); }
.card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.card--forest .card__eyebrow { color: var(--color-bronze-light); }

/* Feature card: leaf badge + heading + copy + optional link */
.feature { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.feature .leaf-badge { margin-bottom: var(--space-1); }
.feature h3 { margin-bottom: 0; }
.feature p { margin-bottom: 0; flex: 1; }

/* Numbered / stat tile */
.stat {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-forest);
  margin-bottom: var(--space-2);
}
.stat__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.stat--sm {
  padding: var(--space-5);
  border-radius: 20px 24px 20px 24px;
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.stat--sm:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(47, 93, 70, 0.26); }
.stat--sm .stat__value {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-primary);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.stat--sm .stat__label { font-size: 0.96rem; color: var(--color-text); line-height: 1.5; }
.stat--note {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-bg-alt);
  border-color: rgba(47, 93, 70, 0.18);
  box-shadow: none;
}
.stat--note:hover { transform: none; box-shadow: none; }
.stat--note .stat__label { color: var(--color-text-muted); }
.on-forest .stat { background: rgba(255, 255, 255, 0.06); border-color: rgba(168, 192, 174, 0.28); box-shadow: none; }
.on-forest .stat__value { color: var(--color-bronze-light); }
.on-forest .stat__label { color: var(--color-sage-light); }

/* Trust strip */
.trust-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.trust-strip__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border-right: 1px solid var(--color-border-soft);
}
.trust-strip__item:last-child { border-right: 0; }
.trust-strip__item h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; margin-bottom: 4px; color: var(--color-forest); }
.trust-strip__item p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* Split panel: two side-by-side halves with contrasting fills */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-md);
}
/* Both halves are full-height columns, so the closing link sits on the same
   baseline even when one side carries more text. */
.split__half {
  padding: clamp(28px, 3.4vw, 46px);
  display: flex;
  flex-direction: column;
}
.split__half > .link-arrow { margin-top: auto; }
.split__half--light { background: var(--color-surface); }
.split__half--tint { background: linear-gradient(160deg, var(--color-bg-alt), #d3e0d6); }
.split__half--dark { background: linear-gradient(155deg, var(--color-forest), var(--color-forest-deep)); color: #fff; }
.split__half--dark h3, .split__half--dark h2 { color: #fff; }
.split__half--dark p, .split__half--dark li { color: var(--color-sage-light); }

/* Checklist / benefit list with leaf bullets */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.checklist li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding-left: 0;
  line-height: 1.55;
}
.checklist li::before {
  content: "";
  width: 20px; height: 20px;
  flex: none;
  margin-top: 3px;
  border-radius: var(--radius-leaf);
  background: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  background-position: center;
  background-repeat: no-repeat;
}
.checklist--sage li::before { background-color: var(--color-sage); }
.checklist--bronze li::before { background-color: var(--color-bronze); }
.checklist--cross li::before {
  background-color: #7d5a52;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.on-forest .checklist li { color: var(--color-sage-light); }
.on-forest .checklist li::before { background-color: var(--color-bronze); }

/* Callout */
.callout {
  position: relative;
  padding: var(--space-5) var(--space-6);
  padding-left: calc(var(--space-6) + 8px);
  border-radius: var(--radius-organic-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
}
.callout::before {
  content: "";
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-bronze), var(--color-sage));
}
.callout h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.callout p:last-child { margin-bottom: 0; }
.callout--warn::before { background: linear-gradient(180deg, #a5643f, #7d5a52); }
.on-forest .callout { background: rgba(255,255,255,0.06); border-color: rgba(168,192,174,0.25); }
.on-forest .callout p { color: var(--color-sage-light); }

/* ==========================================================================
   09  HERO — abstract brand visual (custom SVG topiary composition)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(22px, 2.4vw, 40px) clamp(24px, 2.6vw, 40px);
  background:
    radial-gradient(70% 55% at 82% 18%, rgba(221, 231, 223, 0.85) 0%, transparent 62%),
    radial-gradient(58% 60% at 8% 92%, rgba(181, 154, 97, 0.13) 0%, transparent 60%),
    var(--color-bg);
  isolation: isolate;
}
.hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(24px, 2.6vw, 44px);
  align-items: center;
}
.hero__copy { max-width: 46rem; }
.hero h1 {
  font-size: var(--text-mega);
  margin-bottom: var(--space-4);
  max-width: 30ch;
  text-wrap: pretty;
}
.hero h1 .accent {
  position: relative;
  color: var(--color-primary);
  white-space: nowrap;
}
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.1em;
  height: 0.14em;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-bronze) 0%, var(--color-bronze) 68%, rgba(181, 154, 97, 0.22) 100%);
}
.hero__sub {
  font-size: clamp(1.03rem, 0.96rem + 0.35vw, 1.19rem);
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-bottom: var(--space-5);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.hero__ctas .btn { min-height: 48px; }
/* Keep both hero CTAs on one line in the copy column. */
.hero__ctas .btn--lg { padding-inline: 24px; }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.hero__meta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.hero__meta-item svg { width: 17px; height: 17px; stroke: var(--color-primary); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Primary contact pair: call + write, the first thing every hero offers */
.contact-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.contact-pair--center { justify-content: center; }
.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 24px 10px 10px;
  border-radius: var(--radius-pill);
  background: linear-gradient(145deg, var(--color-primary), #3d7357);
  border: 1px solid transparent;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(23, 61, 45, 0.22);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.contact-btn:hover, .contact-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(23, 61, 45, 0.28);
  color: #fff;
}
.contact-btn__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.contact-btn__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contact-btn__text { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.contact-btn__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
.contact-btn strong { font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; word-break: break-word; }
.on-forest .contact-btn { background: rgba(255, 255, 255, 0.12); border-color: rgba(168, 192, 174, 0.45); }
.on-forest .contact-btn:hover { background: rgba(255, 255, 255, 0.2); }

/* Click-to-call — legacy single button, kept for inline use */
.hero__call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px 9px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: var(--color-forest);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.hero__call:hover, .hero__call:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  color: var(--color-forest);
}
.hero__call-icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: linear-gradient(145deg, var(--color-primary), #3d7357);
  color: #fff;
}
.hero__call-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero__call-text { display: flex; flex-direction: column; line-height: 1.15; }
.hero__call-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.hero__call strong { font-size: 1.06rem; font-weight: 700; letter-spacing: 0.01em; }
.on-forest .hero__call { background: rgba(255,255,255,0.08); border-color: rgba(168,192,174,0.4); color: #fff; }
.on-forest .hero__call-label { color: var(--color-sage-light); }

/* The abstract brand visual: layered organic "branch clouds" on growth rings */
.hero__visual { position: relative; }
.hero-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin-inline: auto;
}
.hero-art svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* A hero illusztráció mozgását az af-hero-art.css és .js viszi (rétegparallax,
   napjárás, fénnyel formálás). A régi heroDrift/glowPulse animációk kikerültek:
   a rajzokon már nincs olyan elem, ami hordozná őket. */

/* Floating proof card overlapping the abstract visual */
.hero-proof {
  position: absolute;
  left: -11%;
  bottom: -3%;
  width: min(340px, 58%);
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px 26px 20px 26px;
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.hero-proof__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 10px;
}
.hero-proof__label::before { content: ""; width: 12px; height: 12px; border-radius: var(--radius-leaf); background: var(--color-bronze); flex: none; }
/* Saját munkák körhinta. A képek képaránya vegyes, ezért a keret fix, a kép
   pedig mindig teljes egészében látszik benne (contain) – fehér térrel
   mellette vagy alatta-fölötte, sosem levágva. */
.carousel { display: grid; gap: 8px; }
.carousel__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 14px 16px 14px 16px;
  background: #fff;
  border: 1px solid var(--color-border-soft);
}
.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 600ms ease-in-out;
}
.carousel__slide {
  flex: 0 0 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  background: #fff;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--color-forest);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.carousel__arrow svg { width: 17px; height: 17px; }
.carousel__arrow--prev { left: 6px; }
.carousel__arrow--next { right: 6px; }
.carousel__arrow:hover, .carousel__arrow:focus-visible {
  background: #fff;
  border-color: var(--color-primary);
}
.carousel__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-stone-deep);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.carousel__dot[aria-current="true"] { background: var(--color-primary); transform: scale(1.34); }
.carousel__dot:hover { background: var(--color-sage); }
/* The dots are deliberately small; keep the real hit area accessible. */
.carousel__dot::before { content: ""; position: absolute; width: 20px; height: 20px; transform: translate(-7px, -7px); }
.carousel__dot { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}
/* Without JS the track simply scrolls; the controls would do nothing. */
.no-js .carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; }
.no-js .carousel__slide { scroll-snap-align: center; }
.no-js .carousel__arrow, .no-js .carousel__dots { display: none; }
.hero-proof p { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; line-height: 1.45; }

/* Compact hero variant for inner pages */
.hero--inner { padding-block: clamp(20px, 2.2vw, 34px) clamp(28px, 3.2vw, 50px); }
.hero--inner .hero-art { aspect-ratio: 7 / 6; max-width: 430px; }
/* Pages that carry a photo panel beside the drawing, or that lean on the
   drawing itself, get a larger one. */
.hero--inner .hero-art--lg { max-width: 560px; }
/* Those heroes also need the wider visual column the homepage uses, so the
   drawing has room and nothing crowds it. The query keeps this two-column rule
   out of the stacked layout below 901px, where it would otherwise outrank the
   single-column rule on specificity. */
@media (min-width: 901px) {
  .hero--inner.hero--with-proof .hero__grid,
  .hero--inner.hero--wide-art .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}
.hero--inner h1 { font-size: var(--text-display); max-width: 34ch; }
.hero--inner .hero__grid { align-items: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }

/* ==========================================================================
   10  SECTION COMPONENTS
   ========================================================================== */

/* Entry-route cards ("Miben segíthetek?") — quote-style opener */
.route-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.route-card::before {
  content: "";
  position: absolute;
  inset: auto -30% -40% auto;
  width: 210px; height: 200px;
  border-radius: var(--radius-blob);
  background: radial-gradient(closest-side, rgba(125, 155, 131, 0.28), transparent);
  transition: transform var(--dur-slow) var(--ease-out);
}
.route-card:hover, .route-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(47, 93, 70, 0.3);
}
.route-card:hover::before { transform: translate(-14px, -14px) scale(1.12); }
.route-card > * { position: relative; z-index: 1; }
.route-card__quote {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: 1.34;
  color: var(--color-forest);
  margin: 0;
}
.route-card__quote::before { content: "„"; color: var(--color-bronze); font-size: 1.25em; }
.route-card__quote::after { content: "”"; color: var(--color-bronze); font-size: 1.25em; }
.route-card p { color: var(--color-text-muted); margin: 0; flex: 1; }
.route-card .link-arrow { margin-top: auto; }

/* Benefit grid with alternating tile fills */
.benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); grid-auto-rows: 1fr; }
.benefit {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.benefit:nth-child(even) { border-radius: var(--radius-organic-2); }
/* Uniform variant: one surface for every tile, so a 2x3 block reads as a block. */
.benefit-grid--plain .benefit { background: var(--color-surface); border-color: var(--color-border-soft); box-shadow: var(--shadow-xs); }
.benefit-grid--plain .benefit:hover { border-color: rgba(47, 93, 70, 0.3); box-shadow: var(--shadow-sm); }
.benefit:hover { transform: translateY(-3px); border-color: rgba(47, 93, 70, 0.3); }
.benefit h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; margin-bottom: 4px; }
.benefit p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* Media object rows (alternating image/text) */
.media-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.media-row + .media-row { margin-top: var(--space-8); }
.media-row--rev .media-row__visual { order: -1; }

/* Region / service-area abstract map */
.region-map { position: relative; }
.region-map svg { width: 100%; height: auto; overflow: visible; }
.region-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.region-list li { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }
.region-list li::before {
  content: "";
  width: 13px; height: 13px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-bronze);
}

/* Video grid: deliberately small cards so no single video dominates */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
@media (min-width: 1100px) { .video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Featured video: prominent but capped, so it never dominates the screen */
.video-feature {
  align-self: start;
  border-radius: var(--radius-organic);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface-2);
  max-width: 640px;
}
.video-feature__frame { position: relative; aspect-ratio: 16 / 9; }
.video-feature__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-feature__frame .placeholder { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; }

/* Click-to-play cover. The YouTube player is only built on activation, so
   the page never shows a dead player and loads nothing from youtube. */
.video-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  padding: var(--space-5);
  border: 0;
  cursor: pointer;
  background: linear-gradient(155deg, var(--color-forest), var(--color-forest-deep));
  color: #fff;
  font: inherit;
  text-align: center;
  overflow: hidden;
}
.video-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
}
.video-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 33, 24, 0.82) 0%, rgba(11, 33, 24, 0.18) 55%, rgba(11, 33, 24, 0.30) 100%);
}
.video-cover__play { position: relative; z-index: 1; }
.video-cover__play {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.video-cover__play svg { width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 1.5; }
.video-cover:hover .video-cover__img,
.video-cover:focus-visible .video-cover__img { transform: scale(1.04); }
.video-cover:hover .video-cover__play,
.video-cover:focus-visible .video-cover__play {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.28);
}
.video-cover:focus-visible { outline: 3px solid var(--color-bronze); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .video-cover__img, .video-cover__play { transition: none; }
  .video-cover:hover .video-cover__img, .video-cover:focus-visible .video-cover__img { transform: none; }
}
.video-card__frame .video-cover { padding: var(--space-4); }
.video-card__frame .video-cover__play { width: 54px; height: 54px; }
.video-card__frame .video-cover__play svg { width: 28px; height: 28px; }

/* No-JS fallback inside a video slot: a plain link to the recording, which
   the click-to-play cover replaces as soon as the script runs. */
.video-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: var(--space-5);
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: 650;
  font-size: var(--text-sm);
  background: linear-gradient(155deg, var(--color-forest), var(--color-forest-deep));
}
.video-fallback svg { width: 42px; height: 42px; stroke: var(--color-sage-light); fill: none; }
.video-fallback:hover span, .video-fallback:focus-visible span { text-decoration: underline; }
.video-card__frame 
/* Static before/after pair — no dragging, nothing shifts */
.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 880px; }
.ba-pair figure { margin: 0; }
.ba-pair__frame {
  position: relative;
  border-radius: var(--radius-organic);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-sm);
}
.ba-pair figure:nth-child(2) .ba-pair__frame { border-radius: var(--radius-organic-2); }
.ba-pair__frame svg { display: block; width: 100%; height: auto; }
.ba-pair__tag {
  position: absolute;
  top: 12px; left: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ba-pair__tag--before { background: rgba(32, 39, 35, 0.86); color: #fff; }
.ba-pair__tag--after { background: var(--color-bronze); color: #14251C; }
.ba-pair figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Story steps: short, numbered chunks instead of long prose */
.story { display: grid; gap: var(--space-4); counter-reset: story; }
.story__item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.story__item:nth-child(even) { border-radius: var(--radius-organic-2); background: var(--color-bg-alt); border-color: rgba(47,93,70,0.14); box-shadow: none; }
.story__num {
  counter-increment: story;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-leaf);
  background: var(--color-forest);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}
.story__num::before { content: counter(story, decimal-leading-zero); }
.story h3 { font-family: var(--font-body); font-size: var(--text-lg); margin-bottom: 6px; }
.story p { margin: 0; color: var(--color-text-muted); font-size: 0.97rem; }

/* Video card */
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.video-card__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(155deg, var(--color-forest), var(--color-forest-deep));
}
.video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-card__frame .placeholder {
  position: absolute;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.video-card__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.video-card__desc { font-size: 0.94rem; color: var(--color-text-muted); margin: 0; }
.video-card__body h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; margin: 0; }
.video-card dl { display: grid; gap: 8px; margin: 0; font-size: var(--text-sm); }
.video-card dt {
  font-weight: 700;
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.video-card dd { margin: 0 0 6px; color: var(--color-text-muted); }
.video-card dd:last-child { margin-bottom: 0; }

/* CTA band — the recurring conversion block */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(34px, 4.4vw, 64px);
  background:
    radial-gradient(90% 120% at 8% 0%, #205140 0%, transparent 58%),
    linear-gradient(150deg, var(--color-forest), var(--color-forest-deep));
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.cta-band__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--color-sage-light); }
.cta-band__actions { display: grid; gap: var(--space-3); align-content: center; }
.cta-band__actions .contact-btn { justify-content: flex-start; }
.cta-band__actions .btn { justify-content: center; }
.cta-band__decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.5; }
.cta-band__decor svg { width: 100%; height: 100%; }

/* Contact tiles */
.contact-tile {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
a.contact-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(47,93,70,0.3); color: inherit; }
.contact-tile__label { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.contact-tile__value { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-forest); font-weight: 700; word-break: break-word; }
.contact-tile p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 6px 0 0; }

/* Concern cards: a quoted worry with the plain answer underneath */
.concerns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.concern {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 10px);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.concern:nth-child(even) { border-radius: var(--radius-organic-2); }
.concern::before {
  content: "";
  position: absolute;
  left: 0; top: 18px; bottom: 18px;
  width: 5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-bronze), var(--color-sage));
}
.concern:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.concern__q {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-forest);
  line-height: 1.35;
  margin: 0 0 var(--space-3);
}
.concern__q::before { content: "„"; color: var(--color-bronze); font-size: 1.2em; }
.concern__q::after { content: "”"; color: var(--color-bronze); font-size: 1.2em; }
.concern p { margin: 0; color: var(--color-text-muted); font-size: 0.97rem; line-height: 1.6; }

/* Stacked label/value list — used where the labels are long */
.qa-list { display: grid; gap: 12px; margin: 0; }
.qa-list dt {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 3px;
}
.qa-list dd { margin: 0; color: var(--color-text-muted); font-size: 0.96rem; line-height: 1.55; }

/* Problem navigator chips */
.problem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
/* Six chips read best as two rows of three; auto-fill would leave a row of
   four and a row of two. */
@media (min-width: 721px) { .problem-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.problem-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
  padding: 14px 18px;
  border-radius: 20px 24px 20px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-forest);
  font-weight: 650;
  font-size: 0.97rem;
  text-decoration: none;
  line-height: 1.35;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.problem-chip svg { width: 22px; height: 22px; flex: none; stroke: var(--color-primary); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.problem-chip:hover, .problem-chip:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  background: var(--color-sage-pale);
  color: var(--color-forest);
}
.problem-chip--static, .problem-chip--static:hover, .problem-chip--static:focus-visible {
  transform: none;
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: default;
}

/* Comparison two-column (kivágás vs átalakítás) */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.compare__col { padding: var(--space-6); border-radius: var(--radius-organic); }
.compare__col--negative { background: var(--color-surface-2); border: 1px solid var(--color-stone-deep); }
.compare__col--positive {
  background: linear-gradient(160deg, var(--color-bg-alt), #d1e0d5);
  border: 1px solid rgba(47, 93, 70, 0.24);
  box-shadow: var(--shadow-sm);
}
.compare__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.compare__head h3 { margin: 0; }

/* Anchor list / mini table of contents */
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li { margin: 0; }
.toc a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-forest);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toc a::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-leaf); background: var(--color-sage); flex: none; }
.toc a:hover { background: var(--color-sage-pale); border-color: var(--color-primary); transform: translateY(-2px); }
.toc a:hover::before { background: var(--color-bronze); }

/* Collapsible B2B / secondary block */
.disclosure {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  overflow: hidden;
}
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-forest);
  list-style: none;
  transition: background-color var(--dur) var(--ease-out);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { background: var(--color-sage-pale); }
.disclosure > summary::after {
  content: "";
  width: 22px; height: 22px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173D2D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 20px no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.disclosure[open] > summary::after { transform: rotate(180deg); }
.disclosure__body { padding: 0 var(--space-5) var(--space-5); }

/* ==========================================================================
   11  BEFORE / AFTER SLIDER
   Keyboard-operable via a native range input; works with tap, drag and keys.
   ========================================================================== */
.ba {
  position: relative;
  border-radius: var(--radius-organic);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-md);
}
.ba__stage {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  isolation: isolate;
}
.ba__layer { position: absolute; inset: 0; }
.ba__layer svg { width: 100%; height: 100%; display: block; }
/* Photo pairs are shown whole on white, so nothing is cropped out of the
   comparison; both layers fill the same box, so the wipe stays aligned. */
.ba__layer img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }

/* "Három kiemelt projekt": three equal columns, each with the before/after
   pair on top and the text below, so the row reads as one set. */
.project-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-organic);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
}
.project-card:nth-child(3n+2) { border-radius: var(--radius-organic-2); }
.project-card .ba {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--color-border-soft);
}
.project-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.project-card__body h3 { font-size: var(--text-lg); margin: 0; }
.project-card__body p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* Cards in a row whose closing link should share one baseline, however much
   text sits above it. */
.cards-aligned > .card { display: flex; flex-direction: column; }
.cards-aligned > .card > .link-arrow { margin-top: auto; }

/* Kiemelt videó: the explanation beside the player. The text column is a
   little wider than a plain asymmetric grid and sits closer to the video, so
   the two read as one block rather than two islands. Below 901px the shared
   single-column rule takes over, so this only shapes the desktop view. */
@media (min-width: 901px) {
  .video-split { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); gap: var(--space-4); }
}

/* The call to action under the player runs the full width of the container
   and centres its own content. */
.video-cta { text-align: center; }
.video-cta h3 { margin-bottom: var(--space-3); }
.video-cta p { margin-inline: auto; max-width: 62ch; }
.video-cta .cluster { justify-content: center; }

/* The stage-by-stage carousel that belongs to one project sits inside the
   same card, under its comparison. */
/* The "further views" block runs the full width of the card's text column —
   it is part of the same content, not an indented aside. */
.project-card__extra { padding: var(--space-4) 0 0; }
.project-card .carousel__viewport { border-radius: 12px; }

/* The reference archive: three panels across on a desktop, two on a tablet,
   one on a phone. Each panel keeps its own height — a single photo and a
   six-frame carousel do not have to pretend to be the same size. */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1080px) {
  .ref-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
}
@media (max-width: 560px) { .ref-grid { grid-template-columns: minmax(0, 1fr); } }

/* In the archive a panel's picture is the whole media area, so a plain photo
   sits flush in the frame the same way a comparison or a carousel does. */
.ref-grid .project-card > .photo {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--color-border-soft);
}
.ref-grid .project-card > .carousel { gap: 0; }
.ref-grid .project-card > .carousel .carousel__viewport {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.ref-grid .project-card > .carousel .carousel__caption { padding: 10px var(--space-5) 0; }
/* The dots sit a little lower, so they read as the carousel's own footer and
   not as part of the title below. */
.ref-grid .project-card > .carousel .carousel__dots { margin-top: 6px; padding-bottom: var(--space-3); }

/* Panel titles in the archive sit a step below the card headings elsewhere:
   there are many of them, and the picture leads. */
.ref-grid .project-card__body h3 { font-size: var(--text-base); }

/* Zoomable thumbnail. The button carries no chrome of its own: the frame it
   sits in already draws the card. */
.zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: inherit;
}
.masonry__item .zoom { line-height: 0; }
.photo .zoom { position: absolute; inset: 0; height: 100%; }
.zoom:focus-visible { outline: 3px solid var(--color-bronze); outline-offset: 3px; }

/* A nagyító a teljes képernyőt elfoglalja, nem a kép köré zsugorodik. Így a
   léptető nyilak és a bezárás mindig ugyanott van a képernyőn, függetlenül
   attól, hogy az épp látott fotó álló, fekvő vagy panoráma – a szem nem
   keresi őket újra minden lapozásnál. */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  /* A dvh a mobil böngészők változó címsávjával is a valódi képernyőt méri;
     ahol nincs, ott a vh sor marad érvényben. */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  padding: clamp(56px, 7vh, 84px) clamp(72px, 8vw, 128px) clamp(18px, 3vh, 32px);
}
/* A bezáró gomb űrlapja csak a <dialog> zárásához kell; saját doboza nem
   foglalhat sort a rácsban. */
.lightbox form { display: contents; }
.lightbox::backdrop { background: rgba(12, 30, 22, 0.86); }
.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: var(--radius-organic);
  background: #fff;
}
.lightbox__caption {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px auto 0;
  max-width: 70ch;
  text-align: center;
  color: #EDF2EE;
  font-size: var(--text-sm);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.lightbox__count { font-weight: 700; color: var(--color-bronze-light); flex: none; }
/* Rögzített helyű léptetők: a képernyő két széléhez igazodnak, nem a képhez. */
.lightbox__step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-forest);
  cursor: pointer;
}
.lightbox__step svg { width: 22px; height: 22px; }
.lightbox__step--prev { left: clamp(10px, 2vw, 28px); }
.lightbox__step--next { right: clamp(10px, 2vw, 28px); }
.lightbox--single .lightbox__step { display: none; }
@media (max-width: 700px) {
  .lightbox[open] { padding-inline: clamp(8px, 3vw, 18px); }
  .lightbox__step { width: 44px; height: 44px; }
  .lightbox__step--prev { left: 8px; }
  .lightbox__step--next { right: 8px; }
}
.lightbox__close {
  position: absolute;
  top: clamp(10px, 2vh, 22px);
  right: clamp(10px, 2vw, 22px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: #fff;
  color: var(--color-forest);
  cursor: pointer;
}
.lightbox__close svg { width: 18px; height: 18px; }

/* Caption strip under a carousel: the counter is always there, so the row
   keeps its height whether or not a slide carries a caption. */
.carousel__caption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  min-height: 1.5em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.carousel__count { font-weight: 700; color: var(--color-primary); flex: none; }

/* A supplementary carousel belongs to a project that already has its main
   picture above it, so it sits in a shallower frame and stays secondary. */
.carousel--sub .carousel__slide { aspect-ratio: 16 / 10; }

/* Reduced to one picture — by a missing file, say — the controls come off. */
.carousel--single .carousel__arrow,
.carousel--single .carousel__dots { display: none; }
.carousel--single .carousel__count { display: none; }

/* Kiinduló helyzet / Döntés / Eredmény list inside a project card. */
.story-meta { display: grid; gap: 10px; margin: 0; font-size: var(--text-sm); }
.story-meta dt {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-primary);
  margin-bottom: 2px;
}
.story-meta dd { margin: 0; color: var(--color-text-muted); line-height: 1.55; }
.ba__layer--after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.ba__badge {
  position: absolute;
  top: 12px;
  z-index: 3;
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ba__badge--before { left: 12px; background: rgba(32, 39, 35, 0.86); color: #fff; }
.ba__badge--after { right: 12px; background: rgba(181, 154, 97, 0.95); color: #14251C; }
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(23, 61, 45, 0.25);
  z-index: 4;
  pointer-events: none;
}
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: var(--radius-leaf);
  background: #fff;
  box-shadow: 0 6px 20px rgba(23, 61, 45, 0.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24' fill='none' stroke='%232F5D46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 7 5 12 11 17'/%3E%3Cpolyline points='21 7 27 12 21 17'/%3E%3C/svg%3E");
  background-size: 26px;
  background-position: center;
  background-repeat: no-repeat;
}
.ba__range {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 100%; cursor: ew-resize; }
.ba__range::-moz-range-thumb { width: 52px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba__range:focus-visible + .ba__handle::after { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.ba__caption { padding: var(--space-4) var(--space-5); background: var(--color-surface); border-top: 1px solid var(--color-border-soft); }
.ba__caption h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.ba__caption dl { display: grid; gap: 6px; margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.ba__caption dt { font-weight: 700; color: var(--color-primary); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.ba__caption dd { margin: 0 0 8px; color: var(--color-text-muted); }
.ba__caption dd:last-child { margin-bottom: 0; }
.ba__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.ba__note::before { content: ""; width: 11px; height: 11px; border-radius: var(--radius-leaf); background: var(--color-bronze); flex: none; }

/* ==========================================================================
   12  PROCESS TIMELINE
   ========================================================================== */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: var(--space-5); }
.timeline::before {
  content: "";
  position: absolute;
  left: 26px; top: 34px; bottom: 34px;
  width: 2px;
  background: repeating-linear-gradient(180deg, var(--color-sage) 0 7px, transparent 7px 14px);
}
.timeline > li {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: var(--space-4);
  margin: 0;
  align-items: start;
}
.timeline__body {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-xs);
}
.timeline > li:nth-child(even) .timeline__body { border-radius: var(--radius-organic-2); background: var(--color-bg-alt); border-color: rgba(47,93,70,0.14); box-shadow: none; }
.timeline__body h3 { font-family: var(--font-body); font-size: var(--text-lg); margin-bottom: 6px; }
.timeline__body p { margin: 0; color: var(--color-text-muted); font-size: 0.97rem; }
.card--sage .timeline__body { background: var(--color-surface); }
.card--sage .timeline > li:nth-child(even) .timeline__body {
  background: var(--color-surface);
  border-color: rgba(47, 93, 70, 0.2);
  box-shadow: var(--shadow-xs);
}
.on-forest .timeline::before { background: repeating-linear-gradient(180deg, rgba(168,192,174,0.5) 0 7px, transparent 7px 14px); }
.on-forest .timeline__body,
.on-forest .timeline > li:nth-child(even) .timeline__body {
  background: rgba(255,255,255,0.06);
  border-color: rgba(168,192,174,0.25);
  box-shadow: none;
}
.on-forest .timeline__body p { color: var(--color-sage-light); }

/* Horizontal step strip (compact variant) */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; }
.steps__item { position: relative; padding-top: var(--space-5); }
.steps__item::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-sage);
  display: block;
  margin-bottom: var(--space-2);
}
.steps__item::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-bronze), var(--color-sage));
}
.steps__item h3 { font-size: var(--text-lg); margin-bottom: 6px; }
.steps__item p { color: var(--color-text-muted); font-size: 0.97rem; margin: 0; }

/* ==========================================================================
   13  SHAPE (FORMAVILÁG) GALLERY — hand-drawn CSS/SVG topiary silhouettes
   ========================================================================== */
.shapes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
.shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-3);
  border-radius: 22px 26px 22px 26px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  text-align: center;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.shape:hover { transform: translateY(-4px); border-color: rgba(47,93,70,0.32); box-shadow: var(--shadow-sm); }
.shape svg { width: 100%; height: auto; max-width: 84px; }
.shape__name { font-size: var(--text-sm); font-weight: 650; color: var(--color-forest); line-height: 1.3; }
.on-forest .shape { background: rgba(255,255,255,0.06); border-color: rgba(168,192,174,0.24); }
.on-forest .shape__name { color: #fff; }

/* Hedge shaping cards — silhouette + name + one line of explanation */
.hedge-shapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hedge-shape {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-organic);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.hedge-shape:nth-child(even) { border-radius: var(--radius-organic-2); }
.hedge-shape:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(47, 93, 70, 0.3); }
.hedge-shape__art {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-soft);
}
.hedge-shape__art svg { width: auto; height: 148px; margin-inline: auto; }
.hedge-shape h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; margin: 0; }
.hedge-shape p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.on-forest .hedge-shape { background: rgba(255,255,255,0.06); border-color: rgba(168,192,174,0.26); box-shadow: none; }
.on-forest .hedge-shape h3 { color: #fff; }
.on-forest .hedge-shape p { color: var(--color-sage-light); }
.on-forest .hedge-shape__art { border-bottom-color: rgba(168,192,174,0.26); }

/* ==========================================================================
   14  GALLERY & FILTERS
   ========================================================================== */
.filters { display: grid; gap: var(--space-4); }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.filters__legend {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  min-width: 116px;
  padding: 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-stone-deep);
  background: var(--color-surface);
  color: var(--color-forest);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.chip:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.chip[aria-pressed="true"] {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}
/* State is never signalled by colour alone — a leaf glyph appears when active */
.chip[aria-pressed="true"]::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: var(--radius-leaf);
  background: var(--color-bronze);
  flex: none;
}

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.gallery__item {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-organic);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.gallery__item:nth-child(3n+2) { border-radius: var(--radius-organic-2); }
.gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gallery__frame { position: relative; aspect-ratio: 4 / 3; }
.gallery__frame .placeholder { height: 100%; min-height: 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--color-border-soft); }

/* A silhouette of the actual topiary form sits behind each pending photo, so a
   grid of placeholders still reads as a grid of distinct projects. */
.frame-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px 0 6px;
  pointer-events: none;
  opacity: 0.16;
  z-index: 0;
}
.frame-watermark svg { height: 100%; width: auto; }
.gallery__frame .placeholder {
  position: relative;
  z-index: 1;
  align-content: end;
  gap: 6px;
  padding: var(--space-6) var(--space-4) var(--space-4);
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(239, 237, 228, 0) 34%, rgba(239, 237, 228, 0.94) 72%),
    repeating-linear-gradient(135deg, rgba(215, 210, 198, 0.20) 0 12px, transparent 12px 24px);
}
.gallery__frame .placeholder > svg { display: none; }
.gallery__frame { background: var(--color-surface-2); }
.gallery__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
/* The photo sits on white and is shown whole – mixed aspect ratios keep
   white space beside or above them rather than being cropped. A photo that
   is not in place yet leaves the form silhouette behind it visible. */
.gallery__frame img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  display: block;
  border-bottom: 1px solid var(--color-border-soft);
}
.gallery__body h3 { font-size: var(--text-lg); margin: 0; }
.gallery__desc { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.6; }
.gallery__meta { display: grid; gap: 6px; font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.gallery__meta div { display: flex; gap: 8px; }
.gallery__meta dt { font-weight: 700; color: var(--color-forest); min-width: 88px; flex: none; }
.gallery__meta dd { margin: 0; }
.gallery__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }

/* Standalone photo slot. Fixed frame so a row of them lines up, but the photo
   itself is shown whole on white – mixed aspect ratios keep white space beside
   or above them, nothing is cropped. */
.photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-organic);
  border: 1px solid var(--color-border-soft);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.photo--portrait { aspect-ratio: 3 / 4; }
.photo--wide { aspect-ratio: 16 / 10; }
/* A row whose photo is not in place yet runs full width instead of holding
   an empty column open beside it. */
.grid.is-solo, .media-row.is-solo, .split.is-solo { grid-template-columns: minmax(0, 1fr); }
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* "További képek" – a plain CSS-column masonry. Every photo keeps its own
   aspect ratio, so nothing is cropped, and the section takes any number of
   images without further markup. */
.masonry {
  columns: 4 230px;
  column-gap: var(--space-4);
}
/* JS-sel valódi oszlopokra bontva. A CSS-hasáb ugyanis kiegyensúlyozza magát:
   ha bárhol megnő egy kép, a böngésző elemeket tol át a hasábok között, és a
   rács teteje is elmozdul. Külön oszlopokban egy betöltődő kép csak a saját
   oszlopában, önmaga alatt tol – amit a látogató épp néz, az a helyén marad.
   JS nélkül a fenti hasábok maradnak, tehát a galéria akkor is áll. */
.masonry.is-split {
  columns: auto;
  display: flex;
  align-items: flex-start;
}
.masonry.is-split > .masonry__col { flex: 1 1 0; min-width: 0; }
.masonry__item {
  break-inside: avoid;
  margin: 0 0 var(--space-4);
}
.masonry__item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px 16px 14px 16px;
  border: 1px solid var(--color-border-soft);
  background: #fff;
  box-shadow: var(--shadow-sm);
  /* A csempe akkor is elfoglalja a helyét, amikor a fotó még nincs meg.
     Enélkül mind a nulla magasságú: a rács pár száz pixelre esik össze, a
     böngésző így minden képet "a nézet közelinek" lát, egyszerre tölti be
     mindet, és minden egyes érkező kép újraosztja a négy hasábot – ettől
     ugrál a galéria görgetés közben. A 4:3 az oldal alapkerete; amint a
     fotó megjött, a csempe a kép saját arányát veszi fel. */
  aspect-ratio: 4 / 3;
}
.masonry__item img.is-loaded { aspect-ratio: auto; }
@media (max-width: 560px) {
  .masonry { columns: 2 140px; column-gap: var(--space-3); }
  .masonry__item { margin-bottom: var(--space-3); }
}

/* ==========================================================================
   14b  ÜGYFÉLVÉLEMÉNYEK
   Egy vélemény látszik egyszerre, teljes hosszában – a három megbízó neve
   viszont mindig egyszerre olvasható a felső sávban. Ez a szekció a hero
   alatt fut minden oldalon, ezért nem nőhet a képernyő magasságán túl: a
   sávos váltás rövid marad, a szöveg mégsem kerül levágásra sehol.
   ========================================================================== */
.reviews { padding-top: clamp(30px, 3.4vw, 56px); }
.reviews .blob--rev-a {
  width: 420px; height: 380px;
  top: -140px; right: -120px;
}
.reviews .rings--rev {
  width: 460px; height: 460px;
  left: -190px; bottom: -180px;
  opacity: 0.35;
}

/* A kártya: egyetlen papírfelület, felül a megbízók sávjával. */
.reviews__panel {
  position: relative;
  z-index: var(--z-content);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-organic);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* --- A megbízók sávja ---------------------------------------------------- */
.reviews__rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border-soft);
}
.reviews__tab {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 14px var(--space-5);
  text-align: left;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--color-border-soft);
  /* A felső jel az aktív fület jelöli; mindig ott van, csak átlátszóan, így
     a váltás nem told el egyetlen sort sem. */
  box-shadow: inset 0 4px 0 transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.reviews__tab:last-child { border-right: 0; }
.reviews__tab:hover { background: rgba(255, 255, 255, 0.6); color: var(--color-forest); }
.reviews__tab[aria-selected="true"] {
  background: var(--color-surface);
  box-shadow: inset 0 4px 0 var(--color-bronze);
  color: var(--color-forest);
}
.reviews__tab-mark {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-bronze);
  flex: none;
}
.reviews__tab[aria-selected="true"] .reviews__tab-mark { color: var(--color-primary); }
.reviews__tab-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.reviews__tab-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  color: inherit;
}
.reviews__tab-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --- Egy vélemény -------------------------------------------------------- */
.reviews__stage { padding: clamp(22px, 2.6vw, 40px); }
/* Bal oldalt a kis fotó, közvetlenül alatta a megbízó neve és cége; jobbra,
   a két sor mellett végig a vélemény szövege. A bal hasáb keskeny és fix: a
   fotóhoz és az aláíráshoz van szabva, minden más hely a szövegé – így a két
   hasáb nagyjából egy vonalban ér véget akkor is, amikor a szöveg hosszú. */
.review {
  display: grid;
  grid-template-columns: clamp(190px, 17.5vw, 250px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "media body"
    "by    body";
  column-gap: clamp(20px, 2.6vw, 40px);
  row-gap: var(--space-4);
  align-items: start;
}
.review__media { grid-area: media; }
.review__body { grid-area: body; }
.review__by { grid-area: by; }
.review:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-sm); }

/* A fotó a saját képarányában, teljes egészében látszik: a keret 5:4, a kép
   contain módban ül benne fehér alapon, tehát álló és fekvő kép sem sérül,
   és semmi nincs körré vágva. */
.review__media {
  /* Magassági keret: ennél magasabb nem lesz a fotó akkor sem, ha álló – a
     JS ehhez méretezi a szélességét, hogy a keret felvegye a kép saját
     arányát, de a két hasáb ne csússzon szét. */
  --rev-media-h: clamp(150px, 13vw, 210px);
  --rev-media-max: 100%;
  position: relative;
  margin: 0;
  width: var(--rev-media-max);
  max-width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-organic-2);
  border: 1px solid var(--color-border-soft);
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.review__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #fff;
}
/* Fotó nélküli vélemény: a szöveg átveszi a teljes szélességet. */
.review--no-media {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas: "body" "by";
}

.review__body { position: relative; padding-top: 4px; }
.review__quote {
  display: block;
  width: 46px;
  color: #D9C9A5;
  margin-bottom: var(--space-3);
}
.review__quote svg { display: block; width: 100%; height: auto; }
.review__title {
  font-size: var(--text-2xl);
  line-height: 1.24;
  margin: 0 0 var(--space-4);
  color: var(--color-forest);
  text-wrap: pretty;
}
.review__text { color: var(--color-text); }
.review__text p { margin: 0 0 var(--space-4); line-height: var(--leading-body); }
.review__text p:last-child { margin-bottom: 0; }
.review__points {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: 10px;
}
.review__points li {
  position: relative;
  padding-left: 26px;
  line-height: var(--leading-snug);
}
.review__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 11px;
  height: 11px;
  background: var(--color-bronze);
  border-radius: var(--radius-leaf);
  transform: rotate(-12deg);
}
.review__points strong { color: var(--color-forest); }

.review__by {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}
/* Asztali nézetben a fotó alatti keskeny hasábban áll: a monogram a név fölé
   kerül, így a teljes hasábszélesség a névé és a cégnévé marad. */
@media (min-width: 1001px) {
  .review__by { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.review__monogram {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: linear-gradient(145deg, var(--color-primary), #3d7357);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(23, 61, 45, 0.18);
}
.review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review__name { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-forest); }
.review__role { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Léptetés ------------------------------------------------------------ */
.reviews__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: 0 clamp(22px, 2.6vw, 40px) clamp(22px, 2.6vw, 34px);
}
.reviews__arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-forest);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reviews__arrow svg { width: 19px; height: 19px; }
.reviews__arrow:hover, .reviews__arrow:focus-visible {
  background: var(--color-sage-pale);
  border-color: var(--color-primary);
}
.reviews__dots { display: inline-flex; align-items: center; gap: 9px; }
.reviews__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-leaf);
  background: var(--color-stone-deep);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reviews__dot.is-on { background: var(--color-primary); transform: scale(1.3) rotate(-12deg); }

/* JS nélkül nincs mit léptetni: a három vélemény egymás alatt, teljes
   hosszában olvasható, a sáv és a nyilak pedig kimaradnak. */
.no-js .reviews__rail,
.no-js .reviews__nav { display: none; }
/* A rejtett panelek a jelöléstől fogva rejtettek, hogy JS-sel se villanjon fel
   mind a három. JS nélkül viszont nincs mivel váltani köztük, ezért ott
   visszakapják a helyüket – a globális [hidden] szabályt is felülírva. */
.no-js .review[hidden] { display: grid !important; }
.no-js .review + .review { margin-top: clamp(28px, 3vw, 48px); padding-top: clamp(28px, 3vw, 48px); border-top: 1px solid var(--color-border-soft); }

@media (max-width: 1000px) {
  .review {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "media" "body" "by";
  }
  /* Fotó nélkül nem marad üres sor a szöveg fölött. */
  .review--no-media {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "body" "by";
  }
  .review__media {
    aspect-ratio: 4 / 3;
    --rev-media-h: clamp(150px, 34vw, 230px);
    --rev-media-max: clamp(180px, 62vw, 320px);
  }
  .reviews__tab { padding-inline: var(--space-4); }
}
@media (max-width: 760px) {
  .reviews__rail { grid-template-columns: minmax(0, 1fr); }
  .reviews__tab {
    min-height: 56px;
    border-right: 0;
    border-bottom: 1px solid var(--color-border-soft);
    box-shadow: inset 3px 0 0 transparent;
  }
  .reviews__tab:last-child { border-bottom: 0; }
  .reviews__tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--color-bronze); }
  /* Mobilon a nem aktív fülek összecsuknák a képernyőt, ezért csak a
     megbízó neve marad, a beosztás a véleményben úgyis ott van. */
  .reviews__tab-meta { display: none; }
  .reviews__tab[aria-selected="true"] .reviews__tab-meta { display: block; }
  .review__quote { width: 38px; }
}
@media (max-width: 560px) {
  .review__media { aspect-ratio: 4 / 3; }
  .review__by { gap: 11px; }
  .review__monogram { width: 40px; height: 40px; font-size: 0.9rem; }
}

/* ==========================================================================
   15  FAQ ACCORDION
   ========================================================================== */
.faq { display: grid; gap: var(--space-3); }
.faq__item {
  border: 1px solid var(--color-border);
  border-radius: 22px 26px 22px 26px;
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq__item.is-open { border-color: rgba(47, 93, 70, 0.34); box-shadow: var(--shadow-sm); }
/* The trigger is wrapped in a heading; without this its default bottom margin
   leaves a stray strip under the closed row. */
.faq__item > h3 { margin: 0; }
.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-forest);
  line-height: 1.35;
  transition: background-color var(--dur) var(--ease-out);
}
.faq__trigger:hover { background: var(--color-sage-pale); }
.faq__icon {
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-sage-pale);
  border: 1px solid rgba(47, 93, 70, 0.2);
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-forest);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq__icon::before { width: 14px; height: 2px; margin: -1px 0 0 -7px; }
.faq__icon::after { width: 2px; height: 14px; margin: -7px 0 0 -1px; }
.faq__trigger[aria-expanded="true"] .faq__icon { background: var(--color-forest); transform: rotate(-90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::before { background: #fff; }
.faq__trigger[aria-expanded="true"] .faq__icon::after { opacity: 0; }
.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms var(--ease-out);
}
.faq__panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 280ms;
}
.faq__item.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__item.is-open .faq__panel > div { visibility: visible; transition-delay: 0s; }
.faq__panel-inner { padding: 0 var(--space-5) var(--space-5); }
.faq__panel p { color: var(--color-text-muted); max-width: 96ch; }
.faq__panel-inner > :last-child { margin-bottom: 0; }

/* ==========================================================================
   16  TABLES
   ========================================================================== */
/* The table keeps its own minimum width and scrolls sideways on a narrow
   screen. The two soft edge shadows are the visitor's only cue that there is
   more to the right, and they fade out as the frame is scrolled to its end. */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-organic);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background:
    linear-gradient(to right, var(--color-surface) 40%, rgba(255, 255, 255, 0)) left / 44px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 40%, rgba(255, 255, 255, 0)) right / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(23, 61, 45, 0.14), rgba(23, 61, 45, 0)) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 61, 45, 0.14), rgba(23, 61, 45, 0)) right / 16px 100% no-repeat scroll,
    var(--color-surface);
}
/* The table's title sits above the scrolling frame, so it is never cut off. */
/* A sub-heading that opens a run of images inside a section. */
.section-sub {
  margin: 0 0 var(--space-5);
  font-size: var(--text-lg);
  text-align: center;
}

.table-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
  margin: 0;
}
table.data caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-4) var(--space-5) var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}
table.data th, table.data td { padding: 13px var(--space-5); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border-soft); }
table.data thead th {
  background: var(--color-bg-alt);
  color: var(--color-forest);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  border-bottom: 1px solid rgba(47,93,70,0.2);
}
table.data tbody tr:last-child th, table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:nth-child(even) { background: rgba(221, 231, 223, 0.35); }
table.data tbody th { font-weight: 650; color: var(--color-forest); }

/* ==========================================================================
   17  FORMS
   ========================================================================== */
.form-panel {
  position: relative;
  padding: clamp(24px, 3.2vw, 46px);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.form-panel::before {
  content: "";
  position: absolute;
  right: -80px; top: -90px;
  width: 260px; height: 240px;
  border-radius: var(--radius-blob);
  background: radial-gradient(closest-side, rgba(125, 155, 131, 0.24), transparent);
  pointer-events: none;
}
.form-panel > * { position: relative; z-index: 1; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }

.field label:not(.consent):not(.upload):not(.option), .fieldset__legend {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-forest);
  letter-spacing: 0.01em;
}
.field .req { color: var(--color-danger); margin-left: 3px; }
.form-lead-note {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--color-forest);
}
/* Answers the question every visitor has before they hit send. */
.form-reply {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  padding: 9px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-sage-pale);
  border: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--color-forest);
}
.form-reply svg { width: 18px; height: 18px; flex: none; stroke: var(--color-primary); }
.form-panel .contact-pair { margin-bottom: var(--space-5); }
.form-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}
.form-note::before {
  content: "";
  width: 11px; height: 11px;
  flex: none;
  border-radius: var(--radius-leaf);
  background: var(--color-bronze);
}
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-stone-deep);
  border-radius: 14px 16px 14px 16px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23173D2D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 19px;
  padding-right: 46px;
}
.field input::placeholder, .field textarea::placeholder { color: #7c857d; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-sage); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(47, 93, 70, 0.14);
  outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.field.has-error input, .field.has-error select, .field.has-error textarea, .field.has-error .upload {
  border-color: var(--color-danger);
  background: #fdf6f4;
}
.field__error {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--color-danger);
}
.field__error::before {
  content: "";
  width: 15px; height: 15px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A2E1F' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='16.5' x2='12' y2='16.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field.has-error .field__error { display: flex; }

/* Radio / checkbox cards */
.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset__legend { display: block; margin-bottom: var(--space-3); padding: 0; }
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: 16px 18px 16px 18px;
  border: 1.5px solid var(--color-stone-deep);
  background: var(--color-bg);
  cursor: pointer;
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.option:hover { border-color: var(--color-sage); background: var(--color-surface); }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__mark {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: var(--radius-leaf);
  border: 2px solid var(--color-stone-deep);
  background: var(--color-surface);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.option__mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--radius-leaf);
  background: transparent;
  transition: background-color var(--dur) var(--ease-out);
}
.option input:checked ~ .option__mark { border-color: var(--color-primary); }
.option input:checked ~ .option__mark::after { background: var(--color-primary); }
.option:has(input:checked) { border-color: var(--color-primary); background: var(--color-sage-pale); }
.option:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }

/* Consent checkbox */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4);
  border-radius: 16px 18px 16px 18px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-muted);
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent .option__mark { margin-top: 2px; }
.consent:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.field.has-error .consent { border-color: var(--color-danger); }

/* File upload (custom, never default browser chrome) */
.upload {
  position: relative;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  border: 2px dashed var(--color-stone-deep);
  border-radius: var(--radius-organic);
  background: var(--color-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.upload:hover, .upload.is-drag { border-color: var(--color-primary); background: var(--color-sage-pale); }
.upload:has(input:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.upload input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-leaf);
  background: var(--color-sage-pale);
  border: 1px solid rgba(47,93,70,0.2);
}
.upload__icon svg { width: 24px; height: 24px; stroke: var(--color-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.upload__title { font-weight: 700; color: var(--color-forest); }
.upload__hint { font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); max-width: 44ch; }
.upload__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.upload__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  font-size: var(--text-xs);
  color: var(--color-text);
  text-align: left;
}
.upload__list li::before { content: ""; width: 11px; height: 11px; border-radius: var(--radius-leaf); background: var(--color-primary); flex: none; }

/* Submit row + status */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.form-status {
  display: none;
  gap: var(--space-4);
  align-items: flex-start;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-radius: var(--radius-organic);
  border: 1px solid rgba(47, 93, 70, 0.28);
  background: var(--color-sage-pale);
}
.form-status.is-visible { display: flex; }
.form-status.is-error { background: #fbf1ee; border-color: rgba(138, 46, 31, 0.35); }
.form-status__icon {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius-leaf);
  background: var(--color-primary);
  color: #fff;
}
.form-status.is-error .form-status__icon { background: var(--color-danger); }
.form-status__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-status h3 { font-size: var(--text-lg); margin-bottom: 6px; }
.form-status p { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.form-status p + p { margin-top: 8px; }

/* ==========================================================================
   18  FOOTER
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
  color: #fff;
  padding-block: clamp(48px, 6vw, 84px) 0;
}
.footer a { color: var(--color-sage-light); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--color-bronze); }
.footer__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
  padding-bottom: var(--space-7);
}
.footer__brand .brand__name, .footer .brand { color: #fff; }
.footer__brand p { color: var(--color-sage-light); font-size: var(--text-sm); max-width: 34ch; margin-top: var(--space-4); }
.footer__brand .brand__tag { color: var(--color-bronze-light); }
/* Builder credit. The supplied snippet used #284b63, which is unreadable on
   this dark footer, so it takes the footer's own muted tone instead. */
.footer__credit { margin-top: var(--space-5); }
.footer__credit p {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-sage-light);
}
.footer__credit a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-sage-light);
}
.footer__credit img { width: 30px; height: auto; border-radius: 6px; flex: none; }
.footer__credit a:hover span, .footer__credit a:focus-visible span { text-decoration: underline; color: #fff; }
.footer__brand .brand__mark { background: #fff; border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.footer h2, .footer h3 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-bronze-light);
  margin-bottom: var(--space-4);
  font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.footer li { margin: 0; }
.footer li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 0.94rem; padding: 4px 0; }
.footer__contact { display: grid; gap: var(--space-3); }
.footer__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 650; font-size: 1rem; }
.footer__contact svg { width: 18px; height: 18px; stroke: var(--color-bronze-light); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(168, 192, 174, 0.24);
  font-size: var(--text-xs);
  color: var(--color-sage-light);
}
.footer__bottom p { margin: 0; }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__bottom li a { min-height: 44px; min-width: 44px; font-size: var(--text-xs); }

/* ==========================================================================
   19  UTILITIES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.relative { position: relative; z-index: var(--z-content); }
.full { grid-column: 1 / -1; }

/* Quiet entrance for a single lead element per view (subtle, opt-in) */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 340ms var(--ease-out), transform 340ms var(--ease-out); }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   20  RESPONSIVE
   Breakpoints: 1560 / 1460 / 1240 / 900 / 720 / 560 / 400
   ========================================================================== */

@media (max-width: 1560px) {
  /* The phone number keeps its place in the drawer and the footer */
  .header__phone { display: none; }
}

@media (max-width: 1460px) {
  .nav__link { padding: 9px 9px; font-size: 0.84rem; }
  .nav__list { gap: 0; }
}

@media (max-width: 1240px) {
  /* Desktop nav gives way to the drawer well before it can crowd */
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .shapes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-strip__item:nth-child(2n) { border-right: 0; }
  .trust-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-soft); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }

  /* The dock already carries the primary CTA down here */
  .header__actions .btn { display: none; }

  .hero__grid, .hero--inner .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hero__copy { max-width: none; }
  .hero__sub { max-width: 46ch; }
  .hero-art { max-width: 500px; }
  .hero-proof { position: static; width: 100%; max-width: 440px; margin: var(--space-5) auto 0; }

  .grid--2, .grid--3, .grid--4,
  .grid--asym, .grid--asym-rev,
  .media-row, .compare, .split,
  .benefit-grid, .steps, .gallery,
  .section-head--split, .cta-band__grid, .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid--3.grid--keep-2, .grid--4.grid--keep-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hedge-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concerns { grid-template-columns: minmax(0, 1fr); }
  .ba-pair { grid-template-columns: minmax(0, 1fr); }
  .cta-band__actions { margin-top: var(--space-5); }
  .media-row--rev .media-row__visual { order: 0; }
  .section-head--split .section-head__aside { border-left: 0; border-top: 2px solid var(--color-stone); padding-left: 0; padding-top: var(--space-4); }
  .split { border-radius: var(--radius-md); }

  /* On phones the dock becomes a full-width bar. Its clearance is added to the
     footer so the dark block runs to the bottom edge. */
  .dock {
    left: 0; right: 0; bottom: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--color-border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(23, 61, 45, 0.12);
    background: rgba(245, 243, 237, 0.97);
  }
  .dock__cta { flex: 1; justify-content: center; }
  .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  :root { --space-section: clamp(40px, 9vw, 60px); }

  .shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hedge-shapes { grid-template-columns: minmax(0, 1fr); }
  .grid--3.grid--keep-2, .grid--4.grid--keep-2 { grid-template-columns: minmax(0, 1fr); }
  .trust-strip { grid-template-columns: minmax(0, 1fr); }
  .trust-strip__item { border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .trust-strip__item:last-child { border-bottom: 0; }
  .trust-strip__item:nth-child(-n+2) { border-bottom: 1px solid var(--color-border-soft); }

  .option-grid { grid-template-columns: minmax(0, 1fr); }
  .card, .route-card, .form-panel, .cta-band { padding: var(--space-5); }
  .split__half { padding: var(--space-5); }
  .compare__col { padding: var(--space-5); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { justify-content: flex-start; }
  .problem-grid { grid-template-columns: minmax(0, 1fr); }

  .timeline > li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-3); }
  .timeline::before { left: 21px; }
  .leaf-num { width: 44px; height: 44px; font-size: var(--text-base); }

  .hero__ctas .btn { width: 100%; }
  .filters__legend { min-width: 100%; }
}

@media (max-width: 560px) {
  .shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Keep the e-mail address on one line inside its button */
  .contact-btn { padding-right: 16px; }
  .contact-btn strong { font-size: 0.92rem; }
  .brand__tag { display: none; }
  .brand__mark { width: 57px; height: 38px; }
  .brand__name { font-size: 1.04rem; }
  .ba__stage { aspect-ratio: 1 / 1; }
  .dock__cta { font-size: 0.9rem; padding-inline: 14px; }
  .pullquote { padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6); font-size: var(--text-xl); }
  .pullquote::before { left: 14px; }
  .gallery__meta div { flex-direction: column; gap: 2px; }
  .gallery__meta dt { min-width: 0; }
}

@media (max-width: 400px) {
  .shapes { grid-template-columns: minmax(0, 1fr); }
  .dock__cta { padding-inline: 12px; font-size: 0.9rem; }
  .contact-btn { width: 100%; }
}

/* Wide screens: give the hero art a little more room */
@media (min-width: 1400px) {
  .hero__grid { gap: 56px; }
  .hero-art { max-width: 640px; }
}

/* ==========================================================================
   21  REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .btn, .chip, .card, .faq__item, .option, .upload { border: 1px solid CanvasText; }
  .leaf-badge, .leaf-num { border: 1px solid CanvasText; }
}

@media print {
  .header, .dock, .mobile-nav, .blob, .rings, .skip-link { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .section { padding-block: 24px; page-break-inside: avoid; }
  .card, .route-card { box-shadow: none; border: 1px solid #999; }
  /* Papíron nincs mivel váltani a vélemények között: mind a három kinyomtatva
     olvasható, a fülsáv és a nyilak pedig kimaradnak. */
  .reviews__rail, .reviews__nav { display: none !important; }
  .review[hidden] { display: grid !important; }
  .review { page-break-inside: avoid; }
  .review + .review { margin-top: 24px; padding-top: 24px; border-top: 1px solid #999; }
  .reviews__panel { box-shadow: none; border: 1px solid #999; }
}