/* ==== forrás: mintaoldal.css ==== */
/* Szemüvegszabóság – mintaoldal designrendszer
   Newsreader + Karla · kemény felezés · vonal, nem doboz · szürke alap
   Mozgás: kizárólag transform és opacity. Semmi könyvtár. */

:root{
  /* --- alapszín: az első verzió meleg törtfehére, egyetlen tónusban ---
     A --surface szándékosan azonos a --paper-rel: a lap és a cellák egy színen
     vannak, ahogy az első változatban. Ha valaha rétegzett hatás kell,
     elég ezt az egy értéket #FFFFFF-re emelni – minden más marad. */
  --paper:#ECECEF;
  /* Egy fokkal erősebb szürke a --paper és a --rule között: váltakozó
     sávokhoz, ahol egymás alatti azonos blokkokat kell szétválasztani. */
  --paper-2:#E0E0E6;
  --surface:#ECECEF;
  --foot:#E0E0E5;
  --ink:#131318;
  --ink-2:#565660;
  --ink-3:#888892;
  --rule:#D6D6DC;
  --acc:#FFE100;
  --acc-ink:#16161A;
  /* táblaszínek – a saját keretekből */
  --rose:#F0B7C6;
  --lav:#BFB4E8;
  --moss:#9FC7A8;
  --sand:#E2D6BC;
  --gut:clamp(18px,3vw,40px);
  --ease:cubic-bezier(.22,.7,.25,1);
  /* betűcsaládok változóban: egy fájllal cserélhető az egész tipográfia */
  --f-disp:Newsreader,Georgia,"Times New Roman",serif;
  --f-ui:Karla,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-ui);
  font-size:17px;line-height:1.58;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block;max-width:100%}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.disp{font-family:var(--f-disp);font-weight:400;
  letter-spacing:-.02em;line-height:1.03;text-wrap:balance}
.h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
.h2{font-size:clamp(1.7rem,3.1vw,2.5rem)}
.lbl{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.lead{font-size:1.08rem;color:var(--ink-2)}
.sm{font-size:.93rem;color:var(--ink-2)}
.xs{font-size:.79rem;color:var(--ink-3)}

/* sárga aláhúzás, ami behúzódik */
.u{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;transition:background-size .32s var(--ease)}
.u:hover,.u:focus-visible{background-size:100% 2px}

/* olvasási sáv – transformmal, nulla layout-munka */
.progress{position:fixed;inset:0 0 auto 0;height:3px;background:var(--acc);z-index:60;
  transform:scaleX(0);transform-origin:0 50%}

/* --- SÁRGA RÉTEG ---
   A sárga négy helyen jelenik meg, mindegyik funkcionális: jelöl, kiemel vagy cselekvésre hív.
   Sehol nem dekoráció. */

/* a) rovatjelző előtti tömör kocka */
.lbl::before{content:"";display:inline-block;width:6px;height:6px;background:var(--acc);
  margin-right:9px;vertical-align:middle;transform:translateY(-1px)}

/* b) filctoll-kiemelés a címben – alapból kitöltve, mozgásnál rajzolódik */
.hl{position:relative;display:inline-block;z-index:0}
.hl::after{content:"";position:absolute;left:-.05em;right:-.05em;bottom:.07em;height:.26em;
  background:var(--acc);z-index:-1;transform:scaleX(1);transform-origin:0 50%}

/* c) sárga vonal, ami behúzódik a rovatcím alá */
.band-head::after{content:"";display:block;height:2px;width:96px;background:var(--acc);
  margin-top:6px;transform:scaleX(1);transform-origin:0 50%}

/* d) teljes szélességű sárga cselekvéssáv */
.cta{background:var(--acc);color:var(--acc-ink);border-bottom:1px solid var(--ink);
  padding:clamp(30px,4vw,52px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.cta .t{display:flex;flex-direction:column;gap:9px;max-width:46ch}
.cta .t p{font-size:1rem;max-width:44ch}
.btn.dark{background:var(--ink);border-color:var(--ink);color:var(--acc)}
.btn.dark:hover{background:transparent;color:var(--ink)}

/* ---------- fejléc ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--ink);display:flex;align-items:center;gap:22px;
  padding:13px var(--gut);flex-wrap:wrap}
.mark{font-family:var(--f-disp);font-style:italic;font-size:1.38rem;letter-spacing:-.015em;
  white-space:nowrap;margin-right:auto}
.nav{display:flex;gap:19px;flex-wrap:wrap}
.nav a{display:flex;align-items:center;gap:7px;font-size:.92rem;font-weight:500}
.nav a::before{content:"";width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%;
  flex:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.nav a:hover::before,.nav a[aria-current]::before{background:var(--acc);transform:scale(1.25)}

.btn{display:inline-flex;align-items:center;gap:9px;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);font:inherit;font-size:.89rem;font-weight:600;
  padding:9px 18px;border-radius:99px;cursor:pointer;white-space:nowrap;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease)}
.btn span{transition:transform .28s var(--ease)}
.btn:hover{background:var(--acc);border-color:var(--acc)}
.btn:hover span{transform:translate(2px,-2px)}
.btn.solid{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btns{display:flex;gap:11px;flex-wrap:wrap}

/* ---------- a kemény felezés ---------- */
.split{--h:clamp(400px,58vh,520px);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--ink);border-bottom:1px solid var(--ink)}
.split.hero{--h:clamp(460px,70vh,620px)}
.split.compact{--h:clamp(330px,44vh,440px)}
.split.r64{grid-template-columns:6fr 5fr}   /* enyhén széles bal */
.split.r46{grid-template-columns:5fr 7fr}   /* széles jobb */
.half{background:var(--surface);display:flex;flex-direction:column;justify-content:flex-end;
  gap:13px;padding:clamp(20px,2.6vw,38px);min-height:var(--h)}
.half.mid{justify-content:center}
.half.top{justify-content:flex-start}
.half.pic{padding:0;background:var(--ink);overflow:hidden;position:relative}
/* A kép abszolút pozícióban ül: így a felezés magasságát a SZÖVEG és a --h szabja
   meg, nem a fotó természetes mérete. Enélkül egy 768x1024-es kép 1100 px-re
   nyújtaná a sort. */
.half.pic img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 28%}
.half.rose{background:var(--rose)}
.half.lav{background:var(--lav)}
.half.moss{background:var(--moss)}
.half.sand{background:var(--sand)}
.half.rose *,.half.lav *,.half.moss *,.half.sand *{color:var(--ink)}
.half p{max-width:40ch}
.half .lead{max-width:34ch}

/* ---------- sávok ---------- */
.strip{border-bottom:1px solid var(--ink);padding:14px var(--gut);background:var(--paper);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.strip .lbl{margin-right:4px}
.strip a{display:flex;align-items:center;gap:8px;font-size:.98rem;font-weight:500}
.strip a::before{content:"";width:9px;height:9px;border:1.5px solid var(--ink);border-radius:50%;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.strip a:hover::before{background:var(--acc);transform:scale(1.25)}

.band{padding:clamp(34px,4.6vw,64px) var(--gut);border-bottom:1px solid var(--ink);background:var(--paper)}
.band-head{display:flex;flex-direction:column;gap:10px;max-width:44ch;margin-bottom:28px;align-items:flex-start}
.band.tight{padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(24px,3vw,40px)}

/* ---------- arcfal ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px}
.face{background:var(--surface);display:flex;flex-direction:column;
  box-shadow:0 0 0 1px var(--rule)}
.face .ph{overflow:hidden;display:block;aspect-ratio:2/3;background:var(--rule)}
.face img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.face:hover img,.face:focus-visible img{transform:scale(1.045)}
.face .cap{padding:11px 13px 15px;display:flex;flex-direction:column;gap:2px;
  transition:background .28s var(--ease)}
.face:hover .cap,.face:focus-visible .cap{background:var(--acc)}
.face .cap b{font-weight:700;font-size:.95rem;align-self:flex-start}
.face .cap span{font-size:.81rem;color:var(--ink-2)}

/* ---------- lépések ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px;background:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.step{background:var(--surface);padding:clamp(20px,2.3vw,30px);display:flex;flex-direction:column;gap:9px}
.step .n{font-family:var(--f-disp);font-size:2.2rem;line-height:1;color:var(--ink-3)}
.step h3{font-size:1.12rem;font-weight:700;font-family:var(--f-ui)}

/* ---------- eset-lista ---------- */
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px}
.case{background:var(--surface);padding:19px 21px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 0 0 1px var(--rule);transition:background .25s var(--ease)}
.case:hover{background:var(--paper)}
.case h3{font-family:var(--f-disp);font-size:1.24rem;letter-spacing:-.01em;line-height:1.12}
.case p{font-size:.91rem;color:var(--ink-2)}

/* ---------- tábla / ár ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:1px;background:var(--ink);border:1px solid var(--ink)}
.fact{background:var(--surface);padding:19px 21px;display:flex;flex-direction:column;gap:4px}
.fact b{font-family:var(--f-disp);font-size:1.8rem;line-height:1;letter-spacing:-.02em}
.fact span{font-size:.85rem;color:var(--ink-2)}
.fact.hl{background:var(--acc)}
.fact.hl span{color:var(--acc-ink)}

/* ---------- GYIK ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-size:1.04rem;font-weight:600;
  display:flex;align-items:center;gap:12px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:10px;height:10px;border:1.5px solid var(--ink);
  border-radius:50%;flex:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.faq summary:hover::before{transform:scale(1.25)}
.faq details[open] summary::before{background:var(--acc)}
.faq .a{padding:0 0 17px 22px;max-width:62ch}

/* ---------- kollekciók ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px}
.colr{background:var(--surface);padding:17px 19px;display:flex;flex-direction:column;gap:3px;
  min-height:108px;box-shadow:0 0 0 1px var(--rule);
  transition:background .25s var(--ease),color .25s var(--ease)}
.colr b{font-family:var(--f-disp);font-size:1.28rem;letter-spacing:-.01em}
.colr span{font-size:.83rem;color:var(--ink-2);transition:color .25s var(--ease)}
.colr:hover{background:var(--acc)}
.colr:hover span{color:var(--acc-ink)}

/* ---------- lábléc ---------- */
.site-foot{padding:clamp(30px,3.4vw,48px) var(--gut) 34px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px;background:var(--paper)}
.fcol{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.fcol h4{font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:4px}
.note{margin:0;padding:13px var(--gut);border-top:1px solid var(--rule);
  font-size:.77rem;color:var(--ink-3);background:var(--paper)}

/* =========================================================
   MOZGÁS
   Csak transform és opacity – mindkettő a videokártyán fut.
   A hero kizárólag transformot használ, hogy az LCP-t ne késleltesse.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){

  /* betöltési sorrend a heróban */
  .in{animation:inRise .62s var(--ease) both}
  .in:nth-child(2){animation-delay:.05s}
  .in:nth-child(3){animation-delay:.1s}
  .in:nth-child(4){animation-delay:.15s}
  .in:nth-child(5){animation-delay:.2s}
  @keyframes inRise{from{transform:translateY(13px)}to{transform:none}}

  /* a hero képe „leül” – nincs opacity, tehát nem tolja az LCP-t */
  .split.hero .half.pic img{animation:settle 1.15s var(--ease) both}
  @keyframes settle{from{transform:scale(1.055)}to{transform:none}}

  /* Görgetésre kelő blokkok.
     FONTOS: a rejtett kiindulóállapot SOHA nem az alapértelmezés. Vagy a böngésző
     tudja a görgetéshez kötött animációt, vagy a JS teszi rá a .js-rv jelzőt.
     Ha egyik sincs (JS kikapcsolva, régi böngésző), minden egyszerűen látszik. */
  @supports (animation-timeline: view()){
    .rv{animation:rvIn linear both;animation-timeline:view();animation-range:entry 3% cover 20%}
  }
  html.js-rv .rv{opacity:.001;transform:translateY(15px)}
  html.js-rv .rv.seen{opacity:1;transform:none;
    transition:opacity .55s ease,transform .55s var(--ease)}
  @keyframes rvIn{from{opacity:.001;transform:translateY(15px)}to{opacity:1;transform:none}}

  /* a filctoll-kiemelés a cím alá rajzolódik, kicsit a szöveg után */
  .hl::after{animation:hlDraw .68s var(--ease) .5s both}
  @keyframes hlDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* a rovatcím sárga vonala görgetésre húzódik be */
  .band-head::after{transform:scaleX(0)}
  @supports (animation-timeline: view()){
    .band-head::after{animation:lineDraw linear both;
      animation-timeline:view();animation-range:entry 8% cover 24%}
  }
  html.js-rv .band-head.seen::after{transform:scaleX(1);
    transition:transform .6s var(--ease) .12s}
  @keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  /* finom képsodródás görgetés közben – csak a nem-hero képeknél */
  @supports (animation-timeline: view()){
    .split:not(.hero) .half.pic img{animation:drift linear both;
      animation-timeline:view();animation-range:cover}
    .progress{animation:bar linear both;animation-timeline:scroll()}
  }
  @keyframes drift{from{transform:scale(1.07) translateY(-2.2%)}
                     to{transform:scale(1.07) translateY(2.2%)}}
  @keyframes bar{to{transform:scaleX(1)}}
}

/* ---------- mobil ---------- */
@media (max-width:820px){
  .split,.split.r64,.split.r46{grid-template-columns:1fr}
  .split{--h:0}
  .half{min-height:0;padding:22px 20px 26px}
  .half.pic{min-height:0;aspect-ratio:3/2}
  .half.pic.first{order:-1}
  .site-head{gap:12px;padding:11px var(--gut)}
  .nav{width:100%;gap:13px;order:3}
  .mark{margin-right:auto;font-size:1.24rem}
  .split.hero .half:not(.pic){padding-top:28px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}


/* ==== forrás: layout-v2.css ==== */
/* ============================================================
   V3 — Lindberg-irány, letisztítva
   · nincs színes hátterű blokk: mindenhol a szürke alap, mellette kép
   · a sárga KIZÁRÓLAG lassan behúzódó aláhúzásként jelenik meg
   · nincsenek karikák a menüben
   A mintaoldal.css tetejére kerül, és felülírja, ami kell.
   ============================================================ */

:root{
  --ease:cubic-bezier(.16,.72,.24,1);
  --slow:.95s;
  --slower:1.5s;
}

/* ---------- több levegő ---------- */
.band{padding:clamp(48px,6.5vw,104px) var(--gut)}
.band-head{gap:14px;margin-bottom:40px;max-width:46ch}
.split{--h:clamp(400px,56vh,540px)}

/* ============================================================
   A SÁRGA EGYETLEN FORMÁJA: behúzódó aláhúzás
   ============================================================ */
.u{background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.u:hover,.u:focus-visible{background-size:100% 2px}

/* címben: alapból kihúzva, betöltéskor lassan rajzolódik */
.hl{position:relative;display:inline-block}
.hl::after{content:"";position:absolute;left:0;right:0;bottom:-.02em;height:.075em;
  background:var(--acc);transform:scaleX(1);transform-origin:0 50%}

/* minden más helyen ugyanez az aláhúzás, hoverre */
.nav a,.strip a,.facerow .cap b,.collgrid .cap b,.colr b,.linkline{
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current],
.strip a:hover,.strip a:focus-visible,
.facerow a:hover .cap b,.facerow a:focus-visible .cap b,
.collgrid a:hover .cap b,.collgrid a:focus-visible .cap b,
.colr:hover b,.colr:focus-visible b,
.linkline:hover{background-size:100% 2px}

/* amit kiveszünk: karikák, sárga kockák, sárga vonalak, sárga kitöltések */
.nav a::before,.strip a::before,.lbl::before,.band-head::after,
.faq summary::before,.progress{display:none!important;content:none!important}
.facerow a:hover .cap,.facerow a:focus-visible .cap,
.collgrid a:hover .cap,.colr:hover,.case:hover{background:transparent!important}
.colr:hover span,.collgrid a:hover .cap span{color:var(--ink-2)!important}

/* gombok: szögletes, sárga, enyhe térbeli árnyékkal */
.btn,.btn.solid,.btn.dark{
  border-radius:0;
  background:var(--acc);
  border:1px solid rgba(22,22,26,.22);
  color:var(--acc-ink);
  font-weight:600;
  letter-spacing:.04em;
  padding:11px 20px;
  box-shadow:0 2px 5px rgba(22,22,26,.17), 0 1px 1px rgba(22,22,26,.10);
  transition:box-shadow var(--slow) var(--ease),transform var(--slow) var(--ease)}
.btn:hover,.btn.solid:hover,.btn.dark:hover{
  background:var(--acc);color:var(--acc-ink);border-color:rgba(22,22,26,.3);
  box-shadow:0 5px 13px rgba(22,22,26,.22), 0 2px 3px rgba(22,22,26,.12);
  transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:0 1px 3px rgba(22,22,26,.2)}

/* ---------- fejléc ---------- */
.brand{display:flex;align-items:center;gap:13px;margin-right:auto;min-width:0}
.brand .logo{height:26px;display:block;flex:none}
.brand .logo-ph{height:26px;padding:0 11px;display:flex;align-items:center;
  border:1.5px dashed var(--ink-3);border-radius:3px;
  font-family:var(--f-ui);font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.brand .sub{font-family:var(--f-ui);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding-left:13px;
  border-left:1px solid var(--rule);white-space:nowrap}
@media (max-width:560px){.brand .sub{display:none}}
.nav a{gap:0}
.strip a{gap:0}

/* ---------- videósáv ---------- */
.vband{display:block;position:relative;width:100%;aspect-ratio:16/7;overflow:hidden;
  background:var(--ink);border-bottom:1px solid var(--ink)}
.vband img,.vband video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 26%}
.vband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.28) 0%,rgba(10,10,12,0) 36%,rgba(10,10,12,.4) 100%)}
.vband .badge{position:absolute;left:var(--gut);bottom:clamp(18px,3vw,32px);z-index:2;
  display:flex;align-items:center;gap:12px;color:#F2F2EF}
.vband .play{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(242,242,239,.85);
  display:grid;place-items:center;flex:none;
  transition:background var(--slower) var(--ease),border-color var(--slower) var(--ease)}
.vband .play::before{content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid #F2F2EF;border-top:7px solid transparent;border-bottom:7px solid transparent;
  transition:border-left-color var(--slower) var(--ease)}
.vband:hover .play{background:#F2F2EF;border-color:#F2F2EF}
.vband:hover .play::before{border-left-color:#16161A}
.vband .badge span{font-family:var(--f-ui);font-size:.78rem}
.vband .badge b{display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;opacity:.72;margin-bottom:2px}
@media (max-width:700px){.vband{aspect-ratio:4/5}}

/* ---------- állítássáv ---------- */
.statement{padding:clamp(56px,8vw,120px) var(--gut);border-bottom:1px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,64px);align-items:end}
.statement .big{font-family:var(--f-disp);font-weight:400;letter-spacing:-.022em;line-height:1.04;
  font-size:clamp(2.3rem,5.4vw,4.2rem);text-wrap:balance;margin:0}
.statement .side{display:flex;flex-direction:column;gap:18px}
.statement .side p{font-size:1.06rem;color:var(--ink-2);max-width:40ch}
@media (max-width:820px){.statement{grid-template-columns:1fr;align-items:start}}

/* ---------- arcsor ---------- */
.facerow{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--rule)}
.facerow.four{grid-template-columns:repeat(4,1fr)}
.facerow a{background:var(--paper);display:block;overflow:hidden}
.facerow .ph{display:block;aspect-ratio:2/3;overflow:hidden;background:var(--rule)}
.facerow img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--slower) var(--ease),filter 1.8s var(--ease)}
.facerow a:hover img,.facerow a:focus-visible img{transform:scale(1.03)}
.facerow .cap{padding:15px 16px 20px;display:flex;flex-direction:column;gap:3px}
.facerow .cap b{font-weight:700;font-size:.95rem;align-self:flex-start}
.facerow .cap span{font-size:.81rem;color:var(--ink-2)}
.facerow.bw img{filter:grayscale(1) contrast(1.03)}
.facerow.bw a:hover img,.facerow.bw a:focus-visible img{filter:grayscale(0) contrast(1)}
@media (max-width:1100px){.facerow{grid-template-columns:repeat(3,1fr)}
  .facerow.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.facerow,.facerow.four{grid-template-columns:repeat(2,1fr)}}

/* ---------- kiemelt blokk: szöveg a szürke alapon, mellette kép ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ink);
  border-bottom:1px solid var(--ink)}
.feature.rev .txt{order:2}
.feature .txt{background:var(--paper);padding:clamp(34px,5vw,72px);
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  min-height:clamp(500px,66vh,700px)}
.feature .txt p{max-width:42ch;font-size:1rem;color:var(--ink-2)}
.feature .pic{position:relative;overflow:hidden;background:var(--ink)}
.feature .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 2s var(--ease)}
.feature ul.pts{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.feature ul.pts li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.96rem;
  align-items:baseline;color:var(--ink-2)}
.feature ul.pts li::before{content:"";width:5px;height:5px;background:var(--ink-3);
  border-radius:50%;transform:translateY(-3px)}
@media (max-width:820px){
  .feature{grid-template-columns:1fr}
  .feature.rev .txt{order:0}
  .feature .pic{aspect-ratio:4/5}
  .feature .txt{min-height:0}
}

/* ---------- kollekciók ---------- */
.collgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.collgrid a{background:var(--paper);display:flex;flex-direction:column}
.collgrid .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--rule)}
.collgrid img{width:100%;height:100%;object-fit:cover;transition:transform var(--slower) var(--ease)}
.collgrid a:hover img{transform:scale(1.035)}
.collgrid .cap{padding:18px 20px 24px;display:flex;flex-direction:column;gap:4px}
.collgrid .cap b{font-family:var(--f-disp);font-size:1.34rem;letter-spacing:-.012em;
  align-self:flex-start}
.collgrid .cap span{font-size:.85rem;color:var(--ink-2)}
@media (max-width:900px){.collgrid{grid-template-columns:repeat(2,1fr)}}

/* ---------- kampánysáv, szürke alapon ---------- */
.campaign{border-bottom:1px solid var(--ink);padding:clamp(48px,6.5vw,104px) 0 0;
  background:var(--paper)}
.campaign .head{padding:0 var(--gut);max-width:52ch;display:flex;flex-direction:column;
  gap:14px;margin-bottom:clamp(30px,4vw,48px);align-items:flex-start}
.campaign .head p{color:var(--ink-2);font-size:1rem}
.campaign .strip4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule)}
.campaign .strip4 span{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--rule)}
.campaign .strip4 img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--slower) var(--ease)}
.campaign .strip4 span:hover img{transform:scale(1.03)}
.campaign .foot{padding:clamp(22px,3vw,34px) var(--gut) 0}
@media (max-width:820px){.campaign .strip4{grid-template-columns:repeat(2,1fr)}}

/* ---------- záró cselekvéssáv, szürke alapon ---------- */
.cta{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--ink);
  padding:clamp(48px,6.5vw,104px) var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta .t{display:flex;flex-direction:column;gap:12px;max-width:46ch}
.cta .t p{font-size:1rem;color:var(--ink-2);max-width:44ch}

/* ---------- lassabb, elegánsabb mozgás ---------- */
@media (prefers-reduced-motion:no-preference){
  .in{animation:inRise var(--slower) var(--ease) both}
  .in:nth-child(2){animation-delay:.14s}
  .in:nth-child(3){animation-delay:.28s}
  .in:nth-child(4){animation-delay:.42s}
  @keyframes inRise{from{transform:translateY(18px)}to{transform:none}}

  .vband>img{animation:settle 2.8s var(--ease) both}
  @keyframes settle{from{transform:scale(1.07)}to{transform:none}}

  .hl::after{animation:hlDraw 1.3s var(--ease) .85s both}
  @keyframes hlDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  html.js-rv .rv{opacity:.001;transform:translateY(20px)}
  html.js-rv .rv.seen{opacity:1;transform:none;
    transition:opacity 1.1s ease,transform 1.1s var(--ease)}
  @supports (animation-timeline: view()){
    .rv{animation-range:entry 2% cover 30%}
  }
  .feature .pic img{animation:none}
}


/* ============================================================
   MÚZEUMI SZEDÉS
   Kiállítási falfelirat-logika: ritkított verzál rovatjelző,
   nyugodtabb, kevésbé szorított címek, dőlt kísérőszöveg.
   ============================================================ */
body{line-height:1.72;font-size:16.5px}

.lbl{font-size:.63rem;letter-spacing:.3em;font-weight:600;color:var(--ink-3)}

.disp,.statement .big{letter-spacing:-.004em;line-height:1.14}
.h1,.statement .big{font-size:clamp(2.2rem,4.9vw,3.7rem)}
.h2{font-size:clamp(1.6rem,2.9vw,2.35rem)}

.band-head p.sm,.campaign .head p,.statement .side p{
  font-family:var(--f-disp);font-style:italic;font-size:1.06rem;line-height:1.6;
  color:var(--ink-2)}

/* fotófeliratok = kiállítási táblácskák */
.facerow .cap,.collgrid .cap{padding-top:16px;gap:5px}
.facerow .cap b,.collgrid .cap b{
  font-family:var(--f-ui);font-size:.74rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;line-height:1.4}
.facerow .cap span,.collgrid .cap span{
  font-family:var(--f-disp);font-style:italic;font-size:.94rem;line-height:1.45;
  color:var(--ink-2)}

/* felsorolás: szellősebb, halkabb */
.feature ul.pts{gap:14px;margin-top:10px}
.feature ul.pts li{font-size:.97rem;line-height:1.6}
.feature .txt p{line-height:1.72}

/* a videósáv felirata is táblácska */
.vband .badge span{letter-spacing:.03em}
.vband .badge b{letter-spacing:.28em}


/* ==== forrás: layout-v3.css ==== */
/* ============================================================
   V5 — a főoldal 13 blokkos szerkezete
   · elválasztó vonalak: világosszürke (--rule), mint az arcsorok között
   · gombanimáció látványosabb: sárga besöprés + emelkedés
   · ars poetica: egy tengelyre rendezve
   · kollekciók: hoverre kinyíló panelek
   · kulcsszó-pörgetés videósávval
   · kirakat és magazin blokk
   A layout-v2.css után töltődik.
   ============================================================ */

/* ---------- 1 · elválasztó vonalak világosszürkére ---------- */
.vband,.statement,.feature,.campaign,.cta,.band,.split,
.site-head,.msgband,.shopband,.showcase{border-color:var(--rule)}
.feature,.collgrid,.facerow,.campaign .strip4,.shgrid,.msgband{background:var(--rule)}
.site-foot{border-top:1px solid var(--rule)}

/* ---------- 2 · gombok: látványosabb, de nem hangos ---------- */
.btn,.btn.solid,.btn.dark{position:relative;isolation:isolate;overflow:hidden;
  transition:box-shadow .55s var(--ease),transform .55s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,#FFF17A 0%,#FFE100 55%);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .62s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn:hover,.btn.solid:hover,.btn.dark:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(22,22,26,.20), 0 2px 4px rgba(22,22,26,.14)}
.btn:active{transform:translateY(0) scale(.99);
  box-shadow:0 1px 2px rgba(22,22,26,.22)}
.btn span[aria-hidden]{transition:transform .55s var(--ease)}
.btn:hover span[aria-hidden]{transform:translate(3px,-3px)}

/* ---------- 3 · ars poetica: egyetlen tengely ---------- */
.creed{padding:clamp(64px,9vw,132px) var(--gut);border-bottom:1px solid var(--rule);
  background:var(--paper);display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:clamp(18px,2.4vw,30px)}
.creed .lbl{letter-spacing:.34em}
.creed .big{font-family:var(--f-disp);font-weight:400;letter-spacing:-.014em;
  line-height:1.1;font-size:clamp(2.1rem,4.6vw,3.5rem);margin:0;
  max-width:17ch;text-wrap:balance}
.creed .lead{font-family:var(--f-disp);font-style:italic;font-size:1.1rem;
  line-height:1.62;color:var(--ink-2);max-width:52ch;margin:0}
.creed .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.creed .hair{width:1px;height:clamp(28px,4vw,54px);background:var(--rule)}

/* ---------- 4 · kinyíló panelsor (kollekciók, kirakat, magazin) ---------- */
.collexp{display:flex;gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.collexp>a{flex:1 1 0;min-width:0;background:var(--paper);display:flex;
  flex-direction:column;transition:flex-grow 1.7s var(--ease)}
.collexp:hover>a{flex-grow:.87}
.collexp>a:hover,.collexp>a:focus-within{flex-grow:2}
.collexp .ph{display:block;height:clamp(300px,33vw,430px);overflow:hidden;
  background:var(--rule)}
.collexp .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 2.2s var(--ease)}
.collexp>a:hover .ph img{transform:scale(1.04)}

/* a felirat magassága rögzített: a leírás oldalra nyílik, nem lefelé */
.collexp .cap{display:flex;flex-direction:row;align-items:flex-start;
  gap:clamp(16px,2vw,30px);padding:18px 20px;overflow:hidden;
  height:clamp(108px,9.5vw,132px)}
.collexp .ttl{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;max-width:16ch}
.collexp .ttl b{font-family:var(--f-disp);font-size:1.32rem;letter-spacing:-.012em;
  font-weight:400;align-self:flex-start;
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.collexp>a:hover .ttl b{background-size:100% 2px}
.collexp .ttl span{font-family:var(--f-disp);font-style:italic;font-size:.93rem;
  color:var(--ink-2)}
.collexp .more{flex:1 1 0;min-width:0;overflow:hidden;opacity:0;
  display:flex;flex-direction:column;gap:9px;
  border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,30px);
  transition:opacity .4s var(--ease)}
.collexp>a:hover .more,.collexp>a:focus-within .more{opacity:1;
  transition:opacity 1s var(--ease) .65s}
.collexp .more .tx{font-size:.93rem;line-height:1.58;color:var(--ink-2);max-width:46ch}
.collexp .more .linkline{font-family:var(--f-ui);font-size:.7rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink);align-self:flex-start}
@media (max-width:900px){
  .collexp{flex-wrap:wrap}
  .collexp>a,.collexp:hover>a,.collexp>a:hover{flex:1 1 calc(50% - 1px)}
  .collexp .ph{height:min(52vw,320px)}
  .collexp .cap{flex-direction:column;height:auto;gap:10px}
  .collexp .more{opacity:1;border-left:none;padding-left:0}
}

/* ---------- 5 · kulcsszó-pörgetés videóval ---------- */
.msgband{display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--rule);border-bottom:1px solid var(--rule)}
.msgband .vid{position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(500px,66vh,700px);display:block}
.msgband .vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;transition:transform 2.4s var(--ease)}
.msgband .vid:hover img{transform:scale(1.03)}
.msgband .vid::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.22),rgba(10,10,12,0) 45%,rgba(10,10,12,.32))}
.msgband .vid .play{position:absolute;left:clamp(18px,3vw,32px);bottom:clamp(18px,3vw,32px);
  z-index:2;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(242,242,239,.85);display:grid;place-items:center;
  transition:background var(--slower) var(--ease),border-color var(--slower) var(--ease)}
.msgband .vid .play::before{content:"";width:0;height:0;margin-left:3px;
  border-left:11px solid #F2F2EF;border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  transition:border-left-color var(--slower) var(--ease)}
.msgband .vid:hover .play{background:#F2F2EF;border-color:#F2F2EF}
.msgband .vid:hover .play::before{border-left-color:#16161A}
.msgband .words{background:var(--paper);padding:clamp(32px,4.6vw,68px);
  display:flex;flex-direction:column;justify-content:center;gap:16px}
.msgband .kicker{font-family:var(--f-disp);font-style:italic;font-size:1.1rem;
  color:var(--ink-2);margin:0}
.wordroll{height:1.16em;overflow:hidden;font-family:var(--f-disp);font-weight:400;
  font-size:clamp(2.4rem,4.8vw,3.9rem);line-height:1.16;letter-spacing:-.018em}
.wordroll ul{margin:0;padding:0;list-style:none}
.wordroll li{height:1.16em;line-height:1.16em;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .wordroll ul{animation:wordroll 21s var(--ease) infinite}
}
@keyframes wordroll{
  0%,12%    {transform:translateY(0)}
  16.6%,28.6%{transform:translateY(-1.16em)}
  33.3%,45.3%{transform:translateY(-2.32em)}
  50%,62%   {transform:translateY(-3.48em)}
  66.6%,78.6%{transform:translateY(-4.64em)}
  83.3%,95.3%{transform:translateY(-5.8em)}
  100%      {transform:translateY(-6.96em)}
}
.msgband .words .sm{color:var(--ink-2);font-size:.96rem;max-width:38ch;margin:0}
@media (max-width:900px){
  .msgband{grid-template-columns:1fr}
  .msgband .vid{min-height:0;aspect-ratio:4/3}
}

/* ---------- 6 · üzletsáv: egy teljes szélességű kép, ráírt adatokkal ---------- */
.shopband{position:relative;border-bottom:1px solid var(--rule);background:var(--ink);
  min-height:clamp(420px,50vw,620px);display:flex;align-items:flex-end;overflow:hidden}
.shopband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%}
.shopband::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.12) 0%,rgba(10,10,12,.22) 38%,rgba(10,10,12,.74) 100%)}
.shopband .card{position:relative;z-index:2;width:100%;color:#F2F2EF;
  padding:clamp(28px,4vw,58px) var(--gut);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) auto;
  gap:clamp(20px,3vw,48px);align-items:end}
.shopband .lbl{color:rgba(242,242,239,.72)}
.shopband h2{color:#F2F2EF;margin:8px 0 0}
.shopband p{color:rgba(242,242,239,.85);font-size:.98rem;margin:6px 0 0}
.shopband a.u{color:#F2F2EF}
.shopband dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 18px;
  font-family:var(--f-ui);font-size:.9rem;color:rgba(242,242,239,.85)}
.shopband dt{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,242,239,.6);align-self:center}
.shopband dd{margin:0}
@media (max-width:900px){
  .shopband .card{grid-template-columns:1fr;align-items:start;gap:18px}
}

/* ---------- 7 · kirakat ---------- */
.showcase{border-bottom:1px solid var(--rule);background:var(--paper);
  padding:clamp(48px,6.5vw,104px) 0 0}
.showcase .band-head{padding:0 var(--gut);margin-bottom:clamp(26px,3.4vw,44px)}
.shgrid{display:grid;grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);gap:1px;
  background:var(--rule);border-top:1px solid var(--rule)}
.shgrid .main{position:relative;overflow:hidden;background:var(--rule);
  min-height:clamp(320px,42vw,540px);display:block}
.shgrid .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.8s var(--ease)}
.shgrid .main:hover img{transform:scale(1.03)}
.shgrid .main .tag{position:absolute;left:0;top:0;z-index:2;background:var(--acc);
  color:var(--acc-ink);font-family:var(--f-ui);font-size:.64rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;padding:8px 14px}
.shgrid .side{display:grid;grid-template-rows:repeat(3,1fr);gap:1px;background:var(--rule)}
.shgrid .side a{position:relative;overflow:hidden;background:var(--rule);display:block;
  min-height:110px}
.shgrid .side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.03);transition:filter 1.4s var(--ease),transform 1.6s var(--ease)}
.shgrid .side a:hover img{filter:none;transform:scale(1.04)}
.shgrid .side .yr{position:absolute;left:12px;bottom:10px;z-index:2;color:#F2F2EF;
  font-family:var(--f-ui);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.showcase .foot{padding:clamp(22px,3vw,34px) var(--gut) 0}
@media (max-width:900px){
  .shgrid{grid-template-columns:1fr}
  .shgrid .side{grid-template-rows:none;grid-template-columns:repeat(3,1fr)}
  .shgrid .side a{min-height:130px}
}

/* ---------- 8 · lábléc ---------- */
.site-foot .fcol h4{font-family:var(--f-ui);font-size:.66rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.site-foot .fcol .xs{color:var(--ink-2)}
.site-foot dl.hours{margin:10px 0 0;display:grid;grid-template-columns:auto 1fr;
  gap:3px 14px;font-size:.86rem;color:var(--ink-2)}
.site-foot dl.hours dt{color:var(--ink-3)}
.site-foot dl.hours dd{margin:0}
.site-foot .press{display:flex;flex-direction:column;gap:7px}
.site-foot .press a{font-size:.88rem}
.site-foot .ph-note{font-size:.72rem;color:var(--ink-3);margin-top:10px;font-style:italic}

/* ---------- apró igazítások ---------- */
.site-foot .fcol a{font-family:var(--f-ui);font-size:.9rem;align-self:flex-start}
.site-foot .fcol .xs{font-size:.9rem;line-height:1.6}
.showcase .band-head{max-width:60ch}
.showcase .band-head p.sm{max-width:48ch}

/* ============================================================
   V7
   ============================================================ */

/* ---------- 9 · a görgetésre kelő blokkok ne csússzanak el ----------
   A teljes szélességű sávok korábban 20 px-ről emelkedtek fel, ezért a még
   be nem töltött blokk fölött rés maradt az elválasztó vonal és a kép között.
   Ezek most csak halványodnak, nem mozdulnak. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rvFade{from{opacity:.001}to{opacity:1}}
  @supports (animation-timeline: view()){
    .feature.rv,.msgband.rv,.facerow.rv,.collexp.rv,.shopband.rv,.vband.rv{
      animation-name:rvFade}
  }
  html.js-rv .feature.rv,html.js-rv .msgband.rv,html.js-rv .facerow.rv,
  html.js-rv .collexp.rv,html.js-rv .shopband.rv{transform:none}
  html.js-rv .feature.rv.seen,html.js-rv .msgband.rv.seen,html.js-rv .facerow.rv.seen,
  html.js-rv .collexp.rv.seen,html.js-rv .shopband.rv.seen{transform:none}
}

/* ---------- 10 · gomb: sárga marad, a jelzés tintavonal ----------
   A világos csillanás aranyos hatást keltett; helyette a lap saját
   mozdulata: a felirat alá behúzódik egy tintavonal, a gomb megemelkedik,
   és a sárga egy árnyalattal mélyül. */
.btn::after{background:var(--acc)}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1)}
.btn,.btn.solid,.btn.dark{
  background:var(--acc);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),
             background-color .5s var(--ease)}
.btn:hover,.btn.solid:hover,.btn.dark:hover{background:#FFD500}
.btn:hover::after,.btn:focus-visible::after{background:#FFD500}
.btn>.lbl-line{position:relative;display:inline-block}
.btn>.lbl-line::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--ink);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s var(--ease)}
.btn:hover>.lbl-line::after,.btn:focus-visible>.lbl-line::after{transform:scaleX(1)}

/* ---------- 11 · arcsorok kinyíló panelekkel ---------- */
.facerow.exp{display:flex;gap:1px;background:var(--rule)}
.facerow.exp>a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  background:var(--paper);transition:flex-grow 1.7s var(--ease)}
.facerow.exp:hover>a{flex-grow:.9}
.facerow.exp>a:hover,.facerow.exp>a:focus-within{flex-grow:2.7}
.facerow.exp.four:hover>a{flex-grow:.87}
.facerow.exp.four>a:hover,.facerow.exp.four>a:focus-within{flex-grow:2}
.facerow.exp .ph{aspect-ratio:auto;height:clamp(320px,34vw,470px)}
.facerow.exp .cap{flex-direction:row;align-items:flex-start;
  gap:clamp(16px,2vw,28px);padding:16px 18px;overflow:hidden;
  height:clamp(126px,10.4vw,152px)}
.facerow.exp .ttl{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;max-width:17ch}
.facerow.exp .more{flex:1 1 0;min-width:0;overflow:hidden;opacity:0;
  display:flex;flex-direction:column;gap:9px;
  border-left:1px solid var(--rule);padding-left:clamp(16px,2vw,30px);
  transition:opacity .4s var(--ease)}
.facerow.exp>a:hover .more,.facerow.exp>a:focus-within .more{opacity:1;
  transition:opacity 1s var(--ease) .65s}
.facerow.exp .more .tx{font-family:var(--f-ui);font-style:normal;font-size:.92rem;
  line-height:1.58;color:var(--ink-2);max-width:46ch;letter-spacing:0;text-transform:none}
.facerow.exp .more .linkline{font-family:var(--f-ui);font-style:normal;font-size:.7rem;
  font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink);
  align-self:flex-start}
@media (max-width:1100px){
  .facerow.exp{flex-wrap:wrap}
  .facerow.exp>a,.facerow.exp:hover>a,.facerow.exp>a:hover{flex:1 1 calc(33.333% - 1px)}
}
@media (max-width:900px){
  .facerow.exp>a,.facerow.exp:hover>a,.facerow.exp>a:hover{flex:1 1 calc(50% - 1px)}
  .facerow.exp .ph{height:min(58vw,340px)}
  .facerow.exp .cap{flex-direction:column;height:auto;gap:10px}
  .facerow.exp .more{opacity:1;border-left:none;padding-left:0}
}

/* ============================================================
   V8 · GOMB: SÜLLYEDÉS
   Nincs színváltás és nincs csillanás. A gomb lefelé mozdul,
   a külső árnyék eltűnik, és belülről kap vetett árnyékot —
   mintha lenyomnád. (A "C" változat a gombválasztó lapról.)
   ============================================================ */
.btn,.btn.solid,.btn.dark{
  background:var(--acc);color:var(--acc-ink);
  border:1px solid rgba(22,22,26,.22);
  box-shadow:0 2px 5px rgba(22,22,26,.17), 0 1px 1px rgba(22,22,26,.10);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease),
             border-color .5s var(--ease)}
.btn::after{display:none!important;content:none!important}
.btn>.lbl-line::after{display:none!important;content:none!important}
.btn:hover,.btn.solid:hover,.btn.dark:hover,
.btn:focus-visible,.btn.solid:focus-visible,.btn.dark:focus-visible{
  background:var(--acc);color:var(--acc-ink);
  transform:translateY(2px);
  border-color:rgba(22,22,26,.34);
  box-shadow:inset 0 2px 6px rgba(22,22,26,.22)}
.btn:hover span[aria-hidden],.btn:focus-visible span[aria-hidden]{
  transform:translate(2px,-2px)}
.btn:active{transform:translateY(2px);
  box-shadow:inset 0 3px 9px rgba(22,22,26,.28)}

/* ============================================================
   V9
   ============================================================ */

/* ---------- lábléc: külön tónus, hogy lezárja a lapot ---------- */
:root{--foot:#E7E6E0}
.site-foot{background:var(--foot);border-top:1px solid #D2D1CA;
  padding:clamp(40px,4.6vw,66px) var(--gut) clamp(34px,4vw,52px);
  gap:clamp(26px,3vw,44px)}
.site-foot .fcol h4{color:#6F6F76}
.site-foot .fcol .xs,.site-foot dl.hours dd{color:#4F4F56}
.site-foot dl.hours dt{color:#8A8A90}
.site-foot .ph-note{color:#8A8A90}
.site-foot .brand .logo-ph{border-color:#A9A9A2;color:#4F4F56}
.note{background:var(--foot);border-top:1px solid #D8D7D0;color:#7C7C83}

/* ---------- ars poetica: a függőleges vonal kivéve ---------- */
.creed .hair{display:none}
.creed{gap:clamp(16px,2.1vw,26px)}
.creed .lead{margin-top:clamp(4px,1vw,12px)}

/* ---------- közösségi linkek ---------- */
.social{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
.social a{display:inline-flex;align-items:center;gap:9px;color:var(--ink);
  font-family:var(--f-ui);font-size:.72rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase}
.social svg{width:19px;height:19px;flex:none;color:#5C5C63;
  transition:color .5s var(--ease)}
.social a span{background-image:linear-gradient(var(--acc),var(--acc));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.social a:hover span,.social a:focus-visible span{background-size:100% 2px}
.social a:hover svg{color:var(--ink)}
.shopband dl .sep{opacity:.45;padding:0 4px}


/* ==== forrás: variansok.css ==== */
/* ============================================================
   VÁLTOZATOK
   Beépítve: hideg szürke alaptónus, sötét magazin blokk, álló szedés,
   rögzített nyitóvideó. Kapcsolható: a háttértextúra és — összehasonlításra
   — a Resopal alaptónus.
   A layout-v3.css után töltődik.
   ============================================================ */

/* ------------------------------------------------------------
   1 · NINCS TÖBBÉ DŐLT SZEDÉS
   A kísérőszövegek megmaradnak szerifben, de álló betűvel, és
   egy fokkal nagyobbak a folyószövegnél, hogy elváljanak tőle.
   ------------------------------------------------------------ */
.band-head p.sm,.campaign .head p,.statement .side p,.creed .lead,
.facerow .cap span,.collgrid .cap span,.collexp .ttl span,
.msgband .kicker,.site-foot .ph-note,.shopband dd em,
.note,.xs{font-style:normal}

.creed .lead{font-size:clamp(1.12rem,1.5vw,1.26rem);line-height:1.58;color:var(--ink-2)}
.band-head p.sm{font-size:1.14rem;line-height:1.6}
.msgband .kicker{font-size:1.18rem}
.facerow .cap span,.collgrid .cap span,.collexp .ttl span{font-size:.99rem;line-height:1.45}
.feature .txt p{font-size:1.02rem}
.shopband p{font-size:1.02rem}

/* ------------------------------------------------------------
   2 · ALAPTÓNUS — hideg, semleges szürke (végleges)
   A tónus csak az alapszínt adja meg; a tényleges --paper ebből és a
   textúra kompenzációjából (--lift) áll össze, hogy szemcsés
   felülettel se sötétedjen el a lap.
   ------------------------------------------------------------ */

.site-foot{border-top-color:#CBCBD2}
.site-foot .fcol h4{color:#6E6E78}
.site-foot .fcol .xs,.site-foot dl.hours dd{color:#4C4C56}
.site-foot dl.hours dt,.site-foot .ph-note{color:#888892}
.site-foot .brand .logo-ph{border-color:#A5A5AE;color:#4C4C56}
.note{border-top-color:#D2D2D9;color:#787882}
.btn{border-color:rgba(19,19,24,.24)}

/* ------------------------------------------------------------
   3 · SÖTÉT MAGAZIN BLOKK
   A .mag osztályt a magazin három eleme viseli: a rovatfej, a
   panelsor és a gombsor. Így egyben vált sötétre.
   ------------------------------------------------------------ */
:root{--mag-bg:#15151A;--mag-line:#2C2C34;--mag-ink:#F2F2EF;
  --mag-ink-2:#AFAFB8;--mag-ink-3:#7E7E88}

.mag{background:var(--mag-bg);border-color:var(--mag-line)!important}
section.mag[style]{border-bottom-color:var(--mag-line)!important}
.mag .lbl{color:var(--mag-ink-3)}
.mag .band-head h2{color:var(--mag-ink)}
.mag .band-head p.sm{color:var(--mag-ink-2)}

.collexp.mag{background:var(--mag-line);
  border-top-color:var(--mag-line)}
.collexp.mag>a{background:var(--mag-bg)}
.collexp.mag .ph{background:var(--mag-line)}
.collexp.mag .ttl b{color:var(--mag-ink)}
.collexp.mag .ttl span{color:var(--mag-ink-2)}
.collexp.mag .more{border-left-color:var(--mag-line)}
.collexp.mag .more .tx{color:var(--mag-ink-2)}
.collexp.mag .more .linkline{color:var(--mag-ink)}

/* a képek egy hajszállal visszafogottabbak a sötét mezőben */
.collexp.mag .ph img{filter:brightness(.94) contrast(1.02);
  transition:filter 1.4s var(--ease),transform 2.2s var(--ease)}
.collexp.mag>a:hover .ph img{filter:none}

/* a rovatfej alsó margója ne szökjön ki a szakaszból (különben a sötét
   magazinblokk alatt világos csík maradna) */
.band{display:flow-root}


/* ------------------------------------------------------------
   4 · A PANELSOROK MAGASSÁGA EGYSÉGES
   A kollekció / kirakat / magazin panelsor ugyanolyan magas,
   mint a 90 arc és az ICON sor.
   ------------------------------------------------------------ */
.collexp .ph{height:clamp(320px,34vw,470px)}
.collexp .cap{height:clamp(126px,10.4vw,152px)}
@media (max-width:900px){
  .collexp .ph{height:min(56vw,340px)}
  .collexp .cap{height:auto}
}

/* ============================================================
   8 · RÖGZÍTETT NYITÓVIDEÓ
   A videósáv a helyén marad, a következő blokkok ráúsznak.
   Alapértelmezés; a „Görgődő" kapcsoló kikapcsolja.
   ============================================================ */
body{overflow-x:clip}           /* overflow:hidden elrontaná a sticky-t */
.vband{position:sticky;top:calc(var(--wp-admin--admin-bar--height,0px) + var(--head-h,0px));z-index:0}
/* minden, ami a videó után jön, egyetlen átlátszatlan lapon ül, így a
   görgetésre kelő blokkok halványodása közben sem üt át a videó */
.page{position:relative;z-index:1;background:var(--paper)}

/* A 20 px-es képmargóval kísérleteztünk; a döntés az lett, hogy a kép a
   szakasz széléig kiér, és az elválasztó vonalak maradnak. A margós
   változat szabályai ezért kikerültek — a fenti alapszabályok dolgoznak. */


/* ==== forrás: portfolio.css ==== */
/* ============================================================
   PORTFÓLIÓ BEJEGYZÉS — sablon
   A főoldal designrendszerére épül: ugyanazok a tokenek, gombok,
   animációk, sárga aláhúzás, világosszürke elválasztó vonalak.
   Csak az itt hiányzó komponenseket definiálja.

   A sablon elemkészlete (bármelyik elhagyható, sorrendjük szabad):
     .pfhero    nyitó média, teljes szélességben
     .pfhead    falfelirat: rovat, cím, felütés, adatok
     .flow      médiafolyam — soronként más ritmus:
                .full (1 fekvő) · .two (2 álló) · .three (3 álló)
                .split (szöveg + 1 álló) · .video · .quote
     .speclist  tételes lista (műtárgyak, anyagok, adatok)
     .presslist médiamegjelenések
     .collexp   kapcsolódó bejegyzések (a főoldalról)
   ============================================================ */

/* ---------- nyitó média ---------- */
.pfhero{display:block;position:relative;width:100%;aspect-ratio:16/7;overflow:hidden;
  background:var(--ink);border-bottom:1px solid var(--rule)}
.pfhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%}
@media (max-width:700px){.pfhero{aspect-ratio:4/3}}

/* ---------- falfelirat ---------- */
.pfhead{padding:clamp(38px,5vw,80px) var(--gut);border-bottom:1px solid var(--rule);
  background:var(--paper);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(26px,4vw,66px);align-items:start}
.pfhead .t{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pfhead h1{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.95rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.008em;
  max-width:20ch;text-wrap:balance}
.pfhead .lead{font-family:var(--f-disp);font-style:italic;font-size:1.1rem;
  line-height:1.6;color:var(--ink-2);max-width:54ch;margin:0}
.pfmeta{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 22px;
  border-top:1px solid var(--rule);padding-top:18px}
.pfmeta dt{font-family:var(--f-ui);font-size:.63rem;letter-spacing:.3em;font-weight:600;
  text-transform:uppercase;color:var(--ink-3);align-self:center}
.pfmeta dd{margin:0;font-size:.94rem;color:var(--ink-2)}
@media (max-width:860px){.pfhead{grid-template-columns:1fr}}

/* ---------- médiafolyam ---------- */
.flow{display:flex;flex-direction:column;background:var(--paper)}
.flow>.row{border-bottom:1px solid var(--rule)}
.flow figure{margin:0}
.fig{display:block;position:relative;overflow:hidden;background:var(--rule)}
.fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 2.4s var(--ease)}
.fig:hover img{transform:scale(1.025)}

/* képaláírás = kiállítási táblácska */
figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding-top:13px}
figcaption b{font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink)}
figcaption span{font-family:var(--f-disp);font-style:italic;font-size:.93rem;
  color:var(--ink-2);max-width:60ch}

/* sor: egy fekvő kép teljes szélességben */
.row.full{padding-bottom:clamp(18px,2.4vw,30px)}
.row.full .fig{aspect-ratio:16/7}
.row.full figcaption{padding-left:var(--gut);padding-right:var(--gut)}
@media (max-width:700px){.row.full .fig{aspect-ratio:4/3}}

/* sor: két vagy három álló kép */
.row.two,.row.three{display:grid;gap:1px;background:var(--rule)}
.row.two{grid-template-columns:repeat(2,1fr)}
.row.three{grid-template-columns:repeat(3,1fr)}
.row.two figure,.row.three figure{background:var(--paper);
  padding-bottom:clamp(16px,2vw,24px)}
.row.two .fig,.row.three .fig{aspect-ratio:2/3;max-height:clamp(420px,66vh,700px)}
.row.two figcaption,.row.three figcaption{padding:13px clamp(16px,2vw,24px) 0}
@media (max-width:820px){.row.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.row.two,.row.three{grid-template-columns:1fr}}

/* sor: szöveg és egy álló kép egymás mellett */
.row.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1px;
  background:var(--rule)}
.row.split>.tx{background:var(--paper);padding:clamp(30px,4.4vw,64px);
  display:flex;flex-direction:column;justify-content:center;gap:16px}
.row.split>.tx p{font-size:1rem;line-height:1.72;color:var(--ink-2);max-width:46ch;margin:0}
.row.split>.tx h2{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.2;letter-spacing:-.006em;
  max-width:22ch;color:var(--ink)}
.row.split figure{background:var(--paper);display:flex;flex-direction:column;
  padding-bottom:clamp(16px,2vw,24px)}
.row.split .fig{aspect-ratio:2/3;max-height:clamp(440px,66vh,700px)}
.row.split figcaption{padding:13px clamp(16px,2vw,24px) 0}
.row.split.rev>.tx{order:2}
@media (max-width:860px){
  .row.split{grid-template-columns:1fr}
  .row.split.rev>.tx{order:0}
}

/* sor: önálló szövegoszlop — keskeny hasáb, a lap bal oldalán */
.row.prose{padding:clamp(34px,4.6vw,72px) var(--gut);background:var(--paper);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.row.prose h2{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.2;max-width:26ch}
.row.prose p{font-size:1rem;line-height:1.74;color:var(--ink-2);max-width:62ch;margin:0}

/* sor: kiemelt mondat */
.row.quote{padding:clamp(40px,5.4vw,88px) var(--gut);background:var(--paper);
  display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.row.quote blockquote{margin:0;font-family:var(--f-disp);font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.26;letter-spacing:-.008em;
  max-width:26ch;text-wrap:balance}
.row.quote .who{font-family:var(--f-ui);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3)}

/* sor: videó — a főoldali videósáv, aláírással */
.row.video{padding-bottom:clamp(18px,2.4vw,30px)}
.row.video .vband{border-bottom:none}
.row.video figcaption{padding-left:var(--gut);padding-right:var(--gut)}

/* ---------- tételes lista ---------- */
.speclist{padding:clamp(34px,4.6vw,72px) var(--gut);background:var(--paper);
  border-bottom:1px solid var(--rule)}
.speclist .band-head{margin-bottom:clamp(20px,2.6vw,34px)}
.speclist ul{margin:0;padding:0;list-style:none;
  columns:2;column-gap:clamp(30px,5vw,88px)}
.speclist li{break-inside:avoid;padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:.95rem;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px){.speclist ul{columns:1}}

/* ---------- médiamegjelenések ---------- */
.presslist{padding:clamp(34px,4.6vw,72px) var(--gut);background:var(--paper);
  border-bottom:1px solid var(--rule)}
.presslist .band-head{margin-bottom:clamp(18px,2.4vw,30px)}
.press-rows{border-top:1px solid var(--rule)}
.press-rows a{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1.6fr) auto;
  gap:14px clamp(18px,3vw,44px);align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--rule)}
.press-rows .org{font-family:var(--f-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.press-rows .ttl{font-family:var(--f-disp);font-size:1.16rem;letter-spacing:-.008em;
  line-height:1.34;justify-self:start;
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.press-rows a:hover .ttl,.press-rows a:focus-visible .ttl{background-size:100% 2px}
.press-rows .date{font-size:.85rem;color:var(--ink-3);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (max-width:760px){
  .press-rows a{grid-template-columns:1fr;gap:5px}
  .press-rows .date{grid-row:1}
}

/* ---------- záró gombsor ---------- */
.pfend{padding:clamp(34px,4.6vw,66px) var(--gut);background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pfend .t{display:flex;flex-direction:column;gap:10px;max-width:44ch}
.pfend h2{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.2}
.pfend p{font-size:.97rem;color:var(--ink-2);margin:0}

/* ---------- fekvő képek a két- és háromosztású sorban ---------- */
.row.two.land .fig,.row.three.land .fig{aspect-ratio:3/2;max-height:none}

/* ---------- művek adatai: alkotó, mű, hivatkozások ---------- */
.speclist li{padding:16px 0}
.speclist li b{display:block;font-family:var(--f-ui);font-size:.72rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.speclist li>span{display:block}
.speclist li .links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.speclist li .links a{font-family:var(--f-ui);font-size:.78rem;color:var(--ink-2)}

/* ---------- nyitó állítás: a bejegyzés egy mondatos tézise ---------- */
.row.statement{padding:clamp(46px,6.2vw,100px) var(--gut);background:var(--paper);
  display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.row.statement p{margin:0;font-family:var(--f-disp);font-weight:400;color:var(--ink);
  font-size:clamp(1.45rem,2.9vw,2.15rem);line-height:1.3;letter-spacing:-.008em;
  max-width:31ch;text-wrap:balance}
/* a sárga aláhúzás itt görgetésre rajzolódik, nem betöltéskor */
.row.statement .hl::after{animation:none;transform:scaleX(0);transform-origin:0 50%}
.row.statement.seen .hl::after{transform:scaleX(1);
  transition:transform 1.4s var(--ease) .3s}
@supports (animation-timeline: view()){
  .row.statement .hl::after{animation:hlDraw 1s linear both;
    animation-timeline:view();animation-range:entry 25% cover 45%}
}
@media (prefers-reduced-motion:reduce){
  .row.statement .hl::after{transform:scaleX(1)}
}


/* ==== forrás: oldal.css ==== */
/* ============================================================
   SZÖVEGES OLDAL — sablon
   Olyan oldalakhoz, ahol a szöveg viszi a lapot: látásvizsgálat,
   egyedi szemüveg, rólunk, ÁSZF-szerű tartalmak.
   A főoldal designrendszerére épül, csak az itt hiányzó
   komponenseket definiálja.

     .pghead    oldalfej: rovat, cím, felütés, gombok + rövid összefoglaló
     .toc       ugrósáv a hosszú oldal szakaszaihoz
     .sec       szakasz: rovatjelző + cím + keskeny szövegoszlop
     .steps3    számozott lépések
     .tilelist  tünet- és jellemzőlisták, hajszálvonalakkal
     .pkgs      csomagok összehasonlítása
     .vidlist   videósorozat
     .qa        kérdések és válaszok
   ============================================================ */

/* ---------- oldalfej ---------- */
.pghead{padding:clamp(40px,5.4vw,88px) var(--gut);border-bottom:1px solid var(--rule);
  background:var(--paper);display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(26px,4vw,66px);align-items:start}
.pghead .t{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.pghead h1{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(2rem,4.2vw,3.2rem);line-height:1.11;letter-spacing:-.01em;
  max-width:18ch;text-wrap:balance}
.pghead .lead{font-family:var(--f-disp);font-style:italic;font-size:1.12rem;
  line-height:1.6;color:var(--ink-2);max-width:54ch;margin:0}
.pghead .btns{margin-top:4px}
.pghead .quick{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 22px;
  border-top:1px solid var(--rule);padding-top:18px}
.pghead .quick dt{font-family:var(--f-ui);font-size:.63rem;letter-spacing:.3em;font-weight:600;
  text-transform:uppercase;color:var(--ink-3)}
.pghead .quick dd{margin:0;font-size:.95rem;color:var(--ink-2)}
@media (max-width:860px){.pghead{grid-template-columns:1fr}}

/* ---------- ugrósáv ---------- */
.toc{position:sticky;top:0;z-index:40;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:12px var(--gut);
  display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap;
  overflow-x:auto;scrollbar-width:thin}
.toc .lbl{flex:none}
.toc a{font-size:.9rem;white-space:nowrap;
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.toc a:hover,.toc a:focus-visible{background-size:100% 2px}
@media (max-width:760px){.toc{flex-wrap:nowrap}.toc .lbl{display:none}}

/* ---------- szakasz ---------- */
.sec{padding:clamp(40px,5.4vw,88px) var(--gut);border-bottom:1px solid var(--rule);
  background:var(--paper)}
.sec>.hd{display:flex;flex-direction:column;gap:13px;align-items:flex-start;
  max-width:46ch;margin-bottom:clamp(24px,3vw,40px)}
.sec>.hd h2{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.6rem,2.9vw,2.35rem);line-height:1.16;letter-spacing:-.006em}
.sec>.hd p{font-family:var(--f-disp);font-style:italic;font-size:1.06rem;line-height:1.6;
  color:var(--ink-2);margin:0}
.sec .body{display:flex;flex-direction:column;gap:16px;max-width:64ch}
.sec .body p{margin:0;font-size:1rem;line-height:1.78;color:var(--ink-2)}
.sec .body p strong{color:var(--ink);font-weight:600}

/* szakasz szöveggel és képpel — a kép a blokk teljes magasságát kitölti,
   ugyanúgy, mint a főoldal felezett blokkjai */
.sec.withpic{padding:0;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:1px;
  background:var(--rule);align-items:stretch}
.sec.withpic>.col{background:var(--paper);
  padding:clamp(34px,5vw,72px) var(--gut);
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  min-height:clamp(420px,54vh,600px)}
.sec.withpic>.col>.hd{margin-bottom:0}
.sec.withpic figure{position:relative;margin:0;overflow:hidden;background:var(--rule)}
.sec.withpic .fig{position:absolute;inset:0;display:block;background:var(--rule)}
.sec.withpic .fig img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 2.4s var(--ease)}
.sec.withpic .fig:hover img{transform:scale(1.025)}
.sec.withpic figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  padding:clamp(28px,4vw,44px) clamp(16px,2.4vw,26px) clamp(14px,1.8vw,20px);
  background:linear-gradient(rgba(10,10,12,0),rgba(10,10,12,.62));
  color:#F2F2EF;pointer-events:none}
.sec.withpic figcaption b{font-family:var(--f-ui);font-size:.68rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:#F2F2EF}
.sec.withpic figcaption span{font-family:var(--f-disp);font-style:italic;font-size:.9rem;
  color:rgba(242,242,239,.88)}
@media (max-width:860px){
  .sec.withpic{grid-template-columns:1fr}
  .sec.withpic>.col{min-height:0}
  .sec.withpic figure{aspect-ratio:4/3}
}

/* ---------- számozott lépések ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule)}
.steps3>div{background:var(--paper);padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:11px}
.steps3 .n{font-family:var(--f-disp);font-size:2.4rem;line-height:1;color:var(--ink-3)}
.steps3 h3{font-family:var(--f-ui);font-size:.74rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;margin:0}
.steps3 p{margin:0;font-size:.96rem;line-height:1.7;color:var(--ink-2)}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}

/* ---------- tünet- és jellemzőlisták ---------- */
.tilelist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,70px)}
.tilelist>div{display:flex;flex-direction:column}
.tilelist h3{font-family:var(--f-ui);font-size:.68rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.tilelist ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.tilelist li{padding:13px 0;border-bottom:1px solid var(--rule);font-size:1rem;
  line-height:1.55;color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:13px;
  align-items:baseline}
.tilelist li::before{content:"";width:5px;height:5px;background:var(--ink-3);border-radius:50%;
  transform:translateY(-3px)}
@media (max-width:760px){.tilelist{grid-template-columns:1fr}}

/* ---------- csomagok ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule)}
.pkg{background:var(--paper);padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:14px}
.pkg .nm{font-family:var(--f-disp);font-size:1.5rem;line-height:1.1;letter-spacing:-.01em;
  margin:0}
.pkg .who{font-family:var(--f-ui);font-style:normal;font-size:.97rem;line-height:1.6;
  color:var(--ink);margin:0;min-height:3.1em}
.pkg ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.pkg li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:.93rem;line-height:1.5;
  color:var(--ink-2);display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:baseline}
.pkg li::before{content:"";width:9px;height:1.5px;background:var(--ink-3);
  transform:translateY(-4px)}
.pkg li.add{color:var(--ink)}
.pkg li.add::before{width:9px;height:1.5px;background:var(--ink);
  box-shadow:0 0 0 0 transparent}
.pkg .plus{font-family:var(--f-ui);font-size:.63rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-3);padding-top:4px}
.pkg .foot{margin-top:auto;padding-top:16px}
.pkg .price{font-family:var(--f-disp);font-size:1.05rem;color:var(--ink-3);font-style:italic}
@media (max-width:900px){.pkgs{grid-template-columns:1fr}.pkg .who{min-height:0}}

/* ---------- videósorozat ---------- */
.vidlist{border-top:1px solid var(--rule)}
.vidlist a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px clamp(16px,2.6vw,34px);align-items:center;
  padding:16px 0;border-bottom:1px solid var(--rule)}
.vidlist .no{font-family:var(--f-disp);font-size:1.1rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:2.6em}
.vidlist .ttl{font-family:var(--f-disp);font-size:1.16rem;letter-spacing:-.008em;
  line-height:1.35;justify-self:start;
  background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;
  background-position:0 100%;background-size:0 2px;
  transition:background-size var(--slower) var(--ease)}
.vidlist a:hover .ttl,.vidlist a:focus-visible .ttl{background-size:100% 2px}
.vidlist .play{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--ink-3);
  display:grid;place-items:center;flex:none;
  transition:background .5s var(--ease),border-color .5s var(--ease)}
.vidlist .play::before{content:"";width:0;height:0;margin-left:2px;
  border-left:8px solid var(--ink-3);border-top:5px solid transparent;
  border-bottom:5px solid transparent;transition:border-left-color .5s var(--ease)}
.vidlist a:hover .play{background:var(--acc);border-color:var(--acc)}
.vidlist a:hover .play::before{border-left-color:var(--ink)}
@media (max-width:620px){
  .vidlist a{grid-template-columns:auto minmax(0,1fr)}
  .vidlist .play{grid-row:1;grid-column:2;justify-self:end}
}

/* ---------- kérdések ---------- */
.qa{border-top:1px solid var(--rule);max-width:74ch}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;padding:17px 0;list-style:none;
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  font-family:var(--f-disp);font-size:1.16rem;line-height:1.4;letter-spacing:-.006em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";width:13px;height:13px;flex:none;
  background:
    linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.5px 13px no-repeat;
  transition:transform .5s var(--ease),opacity .5s var(--ease)}
.qa details[open] summary::after{
  background:linear-gradient(var(--ink),var(--ink)) center/13px 1.5px no-repeat}
.qa .a{padding:0 0 20px;font-size:.99rem;line-height:1.78;color:var(--ink-2);max-width:62ch}
.qa .a p{margin:0 0 12px}
.qa .a p:last-child{margin-bottom:0}

/* ---------- záró sáv ---------- */
.pgend{padding:clamp(34px,4.6vw,70px) var(--gut);background:var(--paper);
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.pgend .t{display:flex;flex-direction:column;gap:11px;max-width:46ch}
.pgend h2{font-family:var(--f-disp);font-weight:400;margin:0;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.18}
.pgend p{font-size:1rem;color:var(--ink-2);margin:0}


/* ==== a portfólió- és a szöveges oldal átállítása a végleges döntésekre ==== */
.pfhead .lead,.pghead .lead,.sec .lead,
.pfmeta dd em,.quick dd em,
.flow .cap,.sec figcaption,
.pfhead .t p,.pghead .t p{font-style:normal}
.pfhead .lead,.pghead .lead{font-size:clamp(1.12rem,1.5vw,1.26rem);line-height:1.58;color:var(--ink-2)}