/* =========================================================
   VESPARENT — Terv B  ·  prémium olasz editorial
   Bodoni Moda (display) + Inter (szöveg).
   Hibrid paletta: szekciónként váltakozó VERDE / PAPER.
   FIGYELEM: az osztálynév történeti okból .pal-blu maradt, de F4 óta
   a Vesparent-ZÖLD a paletta — nem kék. Ne nevezd át kapkodva: az
   index.html 8 helyen hivatkozik rá.
   F4.3: a zöld VILÁGOSABB, patinás tónusra hangolva (referencia: az
   ügyfél saját Vespa Sprint 150-ének festése, kepek/vespa-05-sprint150*.jpg)
   — h156 s20, bázis L30 (a korábbi #294f4a L23,5 volt). Minden zöld
   UI-elem (háttér, CTA, keret, ikon) ezt a családot követi.
   Trikolór csak 2 helyen (nav aláhúzás, footer mikro).
   ========================================================= */

:root {
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --nav-w: 256px;
  --frame-inset: 16px;

  /* --- VESPARENT MÁRKASZÍNEK (F4, F4.3-ban világosabb patina-zöldre hangolva) --- */
  --verde:        #3d5c50;   /* elsődleges brand — sötét szekció, primary CTA, papír-címek */
  --verde-2:      #5a8775;   /* másodlagos — vonal/keret világos alapon (3,67:1) */
  --verde-3:      #b1c9bf;   /* világos akcentus — vonal/keret sötét alapon (4,03:1) */
  --paper:        #f7f3e9;   /* papír háttér */

  --cuoio:        #7c4f35;   /* meleg kiegészítő — sötét szöveg világos alapon */
  --cuoio-lite:   #d8b397;   /* telített tint sötét háttéren — CSAK vonal / keret / ikon (3,64:1) */
  --cuoio-text:   #f4d0a8;   /* meleg terrakotta-homok — SZÖVEG/akcent sötét háttéren
                                (hero-lead, blu-szekciók kicker). Nem arany, nem narancs. */
  --story-accent: #D9A47F;   /* F5.2 → a user által megadott PONTOS érték a storytelling
                                italic kiemeléseihez (strap + „műalkotások"). Meleg
                                terrakotta-homok. Ne cseréld saját árnyalatra. */
  --seam:         #8a5a3e;

  --tricolore: linear-gradient(to right,
      #4d6b54 0 33.333%, #ece3d0 33.333% 66.666%, #9a3b2f 66.666% 100%);

  --maxw: 1180px;
  --pad-x: clamp(24px, 5.5vw, 78px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* alap fallback — a szekciók felülírják */
  --bg: #3d5c50;
  --bg-2: #324b41;
  --fg: #ceded8;
  --fg-strong: #f7f3e9;
  --muted: #c4d4ce;
  --rule: rgba(247, 243, 233, 0.16);
  --accent: var(--cuoio-text);
  --accent-line: var(--cuoio-lite);
}

/* ---------- Paletták ---------- */
.pal-paper {
  --bg:        #f7f3e9;
  --bg-2:      #efe9da;
  --fg:        #4a4234;   /* AA: 8,94:1 */
  --fg-strong: #3d5c50;   /* címek — Vesparent-zöld, 6,66:1 */
  --muted:     #6b6152;   /* AA: 5,48:1 a --bg-en, 5,02:1 a --bg-2-n */
  --rule:      rgba(61, 92, 80, 0.16);
  --accent:      var(--cuoio);
  --accent-line: var(--cuoio);
  --field-bg:  #fcfaf4;
  --btn-bg:    #3d5c50;   /* primary CTA — zöld, papír felirattal 6,66:1 */
  --btn-fg:    #f7f3e9;
  --btn-bg-h:  #324b41;
}
/* .pal-blu = a MÉLY ZÖLD szekciópaletta (a név történeti, ld. fent) */
.pal-blu {
  --bg:        #3d5c50;
  --bg-2:      #324b41;
  --fg:        #ceded8;   /* AA: 5,07:1 (gradiens tetejéhez mérve) */
  --fg-strong: #f7f3e9;   /* AA: 6,38:1 */
  --muted:     #c4d4ce;   /* AA: 4,60:1 (gradiens tetejéhez mérve) */
  --rule:      rgba(247, 243, 233, 0.16);
  --accent:      var(--cuoio-text);   /* szöveg */
  --accent-line: var(--cuoio-lite);   /* vonal / keret / ikon */
  --field-bg:  #324b41;
  --btn-bg:    #d8c7ad;
  --btn-fg:    #1b372c;
  --btn-bg-h:  #e7dbc4;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #3d5c50;
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* billentyuzetes fokusz - mindket palettan legalabb 3:1 kontrasztu */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-line);
  outline-offset: 3px;
}

/* „Ugrás a tartalomra" — billentyűzetes látogatóknak; csak fókuszban látszik,
   a fix oldalsáv 7 tabstopját ugorja át (WCAG 2.4.1). Vizuálisan semmit nem
   változtat az oldalon. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 160;
  padding: 0.7em 1.1em;
  background: #365247;
  color: #f7f3e9;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.18s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--cuoio-lite); outline-offset: 2px; }
#tartalom:focus { outline: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0;
  margin: 0;
  color: var(--fg-strong);
  font-optical-sizing: auto;
}
p { margin: 0 0 1rem; }

::selection { background: var(--cuoio); color: var(--paper); }

/* ---------- prémium keret (matt passe-partout) ---------- */
.page-frame {
  position: fixed;
  top: var(--frame-inset);
  right: var(--frame-inset);
  bottom: var(--frame-inset);
  left: calc(var(--nav-w) + var(--frame-inset));
  border: 1px solid rgba(138, 90, 62, 0.42);
  z-index: 120;
  pointer-events: none;
}

/* ---------- rövid barna jelölővonal ---------- */
.tick {
  display: block;
  width: 46px;
  height: 1px;
  background: var(--accent-line);
  margin-bottom: 1.5rem;
}
.tick-center { margin-inline: auto; }

/* ---------- kicker ---------- */
.kicker {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
}

/* ---------- gombok ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.02em 2em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.86rem;
  letter-spacing: 0.045em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  /* F8: egységesen ejtett, gyorsabb átmenet — a mozgás mikro-szintű (ld. :hover / :active) */
  transition: transform 0.22s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease);
}
/* F8: a lift 3px → 2px; a hangsúlyt a szín és a kontraszt viszi, nincs árnyék/glow */
.btn:hover { transform: translateY(-2px); }
/* F8: természetes „lenyomott" állapot — közel azonnali, a gomb visszaül a nyomás alá */
.btn:active { transform: translateY(0) scale(0.99); transition-duration: 0.06s; }
.btn { white-space: nowrap; }
.btn-solid { background: var(--btn-bg); color: var(--btn-fg); }
.btn-solid:hover { background: var(--btn-bg-h); }
.btn-outline { border-color: color-mix(in srgb, var(--accent-line) 60%, transparent); color: var(--fg-strong); }
.btn-outline:hover { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-line) 12%, transparent); }

/* =========================================================
   OLDALSÁV / NAVIGÁCIÓ  (állandó · Blu)
   ========================================================= */
.site-nav {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--nav-w);
  border-right: 1px solid var(--rule);
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: #365247;
  z-index: 130;
}
.site-nav.pal-blu { --accent: var(--cuoio-text); }

.brand { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; }
.brand-mark {
  width: 52px;
  aspect-ratio: 1;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
  line-height: 1;
}
.brand-word em { font-style: italic; color: var(--cuoio-text); }
.brand-domain {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.55rem;
}
.brand-tricolore { display: block; height: 2px; margin-top: 0.7rem; width: 96px; background: var(--tricolore); }

/* F10: egyetlen, nagyon visszafogott editorial brand-részlet a logó ÉS a
   navigáció között. A `margin-top: auto` a logó felőli negatív teret nyeli el
   (a nagy üres sáv szándékos marad), a `margin-bottom` tartja külön a naptól.
   Nincs ikon / keret / háttér / árnyék — csak a felirat. Mobilon rejtve. */
.brand-vespa {
  margin: auto 0 clamp(1.9rem, 5vh, 3rem);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}
/* F10.1: diszkrét olasz trikolór-jel a VESPA felirat alatt — NEM vonal/sáv, hanem
   három apró, egymás melletti színrészlet: verde / bianco / rosso. Editorial nüansz,
   nem mini-zászló. Egyetlen apró jel, a lockup tri-vonalától ~340px-re lejjebb.
   MINI POLISH: ~40%-kal láthatóbb (6px szegmensek, 4px magas, teli opacity, a
   három szín tisztán érzékelhető a sötétzöld sidebaron) — de továbbra is apró. */
.brand-vespa::after {
  content: "";
  display: block;
  width: 22px;
  height: 4px;
  margin-top: 0.6rem;
  background:
    linear-gradient(#8fc3ad, #8fc3ad) 0 0 / 6px 100% no-repeat,
    linear-gradient(#f2ebd9, #f2ebd9) 8px 0 / 6px 100% no-repeat,
    linear-gradient(#cf5f4c, #cf5f4c) 16px 0 / 6px 100% no-repeat;
}

.nav-links { display: flex; flex-direction: column; gap: 0.15rem; }
.nav-links a {
  display: block;
  padding: 0.62rem 0;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
/* F8: visszafogottabb, gyorsabb indent — jól érzékelhető, de nem „ugrik" */
.nav-links a:hover { color: var(--fg-strong); padding-left: 0.25rem; }

.nav-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.02em; }
/* F8: finom aláhúzás-növekedés (a .contact-big mintája halkabban), sima színváltás helyett */
.nav-foot a {
  text-decoration: none;
  color: var(--muted);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.25s var(--ease), background-size 0.35s var(--ease);
}
.nav-foot a:hover { color: var(--fg-strong); background-size: 100% 1px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--rule); cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 1px; background: var(--fg-strong); transition: transform 0.25s ease, opacity 0.25s ease; }

/* =========================================================
   TARTALOM KERET
   ========================================================= */
.shell { margin-left: var(--nav-w); }

.section { background: var(--bg); color: var(--fg); }
.pal-blu.section { background: radial-gradient(140% 120% at 50% 0%, #3f5f52 0%, #355045 78%); }
.section-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  /* F10.1: feszesebb scroll-ritmus — a felső határ 172→132px. A whitespace
     továbbra is bőséges/editorial, csak kevesebb a fölösleges üresjárat. */
  padding-block: clamp(76px, 10vw, 132px);
}
.seam { height: 1px; background: var(--seam); opacity: 0.6; }

/* =========================================================
   HERO  (Verde · 58/42 editorial)
   Bal oszlop: pecsét → H1 → lead → szöveg → CTA.
   Jobb oszlop: vezetőfotó, elcsúsztatott hajszálkerettel.
   A hierarchia szándékos: a pecsét kicsi és halk, a H1 viszi
   a szekciót — nem versenyeznek egymással.
   ========================================================= */
.hero { position: relative; overflow: hidden; }
.hero .section-inner {
  max-width: 1320px;
  min-height: min(100svh, 960px);
  display: grid;
  grid-template-columns: 1fr 1.3fr;      /* F14 (2026-09-15): ügyfél szerint laptopon a fotó
    túl kicsi volt — 58/42-ről (szöveg-domináns) kb. 43/57-re (fotó-domináns) fordítva */
  align-items: center;
  gap: clamp(34px, 5vw, 78px);
  padding-block: clamp(84px, 11vh, 132px);
}

.hero-copy { position: relative; z-index: 1; }

/* pecsét-logó — a hero márkajele (a régi masthead lockup helyett).
   F4.4: az ügyfél saját, kész grafikája (raszter kép, nem SVG); ezért kerek
   kivágás (border-radius) adja a pecsét-formát, nem a kép maga. */
.hero-stamp {
  display: block;
  width: clamp(92px, 9.5vw, 124px);
  aspect-ratio: 1;
  margin-bottom: clamp(26px, 3.4vw, 42px);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.hero-stamp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-stamp:hover { opacity: 0.82; }

.hero h1 {
  font-size: clamp(2.45rem, 4.7vw, 4.3rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.1vw, 1.6rem);
  color: var(--cuoio-text);
  margin: 1.35rem 0 1.1rem;
}
.hero-text { max-width: 44ch; color: var(--muted); margin-bottom: 0; }
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2rem, 3.4vw, 2.9rem);
}

/* vezetőfotó — mögé csúsztatott hajszálkeret (editorial jel) */
.hero-figure { position: relative; margin: 0; }
.hero-figure img {
  position: relative;   /* a keret fölé */
  width: 100%;
  height: auto;         /* KELL: a width/height attribútum különben fixálná */
  /* F10.1: az új hero-fotó (vba150 patina, naplementés tópart) fekvő. 4:3-ra
     vágva: a Vespa + a naplementés panoráma is jól látszik (csak egy sáv tó
     esik le két oldalt), és kicsit több a függőleges jelenléte a 42%-os
     oszlopban, mint a natív 3:2-nél. Az editorial keret/kompozíció változatlan. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero-figure::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid color-mix(in srgb, var(--verde-3) 46%, transparent);
  pointer-events: none;
}

/* görgetés-jel */
.hero-scroll {
  position: absolute;
  left: var(--pad-x);
  bottom: clamp(20px, 4vh, 40px);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-scroll i { display: block; width: 54px; height: 1px; background: currentColor; transform-origin: left; animation: scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline { 0%,100% { transform: scaleX(0.3); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } }

/* =========================================================
   NEM CSAK EGY ROBOGÓ — storytelling  (Blu · editorial)
   Az egykori .intro szekció átépítve: bal a projektfotó
   elcsúsztatott hajszálkerettel (a heró tükörképe), jobb a
   kiemelt idézet + a vesparent.hu két „rendezvény/esküvő"
   mondata. Ugyanaz a szó szerinti szöveg, csak tördelve.
   ========================================================= */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: clamp(34px, 5.5vw, 84px);
  align-items: center;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(64px, 8.5vw, 116px) var(--pad-x);   /* F10.1: feszesebb ritmus */
}
.story-media { position: relative; margin: 0; }
.story-media img {
  position: relative;        /* a hajszálkeret fölé */
  width: 100%;
  height: auto;              /* KELL: a width/height attribútum különben fixálná */
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.story-media::before {
  content: "";
  position: absolute;
  inset: 16px 16px -16px -16px;   /* balra és lefelé csúsztatva (tükör: a heró jobbra) */
  border: 1px solid color-mix(in srgb, var(--verde-3) 46%, transparent);
  pointer-events: none;
}
.story-copy { max-width: 46ch; }
.story h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
/* kiemelt editorial üzenet — a hero-lead testvére (Bodoni dőlt, meleg akcent).
   A .story-copy p szabálynál magasabb specificitás kell, különben --muted lesz. */
.story-copy p.story-strap {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;   /* F5.1: 400→500 — a warm akcenttel együtt jobban elválik a főszövegtől */
  font-size: clamp(1rem, 1.7vw, 1.25rem);
  line-height: 1.35;
  color: var(--story-accent);
  margin: 0 0 1.7rem;
}
.story-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  margin: 0 0 1.8rem;
  padding: 0;
  border: 0;
}
.story-quote em { font-style: italic; font-weight: 500; color: var(--story-accent); }
.story-copy p { color: var(--muted); }
.story-copy p:last-child { margin-bottom: 0; }

/* =========================================================
   MIRE SZERETNÉD? — felhasználási kategóriák  (Paper)
   6 csempe a js/media.js usecases tömbjéből, 6 oszlopos rácson
   span 2 → 3×2 elrendezés. Az .is-type + .usecase-typemark a
   kép nélküli (tipografikus) fallback — F5.1 óta minden
   kategóriának van (ideiglenes) fotója, így most nem aktív.
   ========================================================= */
.usecases-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(36px, 5vw, 60px);
}
.usecases-head h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.usecases-head .section-note { color: var(--muted); font-size: 0.95rem; margin: 0; }

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* F5.1: a sorok közé több levegő, mint az oszlopok közé — editorial ritmus,
     kevésbé merev „kártyarács" hatás. Nem masonry, a 3×2 változatlan. */
  column-gap: clamp(18px, 2.6vw, 34px);
  row-gap: clamp(34px, 4.6vw, 60px);
}
.usecase {
  grid-column: span 2;      /* 6 oszlopból 3/sor → 3×2 rács */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
}

.usecase-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid color-mix(in srgb, var(--accent-line) 30%, transparent);
  background: var(--bg-2);
  transition: border-color 0.3s var(--ease);   /* F8: finom tapintási visszajelzés hoverre */
}
.usecase-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.usecase-media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cuoio);
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}
.usecase-media.is-type {
  display: flex;
  align-items: center;
  justify-content: center;
}
.usecase-media.is-type::after { opacity: 0.05; }
.usecase-typemark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  color: var(--fg-strong);
  opacity: 0.26;
}
/* F5.1: a képaláírás editorial ritmusa — vékony hajszálvonal a kép alatt
   (a site meglévő vonal-nyelvezete, nem „card UI"), több levegő, és a CTA
   a csempe aljához igazítva, hogy egy soron belül egy vonalban álljanak. */
.usecase-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: clamp(0.9rem, 1.4vw, 1.2rem);
  padding-top: clamp(0.9rem, 1.4vw, 1.15rem);
  border-top: 1px solid var(--rule);
}
.usecase-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--fg-strong);
  margin-bottom: 0.4rem;
}
.usecase-lead { font-size: 0.9rem; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.usecase-go {
  margin-top: auto;
  padding-top: clamp(1rem, 1.8vw, 1.5rem);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.usecase-go i { font-style: normal; transition: transform 0.35s var(--ease); }
.usecase:hover .usecase-media { border-color: color-mix(in srgb, var(--accent-line) 42%, transparent); }
.usecase:hover .usecase-media img { transform: scale(1.03); }
.usecase:hover .usecase-go i { transform: translateX(4px); }

/* =========================================================
   FLOTTA — lookbook sávok  (Paper)
   ========================================================= */
.section-label {
  max-width: var(--maxw);
  margin: 0 auto clamp(40px, 6vw, 76px);
  padding-inline: var(--pad-x);
}
/* F5.2: a dekoratív római szekciószám (.section-index „I." / „II.") eltávolítva
   a markupból — a szekciónév önmagában áll. A hozzá tartozó szabályok törölve. */
.section-label-text { display: grid; gap: 0.55rem; }
.section-label h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.section-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* diszkrét olasz heritage-jelzés — CSAK az Archívum fejlécében, egyszer.
   Nem zászló, nem dekoráció: egy 22 px-es, tompított zöld-krém-piros sáv
   (ugyanaz a 3 szín, mint a footer-mikrónál) + „ITALIA" mikrotipó. */
.heritage-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 0 0;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.tricolore-tick {
  width: 22px;
  height: 3px;
  flex: none;
  background: linear-gradient(to right,
      #4d6b54 0 33.333%, #d8cdb4 33.333% 66.666%, #9a3b2f 66.666% 100%);
}

.lookbook { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }

#tovabbi-jarmuvek .section-inner { padding-block: clamp(34px, 5vw, 64px) clamp(76px, 10vw, 132px); }
#tovabbi-jarmuvek .section-label { border-top: 1px solid var(--rule); padding-top: clamp(34px, 5vw, 64px); }
/* F10.1: a „Melyik Vespa?" közvetlenül az Archívum után jön (azonos papír-sáv) —
   a felső behúzás kisebb, mint a szekciók közti alap, hogy ne legyen üresjárat */
#melyik-vespa .section-inner { padding-top: clamp(40px, 6vw, 72px); }

.look {
  display: grid;
  grid-template-columns: 1.38fr 1fr;   /* a kép ~58% */
  gap: clamp(30px, 5.5vw, 78px);
  align-items: center;
  padding-block: clamp(52px, 7.5vw, 108px);
}
.look:first-of-type { padding-top: 0; }
.look:nth-child(even) { grid-template-columns: 1fr 1.38fr; }
.look:nth-child(even) .look-media { order: 2; }

.look-media {
  position: relative;
  aspect-ratio: 3 / 2;   /* a forrasok mind 3:2-esek - igy nincs oldalvagas */
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cuoio) 40%, transparent);
  background: var(--bg-2);
}
.look-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);   /* F8: 1,5s → 0,9s — egységes a fotófallal, kevésbé vontatott */
}
.look-media.is-linked { cursor: pointer; }
.look:hover .look-media img { transform: scale(1.03); }   /* F8: 1,035 → 1,03 — egységes finom nagyítás */
.look-media.is-slider img { opacity: 0; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.look-media.is-slider img.is-active { opacity: 1; }
.look-media:not(.is-slider) img ~ img { display: none; }
.look-media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cuoio);
  mix-blend-mode: multiply;
  opacity: 0.09;
  pointer-events: none;
  z-index: 2;
}

/* slider vezérlők */
.pv-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 50px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.25s var(--ease);
}
.pv-nav svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.6)); }
.pv-prev { left: 4px; }
.pv-next { right: 4px; }
.look-media:hover .pv-nav, .look-media:focus-within .pv-nav { opacity: 1; }
.pv-prev:hover { transform: translateY(-50%) translateX(-3px); }
.pv-next:hover { transform: translateY(-50%) translateX(3px); }
@media (hover: none) { .pv-nav { opacity: 0.92; } }

.pv-count {
  position: absolute;
  left: 16px; bottom: 13px;
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.look-media:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 3px; }

/* „muzeálisan minősített" pecsét */
.look-seal {
  position: absolute;
  right: 15px; bottom: 15px;
  z-index: 3;
  width: 58px; height: 58px;
  color: var(--paper);
  opacity: 0.5;
  transform: rotate(-11deg);
  pointer-events: none;
}

/* múzeumi címkesor: N° ——————— évjárat */
.look-meta { display: flex; align-items: center; gap: 16px; margin: 0 0 1.3rem; }
.look-num, .look-year {
  flex: none;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.look-num { color: var(--accent); }
.look-year { color: var(--muted); }
.look-rule { flex: 1 1 auto; min-width: 24px; height: 1px; background: var(--rule); }
.look-text h3 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.look-text p { margin: 0; color: var(--muted); max-width: 46ch; }

.look-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-top: 1.7rem;
  padding: 0 0 0.5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 0;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.25s ease;
}
.look-cta-arrow { font-size: 1rem; line-height: 1; transition: transform 0.35s var(--ease); }
.look:hover .look-cta,
.look-cta:hover { border-color: var(--accent); }
.look:hover .look-cta-arrow,
.look-cta:hover .look-cta-arrow,
.look-cta:focus-visible .look-cta-arrow { transform: translateX(4px); }
.look-cta:active { opacity: 0.6; }   /* F8: természetes pressed visszajelzés a szöveges CTA-n */

/* =========================================================
   VESPATAXI  (Blu — önálló élményblokk)
   Szándékosan szélesebb rácson ül, mint a többi szekció:
   ez jelzi, hogy önálló szolgáltatás, nem egy bekezdés a sorban.
   ========================================================= */
.taxi-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: stretch;
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  /* ugyanaz a vízszintes rács, mint a többi szekcióé — a kilógást
     a nagyobb max-width adja, nem eltérő behúzás */
  padding: clamp(68px, 8.5vw, 118px) var(--pad-x);   /* F10.1: feszesebb ritmus */
}

.taxi-media {
  position: relative;
  margin: 0;
  min-height: clamp(360px, 40vw, 520px);   /* a kép a szövegoszlop magasságát követi */
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-line) 32%, transparent);
}
.taxi-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.taxi-media::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cuoio);
  mix-blend-mode: multiply;
  opacity: 0.1;
  pointer-events: none;
}

.taxi-copy {
  max-width: 46ch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.taxi h2 {
  font-size: clamp(2.5rem, 5.6vw, 4.2rem);
  font-weight: 400;
  font-style: italic;          /* a teljes cím dőlt — mint a Kapcsolatnál */
  line-height: 1.02;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.taxi-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  color: var(--fg);
  max-width: 32ch;
  margin-bottom: 0;
}
.taxi-occasions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  margin: 1.9rem 0;
  padding: 0.95rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  list-style: none;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.taxi-body { color: var(--muted); max-width: 42ch; margin-bottom: 2.1rem; }
.taxi-cta { align-self: flex-start; }   /* ne nyúljon az oszlop teljes szélességére */
.taxi-cta span { display: inline-block; margin-left: 0.6rem; transition: transform 0.35s var(--ease); }
.taxi-cta:hover span { transform: translateX(4px); }
.taxi-note { margin: 1.3rem 0 0; font-size: 0.82rem; line-height: 1.55; color: var(--muted); max-width: 38ch; }

/* =========================================================
   MELYIK VESPA? — Vespa Finder  (Paper · F6)
   Kétsávos editorial: bal a kérdés + válaszok, jobb a kép.
   Nem középre zárt „quiz box"; a meglévő gridhez igazodik.
   A #finderStage tartalmát a js/finder.js építi.
   ========================================================= */
.finder-head { max-width: 44ch; margin-bottom: clamp(38px, 6vw, 64px); }
.finder-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 400; margin-bottom: 0.8rem; }
.finder-intro { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.6; margin: 0; }
.finder-fallback { margin: 0; }
.finder-fallback a { color: var(--accent); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.06em; text-decoration: none; }

.finder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.finder-grid.finder-enter { opacity: 0; transform: translateY(8px); }
.finder-col { min-width: 0; }

.finder-step {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.finder-question {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  line-height: 1.15;
  color: var(--fg-strong);
  margin: 0 0 clamp(1.4rem, 2.4vw, 2rem);
  text-wrap: balance;
}
.finder-question:focus, .finder-step:focus, .finder-result-model:focus { outline: none; }

.finder-options { display: flex; flex-direction: column; gap: 0.5rem; }
.finder-option {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 48px;
  text-align: left;
  font: inherit;
  font-size: 0.95rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
/* editorial jelölés kockapipa helyett: rövid vonal, ami kiválasztáskor megnő és bemelegszik */
.finder-option::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--rule);
  transition: background-color 0.25s ease, width 0.25s ease;
}
.finder-option:hover { border-color: color-mix(in srgb, var(--accent-line) 55%, transparent); }
.finder-option.is-selected {
  border-color: var(--fg-strong);
  background: color-mix(in srgb, var(--fg-strong) 6%, transparent);
  color: var(--fg-strong);
}
.finder-option.is-selected::before { background: var(--accent-line); width: 22px; }

.finder-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
}
.finder-link {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0.6rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.25s ease;
}
.finder-link[disabled] { color: var(--muted); opacity: 0.55; cursor: default; }
.finder-link:not([disabled]):hover { color: var(--fg-strong); }
.finder-link[hidden] { display: none; }   /* a display:inline-flex különben felülírná a [hidden]-t */
.finder-back { margin-right: auto; }

.finder-visual { position: relative; margin: 0; }
.finder-visual img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.finder-visual::before {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 32%, transparent);
  pointer-events: none;
}

/* --- eredmény: lapos szerkezet; desktopon ~42 / ~58 kétoszlopos,
   a nagy kép a JOBB oszlop TETEJÉN (felülre igazítva, nem lebeg középen).
   Mobilon egyoszlopos, a DOM-sorrend adja a kívánt folyamatot. --- */
.finder-grid--result {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px);
  align-items: start;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}
.finder-grid--result.finder-enter { opacity: 0; transform: translateY(8px); }
.finder-grid--result > :not(.finder-visual--result) { grid-column: 1; }
.finder-grid--result > .finder-visual--result {
  grid-column: 2;
  grid-row: 1 / span 8;   /* a bal oszlop összes sora mellé — nem tolja szét a flow-t */
  align-self: start;
  margin: 0;
}

.finder-result-model {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.3rem);
  line-height: 1.03;
  color: var(--fg-strong);
  margin: 0 0 0.7rem;
  text-wrap: balance;
}
.finder-result-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.2rem;
}
.finder-result-short { color: var(--muted); max-width: 44ch; margin: 0 0 1.8rem; }
.finder-cta {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.25s ease;
}
.finder-cta span { display: inline-block; transition: transform 0.35s var(--ease); }
.finder-cta:hover { color: var(--fg-strong); }
.finder-cta:hover span { transform: translateX(4px); }
.finder-cta:active, .finder-alt:active, .finder-link:not([disabled]):active { opacity: 0.6; }   /* F8 */

.finder-alts {
  margin-top: clamp(2rem, 3.4vw, 2.8rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
}
.finder-alts-label {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}
.finder-alts-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
.finder-alt {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--fg);
}
.finder-alt-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid color-mix(in srgb, var(--accent-line) 26%, transparent);
  background: var(--bg-2);
}
.finder-alt-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.finder-alt:hover .finder-alt-media img { transform: scale(1.03); }
.finder-alt-text { display: flex; align-items: baseline; gap: 0.6rem; }
.finder-alt-model { font-family: var(--font-display); font-size: 1rem; color: var(--fg-strong); }
.finder-alt-year { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--muted); }
/* másodlagos utility-link — halkabb, mint a „Felfedezem →" CTA */
.finder-reset {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.finder-reset:hover { color: var(--fg-strong); }

/* =========================================================
   HOGYAN MŰKÖDIK?  (Paper · F7)
   4 lépés, nagy Bodoni számokkal + hajszálvonallal. Kép/ikon/
   ár/árnyék/scroll-animáció nélkül — tipografikus szünet.
   Desktop 4 oszlop, mobil 2×2.
   ========================================================= */
/* F10.1: a szekció túl magas volt — a saját padding-block feszesebb a globálisnál,
   a fejléc-alsó margó is kisebb. Tipografikus szünet marad, csak kevesebb üresjárat. */
#hogyan-mukodik .section-inner { padding-block: clamp(54px, 7vw, 92px); }
.howto-head { margin-bottom: clamp(26px, 3.8vw, 44px); }
.howto-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 400; }
.howto-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 4vw, 56px);
}
.howto-step { display: flex; flex-direction: column; }
.howto-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.howto-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--rule);
  margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(0.85rem, 1.6vw, 1.15rem);
}
.howto-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  color: var(--fg);
  text-wrap: balance;
}

/* =========================================================
   TÖRTÉNETEK — aszimmetrikus fotófal + lightbox  (Paper · F7)
   ========================================================= */
.stories-head { margin-bottom: clamp(36px, 5.5vw, 58px); }
.stories-head h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 400; margin-bottom: 0.8rem; }

.stories-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(116px, 15vw, 196px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.3vw, 16px);
}
.story-tile {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
}
.story-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}
.story-tile:hover img { transform: scale(1.03); }
.story-tile:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

.story-tile--feature { grid-column: span 2; grid-row: span 2; }
.story-tile--wide    { grid-column: span 2; }
.story-tile--tall    { grid-row: span 2; }

/* --- lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27, 40, 33, 0.94);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.lightbox.is-open .lightbox-overlay { opacity: 1; }
.lightbox-panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.lightbox.is-open .lightbox-panel { opacity: 1; transform: none; }
.lightbox-figure { margin: 0; }
.lightbox-figure img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox-ctl {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  color: var(--paper);
  cursor: pointer;
  opacity: 0.82;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  transition: opacity 0.2s ease;
}
.lightbox-ctl svg { width: 100%; height: 100%; }
.lightbox-ctl:hover { opacity: 1; }
.lightbox-ctl:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; opacity: 1; }
.lightbox-close { top: clamp(10px, 3vw, 26px); right: clamp(10px, 3vw, 26px); }
.lightbox-prev { top: 50%; transform: translateY(-50%); left: clamp(6px, 2vw, 30px); }
.lightbox-next { top: 50%; transform: translateY(-50%); right: clamp(6px, 2vw, 30px); }
.lightbox-count {
  position: absolute;
  z-index: 2;
  bottom: clamp(10px, 3vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

/* =========================================================
   VESPA EXPERIENCE — editorial fotófal  (Paper · F9)
   Az archívum a Vespákat mutatja; ez a blokk az úton-lét érzését.
   Aszimmetrikus 3 oszlopos rács, tudatosan NAGYOBB cellák + több
   levegő, mint a „Történetek" (F7) falnál — más ritmus, azonos
   formanyelv (krém háttér, zöld, hajszálvonalak, 0 sarok). A képek
   <button>-ök → a MEGLÉVŐ .lightbox rendszer nyílik (js/experience.js).
   Mobilon 1 oszlop, minden kép a saját képarányával (--ar).
   ========================================================= */
.experience .section-inner {
  border-top: 1px solid var(--rule);   /* finom kötés a felette lévő blokkhoz — de külön fejezet */
}
.experience-head {
  max-width: 34rem;   /* elég a „Nem csak a Vespa." egy sorban + a bevezető 2 sorban */
  margin-bottom: clamp(36px, 5.5vw, 64px);
}
.experience-head .kicker { margin-bottom: 1rem; }
.experience-head h2 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 400;
  line-height: 1.06;
  margin-bottom: 0.85rem;
  text-wrap: pretty;   /* természetes tördelés: „Nem csak a Vespa." egy sorban */
}
.experience-intro {
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}

.experience-wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 244px);
  grid-auto-flow: dense;
  gap: clamp(14px, 1.8vw, 26px);
}
.exp-tile {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: block;
  grid-column: span 1;
  grid-row: span 1;
}
.exp-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);   /* azonos timing, mint a .story-tile — egy nyelv */
}
/* brief: 1.01–1.02 scale bőven elég; nincs glow / nagy shadow / agresszív zoom */
.exp-tile:hover img { transform: scale(1.02); }
.exp-tile:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.exp-tile:active { opacity: 0.9; }   /* F8-igazodás: természetes pressed visszajelzés */

.exp-tile--feature { grid-column: span 2; grid-row: span 2; }
.exp-tile--wide    { grid-column: span 2; }
.exp-tile--tall    { grid-row: span 2; }

/* egyetlen, visszafogott editorial CTA a blokk végén (a .look-cta testvére) */
.experience-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  margin-top: clamp(2rem, 3.6vw, 3.2rem);
  padding: 0 0 0.5rem;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  transition: border-color 0.3s var(--ease), color 0.25s var(--ease);
}
.experience-cta span { display: inline-block; font-size: 1rem; line-height: 1; transition: transform 0.35s var(--ease); }
.experience-cta:hover { border-color: var(--accent); color: var(--fg-strong); }
.experience-cta:hover span { transform: translateX(4px); }
.experience-cta:active { opacity: 0.6; }

@media (max-width: 900px) {
  .experience-wall {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(158px, 30vw, 232px);
  }
  .exp-tile--feature { grid-column: span 2; grid-row: span 2; }
  .exp-tile--wide    { grid-column: span 2; }
  .exp-tile--tall    { grid-row: span 2; }
}

@media (max-width: 600px) {
  /* mobilon nem erőltetett collage: 1 oszlop, minden kép a saját képarányával,
     természetes függőleges ritmus — a fontos képek így is teljes szélesek */
  .experience-wall {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: clamp(12px, 3.6vw, 18px);
  }
  .exp-tile { aspect-ratio: var(--ar, 3 / 2); }
  .exp-tile--feature,
  .exp-tile--wide,
  .exp-tile--tall { grid-column: span 1; grid-row: span 1; }
  /* F10: a nagyon nyújtott álló képek kontrollált arányt kapnak (nem „9 egyforma",
     de a legmagasabb csempe se legyen ~580px); a fekvő/wide marad natív arányon */
  .exp-tile--tall { aspect-ratio: 4 / 5; }
  .exp-tile--feature { aspect-ratio: 5 / 4; }
}

/* =========================================================
   KAPCSOLAT  (Paper — Olaszország-vízjel)
   ========================================================= */
.contact { position: relative; overflow: hidden; text-align: center; }
.contact .section-inner { position: relative; z-index: 1; max-width: 660px; }
.contact h2 {
  font-size: clamp(2.2rem, 5.6vw, 3.9rem);
  font-weight: 400;
  font-style: italic;          /* a teljes cím dőlt — nincs kiragadott szó */
  margin-bottom: 1.2rem;
}
.contact-note { color: var(--muted); max-width: 42ch; margin-inline: auto; }

.contact-big { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin: 2.8rem 0 3.4rem; }
.contact-big a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.6vw, 2.6rem);
  letter-spacing: -0.005em;
  text-decoration: none;
  color: var(--fg-strong);
  /* alahuzas hatterkepbol: nem tordel ujra, szemben a korabbi doltre valtassal */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: color 0.25s ease, background-size 0.4s var(--ease);
}
.contact-big a:hover,
.contact-big a:focus-visible { color: var(--accent); background-size: 100% 1px; }

.contact-form {
  display: grid;
  gap: 1.15rem;
  text-align: left;
  border: 1px solid var(--rule);
  padding: clamp(24px, 4vw, 40px);
  background: var(--bg-2);
}
.field { display: grid; gap: 0.45rem; }
.field label {
  font-family: var(--font-sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field textarea {
  font: inherit;
  color: var(--fg);
  background: var(--field-bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.8em 0.95em;
  resize: vertical;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact-form .btn { justify-self: start; margin-top: 0.4rem; }
.form-status { margin: 0; font-size: 0.9rem; font-weight: 500; color: var(--accent); min-height: 1.2em; }

/* =========================================================
   LÁBLÉC  (Paper)
   ========================================================= */
.site-footer .section-inner { padding-block: clamp(52px, 7vw, 84px); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.4rem 3rem; }
/* F12.1: a lábléc-logó most link a lap tetejére (#top) — a fejléc-brand és a
   hero-pecsét párja. text-decoration a „vesparent.hu" felirat miatt kell. */
.footer-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; text-decoration: none; }
.footer-stamp {
  width: 86px;
  height: 86px;   /* KELL explicit — a HTML width/height="400" attribútum
                     felülírná az aspect-ratio-t, ha csak az lenne itt */
  margin-bottom: 0.35rem;
  border-radius: 50%;
  overflow: hidden;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s var(--ease);
}
.footer-brand:hover .footer-stamp,
.footer-brand:focus-visible .footer-stamp { opacity: 0.82; }
.footer-brand .brand-domain { color: var(--muted); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
/* F8: ugyanaz a finom aláhúzás-növekedés, mint a nav láblécében — egységes szöveglink-nyelv */
.footer-contact a {
  text-decoration: none;
  color: var(--muted);
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  background-origin: content-box;   /* F10: az aláhúzás a szöveg alatt marad, ha lesz padding (mobil tap-terület) */
  transition: color 0.25s var(--ease), background-size 0.35s var(--ease);
}
.footer-contact a:hover { color: var(--fg-strong); background-size: 100% 1px; }
.footer-end { margin-left: auto; text-align: right; }
/* a papír háttéren a trikolór krém sávja eltűnt (#ece3d0 a #f7f3e9-en) —
   itt sötétebb homok középsávot kap; a navban marad az eredeti krém */
.footer-micro {
  display: inline-block; width: 44px; height: 2px; margin-bottom: 12px;
  background: linear-gradient(to right,
      #4d6b54 0 33.333%, #cbbfa4 33.333% 66.666%, #9a3b2f 66.666% 100%);
}
.footer-legal { margin: 0; font-size: 0.76rem; color: var(--muted); letter-spacing: 0.02em; }

/* =========================================================
   BELÉPŐ ANIMÁCIÓ
   ========================================================= */
/* F8: kisebb elmozdulás + gyorsabb átmenet — nem „úszik be" külön-külön minden elem */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   RESZPONZÍV
   ========================================================= */
@media (max-width: 1040px) {
  .page-frame { left: var(--frame-inset); top: calc(64px + var(--frame-inset)); }
  .site-nav {
    position: sticky;
    inset: 0 0 auto 0;
    width: auto;
    height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(18px, 5vw, 34px);
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .brand { flex-direction: row; align-items: center; gap: 0.7rem; }
  .brand-mark { width: 42px; margin-bottom: 0; }
  .brand-word { font-size: 1.2rem; }
  .site-nav .brand-domain, .site-nav .brand-tricolore, .brand-vespa { display: none; }

  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: 64px 0 auto 0;
    margin-top: 0;
    background: #365247;
    border-bottom: 1px solid var(--rule);
    padding: 0.4rem clamp(18px, 5vw, 34px) 0.9rem;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.32s var(--ease);
    z-index: 130;
  }
  .nav-links.open { clip-path: inset(0 0 0 0); }
  .nav-links a { padding-block: 0.9rem; }   /* F8: nagyobb tapintási felület a mobil menüben */
  .nav-foot { display: none; }
  .shell { margin-left: 0; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

}

@media (max-width: 980px) {
  /* hero: egyoszlopos — előbb a szöveg (LCP + SEO), alatta a fotó */
  .hero .section-inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: clamp(30px, 6vw, 46px);
    padding-block: clamp(58px, 10vw, 96px);
  }
  .hero-figure { max-width: 540px; }
  .hero-figure::before { inset: 12px -12px -12px 12px; }
  .hero-text { max-width: none; }
}

@media (max-width: 900px) {
  .taxi-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 44px);
    padding-block: clamp(66px, 12vw, 104px);
  }
  .taxi-media {
    min-height: 0;
    aspect-ratio: 3 / 2;   /* a forrás is 3:2 — mobilon nincs vágás */
  }
  .taxi-copy { max-width: none; }

  /* storytelling: egyoszlopos — előbb a fotó, alatta a szöveg */
  .story-grid {
    grid-template-columns: 1fr;
    gap: clamp(26px, 6vw, 40px);
    padding-block: clamp(64px, 11vw, 100px);
  }
  .story-media::before { inset: 12px 12px -12px -12px; }
  .story-copy { max-width: none; }

  /* Finder: egyoszlopos. Kérdésnél a szöveg elöl. Eredménynél a
     DOM-sorrend adja a folyamatot: A választásod → modell → évjárat·Italia
     → nagy kép → leírás → Felfedezem → → alternatívák → Újra választok. */
  .finder-grid { grid-template-columns: 1fr; gap: clamp(24px, 6vw, 38px); }
  .finder-grid--result { display: flex; flex-direction: column; }
  .finder-grid--result > .finder-visual--result {
    grid-column: auto;
    grid-row: auto;
    margin: 0.2rem 0 1.6rem;
  }
  .finder-visual::before { inset: 12px -12px -12px 12px; }
  .finder-result-short { max-width: none; }
}

@media (max-width: 860px) {
  .usecase { grid-column: span 3; }   /* 2 csempe/sor → 2×3 */
}

@media (max-width: 820px) {
  .howto-steps { grid-template-columns: 1fr 1fr; gap: clamp(28px, 7vw, 44px); }
}

@media (max-width: 720px) {
  /* fotófal: mobilon EGYSÉGES 2 egyenlő oszlop — nincs átvitt aszimmetria.
     F10: a sormagasság alsó határa 132→150px, hogy a csempék ne hassanak
     szűknek a legkisebb telefonokon sem */
  .stories-wall {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: clamp(150px, 42vw, 210px);
    grid-auto-flow: row;
  }
  .story-tile--feature,
  .story-tile--wide,
  .story-tile--tall { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 560px) {
  .usecase { grid-column: span 6; }   /* egymás alatt */
  .finder-alts-row { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .look,
  .look:nth-child(even) { grid-template-columns: 1fr; gap: 1.6rem; }
  .look:nth-child(even) .look-media { order: 0; }
  .look:first-of-type { padding-top: 0; }
}

@media (max-width: 600px) {
  .page-frame { top: calc(64px + 8px); right: 8px; bottom: 8px; left: 8px; }
  .hero-scroll { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-end { margin-left: 0; text-align: left; }

  /* F8: a hero CTA-k mobilon teljes szélességű, egymásra rendezett sávok —
     kényelmes tapintási felület, a hierarchia (tömör vs. körvonalas) marad */
  .hero-actions { gap: 0.85rem; }
  .hero-actions .btn { flex: 1 1 100%; }

  /* F10: a lábléc telefon/e-mail linkje kényelmes tap-területet kap (kb. 44px),
     az aláhúzás a content-box aljához igazodva a szöveg alatt marad */
  .footer-contact { gap: 0.1rem; }
  .footer-contact a { padding-block: 0.55rem; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active { transform: none; }
  .nav-foot a, .footer-contact a { transition: color 0.2s var(--ease); }
  .footer-stamp { transition: none; }
  .hero-scroll i { animation: none; }
  .finder-grid, .finder-grid--result { transition: none; }
  .finder-cta span, .finder-alt-media img { transition: none; }
  .finder-cta:hover span, .finder-alt:hover .finder-alt-media img { transform: none; }
  .story-tile img { transition: none; }
  .story-tile:hover img { transform: none; }
  .exp-tile img, .experience-cta span { transition: none; }
  .exp-tile:hover img, .experience-cta:hover span { transform: none; }
  .lightbox-overlay, .lightbox-panel { transition: none; }
}


/* =========================================================
   RÉSZLETES NÉZET — drawer (desktop) / bottom sheet (mobil)
   A panel a meglévő .pal-blu palettát kapja: sötét vitrin
   a világos archívum-szekció fölött. Új szín nem került be.
   ========================================================= */
.drawer { position: fixed; inset: 0; z-index: 200; }
.drawer[hidden] { display: none; }

.drawer-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 27, 24, 0.64);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.drawer.is-open .drawer-overlay { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  background: radial-gradient(130% 90% at 50% 0%, #3f5f52 0%, #355045 76%);
  color: var(--fg);
  border-left: 1px solid rgba(138, 90, 62, 0.55);
  transform: translateX(100%);
  transition: transform 0.52s var(--ease);
  outline: none;
}
.drawer.is-open .drawer-panel { transform: none; }

.drawer-close {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: rgba(15, 35, 32, 0.62);
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--fg-strong);
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.drawer-close svg { width: 18px; height: 18px; }
.drawer-close:hover { background: rgba(16, 34, 40, 0.85); border-color: var(--accent-line); }

/* mobil fogantyú — desktopon rejtve */
.drawer-grip { display: none; flex: none; padding: 11px 0 7px; touch-action: none; cursor: grab; }
.drawer-grip::before {
  content: ""; display: block;
  width: 44px; height: 3px; margin: 0 auto;
  background: var(--accent-line); opacity: 0.5;
}

.drawer-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }

.drawer-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.drawer-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.drawer-figure img.is-active { opacity: 1; }
.drawer-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cuoio);
  mix-blend-mode: multiply;
  opacity: 0.08;
  pointer-events: none;
}
.drawer-figure:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -3px; }

.drawer-thumbs {
  display: flex;
  gap: 8px;
  padding: 14px clamp(22px, 4vw, 34px) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.drawer-thumb {
  flex: none;
  width: 86px;
  aspect-ratio: 3 / 2;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.drawer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.drawer-thumb:hover { opacity: 0.8; }
.drawer-thumb[aria-current="true"] { opacity: 1; border-color: var(--accent-line); }

.drawer-body { padding: clamp(24px, 4.5vw, 36px); }
.drawer-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.45rem 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.drawer-meta span + span::before { content: "· "; color: var(--muted); }
.drawer-body h2 {
  font-size: clamp(1.9rem, 5.4vw, 2.7rem);
  font-weight: 400;
  margin-bottom: 1.1rem;
}
.drawer-short { margin: 0; color: var(--fg); }
.drawer-story { margin: 1rem 0 0; color: var(--muted); }

.drawer-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.drawer-chips li {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent-line) 45%, transparent);
  padding: 0.36em 0.72em;
}

.drawer-uses { margin: 1.7rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.drawer-uses dt {
  font-family: var(--font-sans);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.drawer-uses dd { margin: 0; color: var(--fg); }

.drawer-foot {
  flex: none;
  padding: clamp(16px, 3vw, 22px) clamp(24px, 4.5vw, 36px);
  padding-bottom: max(clamp(16px, 3vw, 22px), env(safe-area-inset-bottom));
  background: rgba(14, 32, 38, 0.55);
  border-top: 1px solid var(--rule);
}
.drawer-cta { width: 100%; }
.drawer-cta span { margin-left: 0.5rem; transition: transform 0.35s var(--ease); display: inline-block; }
.drawer-cta:hover span { transform: translateX(4px); }

/* az előre kitöltött üzenetmező rövid kiemelése */
.field textarea.is-prefilled {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ---------- bottom sheet ---------- */
@media (max-width: 720px) {
  .drawer-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 92svh;
    border-left: 0;
    border-top: 1px solid rgba(138, 90, 62, 0.55);
    transform: translateY(100%);
  }
  .drawer.is-open .drawer-panel { transform: none; }
  .drawer-grip { display: block; }
  .drawer-close { top: 52px; }
  .drawer-thumb { width: 74px; }
}

/* ---------- kevesebb mozgás ---------- */
@media (prefers-reduced-motion: reduce) {
  .drawer-panel, .drawer-overlay, .drawer-figure img,
  .look-media img, .look-cta-arrow, .drawer-cta span, .taxi-cta span { transition: none; }
  .taxi-cta:hover span { transform: none; }
  .look:hover .look-media img { transform: none; }
  .look:hover .look-cta-arrow,
  .look-cta:hover .look-cta-arrow { transform: none; }
  .drawer-cta:hover span { transform: none; }
}