/* ============================================================
   APHRODITE SZÉPSÉGSZALON — styles.css
   Angle „Vitrin" (a 2026-08-02-i látványterv alapján)
   Elefántcsont + tinta + matt antikarany · Marcellus × Karla

   A látványterv óta változott:
   - a Great Vibes helyettesítő wordmark helyére a VALÓDI logó került;
   - a legkisebb feliratok 11,5–12 px-re nőttek (a 9,5–10,5 px túl kicsi volt);
   - a hero-medalionokba és a csapat-gyűrűkbe a profi stúdiófotók kerültek;
   - nincs Lenis és nincs egyedi kurzor: natív görgetés, kétirányú reveal.
   ============================================================ */

:root{
  /* — paletta — */
  --ivory:   #F6F1E8;   /* fő háttér */
  --ivory-2: #EFE8DC;   /* váltakozó szekció */
  --ivory-3: #E7DECF;   /* kártya-alap, kép-helyőrző */
  --ink:     #14110E;   /* szöveg, sötét panel */
  --espresso:#2A231C;   /* másodlagos sötét */
  --gold:    #B08455;   /* accent — CSAK vonal, keret, kitöltés-hover */
  --gold-lt: #D8B488;   /* sötét alapon szöveg, vonal */
  --gold-dp: #7A5530;   /* világos alapon apró szöveg (kontraszt ~5,9:1) */
  --muted:   #4A4036;   /* halk szöveg — sötétebb, hogy a vékony betű is olvasható legyen */
  --line:      rgba(176,132,85,.42);
  --line-soft: rgba(176,132,85,.22);
  --dark-muted:#D2C8B9; /* halk szöveg sötét alapon */

  /* — betűk — */
  --f-disp: 'Marcellus', 'Times New Roman', serif;
  --f-body: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  /* — ritmus — */
  --sp:   clamp(72px, 9vw, 140px);
  --gut:  clamp(18px, 4vw, 56px);
  --maxw: 1280px;
  --head-h: 72px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 16px); -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.72; font-weight:500;   /* a Karla 400-as túl vékony */
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,video{max-width:100%; display:block}
img[style*="--ar"]{aspect-ratio:var(--ar)}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip{position:absolute; left:-9999px; top:8px; z-index:1000; background:var(--ink); color:var(--ivory); padding:10px 16px}
.skip:focus{left:8px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:820px}

/* ── tipó ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:400; margin:0; letter-spacing:.06em; overflow-wrap:break-word}
/* A Marcellusnak csak egy vastagsága van: leheletnyi, betűszínű körvonal teszi testesebbé (a forma nem változik).
   Az arany, átlátszó színű (csillogó) szövegeken a körvonal is átlátszó, ott nem hat. */
h1,h2,h3,h4,.stat .n,.ar-sor .ar,.ar-tabla td,.kurzus .ar,.fk .tel,.bio-txt blockquote,.tv blockquote,
.mobil-menu nav a,.fl-honap b{-webkit-text-stroke:.018em currentColor}
/* magyar ékezetek: többsoros verzál címnél a sormagasság ne menjen 1.16 alá */
h1{font-size:clamp(34px,5.4vw,68px); line-height:1.16; text-transform:uppercase}
h2{font-size:clamp(30px,4vw,52px); line-height:1.18; text-transform:uppercase}
h3{font-size:clamp(20px,2.1vw,26px); line-height:1.26; text-transform:uppercase}
p{margin:0 0 1.1em}
.eyebrow{
  display:block; font-size:12px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dp);
}
.lead{font-size:clamp(18px,1.6vw,21px); line-height:1.74; color:var(--espresso)}
.small{font-size:14.5px; color:var(--muted)}
.num{font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1}

/* ── arany hajszálvonalak — a layout szignója ─────────────── */
.rule{height:1px; background:var(--line); border:0; margin:0}
.rule-dbl{height:5px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:0}
.ornament{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gold-dp); font-size:12px; letter-spacing:.3em; text-transform:uppercase}
.ornament::before,.ornament::after{content:''; height:1px; width:min(160px,22vw); background:var(--line)}
.diamond{width:6px; height:6px; background:var(--gold); transform:rotate(45deg); flex:0 0 auto}

/* ── szekció-váz ──────────────────────────────────────────── */
section{padding:var(--sp) 0; position:relative}
.sec-alt{background:var(--ivory-2)}
.sec-dark{background:var(--ink); color:var(--ivory)}
.sec-dark .lead{color:#D6CCBD}
.sec-dark .eyebrow{color:var(--gold-lt)}
.sec-dark .small{color:var(--dark-muted)}
.sec-head{text-align:center; margin:0 auto clamp(40px,5vw,70px); max-width:760px}
.sec-head .eyebrow{margin-bottom:16px}
.sec-head h2{margin-bottom:20px}
.sec-head .lead{margin:0 auto}

/* ── gombok ───────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-size:12.5px; font-weight:600; line-height:1.2;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; text-align:center;
  padding:16px 28px; border:1px solid var(--gold); color:var(--ink); background:transparent;
  position:relative; overflow:hidden; z-index:0; cursor:pointer;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--gold); z-index:-1;
  transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{transform:scaleX(1)}
.btn-solid{background:var(--ink); border-color:var(--ink); color:var(--ivory)}
.btn-solid:hover{color:var(--ink); border-color:var(--gold)}
.sec-dark .btn:not(.btn-solid),.split .btn{color:var(--ivory)}
.sec-dark .btn:not(.btn-solid):hover,.split .btn:hover{color:var(--ink)}
.btn-gold{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.btn-gold::before{background:var(--ivory)}
.btn-gold:hover{color:var(--ink)}
.sec-dark .btn-gold,.split .btn-gold{color:var(--ink)}
.btn-sm{padding:12px 18px; font-size:11.5px; letter-spacing:.16em}
.btn-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.link{color:var(--gold-dp); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .3s}
.link:hover{border-color:var(--gold-dp)}

/* ============================================================
   BETÖLTŐ — csak a munkamenet első oldalán, ~0,9 s
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:2000; background:var(--ivory);
  display:grid; place-content:center; justify-items:center; gap:22px;
  transition:opacity .6s var(--ease) .15s, visibility 0s linear .75s;
}
.loader img{width:min(320px,62vw); opacity:0; transform:translateY(8px); animation:ldIn .8s var(--ease) .05s forwards}
.loader-line{width:min(200px,40vw); height:1px; background:var(--gold); transform:scaleX(0); animation:ldLine .9s var(--ease) .2s forwards}
@keyframes ldIn{to{opacity:1; transform:none}}
@keyframes ldLine{to{transform:scaleX(1)}}
.betoltve .loader,.mar-jart .loader{opacity:0; visibility:hidden}
.mar-jart .loader{transition:none}
html:not(.js) .loader{display:none}

/* ============================================================
   FEJLÉC — sötét, áttetsző espresso (a látványterv szerint)
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:800;
  background:rgba(42,35,28,.9);
  backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid rgba(176,132,85,.30);
}
.site-head .inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:height .4s var(--ease);
}
.tomor .site-head .inner{height:60px}
.brand{display:block; flex:0 0 auto}
.brand img{height:44px; width:auto; transition:height .4s var(--ease)}
.tomor .brand img{height:36px}
.nav ul{display:flex; gap:clamp(18px,2.2vw,32px); list-style:none; margin:0; padding:0}
.nav a{
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none; color:var(--ivory); position:relative; padding:6px 0; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold-lt);
  transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease);
}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current]{color:var(--gold-lt)}
.head-cta{display:flex; align-items:center; gap:18px}
.head-tel{font-size:13.5px; letter-spacing:.08em; text-decoration:none; color:var(--gold-lt); white-space:nowrap}
/* nyelvváltó (HU · RO): halk, a fejléc sötét alapján; az aktív nyelv arany */
.nyelv{display:flex; align-items:center; gap:2px; font-size:12.5px; font-weight:600; letter-spacing:.14em}
.nyelv a{padding:6px 7px; color:var(--dark-muted); text-decoration:none; transition:color .3s}
.nyelv a + a{border-left:1px solid rgba(216,180,136,.35)}
.nyelv a:hover{color:var(--ivory)}
.nyelv a[aria-current]{color:var(--gold-lt)}
.btn-head{color:var(--ivory); padding:12px 20px; font-size:11.5px; letter-spacing:.18em}
.btn-head:hover{color:var(--ink)}

.menu-btn{
  display:none; width:44px; height:44px; border:1px solid rgba(176,132,85,.45); background:transparent;
  cursor:pointer; position:relative; flex:0 0 auto;
}
.menu-btn span{position:absolute; left:11px; right:11px; height:1px; background:var(--ivory); transition:transform .4s var(--ease), top .4s var(--ease)}
.menu-btn span:first-child{top:17px}
.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{top:21px; transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{top:21px; transform:rotate(-45deg)}

.mobil-menu{
  position:fixed; inset:0; z-index:790; background:var(--ink); color:var(--ivory);
  padding:calc(var(--head-h) + 34px) var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between; gap:30px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s linear .45s;
}
.mobil-menu[hidden]{display:flex}
.menu-nyitva .mobil-menu{opacity:1; visibility:visible; transition:opacity .45s var(--ease)}
.mobil-menu ul{list-style:none; margin:0; padding:0}
.mobil-menu li{border-bottom:1px solid rgba(176,132,85,.22); opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
.menu-nyitva .mobil-menu li{opacity:1; transform:none; transition-delay:calc(.06s * var(--i) + .08s)}
.mobil-menu nav a{display:block; padding:16px 2px; font-family:var(--f-disp); font-size:clamp(24px,7vw,34px); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; line-height:1.2}
.mobil-menu-foot{display:flex; flex-direction:column; gap:16px; align-items:flex-start}

.mobil-tel{color:var(--gold-lt); text-decoration:none; font-size:18px; letter-spacing:.08em}
.menu-nyitva{overflow:hidden}

/* ============================================================
   HERO — logó, három medalion, statok
   ============================================================ */
.hero{padding:clamp(52px,7vw,96px) 0 clamp(52px,6vw,88px); text-align:center; position:relative}
.hero::before{content:''; position:absolute; inset:clamp(14px,2.4vw,34px); border:1px solid var(--line-soft); pointer-events:none}
.hero .eyebrow{margin-bottom:clamp(26px,3.6vw,46px)}
.hero-logo{margin:0 auto clamp(20px,2.6vw,30px); max-width:min(640px,84vw)}
.hero-logo img{width:100%; height:auto}
.hero-lead{max-width:640px; margin:0 auto 34px}
.hero-actions{justify-content:center; margin-bottom:clamp(46px,6vw,74px)}

.arches{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3vw,42px); max-width:960px; margin:0 auto}
.arch{position:relative; padding:9px; border:1px solid var(--line); margin:0; will-change:transform}
.arch::after{content:''; position:absolute; inset:3px; border:1px solid var(--line-soft); pointer-events:none}
.arch .win{overflow:hidden; border-radius:50% 50% 4px 4px / 32% 32% 3px 3px; background:var(--ivory-3)}
.arch img{width:100%; height:auto; filter:saturate(.95) contrast(1.02); transition:transform 1.4s var(--ease)}
.arch:hover img{transform:scale(1.035)}
.arch figcaption{font-size:12px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dp); padding:13px 4px 2px}

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); max-width:960px; margin:clamp(44px,5vw,68px) auto 0;
  border-top:1px solid var(--line-soft); padding-top:30px;
}
.stat{padding:0 12px}
.stat + .stat{border-left:1px solid var(--line-soft)}
.stat .n{font-family:var(--f-disp); font-size:clamp(30px,3.6vw,46px); line-height:1; color:var(--ink)}
.stat .l{font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:10px; line-height:1.5}

/* ============================================================
   ALOLDAL-FEJ
   ============================================================ */
.page-hero{padding:clamp(56px,7vw,110px) 0 clamp(48px,6vw,86px); text-align:center; position:relative; border-bottom:1px solid var(--line-soft)}
.page-hero::before{content:''; position:absolute; inset:clamp(14px,2.4vw,34px) clamp(14px,2.4vw,34px) 0; border:1px solid var(--line-soft); border-bottom:0; pointer-events:none}
.page-hero .eyebrow{margin-bottom:20px}
.page-hero h1{margin-bottom:22px}
.page-hero .lead{max-width:680px; margin:0 auto}
.page-hero .ornament{margin-top:34px}

/* ── ugró-index (szolgáltatás-oldal, galéria) ─────────────── */
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:34px; list-style:none; padding:0}
.chip{
  display:inline-block; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 16px; border:1px solid var(--line); text-decoration:none; color:var(--ink); background:transparent;
  cursor:pointer; transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip:hover{border-color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.chip .db{color:var(--gold-dp); margin-left:6px}
.chip[aria-pressed="true"] .db{color:var(--gold-lt)}
.chip[hidden]{display:none}
/* Munkáink: „Kinek a munkái" választó (10-05) */
.szuro-cim{display:block; margin-top:34px}
.szuro-cim + .ki-valaszto, .szuro-cim + .chips{margin-top:14px}
.ki-valaszto{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px}
.ki-gomb{
  display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:15px; color:var(--ink);
  padding:5px 16px 5px 5px; border:1px solid var(--line); border-radius:40px; background:transparent; cursor:pointer;
  transition:border-color .3s, background .3s, color .3s;
}
.ki-gomb:hover{border-color:var(--gold); background:rgba(176,132,85,.08)}
.ki-gomb img{width:38px; height:38px; border-radius:50%; object-fit:cover; aspect-ratio:1}
.ki-gomb .ki-mind{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(176,132,85,.14); color:var(--gold-dp); font-size:15px}
.ki-gomb .db{font-size:12px; color:var(--gold-dp)}
.ki-gomb[aria-pressed="true"]{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
.ki-gomb[aria-pressed="true"] .db{color:var(--gold-lt)}
.ki-gomb[aria-pressed="true"] img{box-shadow:0 0 0 2px var(--gold-lt)}
.gal-ures{grid-column:1 / -1; text-align:center; color:var(--muted)}
.gal-ures[hidden]{display:none}

/* ============================================================
   A SZALON — bemutatkozás + csapatkép
   ============================================================ */
.intro-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,96px); align-items:center}
.intro-body h2{margin:14px 0 26px}
.intro-body > p:not(.lead):first-of-type::first-letter{font-family:var(--f-disp); float:left; font-size:66px; line-height:.82; padding:6px 12px 0 0; color:var(--gold)}
.frame{position:relative; margin:0; padding:10px; border:1px solid var(--line)}
.frame::after{content:''; position:absolute; inset:4px; border:1px solid var(--line-soft); pointer-events:none}
.frame img{width:100%; height:auto; background:var(--ivory-3)}
.frame figcaption{font-size:13px; letter-spacing:.06em; color:var(--muted); padding:12px 4px 0; text-align:center}
.meta-list{margin:34px 0 0; border-top:1px solid var(--line)}
.meta-row{display:grid; grid-template-columns:150px 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--line-soft); align-items:baseline}
.meta-row dt{font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp)}
.meta-row dd{margin:0; font-size:16px}
.meta-row a{text-decoration:none; border-bottom:1px solid var(--line)}

/* ============================================================
   VITRIN — szolgáltatás-rács
   ============================================================ */
.vitrin{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.cell{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,32px);
  position:relative; transition:background .5s var(--ease);
}
.cell:hover{background:rgba(176,132,85,.08)}
.cell .idx{font-family:var(--f-disp); font-size:13px; letter-spacing:.24em; color:var(--gold-dp); margin-bottom:18px; transition:transform .5s var(--ease)}
.cell:hover .idx{transform:translateX(5px)}
.cell h3{margin-bottom:12px; font-size:clamp(19px,1.65vw,24px)}   /* a „Sminktetoválás” 1440 px-en is egy sorban */
.cell p{font-size:15.5px; line-height:1.66; color:var(--muted); margin:0 0 18px}
.cell .kik{margin-top:auto; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dp); line-height:1.6}
.cell .nyil{position:absolute; right:22px; top:26px; width:18px; height:18px; opacity:0; transform:translateX(-6px); transition:opacity .4s, transform .5s var(--ease)}
.cell .nyil::before{content:''; position:absolute; inset:5px 3px 5px 0; border-top:1px solid var(--gold); border-right:1px solid var(--gold); transform:rotate(45deg)}
.cell:hover .nyil{opacity:1; transform:none}
.cell-dark{background:var(--ink); color:var(--ivory); grid-column:span 2}   /* a két képzés (10-05): az utolsó sorban, fél-fél szélességben */
.cell-dark:hover{background:var(--espresso)}
.cell-dark p{color:var(--dark-muted)}
.cell-dark .idx,.cell-dark .kik{color:var(--gold-lt)}

/* ============================================================
   CSAPAT — medalionok + bemutatkozó ablak
   ============================================================ */
.team{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.6vw,40px)}
.medal{text-align:center; display:flex; flex-direction:column; align-items:center}
.medal-fej{text-align:center; background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; color:inherit; font:inherit; width:100%}
.ring{
  width:min(200px,100%); aspect-ratio:1; margin:0 auto 22px; border-radius:50%; padding:6px;
  background:linear-gradient(140deg,var(--gold-lt),var(--gold) 38%,var(--gold-dp) 62%,var(--gold-lt));
  box-shadow:0 12px 32px rgba(20,17,14,.14);
  transition:transform .8s var(--ease), box-shadow .8s var(--ease);
}
.ring .win{display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; border:2px solid var(--ivory); background:var(--ivory-3)}
.ring img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.medal-fej:hover .ring,.medal-fej[aria-expanded="true"] .ring{transform:translateY(-4px); box-shadow:0 18px 40px rgba(20,17,14,.2)}
.medal-fej:hover .ring img{transform:scale(1.05)}
.medal h3{font-size:clamp(17px,1.45vw,19px); letter-spacing:.03em; margin-bottom:8px}
.medal .role{font-size:12.5px; line-height:1.55; letter-spacing:.08em; color:var(--gold-dp); max-width:24ch}
.medal .tovabb{margin-top:14px; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .3s}
.medal-fej:hover .tovabb,.medal-fej[aria-expanded="true"] .tovabb{color:var(--ink); border-color:var(--gold)}
.medal .tovabb{display:inline-flex; align-items:center; gap:8px}
.medal .nyil{width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--ease)}
.medal-fej[aria-expanded="true"] .nyil{transform:translateY(2px) rotate(-135deg)}
.medal-bio{margin-top:10px; background:none; border:0; padding:4px 2px; cursor:pointer; font:inherit; font-size:12.5px; letter-spacing:.04em; color:var(--gold-dp); text-decoration:underline; text-underline-offset:3px}
.medal-bio:hover{color:var(--ink)}

/* legördülő árlista a csapat alatt — a JS a kattintott portré sora után teszi */
.ar-panel{grid-column:1 / -1; background:var(--ivory-2); border:1px solid var(--line); position:relative; animation:apLe .5s var(--ease)}
.ar-panel[hidden]{display:none}
@keyframes apLe{from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none}}
.ap-belso{padding:clamp(22px,3.4vw,44px)}
.ap-fej{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px}
.ap-fej b{display:block; font-family:var(--f-disp); font-weight:400; font-size:clamp(20px,2vw,26px)}
.ap-fej span{display:block; margin-top:4px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dp)}
.ap-zar{flex:0 0 auto; width:40px; height:40px; border:1px solid var(--line); background:var(--ivory); cursor:pointer; position:relative}
.ap-zar::before,.ap-zar::after{content:''; position:absolute; left:11px; right:11px; top:50%; height:1.5px; background:var(--ink); transform:rotate(45deg)}
.ap-zar::after{transform:rotate(-45deg)}
.ap-csopok{columns:2 320px; column-gap:clamp(28px,4vw,60px)}
.ap-csopok .ar-csop{break-inside:avoid; display:inline-block; width:100%}
.ap-megj{margin:20px 0 10px; font-size:16px}
.ap-szolg{margin:4px 0 0; padding-left:1.1em}
.ap-szolg li{padding:5px 0; break-inside:avoid}
.ap-szolg li::marker{color:var(--gold-dp)}
.ar-panel .btn-row{margin-top:22px}

.bio{border:0; padding:0; max-width:min(980px,calc(100vw - 32px)); width:100%; max-height:calc(100dvh - 32px); background:var(--ivory); color:var(--ink); overflow:auto}
.bio::backdrop{background:rgba(20,17,14,.72); backdrop-filter:blur(4px)}
.bio[open]{animation:bioIn .6s var(--ease)}
@keyframes bioIn{from{opacity:0; transform:translateY(18px)}}
.bio-grid{display:grid; grid-template-columns:.9fr 1.1fr}
.bio-kep{background:var(--ivory-3)}
.bio-kep img{width:100%; height:100%; object-fit:cover}
.bio-txt{padding:clamp(28px,4vw,52px)}
.bio-txt .eyebrow{margin-bottom:12px}
.bio-txt h2{font-size:clamp(26px,3vw,36px); margin-bottom:22px}
.bio-txt p{font-size:16px; line-height:1.72; color:var(--espresso)}
.bio-txt blockquote{margin:24px 0; padding:4px 0 4px 20px; border-left:2px solid var(--gold); font-family:var(--f-disp); font-size:clamp(18px,1.8vw,22px); line-height:1.5; color:var(--ink)}
.bio-close{position:absolute; top:12px; right:12px; width:44px; height:44px; border:1px solid var(--line); background:var(--ivory); cursor:pointer; z-index:2}
.bio-close::before,.bio-close::after{content:''; position:absolute; left:12px; right:12px; top:21px; height:1px; background:var(--ink); transform:rotate(45deg)}
.bio-close::after{transform:rotate(-45deg)}

/* ============================================================
   GALÉRIA
   ============================================================ */
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px)}
.gal-item{margin:0; cursor:zoom-in}
.gal-item .kep{overflow:hidden; border:1px solid var(--line-soft); background:var(--ivory-3); position:relative}
.gal-item img{width:100%; height:auto; transition:transform 1.1s var(--ease), filter .6s; filter:saturate(.96)}
.gal-item:hover img{transform:scale(1.045); filter:saturate(1.02)}
.gal-item figcaption{display:flex; gap:10px; align-items:baseline; padding:11px 2px 0; font-size:13.5px; line-height:1.4; color:var(--espresso)}
.gal-item figcaption .n{font-size:12.5px; font-weight:600; color:var(--gold-dp); letter-spacing:.08em; flex:0 0 auto}
.gal-item figcaption .ki{display:block; margin-top:2px; font-size:12.5px; letter-spacing:.04em; color:var(--gold-dp)}
.gal-item[hidden]{display:none}
/* hosszú összetett szó (pl. „Szemöldöktetoválás") 320 px-en ne tágítsa ki a rácsot */
.gal > *{min-width:0}
.gal-item figcaption span:not(.n){overflow-wrap:anywhere; hyphens:auto}
.gal-more{text-align:center; margin-top:clamp(34px,4vw,54px)}
.gal-kat{grid-column:1 / -1; display:flex; align-items:center; gap:18px; margin-top:24px}
.gal-kat:first-child{margin-top:0}
.gal-kat h2{font-size:clamp(20px,2.2vw,26px); white-space:nowrap}
.gal-kat::after{content:''; flex:1; height:1px; background:var(--line)}
.gal-kat[hidden]{display:none}

.videok{display:grid; grid-template-columns:repeat(2,minmax(0,340px)); justify-content:center; gap:clamp(18px,3vw,40px)}
.video{margin:0}
.video .kep{padding:8px; border:1px solid var(--line); position:relative}
.video video{width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--ink)}
.video figcaption{font-size:13.5px; color:var(--espresso); padding-top:12px; text-align:center}

/* ── lightbox ─────────────────────────────────────────────── */
.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; background:rgba(20,17,14,.96); color:var(--ivory)}
.lb[open]{display:grid; grid-template-rows:1fr auto; animation:lbIn .4s var(--ease)}
@keyframes lbIn{from{opacity:0}}
.lb-stage{display:grid; place-items:center; padding:clamp(56px,6vw,70px) clamp(12px,7vw,96px) 12px; min-height:0}
.lb-stage img{max-width:100%; max-height:calc(100dvh - 150px); width:auto; height:auto; object-fit:contain}
.lb-bar{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:14px var(--gut) 20px; font-size:14px; color:#D6CCBD}
.lb-bar .n{font-weight:600; color:var(--gold-lt); letter-spacing:.1em; margin-right:10px}
.lb-btn{width:48px; height:48px; border:1px solid rgba(216,180,136,.4); background:rgba(20,17,14,.5); cursor:pointer; position:absolute; top:50%; transform:translateY(-50%)}
.lb-btn::before{content:''; position:absolute; left:18px; top:18px; width:11px; height:11px; border-top:1px solid var(--gold-lt); border-left:1px solid var(--gold-lt); transform:rotate(-45deg)}
.lb-prev{left:clamp(8px,2vw,28px)}
.lb-next{right:clamp(8px,2vw,28px)}
.lb-next::before{left:15px; transform:rotate(135deg)}
.lb-close{position:absolute; top:12px; right:12px; width:48px; height:48px; border:1px solid rgba(216,180,136,.4); background:transparent; cursor:pointer}
.lb-close::before,.lb-close::after{content:''; position:absolute; left:13px; right:13px; top:23px; height:1px; background:var(--ivory); transform:rotate(45deg)}
.lb-close::after{transform:rotate(-45deg)}

/* ============================================================
   SPLIT — oktatás-híd (szöveg saját sötét panelen, nem a fotón)
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:min(84vh,720px)}
.split .pane-img{position:relative; overflow:hidden; background:var(--ivory-3)}
.split .pane-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.94)}
.split .pane-txt{background:var(--ink); color:var(--ivory); display:flex; flex-direction:column; justify-content:center; padding:clamp(40px,6vw,90px)}
.split .pane-txt .eyebrow{color:var(--gold-lt); margin-bottom:18px}
.split .pane-txt h2{margin-bottom:24px}
.split .pane-txt .lead{color:#D6CCBD}
.split .pane-txt p{color:var(--dark-muted)}
.split .btn-row{margin-top:18px}
.split-rev .pane-img{order:2}

/* Klára sminkkurzusa: plakát (vágatlan) + szöveg egymás mellett, mobilon egymás alatt */
.klara-kurzus{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:clamp(36px,6vw,80px); align-items:center; max-width:1080px}
.klara-kurzus .plakat{margin:0; box-shadow:0 18px 48px rgba(0,0,0,.35)}
.klara-kurzus .plakat img{display:block; width:100%; height:auto}
.klara-kurzus .kurzus-foto{margin:28px 0 0; max-width:340px}
.klara-kurzus .kurzus-foto img{display:block; width:100%; height:auto; box-shadow:0 14px 36px rgba(0,0,0,.3)}
.klara-kurzus .kurzus-foto figcaption{margin-top:10px; font-size:13px; opacity:.75}
@media (max-width:749px){
  .klara-kurzus{grid-template-columns:1fr; text-align:center}
  .klara-kurzus .plakat{max-width:400px; margin:0 auto}
  .klara-kurzus .btn-row{justify-content:center}
  .klara-kurzus .kurzus-foto{margin:28px auto 0}
}

/* ============================================================
   SZOLGÁLTATÁS-TERÜLETEK (aloldal)
   ============================================================ */
.terulet{border-top:1px solid var(--line-soft)}
.terulet.alt{background:var(--ivory-2)}
.t-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(34px,6vw,90px); align-items:start}
.terulet.alt .t-grid{grid-template-columns:1.2fr .8fr}
.terulet.alt .t-kep{order:2}
.t-kep{position:sticky; top:calc(var(--head-h) + 30px)}
.t-kep .frame img{width:100%}
/* kép nélküli terület: egy hasáb, olvasható szélességben */
.t-grid.t-kepnelkul, .terulet.alt .t-grid.t-kepnelkul{grid-template-columns:minmax(0, 820px)}
.t-txt .idx{font-family:var(--f-disp); font-size:13px; letter-spacing:.24em; color:var(--gold-dp)}
.t-txt h2{margin:12px 0 22px}
.t-lista{list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line)}
.t-lista li{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.t-lista li::before{content:''; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); margin-top:11px}
.t-lista b{font-weight:600}
.t-lista span{display:block; font-size:14.5px; color:var(--muted)}
.kik{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:26px; align-items:center}
.kik .eyebrow{margin-right:6px}
/* a név gomb: alatta nyílik az árlistája (10-06) */
.kik-nev{display:inline-flex; align-items:center; gap:10px; font:inherit; font-size:14.5px; color:var(--ink); cursor:pointer; padding:5px 16px 5px 5px; background:none; border:1px solid var(--line); border-radius:40px; transition:border-color .3s, background .3s}
.kik-nev:hover{border-color:var(--gold); background:rgba(176,132,85,.08)}
.kik-nev[aria-expanded="true"]{border-color:var(--gold); background:rgba(176,132,85,.14); font-weight:600}
.kik-nev .nyil{width:7px; height:7px; margin-left:2px; border-right:1.5px solid var(--gold-dp); border-bottom:1.5px solid var(--gold-dp); transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--ease)}
.kik-nev[aria-expanded="true"] .nyil{transform:translateY(2px) rotate(-135deg)}
.kik img{width:34px; height:34px; border-radius:50%; object-fit:cover; aspect-ratio:1}
.kik-arak .ar-panel{margin-top:18px}

/* ── ártáblák ─────────────────────────────────────────────── */
.ar-csop{margin-top:26px}
.ar-csop h3{font-size:15px; font-family:var(--f-body); font-weight:600; letter-spacing:.2em; color:var(--gold-dp); margin-bottom:6px}
/* az ár egyedül áll a jobb szélen; az időtartam a név mellé kerül (két szám ne kerüljön egymás fölé) */
.ar-sor{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px dotted var(--line)}
.ar-sor .nev{font-size:16px}
.ar-sor .perc{font-size:13px; color:var(--muted); margin-left:8px; white-space:nowrap}
.ar-sor .perc-szoveg{white-space:normal}   /* szöveges idő (pl. „változó, frizurától függően") törhet */
.ar-sor > div:first-child{min-width:0}
.ar-sor .ar{font-family:var(--f-disp); font-size:19px; white-space:nowrap; text-align:right}
.ar-sor .ar small{font-family:var(--f-body); font-size:12.5px; color:var(--muted); margin-left:4px; letter-spacing:.06em}
.ar-tabla{width:100%; border-collapse:collapse; font-size:16px}
.ar-tabla th{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dp); text-align:right; padding:8px 0 8px 16px; border-bottom:1px solid var(--line)}
.ar-tabla th:first-child{text-align:left; padding-left:0}
.ar-tabla td{padding:11px 0 11px 16px; border-bottom:1px dotted var(--line); text-align:right; font-family:var(--f-disp); font-size:19px}
.ar-tabla td:first-child{text-align:left; padding-left:0; font-family:var(--f-body); font-size:16px}
.ar-csop .megj{font-size:14px; color:var(--muted); margin:12px 0 0}
.ar-lab{font-size:13.5px; color:var(--muted); margin-top:18px}

/* ============================================================
   OKTATÁS (aloldal)
   ============================================================ */
.kurzus{display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); margin-top:clamp(30px,4vw,46px)}
.kurzus > div{padding:clamp(20px,2.4vw,32px) 14px; text-align:center}
.kurzus > div + div{border-left:1px solid var(--line)}
.kurzus .ido{font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dp)}
.kurzus .ar{font-family:var(--f-disp); font-size:clamp(28px,3vw,38px); margin-top:10px; line-height:1}
.tanul{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,34px); margin-top:clamp(34px,4vw,54px)}
.tanul-item{border-top:1px solid var(--gold); padding-top:18px}
.tanul-item h3{font-size:18px; margin-bottom:10px}
.tanul-item p{font-size:15.5px; color:var(--muted); margin:0}
.tanitvany{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,44px)}
.tv{display:grid; grid-template-columns:120px 1fr; gap:24px; align-items:start; padding:clamp(22px,3vw,34px); border:1px solid var(--line); background:var(--ivory)}
.tv .ring{width:120px; margin:0; padding:4px}
.tv blockquote{margin:0 0 14px; font-family:var(--f-disp); font-size:clamp(18px,1.7vw,21px); line-height:1.5}
.tv .ki{font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dp)}
.tv p{font-size:15px; color:var(--muted); margin:10px 0 0}
.kepsor{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px)}

/* ============================================================
   KAPCSOLAT
   ============================================================ */
.colophon{border:1px solid var(--line); padding:clamp(26px,4vw,56px); background:var(--ivory)}
.colophon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px)}
.colophon .k{display:block; font-size:12px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:10px}
.colophon .v{font-size:16px; line-height:1.7}
.colophon a{text-decoration:none; border-bottom:1px solid var(--line)}
.cta-final{text-align:center; margin-top:clamp(34px,4vw,54px); padding-top:32px; border-top:1px solid var(--line-soft)}
.cta-final p{max-width:560px; margin:0 auto 24px}

.foglal-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.8vw,24px)}
.fk{display:flex; flex-direction:column; align-items:center; text-align:center; border:1px solid var(--line); background:var(--ivory); padding:clamp(22px,2.4vw,30px) 16px}
.fk .ring{width:112px; padding:4px; margin-bottom:16px}
.fk h3{font-size:17px; margin-bottom:6px}
.fk .role{font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:16px; min-height:3em}
.fk .tel{font-family:var(--f-disp); font-size:19px; text-decoration:none; margin-bottom:16px; letter-spacing:.03em}
.fk-gombok{margin-top:auto; width:100%; display:grid; gap:8px}
.fk .btn{width:100%}
.fk .terulet-cimke{font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:12px}

/* — üzenet-szerkesztő: arany hajszálvonal-mezők (a látványterv űrlapja) — */
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,2.6vw,36px) clamp(24px,3.2vw,46px)}
.fgrid .full{grid-column:1 / -1}
.field{display:flex; flex-direction:column}
.field label{font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dp); margin-bottom:9px}
.field .req{color:var(--gold); margin-left:3px}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:17px; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--line); border-radius:0; padding:9px 0 11px; width:100%;
  transition:border-color .35s, box-shadow .35s;
}
.field textarea{resize:vertical; min-height:110px; line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#9B8E7E}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-bottom-color:var(--gold); box-shadow:0 1px 0 0 var(--gold)}
.field .sel{position:relative}
.field .sel::after{content:''; position:absolute; right:3px; top:45%; width:7px; height:7px; border-right:1px solid var(--gold-dp); border-bottom:1px solid var(--gold-dp); transform:translateY(-50%) rotate(45deg); pointer-events:none}
.field select{appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:24px}
.field .sugo{font-size:13.5px; color:var(--muted); margin-top:8px}
.factions{grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.factions .small{margin:0; max-width:46ch}
.fmsg{grid-column:1 / -1; padding:14px 18px; border:1px solid var(--gold); background:rgba(176,132,85,.1); font-size:15px}
.fmsg[hidden]{display:none}

.terkep{position:relative; border:1px solid var(--line); padding:9px; background:var(--ivory)}
.terkep-belso{position:relative; aspect-ratio:16/7; background:var(--ivory-3); display:grid; place-content:center; text-align:center; gap:16px; padding:24px}
.terkep-belso iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.terkep-belso p{max-width:46ch; margin:0 auto; font-size:14.5px; color:var(--muted)}

/* ============================================================
   LÁBLÉC
   ============================================================ */
.foot{background:var(--ink); color:var(--ivory); padding:clamp(56px,6vw,86px) 0 34px}
.foot-grid{display:grid; grid-template-columns:1.3fr .8fr 1.2fr 1.1fr; gap:clamp(28px,4vw,56px)}
.foot-brand .foot-logo{display:table; margin-bottom:20px}
.foot-brand img{width:min(260px,70vw); height:auto}
.foot-brand p{font-size:15px; color:var(--dark-muted); max-width:32ch}
.foot-h{font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.24em; color:var(--gold-lt); margin-bottom:16px}
.foot ul{list-style:none; margin:0; padding:0; font-size:15px; line-height:2.05; color:#E4DCCF}
.foot a{text-decoration:none; color:#E4DCCF; transition:color .3s}
.foot a:hover{color:var(--gold-lt)}
.foot-nev{color:var(--dark-muted); margin-right:6px}
.foot-base{margin-top:clamp(38px,4vw,56px); padding-top:22px; border-top:1px solid rgba(176,132,85,.24); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:13px; letter-spacing:.06em; color:#9A8E7E}

/* ============================================================
   REVEAL — kétirányú (IntersectionObserver toggle, nem egyszeri)
   ============================================================ */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease), transform .95s var(--ease)}
.js .rv.in{opacity:1; transform:none}
.js .rv-d1{transition-delay:.08s} .js .rv-d2{transition-delay:.16s} .js .rv-d3{transition-delay:.24s} .js .rv-d4{transition-delay:.32s}
.js .rule-rv{transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease) .12s}
.js .rule-rv.in{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv,.js .rule-rv{opacity:1; transform:none; transition:none}
  .loader{display:none}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}

/* ============================================================
   RESZPONZÍV
   ============================================================ */
@media (max-width:1180px){
  .nav ul{gap:18px}
  .head-tel{display:none}
  .vitrin{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vitrin .cell-dark{grid-column:auto}
  .foglal-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1024px){
  :root{--head-h:64px}
  .nav,.btn-head{display:none}
  .menu-btn{display:block}
  .intro-grid,.t-grid,.terulet.alt .t-grid{grid-template-columns:1fr}
  .terulet.alt .t-kep{order:0}
  .t-kep{position:static; max-width:520px}
  .team{grid-template-columns:repeat(3,1fr); row-gap:44px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .colophon-grid{grid-template-columns:repeat(2,1fr)}
  .kurzus{grid-template-columns:repeat(3,1fr)}
  .kurzus > div:nth-child(4){border-left:0}
  .kurzus > div:nth-child(n+4){border-top:1px solid var(--line)}
  .tanitvany{grid-template-columns:1fr}
  .bio-grid{grid-template-columns:1fr}
  .bio-kep{max-height:46vh; overflow:hidden}
  .bio-kep img{object-position:50% 18%}   /* a dobozt levágjuk: inkább alul vesszen el, ne a fej */
}
@media (max-width:749px){
  body{font-size:16.5px}
  .brand img{height:36px}
  .arches{grid-template-columns:repeat(3,1fr); gap:10px}
  .arch{padding:5px}
  .arch::after{inset:2px}
  .arch figcaption{font-size:11.5px; letter-spacing:.16em; padding-top:9px}
  .stats{grid-template-columns:1fr 1fr; row-gap:28px}
  .stat:nth-child(3){border-left:0}
  .vitrin{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
  .team .medal:nth-of-type(5){grid-column:1 / -1}
  .gal{grid-template-columns:1fr 1fr}
  .split,.split-rev{grid-template-columns:1fr; min-height:0}
  .split .pane-img{height:92vw; max-height:520px; order:0}
  .colophon-grid,.fgrid{grid-template-columns:1fr}
  .foglal-grid{grid-template-columns:1fr 1fr}
  .kurzus{grid-template-columns:1fr 1fr}
  .kurzus > div:nth-child(n){border-left:0; border-top:1px solid var(--line)}
  .kurzus > div:nth-child(1){border-top:0; grid-column:1 / -1}
  .kurzus > div:nth-child(even){border-right:1px solid var(--line)}
  .tanul{grid-template-columns:1fr}
  .tv{grid-template-columns:1fr; text-align:center}
  .tv .ring{margin:0 auto}
  .kepsor{grid-template-columns:1fr 1fr}
  .videok{grid-template-columns:1fr 1fr; gap:12px}
  .meta-row{grid-template-columns:1fr; gap:4px}
  .foot-grid{grid-template-columns:1fr}
  .terkep-belso{aspect-ratio:4/5}
  .factions{flex-direction:column; align-items:stretch}
}
@media (max-width:420px){
  /* a hosszú verzál szavak (SZOLGÁLTATÁSOK, SMINKTETOVÁLÁS) 320 px-en is férjenek ki */
  h1{font-size:min(34px,8.6vw); letter-spacing:.04em}
  h2{font-size:min(30px,7.6vw); letter-spacing:.04em}
  .split .pane-txt{padding:40px 22px}
  .arches{gap:7px}
  .arch figcaption{letter-spacing:.1em}
  .foglal-grid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
}

/* ============================================================
   CSILLOGÓ ARANY — minden arany elemen lassan átfutó fény
   (Heni oldalának „foil" mintájára; kurzorkövetés NINCS).
   Szöveg: fémes színátmenet a betűkbe vágva, 7 mp-enként egy fénycsík fut át rajta.
   Kitöltés (gomb, rombusz, lépésszám): fémes arany + oda-vissza úszó fénysáv.
   Logó: a fénycsík a logó alakjára maszkolva fut végig.
   ============================================================ */
:root{
  --foil: linear-gradient(115deg, #DDB48A 0%, #B08455 28%, #8E6238 48%, #C0915F 68%, #E2BF95 86%, #A6774A 100%);
}

/* szöveg — világos alapon (sötét arany, a fény is olvasható marad) */
.eyebrow, .ornament, .link, .arch figcaption, .chip .db, .meta-row dt, .cell .idx, .cell .kik,
.medal .role, .gal-item figcaption .n, .gal-item figcaption .ki, .t-txt .idx,
.ar-csop h3, .ar-tabla th, .kurzus .ido, .tv .ki, .colophon .k,
.fk .terulet-cimke, .field label, .fl-hetnapok span, .fl-osszegzes dt, .fl-modosit,
.intro-body > p:not(.lead):first-of-type::first-letter{
  background-image:linear-gradient(100deg, var(--gold-dp) 0 40%, #94693F 46%, #C4935F 50%, #94693F 54%, var(--gold-dp) 60% 100%);
  background-size:300% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:aranyFeny 7s ease-in-out infinite;
}
/* a nagy iniciálé világosabb aranyból indul */
.intro-body > p:not(.lead):first-of-type::first-letter{
  background-image:linear-gradient(100deg, var(--gold) 0 40%, #CFA474 46%, #F6E3C8 50%, #CFA474 54%, var(--gold) 60% 100%);
}
/* szöveg — sötét alapon */
.sec-dark .eyebrow, .split .pane-txt .eyebrow, .cell-dark .idx, .cell-dark .kik,
.chip[aria-pressed="true"] .db, .nav a[aria-current], .head-tel, .mobil-tel, .lb-bar .n,
.foot-h{
  background-image:linear-gradient(100deg, var(--gold-lt) 0 40%, #E9CBA4 46%, #FBEDDC 50%, #E9CBA4 54%, var(--gold-lt) 60% 100%);
  background-size:300% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:aranyFeny 7s ease-in-out infinite;
}
/* a fénycsík balról jobbra fut át, aztán pihen */
@keyframes aranyFeny{
  0%{background-position:100% 0}
  45%,100%{background-position:0 0}
}

/* kitöltések: fémes arany */
.btn::before, .btn-gold, .diamond, .t-lista li::before, .fl-lepesek li.kesz .num, .loader-line{background:var(--foil)}
.btn-gold::before{background:var(--ivory)}
/* gomb: oda-vissza úszó fénysáv, amikor a gomb arannyal kitöltött */
.btn::after{
  content:''; position:absolute; top:-30%; left:0; width:34%; height:160%; z-index:-1; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,250,225,.5), transparent);
  opacity:0; transition:opacity .4s var(--ease);
  animation:foilUszas 7s ease-in-out infinite alternate;
}
.btn:hover::after, .btn-gold::after{opacity:1}
.btn-gold:hover::after{opacity:0}
@keyframes foilUszas{
  from{transform:translateX(-120%) skewX(-16deg)}
  to  {transform:translateX(330%) skewX(-16deg)}
}

/* medalion-gyűrű: lassan hullámzó csillogás */
.ring{
  background:linear-gradient(140deg, #E2BF95, #B08455 25%, #7A5530 45%, #D8B488 60%, #8E6238 78%, #E2BF95);
  background-size:220% 220%;
  animation:gyuruFeny 8s ease-in-out infinite alternate;
}
@keyframes gyuruFeny{
  from{background-position:0% 0%}
  to  {background-position:100% 100%}
}

/* logó: a logó alakjára maszkolt fénycsík */
.brand, .hero-logo, .foot-logo{position:relative}
.brand img, .hero-logo img, .foot-logo img{display:block}
.hero-logo img{margin:0 auto}
.brand::after, .hero-logo::after, .foot-logo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 0 38%, rgba(255,246,210,.9) 50%, transparent 62% 100%);
  background-size:300% 100%; background-repeat:no-repeat;
  -webkit-mask:url(../img/logo/logo-arany.webp) center / 100% 100% no-repeat;
          mask:url(../img/logo/logo-arany.webp) center / 100% 100% no-repeat;
  animation:aranyFeny 7s ease-in-out infinite;
}
.hero-logo::after{animation-delay:.6s}

@media (prefers-reduced-motion:reduce){
  .eyebrow, .ornament, .link, .cell .idx, .cell .kik, .btn::after, .ring,
  .brand::after, .hero-logo::after, .foot-logo::after, [class], .intro-body p::first-letter{animation:none !important}
  .brand::after, .hero-logo::after, .foot-logo::after, .btn::after{display:none}
}

/* ============================================================
   ADATKEZELÉSI TÁJÉKOZTATÓ — nyugodt, jól olvasható jogi szöveg
   ============================================================ */
.jogi{padding-bottom:clamp(20px,3vw,40px)}
.jogi h2{font-size:clamp(22px,2.2vw,28px); margin:clamp(34px,4vw,50px) 0 14px}
.jogi h2:first-child{margin-top:0}
.jogi p, .jogi li{font-size:16.5px; line-height:1.75; color:var(--espresso)}
.jogi p{margin:0 0 12px}
.jogi ul{margin:0 0 14px; padding-left:1.2em}
.jogi li{margin-bottom:6px}
.jogi li::marker{color:var(--gold-dp)}
.jogi a{color:var(--gold-dp); text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}
.jogi .hataly{margin-top:clamp(30px,4vw,44px); font-size:14px; color:var(--muted)}
.jogi mark.hianyzik{background:#FFE7A3; color:#5A3A00; padding:1px 6px; font-weight:600}
.foot-base a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.fgdpr a{color:var(--gold-dp); text-decoration:underline}