/* ============================================================
   FEHÉR JÓZSEF — design rendszer v6 · fehér–kék
   Egy forrás minden színre, méretre, térközre.
   ============================================================ */
:root{
  /* Felületek */
  --bg:#F5F7FB;
  --card:#FFFFFF;
  --tint:#EAF0F8;
  --tint-2:#D8E3F2;
  --line:#DCE3EE;

  /* Kék */
  --navy:#16315C;
  --navy-2:#24509A;
  --deep:#0A1730;
  --text:#16315C;
  --dim:#52607A;

  /* Kevés kiegészítő szín: arany a díszekhez, levélzöld a kerti fotókhoz */
  --gold:#C9982F;
  --gold-ink:#8C5E0D;
  --gold-soft:#F6ECD6;
  --leaf:#2F6B4F;
  --leaf-soft:#DDEBE3;

  /* Tipográfia */
  --display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --body:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --mono:var(--body);

  --t-hero:clamp(2.25rem, 5.1vw, 4.2rem);
  --t-h2:clamp(1.75rem, 3.5vw, 2.75rem);
  --t-h3:clamp(1.1rem, 1.5vw, 1.28rem);
  --t-lead:clamp(1.02rem, 1.4vw, 1.17rem);

  /* Ritmus */
  --gut:clamp(18px, 4vw, 40px);
  --sect:clamp(46px, 6.2vw, 92px);
  --r-sm:12px;
  --r-md:20px;
  --r-lg:30px;
  --nav-h:96px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 18px 44px rgba(22,49,92,.11);
  --shadow-sm:0 6px 18px rgba(22,49,92,.07);

  /* Levélág — a természetben készült fotók dísze */
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9982F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");

  /* A korábbi oldalrészek (GYIK, űrlap) ezekre a nevekre hivatkoznak */
  --ink:var(--bg);
  --ink-2:var(--card);
  --ink-3:var(--tint);
  --paper:var(--tint);
  --fg:var(--text);
  --fg-dim:var(--dim);
  --amber:var(--gold-ink);
  --teal:#0E7458;
  --coral:#C0402E;
  --violet:var(--navy-2);
  --sky:var(--navy-2);
  --lime:var(--leaf);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--navy); color:#fff; }

.wrap{ width:min(1180px, 100% - (var(--gut) * 2)); margin-inline:auto; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.028em;
  margin:0;
  color:var(--navy);
}
h2{ font-size:var(--t-h2); text-wrap:balance; }
h3{ font-size:var(--t-h3); font-weight:700; letter-spacing:-.015em; line-height:1.22; }
p{ margin:0; }
/* Kiemelt szó a címekben: dőlt talpas betű, világosabb kékkel */
h1 em, h2 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--navy-2);
}
.nb{ white-space:nowrap; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; flex:none; }
.lead{ font-size:var(--t-lead); color:var(--dim); max-width:50ch; }

/* ============ GOMBOK ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px;
  border-radius:999px;
  border:1.5px solid transparent;
  font-weight:700;
  font-size:.96rem;
  cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-primary{ background:var(--navy); color:#fff; box-shadow:0 10px 24px rgba(22,49,92,.22); }
.btn-primary:hover{ background:var(--navy-2); transform:translateY(-2px); box-shadow:0 14px 30px rgba(22,49,92,.28); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:var(--card); color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--navy); transform:translateY(-2px); }
.btn svg{ flex:none; transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.btn-down:hover .chev{ transform:translateY(3px); }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

/* ============ FEJLÉC — lebegő sáv ============ */
.site-head{
  position:fixed; inset:14px 0 auto 0;
  z-index:100;
  pointer-events:none;
}
.head-inner{
  pointer-events:auto;
  width:min(1180px, 100% - (var(--gut) * 2));
  margin-inline:auto;
  display:flex; align-items:center; gap:14px;
  padding:9px 10px 9px 16px;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
          backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 8px 28px rgba(22,49,92,.07);
  transition:box-shadow .35s var(--ease), background .35s var(--ease);
}
.site-head.scrolled .head-inner{ background:rgba(255,255,255,.95); box-shadow:0 12px 34px rgba(22,49,92,.14); }
.brand{ margin-right:auto; display:flex; align-items:center; gap:11px; }
/* Állandó vissza gomb: gépen közvetlenül a menüpontok előtt, telefonon a Menü gomb mellett */
.back-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 17px 0 13px;
  flex:none;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--navy);
  font:inherit; font-weight:700; font-size:.88rem; line-height:1;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.back-btn svg{ flex:none; transition:transform .3s var(--ease); }
.back-btn:hover{ background:var(--tint); border-color:var(--tint-2); }
.back-btn:hover svg{ transform:translateX(-3px); }
.back-btn:active{ transform:scale(.95); }
.back-btn:focus-visible{ outline:2px solid var(--navy-2); outline-offset:2px; }
.brand .mark{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  display:grid; place-items:center;
  font-family:var(--display);
  font-weight:800;
  font-size:.86rem;
  letter-spacing:-.02em;
}
.brand-txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand-txt b{ font-family:var(--display); font-weight:800; font-size:1.08rem; letter-spacing:-.02em; color:var(--navy); white-space:nowrap; }
.brand-txt > span{ font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); white-space:nowrap; }
.nav-desk{ display:flex; gap:2px; }
.nav-desk a{
  position:relative;
  padding:9px 15px;
  border-radius:999px;
  font-size:.93rem;
  font-weight:600;
  color:var(--dim);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-desk a:hover{ color:var(--navy); background:var(--tint); }
.nav-desk a[aria-current="page"]{ color:var(--navy); background:var(--tint); }
.head-inner > .btn{ padding:11px 20px; font-size:.9rem; white-space:nowrap; }

.burger{
  display:none;
  align-items:center; gap:10px;
  height:46px;
  padding:0 18px 0 15px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--card);
  color:var(--navy);
  cursor:pointer;
}
.burger .lines{ position:relative; width:21px; height:15px; flex:none; }
.burger .lines i{
  position:absolute; left:0; width:21px; height:2.5px;
  background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .16s var(--ease);
}
.burger .lines i:nth-child(1){ top:0; }
.burger .lines i:nth-child(2){ top:6.5px; }
.burger .lines i:nth-child(3){ top:13px; }
.burger .txt{ font-weight:700; font-size:.92rem; }
body.menu-open .burger{ border-color:var(--navy); }
body.menu-open .burger .lines i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
body.menu-open .burger .lines i:nth-child(2){ opacity:0; }
body.menu-open .burger .lines i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ============ MOBIL MENÜ ============ */
.nav-mob{
  position:fixed; inset:0;
  z-index:90;
  background:var(--bg);
  padding:calc(var(--nav-h) + 18px) var(--gut) 30px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transform:translate3d(0,-10px,0);
  transition:opacity .24s var(--ease), transform .24s var(--ease), visibility .24s linear;
  pointer-events:none;
  overflow-y:auto;
}
body.menu-open .nav-mob{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
body.menu-open .head-inner{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#fff; }
.nav-mob-links{ display:flex; flex-direction:column; border-top:1px solid var(--line); }
.nav-mob-links a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.35rem, 5.8vw, 1.75rem);
  letter-spacing:-.025em;
  color:var(--navy);
  opacity:0; transform:translateY(12px);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.nav-mob-links a .idx{ font-family:var(--body); font-size:.66rem; font-weight:700; letter-spacing:.1em; color:var(--gold-ink); }
body.menu-open .nav-mob-links a{ opacity:1; transform:none; }
body.menu-open .nav-mob-links a:nth-child(1){ transition-delay:.05s; }
body.menu-open .nav-mob-links a:nth-child(2){ transition-delay:.09s; }
body.menu-open .nav-mob-links a:nth-child(3){ transition-delay:.13s; }
body.menu-open .nav-mob-links a:nth-child(4){ transition-delay:.17s; }
.nav-mob-foot{ margin-top:auto; padding-top:26px; display:flex; flex-direction:column; gap:14px; opacity:0; transition:opacity .3s var(--ease) .18s; }
body.menu-open .nav-mob-foot{ opacity:1; }
.nav-mob-foot .btn{ width:100%; padding:16px; }
.nav-mob-contact{ display:flex; flex-direction:column; gap:6px; font-size:.9rem; font-weight:600; color:var(--dim); }

/* ============ FOTÓKERETEK ÉS DÍSZEK ============
   .frame               a kép kerete (figure)
   .frame__img          a levágott képdoboz
   .ar-45 / .ar-43 / .ar-32 / .ar-169 / .ar-11   képarány
   .frame--arch         boltíves felső él
   .deco-leaf           zöld alátét              → kertben, természetben készült fotók
   .nature (szekción)   a blokk felső sarkaiból lecsüngő indák, ágak → lásd lent
   .deco-ring           arany gyűrű + pontrács   → stúdió- és irodai fotók
   .deco-panel          arany sarok + kék alátét → illusztrációk                    */
.frame{ position:relative; z-index:0; margin:0; }
.frame__img{
  display:block;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:var(--tint);
  box-shadow:var(--shadow);
}
.frame__img img{ width:100%; height:100%; object-fit:cover; }
.ar-45 .frame__img{ aspect-ratio:4/5; }
.ar-43 .frame__img{ aspect-ratio:4/3; }
.ar-32 .frame__img{ aspect-ratio:3/2; }
.ar-169 .frame__img{ aspect-ratio:16/9; }
.ar-11 .frame__img{ aspect-ratio:1/1; }
.frame--arch .frame__img{
  border-radius:999px 999px var(--r-lg) var(--r-lg);
  /* vékony arany ív a boltív körül */
  outline:1.5px solid rgba(201,152,47,.6);
  outline-offset:9px;
}
.frame::before,.frame::after{ content:""; position:absolute; pointer-events:none; }

.deco-leaf .frame__img{ box-shadow:var(--shadow), -14px 14px 0 0 var(--leaf-soft); }
.deco-ring .frame__img{ box-shadow:var(--shadow), 14px 14px 0 0 var(--tint-2); }
.deco-ring::before{
  width:44%; aspect-ratio:1;
  right:-9%; top:-7%;
  z-index:-1;
  border:2px solid var(--gold);
  border-radius:50%;
}
.deco-ring::after{
  width:112px; height:112px;
  left:-24px; bottom:-24px;
  z-index:-1;
  background:radial-gradient(circle, var(--navy) 1.5px, transparent 1.7px) 0 0/14px 14px;
  opacity:.28;
}

.deco-panel .frame__img{ box-shadow:var(--shadow), 14px 14px 0 0 var(--tint-2); }
.deco-panel::before{
  width:56px; height:56px;
  left:-12px; top:-12px;
  z-index:1;
  border-left:3px solid var(--gold);
  border-top:3px solid var(--gold);
  border-radius:18px 0 0 0;
}
.deco-panel::after{
  width:98px; height:98px;
  right:-8px; bottom:-30px;
  z-index:-1;
  background:radial-gradient(circle, var(--navy) 1.5px, transparent 1.7px) 0 0/14px 14px;
  opacity:.26;
}

.frame__tag{
  position:absolute; left:16px; bottom:16px; z-index:3;
  padding:8px 15px;
  border-radius:999px;
  background:#fff;
  color:var(--navy);
  font-weight:700;
  font-size:.78rem;
  box-shadow:var(--shadow-sm);
}
.chip-float{
  position:absolute; z-index:3;
  display:flex; align-items:center; gap:11px;
  padding:11px 16px 11px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  font-size:.8rem;
  line-height:1.25;
  color:var(--dim);
  white-space:nowrap;
}
.chip-float b{ display:block; font-family:var(--display); font-weight:800; font-size:1.08rem; letter-spacing:-.02em; color:var(--navy); }
.chip-float .ic{ width:36px; height:36px; border-radius:50%; background:var(--tint); color:var(--navy); display:grid; place-items:center; flex:none; }
/* „Független": fent, középen, a boltív felső élén ülve – a fej fölött, semmit nem takar */
.chip-float--a{ left:50%; top:-24px; translate:-50% 0; }
.chip-float--b{ right:-8%; bottom:11%; }

/* ============ TERMÉSZET A BLOKKBAN: LECSÜNGŐ INDÁK, ÁGAK ============
   A blokk két felső sarkából sűrű indák, faágak, száraz gallyak lógnak be,
   mögöttük halvány, elmosódott lomb; a háttér fehér marad.
   .nature               mindkét sarokban teljes méretű rajz (galéria)
   .nature.nature--left  a jobb, szöveg felőli sarok kisebb (kép balra, szöveg jobbra)
   A szekció háttere fehér legyen (section--white): a rajz fehér alapú,
   szorzó keveréssel kerül a blokkra, ezért nincs széle és az átfedés is tiszta.
   A hosszú indák a tartalom melletti margóban lógnak; ha a margó szűk, a rajz kijjebb csúszik. */
.nature{
  position:relative; isolation:isolate; overflow:clip;
  --vine-w:clamp(330px, 50vw, 780px);
}
.section.nature{ padding-top:calc(var(--sect) + clamp(12px, 2.2vw, 34px)); }
.nature::before,.nature::after{
  content:"";
  position:absolute; top:0; z-index:-1; pointer-events:none;
  width:var(--vine-w); aspect-ratio:760 / 820;
  background:no-repeat center top / 100% auto;
  mix-blend-mode:multiply;
}
.nature::before{
  left:min(0px, max(var(--gut), (100vw - 1180px) / 2) - var(--vine-w) * .23);
  background-image:url("img/inda-bal.webp");
}
.nature::after{
  right:min(0px, max(var(--gut), (100vw - 1180px) / 2) - var(--vine-w) * .23);
  background-image:url("img/inda-jobb.webp");
}
/* a szöveg felőli sarok kisebb, és mögötte nincs halvány lomb, hogy a szöveg tiszta maradjon */
.nature::before,.nature::after{ transition:opacity .7s var(--ease); }
.js .nature:not(.is-on)::before,.js .nature:not(.is-on)::after{ background-image:none; opacity:0; }
.nature--left::after{ --vine-w:clamp(250px, 35vw, 540px); background-image:url("img/inda-jobb-t.webp"); }
/* Az indák előtt a fotó vékony fehér keretet kap, hogy elváljon tőlük */
.nature .frame__img{ box-shadow:0 0 0 7px #fff, 0 22px 50px rgba(10,23,48,.22); }

/* ============ HERO (főoldal) ============ */
.hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(18px,3.4vw,44px)) 0 clamp(34px,5vw,60px);
  overflow:clip;
}
.hero::before,.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 54% at 88% 6%, rgba(36,80,154,.11), transparent 66%),
    radial-gradient(42% 44% at 2% 96%, rgba(201,152,47,.09), transparent 66%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,5vw,76px);
  align-items:center;
}
.hero h1{ font-size:var(--t-hero); margin-top:18px; max-width:12.5em; text-wrap:balance; }
.hero .lead{ margin-top:22px; }
.hero-art{ position:relative; justify-self:center; width:min(430px, 100%); }

.stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  margin-top:clamp(28px,4vw,46px);
  border-top:1px solid var(--line);
}
.stat{ padding:22px clamp(8px,2vw,22px) 2px; text-align:center; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat b{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.55rem, 3vw, 2.2rem);
  letter-spacing:-.035em;
  line-height:1;
  color:var(--navy);
}
.stat span{ display:block; margin-top:8px; font-size:.84rem; color:var(--dim); }

/* ============ ÉRTÉKSÁV ============ */
.valuebar{ background:var(--card); border-block:1px solid var(--line); padding:20px 0; }
.valuebar ul{
  display:flex; flex-wrap:nowrap;
  justify-content:safe center;
  gap:clamp(14px,2.2vw,34px);
  margin:0; list-style:none;
  padding:0 var(--gut);
  overflow-x:auto;
  scrollbar-width:none;
}
.valuebar ul::-webkit-scrollbar{ display:none; }
.valuebar li{
  display:flex; align-items:center; gap:9px;
  flex:none; white-space:nowrap;
  font-weight:700;
  font-size:clamp(.8rem, 1.1vw, .95rem);
  color:var(--navy);
}
.valuebar li::before{ content:""; width:18px; height:18px; flex:none; background:var(--check) center/contain no-repeat; }
@keyframes vroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

/* ============ SZEKCIÓK ============ */
.section{ padding-block:var(--sect); }
.section--white{ background:var(--card); border-block:1px solid var(--line); }
.section--tint{ background:var(--tint); }
.sec-head{ margin-bottom:clamp(24px,3.4vw,42px); max-width:46rem; }
.sec-head h2{ margin-top:14px; }
.sec-head .lead{ margin-top:14px; }
.sec-head--row{ max-width:none; display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:18px 40px; }
.video-band,.form-band{ background:var(--card); border-block:1px solid var(--line); }

/* ============ SZOLGÁLTATÁSOK — 3 × 2 egyforma csempe, kép nélkül ============ */
.svc-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.svc{
  position:relative;
  display:flex; flex-direction:column;
  padding:26px 24px 22px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), opacity .8s var(--ease), translate .8s var(--ease);
}
.svc:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--tint-2); }
.svc-ico{
  width:48px; height:48px; flex:none;
  border-radius:15px;
  background:var(--tint);
  color:var(--navy);
  display:grid; place-items:center;
  margin-bottom:16px;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.svc:hover .svc-ico{ background:var(--navy); color:#fff; }
.svc h3{ margin-bottom:8px; }
.svc p{ color:var(--dim); font-size:.94rem; }
.svc .go{
  margin-top:auto; padding-top:18px;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.88rem;
  color:var(--navy-2);
}
.svc .go svg{ transition:transform .3s var(--ease); }
.svc:hover .go svg{ transform:translateX(4px); }
.svc .badge{
  position:absolute; top:24px; right:20px;
  padding:5px 11px;
  border-radius:999px;
  background:var(--gold-soft);
  color:var(--gold-ink);
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* ============ RÓLAM CSÍK ============ */
.about{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(34px,5.5vw,84px); align-items:center; }
.about .lead{ margin-top:16px; }
.pull{
  margin:24px 0 0;
  padding-left:20px;
  border-left:3px solid var(--gold);
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.12rem, 1.9vw, 1.42rem);
  line-height:1.45;
  color:var(--navy);
}
.sig{ margin-top:16px; font-size:.84rem; font-weight:600; color:var(--dim); }

/* ============ VIDEÓ ============ */
.video-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(28px,5vw,68px); align-items:center; }
.vslot{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--deep);
  box-shadow:var(--shadow);
  display:block;
}
.vslot > img, .vslot > video, .vslot > iframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; }
.vslot > img{ filter:brightness(.74); transition:transform 1s var(--ease), filter .5s var(--ease); }
.vslot:hover > img{ transform:scale(1.03); filter:brightness(.8); }
.vslot .play{
  position:absolute; inset:0; margin:auto;
  width:82px; height:82px;
  border-radius:50%;
  background:#fff; color:var(--navy);
  display:grid; place-items:center;
  box-shadow:0 0 0 12px rgba(255,255,255,.2);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.vslot:hover .play{ transform:scale(1.06); box-shadow:0 0 0 16px rgba(255,255,255,.16); }
.vslot .cap{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:44px 22px 20px;
  color:#fff;
  background:linear-gradient(to top, rgba(10,23,48,.88), transparent);
}
.vslot .cap b{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.015em; }
.chip{
  flex:none;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.4);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}

/* ============ ÜGYFÉLVÉLEMÉNYEK ============ */
.tmq{
  position:relative;
  padding:6px 0 10px;
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.tmq::-webkit-scrollbar{ display:none; }
.tmq.dragging{ cursor:grabbing; user-select:none; }
.tmq.dragging .tcard{ pointer-events:none; }
.tmq-track{ display:flex; align-items:stretch; width:max-content; padding-left:var(--gut); }
.tcard{
  flex:none;
  width:min(340px, 78vw);
  margin:0 18px 0 0;
  display:flex; flex-direction:column;
  padding:24px 24px 20px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.tcard:hover{ border-color:var(--tint-2); box-shadow:var(--shadow-sm); }
.tcard .stars{ display:flex; gap:3px; margin-bottom:13px; color:var(--gold); }
.tcard blockquote{ margin:0; font-size:.95rem; line-height:1.62; color:var(--dim); }
.tcard cite{ margin-top:auto; padding-top:16px; font-style:normal; font-weight:700; font-size:.9rem; color:var(--navy); }

/* ============ KALKULÁTOR ============ */
.calc-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,68px); align-items:center; }
.calc-grid .lead{ margin-top:16px; }
.calc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow);
}
.calc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:22px; }
.calc-head h3{ font-size:1.1rem; }
.calc-head .tag{
  padding:5px 11px;
  border-radius:999px;
  background:var(--tint);
  color:var(--navy-2);
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  white-space:nowrap;
}
.field{ margin-bottom:18px; }
.field-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:9px; font-size:.86rem; color:var(--dim); }
.field-top b{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--navy); }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px;
  border-radius:999px;
  background:var(--tint-2);
  outline-offset:6px;
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--navy);
  border:4px solid #fff;
  box-shadow:0 0 0 1px var(--navy), 0 4px 10px rgba(22,49,92,.25);
  cursor:grab;
  transition:transform .2s var(--ease);
}
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--navy);
  border:4px solid #fff;
  box-shadow:0 0 0 1px var(--navy);
}
.chart{ margin:6px 0 14px; }
.chart svg{ width:100%; height:auto; display:block; overflow:visible; }
.legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:0 0 14px; font-size:.76rem; color:var(--dim); }
.legend span{ display:flex; align-items:center; gap:7px; }
.legend .k{ width:16px; height:0; border-top:2.5px solid; flex:none; }
.calc-out{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.out{ padding:13px 15px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line); }
.out.hi{ background:var(--navy); border-color:var(--navy); }
.out small{ display:block; font-size:.72rem; color:var(--dim); margin-bottom:4px; }
.out b{ font-family:var(--display); font-weight:700; font-size:1.02rem; letter-spacing:-.02em; color:var(--navy); }
.out.hi small{ color:rgba(255,255,255,.75); }
.out.hi b{ color:#fff; }
.calc-note{ margin-top:14px; font-size:.74rem; line-height:1.55; color:var(--dim); }

/* ============ ZÁRÓ FELHÍVÁS — sötét sáv a stúdiófotóval ============ */
.cta-outer{ padding-block:var(--sect); }
.cta-dark{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center;
  min-height:360px;
  background:var(--deep);
  color:#fff;
  border-radius:var(--r-lg);
  overflow:hidden;
}
.cta-dark::before{
  content:""; position:absolute; z-index:-1;
  width:320px; aspect-ratio:1;
  left:-170px; bottom:-230px;
  border:1.5px solid rgba(201,152,47,.5);
  border-radius:50%;
}
.cta-dark::after{
  content:""; position:absolute; z-index:-1;
  width:126px; height:126px;
  left:44%; top:26px;
  background:radial-gradient(circle, rgba(255,255,255,.5) 1.4px, transparent 1.6px) 0 0/14px 14px;
  opacity:.2;
}
.cta-dark__txt{ padding:clamp(30px,5vw,62px); }
.cta-dark .eyebrow{ color:rgba(255,255,255,.7); }
.cta-dark h2{ color:#fff; margin-top:14px; }
.cta-dark h2 em{ color:#E9C877; }
.cta-dark p{ margin-top:14px; max-width:40ch; color:rgba(255,255,255,.78); }
.cta-dark .btn{ margin-top:26px; background:#fff; color:var(--navy); }
.cta-dark .btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.35); }
.cta-dark__img{ position:relative; align-self:stretch; min-height:300px; }
.cta-dark__img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 12%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24%);
          mask-image:linear-gradient(90deg, transparent, #000 24%);
}

/* ============ LÁBLÉC ============ */
.site-foot{ background:var(--card); border-top:1px solid var(--line); padding:46px 0 26px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.foot-brand p{ margin-top:14px; max-width:36ch; font-size:.92rem; color:var(--dim); }
.foot-col h4{ margin:0 0 12px; font-family:var(--body); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.foot-col a{ display:block; padding:5px 0; font-weight:600; font-size:.94rem; color:var(--navy); transition:color .2s var(--ease); }
.foot-col a:hover{ color:var(--navy-2); }
.foot-bottom{
  margin-top:30px; padding-top:18px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 22px;
  font-size:.84rem; color:var(--dim);
}
.foot-bottom a:hover{ color:var(--navy); }

/* ============ ALOLDALAK FEJE ============ */
.page-hero{
  position:relative;
  padding:calc(var(--nav-h) + clamp(14px,2.6vw,32px)) 0 clamp(30px,4vw,50px);
  min-height:calc(100vh - var(--vb-h, 62px));
  min-height:calc(100svh - var(--vb-h, 62px));
  display:flex; align-items:center;
  overflow:clip;
}
.page-hero > .wrap{ width:min(1180px, 100% - (var(--gut) * 2)); }
.ph-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,76px); align-items:center; }
.ph-grid h1{ font-size:clamp(2.05rem, 4.7vw, 3.8rem); margin-top:16px; max-width:13em; text-wrap:balance; }
.ph-lead{ margin-top:20px; font-size:var(--t-lead); color:var(--dim); max-width:50ch; }
.ph-art{ position:relative; justify-self:center; width:min(450px, 100%); }
.back{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
  transition:color .2s var(--ease);
}
.back:hover{ color:var(--navy); }

/* ============ TARTALMI BLOKKOK, LÉPÉSEK ============ */
.blocks{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.block{
  padding:28px 26px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), opacity .8s var(--ease), translate .8s var(--ease);
}
.block:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--tint-2); }
.block h3{ margin-bottom:14px; }
.block ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.block li{ position:relative; padding-left:28px; font-size:.95rem; color:var(--dim); }
.block li::before{ content:""; position:absolute; left:0; top:.28em; width:17px; height:17px; background:var(--check) center/contain no-repeat; }

.steps{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; counter-reset:step; }
.step{ position:relative; padding:30px 26px 26px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); }
.step .n{
  display:grid; place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:800;
  margin-bottom:18px;
}
.step h3{ margin-bottom:8px; }
.step p{ font-size:.94rem; color:var(--dim); }

/* ============ RÓLAM OLDAL ============ */
.split{ display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(30px,5vw,68px); align-items:start; }
.prose{ max-width:64ch; }
.prose h3{ font-size:clamp(1.35rem, 2.3vw, 1.75rem); margin:38px 0 12px; }
.prose > h3:first-of-type{ margin-top:14px; }
.prose p{ margin-bottom:16px; color:var(--dim); }
.prose strong{ color:var(--navy); }
.aside-card{
  position:sticky; top:calc(var(--nav-h) + 14px);
  padding:26px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.aside-card h3{ font-size:1.08rem; margin-bottom:14px; }
.aside-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.aside-card li{ position:relative; padding-left:28px; font-size:.93rem; color:var(--dim); }
.aside-card li::before{ content:""; position:absolute; left:0; top:.28em; width:17px; height:17px; background:var(--check) center/contain no-repeat; }
.aside-card .btn{ width:100%; margin-top:22px; }
.quote{
  margin:0;
  padding:clamp(26px,3.6vw,42px) clamp(24px,3.4vw,44px);
  border-radius:var(--r-lg);
  background:var(--tint);
  border-left:4px solid var(--gold);
}
.quote p{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(1.2rem, 2.2vw, 1.7rem); line-height:1.4; color:var(--navy); }
.quote footer{ margin-top:14px; font-size:.82rem; font-weight:600; color:var(--dim); }
.timeline{ border-top:1px solid var(--line); }
.tl{ display:grid; grid-template-columns:minmax(110px,170px) 1fr; gap:clamp(18px,3vw,44px); padding:clamp(22px,2.8vw,32px) 0; border-bottom:1px solid var(--line); }
.tl-when{ font-family:var(--display); font-weight:800; font-size:clamp(1.3rem, 2.6vw, 1.95rem); letter-spacing:-.03em; line-height:1; color:var(--navy-2); }
.tl-what h3{ margin-bottom:8px; }
.tl-what p{ color:var(--dim); max-width:60ch; }
.why{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.wcard{
  padding:28px 26px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), opacity .8s var(--ease), translate .8s var(--ease);
}
.wcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.wcard .num{ display:block; margin-bottom:14px; font-size:.7rem; font-weight:700; letter-spacing:.16em; color:var(--gold-ink); }
.wcard h3{ margin-bottom:9px; }
.wcard p{ font-size:.94rem; color:var(--dim); }
/* Fotógaléria: egy nagy + két kisebb kép, mindegyik saját dísszel */
/* Négy fotó mozaikban: felül széles + keskeny, alul keskeny + széles; a sorok egyforma magasak */
.gallery{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:clamp(22px,3vw,40px); }
.gallery .frame{ grid-column:span 5; }
.gallery .frame--wide{ grid-column:span 7; }
.gallery .frame__img{ height:clamp(250px, 29vw, 400px); }

/* ============ GYIK ============ */
/* Kereső */
.search{
  position:relative;
  margin-top:30px;
  max-width:520px;
}
.search input{
  width:100%;
  padding:16px 46px 16px 48px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--fg);
  font:inherit;
  font-size:1rem;
  -webkit-appearance:none; appearance:none;
}
.search input::placeholder{ color:var(--fg-dim); }
.search input:focus{ border-color:var(--fg); background:#fff; }
.search input::-webkit-search-cancel-button{ display:none; }
.search .ico{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  color:var(--fg-dim); pointer-events:none;
}
.search .clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  border:0; border-radius:50%;
  background:var(--paper);
  color:var(--fg);
  cursor:pointer;
  display:none;
  font-size:1.05rem; line-height:1;
}
.search .clear:hover{ background:var(--ink-3); }

/* Szűrő gombok */
.chips{
  display:flex; flex-wrap:wrap; gap:9px;
  margin-top:18px;
}
.chip-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--ink-2);
  color:var(--fg-dim);
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.chip-btn::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:var(--c,var(--fg-dim));
}
.chip-btn:hover{ color:var(--fg); border-color:rgba(22,49,92,.34); }
.chip-btn[aria-pressed="true"]{
  background:var(--fg); color:#fff; border-color:var(--fg);
}
.chip-btn .n{ font-family:var(--mono); font-size:.74rem; opacity:.7; }

/* Elrendezés */
.faq-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(28px,4vw,60px);
  align-items:start;
}
.toc{
  position:sticky; top:calc(var(--nav-h) + 24px);
  display:flex; flex-direction:column;
  border-left:1px solid var(--line);
}
.toc a{
  padding:11px 0 11px 18px;
  margin-left:-1px;
  border-left:2px solid transparent;
  font-size:.94rem;
  font-weight:600;
  color:var(--fg-dim);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.toc a:hover{ color:var(--fg); }
.toc a.on{ color:var(--fg); border-left-color:var(--c,var(--amber)); }

/* Csoportok */
.faq-group{ margin-bottom:clamp(44px,6vw,72px); }
.faq-group:last-child{ margin-bottom:0; }
.faq-group > h2{
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  padding-bottom:14px;
  margin-bottom:8px;
  border-bottom:2px solid var(--c,var(--amber));
  display:inline-block;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}

/* Egy kérdés */
.qa{
  border-bottom:1px solid var(--line);
}
.qa summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1rem,1.5vw,1.15rem);
  letter-spacing:-.015em;
  line-height:1.35;
  transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--c,var(--amber)); }
.qa summary .plus{
  flex:none;
  margin-left:auto;
  width:26px; height:26px;
  position:relative;
  border-radius:50%;
  border:1px solid var(--line);
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease);
}
.qa summary .plus::before,
.qa summary .plus::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:11px; height:2px;
  background:var(--fg);
  transform:translate(-50%,-50%);
  border-radius:2px;
  transition:transform .3s var(--ease), background .25s var(--ease);
}
.qa summary .plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.qa[open] summary .plus{ background:var(--c,var(--amber)); border-color:transparent; }
.qa[open] summary .plus::before,
.qa[open] summary .plus::after{ background:#fff; }
.qa[open] summary .plus::after{ transform:translate(-50%,-50%) rotate(0deg); }
.qa[open] summary{ color:var(--c,var(--amber)); }
.qa .ans{
  padding:0 46px 24px 0;
  color:var(--fg-dim);
  max-width:70ch;
}
.qa[hidden]{ display:none; }

/* Nincs találat */
.empty{
  padding:52px 0;
  text-align:center;
  color:var(--fg-dim);
}
.empty b{
  display:block;
  font-family:var(--display);
  font-size:1.3rem;
  color:var(--fg);
  margin-bottom:8px;
}

@media (max-width: 960px){
  .ph-grid{ grid-template-columns:1fr; align-items:start; }
  .faq-layout{ grid-template-columns:1fr; }
  .toc{
    position:static;
    flex-direction:row;
    border-left:0;
    border-bottom:1px solid var(--line);
    overflow-x:auto;
    scrollbar-width:none;
  }
  .toc::-webkit-scrollbar{ display:none; }
  .toc a{
    padding:12px 16px;
    margin-left:0; margin-bottom:-1px;
    border-left:0;
    border-bottom:2px solid transparent;
    white-space:nowrap;
  }
  .toc a.on{ border-left-color:transparent; border-bottom-color:var(--c,var(--amber)); }
}



/* ============ ŰRLAP ============ */
.form-band{ background:var(--ink-2); }
.form-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(30px,5vw,64px);
  align-items:start;
}
.form-side p{ color:var(--fg-dim); margin-top:16px; font-size:var(--t-lead); }
.contact-list{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px;
}
.contact-list a{
  display:flex; align-items:center; gap:13px;
  font-family:var(--mono);
  font-size:.94rem;
  color:var(--fg);
  padding:14px 16px;
  border-radius:var(--r-sm);
  background:var(--ink-2);
  border:1px solid var(--line);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.contact-list a:hover{ border-color:var(--fg); background:var(--paper); }

/* Beküldés utáni visszaigazolás */
.form-done{
  display:none;
  padding:clamp(28px,4vw,44px);
  border-radius:var(--r-lg);
  background:rgba(14,116,88,.10);
  border:1px solid rgba(14,116,88,.42);
  text-align:center;
}
.form-done.show{
  display:block;
  animation:doneIn .45s var(--ease) both;
}
@keyframes doneIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
}
.form-done .tick{
  width:70px; height:70px; margin:0 auto 20px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--teal);
  color:#fff;
}
.form-done .tick svg{
  stroke-dasharray:32; stroke-dashoffset:32;
  animation:tickDraw .5s var(--ease) .25s forwards;
}
@keyframes tickDraw{ to{ stroke-dashoffset:0; } }
.form-done h3{ font-size:clamp(1.3rem,2.6vw,1.75rem); margin-bottom:12px; }
.form-done p{ color:var(--fg-dim); max-width:44ch; margin:0 auto; }
.form-done .btn{ margin-top:24px; }
.form-err{
  display:none;
  margin-top:14px; padding:13px 15px;
  border-radius:var(--r-sm);
  background:rgba(192,64,46,.10);
  border:1px solid rgba(192,64,46,.45);
  font-size:.88rem;
}
.form-err.show{ display:block; }
form.fj.sending{ opacity:.6; pointer-events:none; }

.contact-list .lab{
  font-family:var(--body);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--fg-dim);
  margin-left:auto;
}

form.fj{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-lg);
  background:var(--ink-2);
  border:1px solid var(--line);
}
form.fj .full{ grid-column:1 / -1; }
form.fj label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--fg-dim);
  margin-bottom:8px;
}
form.fj input:not([type=checkbox]),
form.fj select,
form.fj textarea{
  width:100%;
  padding:13px 15px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--ink);
  color:var(--fg);
  font:inherit;
  font-size:.96rem;
  -webkit-appearance:none; appearance:none;
}
form.fj select{
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-dim) 50%),
                   linear-gradient(135deg,var(--fg-dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:42px;
}
form.fj select option{ background:#fff; color:var(--fg); }
form.fj textarea{ resize:vertical; min-height:112px; }
form.fj input:focus, form.fj select:focus, form.fj textarea:focus{
  border-color:var(--fg);
  background:#fff;
}
form.fj .consent{
  display:flex; align-items:flex-start; gap:12px;
  font-size:.85rem;
  color:var(--fg-dim);
  margin:0;
  line-height:1.55;
}
form.fj .consent input{
  flex:none;
  width:20px; height:20px;
  margin-top:2px;
  accent-color:var(--amber);
}
form.fj .consent a{ color:var(--amber); text-decoration:underline; }
form.fj .submit{
  justify-self:start;
  border:0;
}
form.fj .tiny{
  font-size:.76rem;
  color:var(--fg-dim);
  margin:0;
}


/* ============ KÖSZÖNJÜK ============ */
.thanks{
  min-height:68vh;
  display:grid; place-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 60px) 0 80px;
  position:relative;
}
.thanks .tick{
  width:82px; height:82px;
  margin:0 auto 28px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--teal);
  color:#fff;
}
.thanks h1{ font-size:clamp(2.1rem,5vw,3.6rem); }
.thanks p{ color:var(--fg-dim); margin:20px auto 0; max-width:44ch; font-size:var(--t-lead); }
.thanks .hero-cta{ justify-content:center; }

/* ============ JOGI OLDALAK ============ */
.legal{
  max-width:72ch;
  padding-top:calc(var(--nav-h) + clamp(40px,6vw,72px));
}
.legal h1{ font-size:clamp(2rem,4.6vw,3.2rem); }
.legal h2{
  font-size:clamp(1.25rem,2.2vw,1.6rem);
  margin:42px 0 12px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.legal p, .legal li{ color:var(--fg-dim); }
.legal p{ margin:0 0 16px; }
.legal ul{ margin:0 0 20px; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.legal strong{ color:var(--fg); }
.legal a{ color:var(--amber); text-decoration:underline; }


/* ============ A KORÁBBI RÉSZEK ÚJ ARCULATHOZ IGAZÍTVA ============ */
.side{
  padding:26px 24px;
  border-radius:var(--r-md);
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.side h2{ font-size:1.22rem; }
.side p{ margin-top:10px; font-size:.94rem; color:var(--dim); }
.side .btn{ width:100%; margin-top:20px; }
.side .tel{ display:block; margin-top:14px; text-align:center; font-weight:700; font-size:.9rem; color:var(--navy-2); }
.search input{ background:var(--card); border-color:var(--line); box-shadow:var(--shadow-sm); }
.search input:focus{ border-color:var(--navy); }
.chip-btn{ background:var(--card); }
.chip-btn::before{ background:var(--gold) !important; }
.chip-btn[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.toc a.on{ border-left-color:var(--gold); color:var(--navy); }
.faq-group > h2{ border-bottom-color:var(--gold); }
.qa summary:hover, .qa[open] summary{ color:var(--navy-2); }
.qa[open] summary .plus{ background:var(--navy); }
.form-grid{ align-items:start; }
.form-side p{ color:var(--dim); margin-top:16px; font-size:var(--t-lead); }
form.fj{ background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
form.fj input:not([type=checkbox]), form.fj select, form.fj textarea{ background:var(--bg); border-color:var(--line); }
form.fj input:focus, form.fj select:focus, form.fj textarea:focus{ border-color:var(--navy); background:#fff; }
form.fj .consent input{ accent-color:var(--navy); }
form.fj .consent a{ color:var(--navy-2); }
.contact-list a{ background:var(--card); font-family:var(--body); font-weight:700; }
.contact-list a:hover{ border-color:var(--navy); background:var(--tint); }
.form-done{ background:var(--tint); border:1px solid var(--tint-2); }
.form-done .tick, .thanks .tick{ background:var(--navy); color:#fff; }
.legal a{ color:var(--navy-2); }
.legal{ padding-bottom:var(--sect); }

/* Címke → cím → bevezető közti egységes térköz */
.eyebrow + h1, .eyebrow + h2{ margin-top:14px; }
h2 + .lead, h2 + .ph-lead{ margin-top:14px; }
.form-side p.eyebrow{ font-size:.72rem; margin-top:0; color:var(--dim); }
.form-side h2{ margin-top:14px; }
.section--tint .step{ background:var(--card); }
.legal h1{ margin-bottom:20px; }
.foot-bottom a{ display:inline-block; padding:6px 0; }
.back{ padding:8px 0; }
/* A díszek kilóghatnak a keretből, de az oldalt nem tolhatják szét */
main{ overflow-x:clip; }

/* ============ GÖRGETÉSRE BEÚSZÁS ============ */
.rv{
  opacity:0;
  translate:0 22px;
  transition:opacity .8s var(--ease), translate .8s var(--ease);
}
.rv.in{ opacity:1; translate:0 0; }
.rv-d1{ transition-delay:.08s; }
.rv-d2{ transition-delay:.16s; }
.rv-d3{ transition-delay:.24s; }
.rv-d4{ transition-delay:.32s; }
.rv-d5{ transition-delay:.40s; }

/* ============ OLDALAK KÖZTI ÁTMENET ============ */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vtOut .2s var(--ease) both; }
::view-transition-new(root){ animation:vtIn .34s var(--ease) both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; transform:translateY(8px); } }
body.page-out{ opacity:0; transition:opacity .18s var(--ease); }

/* ============ TÖRÉSPONTOK ============ */
@media (max-width: 960px){
  .hero-grid,.ph-grid,.about,.video-grid,.calc-grid,.split,.gallery,.form-grid{ grid-template-columns:1fr; }
  .hero-art,.ph-art{ width:min(380px, 84%); margin-top:14px; }
  .about .frame{ width:min(560px, 92%); margin-inline:auto; }
  .svc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cta-dark{ grid-template-columns:1fr; }
  .cta-dark__img{ min-height:300px; }
  .cta-dark__img img{
    object-position:50% 10%;
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 20%);
            mask-image:linear-gradient(180deg, transparent, #000 20%);
  }
  /* kisebb kijelzőn a kisebb indarajz töltődik be */
  .nature::before{ background-image:url("img/inda-bal-m.webp"); }
  .nature::after{ background-image:url("img/inda-jobb-m.webp"); }
  .nature--left::after{ background-image:url("img/inda-jobb-t-m.webp"); }
  .aside-card{ position:static; }
  .blocks,.steps,.why{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
  .prose{ max-width:none; }
}
@media (max-width: 860px){
  :root{ --nav-h:86px; }
  .nav-desk{ display:none; }
  .head-inner > .btn{ display:none; }
  .burger{ display:flex; }
  .head-inner{ padding:7px 8px 7px 12px; }
}
@media (min-width: 861px){ .nav-mob{ display:none; } }
@media (max-width: 640px){
  body{ font-size:16px; }
  .svc-grid{ grid-template-columns:1fr; }
  .calc-out{ grid-template-columns:1fr; }
  .deco-ring::before{ right:-5%; }
  .chip-float{ padding:8px 12px 8px 9px; gap:9px; font-size:.75rem; border-radius:16px; }
  .chip-float b{ font-size:1rem; }
  .chip-float .ic{ width:32px; height:32px; }
  .chip-float--a{ top:-20px; }
  .chip-float--b{ right:-4%; bottom:8%; }
  .tl{ grid-template-columns:1fr; gap:10px; }
  .foot-top{ grid-template-columns:1fr; }
  .foot-col a{ padding:9px 0; }
  .vslot .play{ width:62px; height:62px; box-shadow:0 0 0 9px rgba(255,255,255,.2); }
  .vslot .cap{ padding:34px 16px 14px; }
  .vslot .cap b{ font-size:.92rem; }
  form.fj{ grid-template-columns:1fr; }
  form.fj .submit{ justify-self:stretch; }
  .valuebar{ overflow:hidden; }
  .valuebar ul{ overflow:visible; justify-content:flex-start; padding-inline:0; }
  .valuebar ul.roll{ gap:0; width:max-content; animation:vroll 32s linear infinite; will-change:transform; }
  .valuebar ul.roll li{ padding-right:22px; padding-left:var(--gut); }
}
@media (max-width: 1100px){
  /* szűkebb fejléc: a vissza gomb csak ikon */
  .back-btn{ width:42px; padding:0; }
  .back-btn span{ display:none; }
}
@media (max-width: 860px){
  .back-btn{ width:auto; height:46px; padding:0 17px 0 13px; }
  .back-btn span{ display:inline; }
}
@media (min-width: 861px) and (max-width: 980px){
  /* keskeny asztali fejléc: a név alatti sor elmarad, hogy minden kiférjen egy sorban */
  .brand-txt > span{ display:none; }
  .nav-desk a{ padding-inline:12px; }
}
@media (max-width: 600px){
  /* keskeny kijelzőn a „Menü" felirat elmarad: csak a hamburger jel látszik, kerek gombban */
  .burger{ width:46px; padding:0; justify-content:center; gap:0; flex:none; }
  .burger .txt{ display:none; }
  .back-btn{ width:46px; height:46px; padding:0; }
  .back-btn span{ display:none; }
  .head-inner{ gap:8px; }
  .brand{ min-width:0; }
  .brand-txt{ min-width:0; }
}
@media (max-width: 400px){
  .brand-txt > span{ display:none; }
}
@media (max-width: 380px){
  .brand{ gap:9px; }
  .brand .mark{ width:34px; height:34px; font-size:.8rem; }
  .brand-txt b{ font-size:1rem; }
  .back-btn{ width:42px; height:42px; }
  .burger{ width:42px; height:42px; }
  .head-inner{ gap:6px; padding:7px 7px 7px 10px; }
}

/* ============ MOZGÁSCSÖKKENTÉS ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rv{ opacity:1; translate:0 0; }
  body.page-out{ opacity:1; }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  .valuebar ul.roll{ animation:none !important; width:auto; overflow-x:auto; }
}

/* ============ OLDALANKÉNTI KIEGÉSZÍTÉSEK ============ */
/* gyik.css */
/* GYIK: bal oszlop = témák + „Nem találod?” kártya, együtt tapad */
.faq-aside{ position:sticky; top:calc(var(--nav-h) + 24px); display:grid; gap:28px; }
.faq-aside .toc{ position:static; }
.faq-list{ min-width:0; }
.empty a{ color:var(--navy-2); text-decoration:underline; }
@media (min-width: 961px){
  .faq-layout{ grid-template-columns:250px 1fr; }
}
@media (max-width: 960px){
  /* mobilon a kártya a kérdések UTÁN jön */
  .faq-aside{ display:contents; }
  .faq-aside .side{ order:2; margin-top:8px; }
}

/* kapcsolat.css */
/* Űrlap bal hasábja: a `.form-side p` szabály az eyebrow-t is felnagyította */
.form-side p.eyebrow{ font-size:.72rem; margin-top:0; }
.form-side h2{ margin-top:14px; }

/* koszonjuk.css */
.thanks p a{ color:var(--navy-2); font-weight:700; }

/* rolam.css */
/* Rólam – galéria (természetben készült fotók) */

/* a levélágak elforgatott (átlátszó) doboza ne okozzon vízszintes görgetést;
   maga a rajz a kereten belül marad látható */
.gallery-band{ overflow-x:clip; }

.gallery-dots{ display:none; }
@media (max-width: 960px){
  /* táblagép: 2 × 2 egyforma kép */
  .gallery{ grid-template-columns:1fr 1fr; }
  .gallery .frame,.gallery .frame--wide{ grid-column:auto; }
  .gallery .frame__img{ height:auto; aspect-ratio:3 / 2; }
}
@media (max-width: 640px){
  /* telefon: a négy kép egy sorban, ujjal lapozható; egyszerre egy látszik, a következő belóg */
  .gallery{
    display:flex; gap:14px;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1);
    padding:12px var(--gut) 46px;
    margin-bottom:-28px;
  }
  .gallery::-webkit-scrollbar{ display:none; }
  .gallery .frame,.gallery .frame--wide{ flex:0 0 84%; scroll-snap-align:center; }
  .gallery .rv{ opacity:1; translate:none; }
  .gallery-dots{ display:flex; justify-content:center; align-items:center; gap:7px; }
  .gallery-dots button{
    width:9px; height:9px; padding:0; border:0; border-radius:99px;
    background:var(--tint-2); cursor:pointer;
    transition:width .3s var(--ease), background .3s var(--ease);
  }
  .gallery-dots button.on{ width:24px; background:var(--navy); }
}

/* videó-blokk: cím és bevezető közti térköz */
.video-grid h2{ margin-top:14px; }
.video-grid .lead{ margin-top:16px; }

/* ============ Hosszú bemutatkozó (lenyíló) ============ */
.bio{ margin-top:30px; }
.bio-toggle{
  width:100%;
  display:flex; align-items:center; gap:15px;
  padding:15px 22px 15px 15px;
  border:1.5px solid var(--line);
  border-radius:var(--r-md);
  background:var(--card);
  color:var(--navy);
  font:inherit; text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.bio-toggle:hover{ border-color:var(--tint-2); box-shadow:var(--shadow); }
.bio-toggle:focus-visible{ outline:2px solid var(--navy-2); outline-offset:3px; }
.bio-toggle__ico{
  width:46px; height:46px; flex:none;
  border-radius:50%;
  background:var(--navy); color:#fff;
  display:grid; place-items:center;
  transition:transform .45s var(--ease), background .3s var(--ease);
}
.bio-toggle[aria-expanded="true"] .bio-toggle__ico{ transform:rotate(180deg); background:var(--navy-2); }
.bio-toggle__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.bio-toggle__txt b{ font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:-.02em; line-height:1.2; }
.bio-toggle__txt small{ font-size:.86rem; color:var(--dim); line-height:1.35; }

/* a panel magassága 0-ról a tartalom magasságáig nyílik, akadás nélkül */
.bio-panel{ display:grid; grid-template-rows:1fr; }
.js .bio-panel{ grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .6s var(--ease), visibility 0s linear .6s; }
.js .bio-panel.open{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .6s var(--ease), visibility 0s; }
.bio-inner{ overflow:hidden; min-height:0; }
.bio-body{
  margin-top:18px;
  padding:6px 0 4px 24px;
  border-left:2px solid var(--tint-2);
}
.js .bio-body,.js .bio-close{ opacity:0; translate:0 -8px; transition:opacity .45s var(--ease), translate .45s var(--ease); }
.js .bio-panel.open .bio-body,.js .bio-panel.open .bio-close{ opacity:1; translate:none; transition-delay:.12s; }
.prose .bio-body h3{ margin:34px 0 12px; }
.prose .bio-body h3:first-child{ margin-top:6px; }
.prose .bio-body p{ margin-bottom:13px; }
.prose .bio-body .bio-lead{ font-size:1.14rem; font-weight:700; color:var(--navy); }
/* kiemelt gondolatok */
.prose .bio-body .bio-say{
  margin:4px 0 18px;
  padding:3px 0 3px 17px;
  border-left:3px solid var(--gold);
  font-family:"Fraunces", Georgia, serif; font-style:italic;
  font-size:1.2rem; line-height:1.45;
  color:var(--navy);
}
.bio-list{ list-style:none; margin:2px 0 16px; padding:0; display:grid; gap:7px; }
.bio-list li{ position:relative; padding-left:22px; font-weight:600; color:var(--navy); }
.bio-list li::before{ content:""; position:absolute; left:2px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.prose .bio-body .bio-end{ margin:20px 0 4px; font-weight:700; font-size:1.06rem; color:var(--navy); }
.bio-close{
  margin:20px 0 6px 24px;
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px 0 14px;
  border:1.5px solid var(--line); border-radius:999px;
  background:var(--card); color:var(--navy);
  font:inherit; font-weight:700; font-size:.88rem;
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.bio-close:hover{ background:var(--tint); border-color:var(--tint-2); }
@media (max-width: 640px){
  .bio-toggle{ padding:13px 16px 13px 13px; gap:13px; }
  .bio-toggle__ico{ width:42px; height:42px; }
  .bio-body{ padding-left:16px; }
  .prose .bio-body .bio-say{ font-size:1.1rem; padding-left:14px; }
  .bio-close{ margin-left:16px; }
}
@media (prefers-reduced-motion: reduce){
  .js .bio-panel,.js .bio-panel.open,.js .bio-body,.js .bio-close,.bio-toggle__ico{ transition:none; }
}

/* szolgaltatas.css */
/* Szolgáltatás-oldalak: fekvő (4:3) stock kép a fejben, fehér lépéskártyák a halványkék sávon */
.ph-art--svc{ width:min(500px, 100%); }
.section--tint .step{ background:var(--card); }
@media (max-width: 960px){
  .ph-art--svc{ width:min(460px, 92%); }
}
/* az űrlap melletti címke: a közös `.form-side p` szabály felülírná az .eyebrow méretét és térközét */
.form-side .eyebrow{ font-size:.72rem; margin-top:0; }
.form-side h2{ margin-top:14px; }