:root{
  --sp-sec:112px; --sp-blk:44px; --sp-el:18px;
  --bg:#0B0B0C; --bg2:#141416; --line:#232327; --line2:#3B3B42;
  --fg:#F3F3F0; --fg2:#9C9CA2; --fg3:#67676D;
  --sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1200px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;background:#000;border-bottom:1px solid var(--line);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px 18px;font-family:var(--mono);font-size:11px;color:var(--fg2)}
.bar b{color:var(--fg);font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.bar button{font-family:var(--mono);font-size:11px;background:transparent;color:var(--fg2);border:1px solid var(--line2);
  border-radius:999px;padding:4px 11px;cursor:pointer}
.bar button[aria-pressed="true"]{background:var(--fg);color:#000;border-color:var(--fg)}

header.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 35px);z-index:70;
  background:rgba(11,11,12,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.navin{max-width:var(--maxw);margin:0 auto;padding:15px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;text-decoration:none;white-space:nowrap}
.wordmark s{text-decoration:none;color:var(--fg3);font-weight:400}
.menu{display:flex;gap:20px;font-size:12.5px;color:var(--fg2)}
.menu a{text-decoration:none}
.menu a:hover,.menu a[aria-current]{color:var(--fg)}

.page{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
main{display:flex;flex-direction:column;gap:var(--sp-sec);padding-block:var(--sp-sec)}

.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg3)}
h1{margin:0;font-size:clamp(38px,6.6vw,86px);line-height:.96;letter-spacing:-.04em;font-weight:700;text-wrap:balance}
h2{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.05;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
h3{margin:0;font-size:18px;letter-spacing:-.012em;font-weight:700}
p{margin:0}
.lead{font-size:clamp(16px,1.5vw,18.5px);color:var(--fg2);max-width:58ch}
.sm{font-size:14.5px;color:var(--fg2)}
.xs{font-size:12.5px;color:var(--fg3)}
.prose{display:flex;flex-direction:column;gap:14px;max-width:62ch}
.prose p{color:var(--fg2);font-size:16px}

.sec{display:flex;flex-direction:column;gap:var(--sp-blk)}
.sechead{display:flex;flex-direction:column;gap:var(--sp-el)}

.cta{display:flex;gap:12px;flex-wrap:wrap}
.b{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;padding:13px 24px;border-radius:999px;text-decoration:none}
.b.fill{background:var(--fg);color:#000}
.b.line{border:1px solid var(--line2)}
.b:hover{opacity:.85}

.slot{background:var(--bg2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.slot::after{content:attr(data-label);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);text-align:center;padding:12px}
.r169{aspect-ratio:16/9;width:100%}
.r916{aspect-ratio:9/16;width:100%}
.r43{aspect-ratio:4/3;width:100%}
img.r43,img.r169,img.r916{height:auto;object-fit:cover;display:block;border:1px solid var(--line)}

.hero{display:flex;flex-direction:column;gap:var(--sp-blk)}
.herotop{display:flex;flex-direction:column;gap:var(--sp-el)}

.clients{display:flex;flex-wrap:wrap;gap:10px 26px}
.clients span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3)}

.list{display:flex;flex-direction:column}
.list a{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;gap:18px;align-items:baseline;
  padding:20px 4px;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .16s ease}
.list a:last-child{border-bottom:1px solid var(--line)}
.list a:hover{padding-left:12px}
.list .n{font-family:var(--mono);font-size:11.5px;color:var(--fg3)}
.list .arw{text-align:right;color:var(--fg3)}
.list a:hover .arw{color:var(--fg)}
.list .t{display:flex;flex-direction:column;gap:5px}

.ref{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-blk);align-items:center}
.rtext{display:flex;flex-direction:column;gap:12px}

.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-blk)}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-blk)}
.col{display:flex;flex-direction:column;gap:9px}

.faq{display:flex;flex-direction:column}
.faq .qa{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:24px}
.faq .qa:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:16px}

.q blockquote{margin:0;font-size:clamp(16px,1.8vw,20px);line-height:1.4;letter-spacing:-.012em}
.q .by{font-size:12px;color:var(--fg3);font-family:var(--mono);margin-top:10px}

.end{border:1px solid var(--line);padding:clamp(26px,4.5vw,56px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:30px;flex-wrap:wrap}
.end .endhead{display:flex;flex-direction:column;gap:12px;flex:1 1 340px;min-width:0;max-width:480px}
.contact{display:flex;gap:12px;flex-wrap:wrap}
.end .contact{justify-content:flex-end;flex:0 1 auto}

footer.site{border-top:1px solid var(--line);padding-block:26px 40px;font-size:12px;color:var(--fg3);line-height:1.9}
footer.site a{text-decoration:none}

body.showcms [data-cms]{outline:1px dashed #78787F;outline-offset:8px;position:relative}
body.showcms [data-cms]::before{content:attr(data-cms);position:absolute;top:-9px;left:0;transform:translateY(-100%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#000;background:#C9C9CE;
  padding:2px 7px;border-radius:3px;white-space:nowrap;z-index:5}

@media (max-width:980px){
  :root{--sp-sec:76px;--sp-blk:30px}
  .ref{grid-template-columns:1fr}
  .g3,.g2{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq .qa{grid-template-columns:1fr;gap:8px}
  .menu{display:none}
  .end .contact{justify-content:flex-start}
}
@media (max-width:560px){
  :root{--sp-sec:60px}
  .list a{grid-template-columns:32px minmax(0,1fr) 20px;gap:12px}
}

/* média + kis felirat */
figure.media{margin:0;display:flex;flex-direction:column;gap:9px}
figure.media figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  font-size:12.5px;color:var(--fg3);line-height:1.4}
figure.media figcaption .cap{color:var(--fg2)}
figure.media figcaption a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg3);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--line2);padding-bottom:2px}
figure.media figcaption a:hover{color:var(--fg);border-color:var(--fg)}

/* hero két hasábban, portréval */
.herogrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-blk);align-items:stretch}
.herogrid .portrait{width:300px;height:100%;aspect-ratio:auto;align-self:stretch}
.portrait{background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;}
.portrait::after{content:attr(data-label);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg3);text-align:center;padding:12px}
.portrait:has(img)::after{content:none}
@media (max-width:980px){ .herogrid{grid-template-columns:1fr}
  .herogrid .portrait{height:auto;width:100%;max-width:260px;aspect-ratio:3/4} }

/* lábléc rács */
.footgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.footgrid .flabel{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:#4E4E54;margin-bottom:8px}
@media (max-width:860px){ .footgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} }
@media (max-width:460px){ .footgrid{grid-template-columns:1fr} }

/* ---------- kiemelő szín: mustár ---------- */
:root{ --acc:#C9A227; --acc-ink:#0B0B0C; --acc-soft:rgba(201,162,39,.16); }

.b.fill{ background:var(--acc); color:var(--acc-ink); }
.menu a[aria-current]{ color:var(--acc); }
.menu a:hover{ color:var(--acc); }
.list a:hover .arw{ color:var(--acc); }
.list a:hover{ background:linear-gradient(90deg,var(--acc-soft),transparent 55%); }
figure.media figcaption a:hover{ color:var(--acc); border-color:var(--acc); }
.kicker{ color:var(--acc); }
.q .by{ color:var(--acc); }
footer.site a:hover{ color:var(--acc); }
.contact .b{ font-size:15px; font-weight:700; padding:14px 26px; white-space:nowrap }
.contact .b:hover{ opacity:1; border-color:var(--acc); color:var(--acc) }


/* sárga variációk */

/* hero: összekötő vonal a szöveg és a portré között */
.herogrid{ position:relative; }
.herogrid::before{
  content:""; position:absolute; top:0; bottom:0;
  right:calc(300px + var(--sp-blk)/2); width:1px;
  background:linear-gradient(to bottom, var(--acc) 0 64px, var(--line) 64px);
}
.herogrid .portrait{ position:relative; }
/* apró jel a vonal tetején, a portré felé mutatva */
.herogrid::after{
  content:""; position:absolute; top:0;
  right:calc(300px + var(--sp-blk)/2); width:calc(var(--sp-blk)/2); height:1px;
  background:var(--acc);
}
@media (max-width:980px){
  .herogrid::before, .herogrid::after{ display:none; }
  .herogrid .portrait{ border-top:1px solid var(--line); position:relative; }
  .herogrid .portrait::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:1px; background:var(--acc); }
}

/* a sárga csík visszatérő motívuma: minden szekció tetején */
.sec{ position:relative; border-top:1px solid var(--line); padding-top:26px; }
.sec::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:1px; background:var(--acc); }
.end{ position:relative; }
.end::before{ content:""; position:absolute; top:-1px; left:-1px; width:64px; height:1px; background:var(--acc); }
footer.site{ position:relative; }
footer.site::before{ content:""; position:absolute; top:-1px; left:0; width:64px; height:1px; background:var(--acc); }

/* ügyféllogók */
.clients{ display:flex; flex-wrap:wrap; align-items:center; gap:30px 42px; }
.clients img{
  height:30px; width:auto; display:block;
  filter:grayscale(1) brightness(0) invert(1);
  opacity:.60;
  transition:filter .2s ease, opacity .2s ease;
}
.clients img:hover{ filter:grayscale(0) brightness(1) invert(0); opacity:1; }
@media (hover:none){ .clients img{ filter:grayscale(0) brightness(1) invert(0); opacity:.9 } }
@media (max-width:640px){ .clients{ gap:24px 30px } .clients img{ height:24px } }

/* portré: sötét keret helyett sárga sarokjel bal felül és jobb alul */
.portrait:has(img){ border:0; background:transparent; position:relative; overflow:visible; display:block; }
.portrait picture{ display:block; width:100%; height:100%; }
.portrait:has(img)::before,
.portrait:has(img)::after{
  content:""; position:absolute; width:64px; height:64px;
  pointer-events:none; z-index:2;
}
.portrait:has(img)::before{ top:-2px; left:-2px; border-top:3px solid var(--acc); border-left:3px solid var(--acc); }
.portrait:has(img)::after{ bottom:-2px; right:-2px; border-bottom:3px solid var(--acc); border-right:3px solid var(--acc); }
@media (max-width:560px){ .portrait:has(img)::before,.portrait:has(img)::after{ width:44px; height:44px } }

/* mobilon a portré fölötti vonal nem kell, ha van sarokjel */
@media (max-width:980px){ .herogrid .portrait:has(img){ border-top:0 } 
  .herogrid .portrait:has(img)::before{ content:""; top:0; left:0; width:58px; height:58px;
    border-top:2px solid var(--acc); border-left:2px solid var(--acc); background:none } }

/* mobil hero: a portré kicsiben, a cím fölé */
@media (max-width:980px){
  .herogrid{ display:flex; flex-direction:column; gap:26px; }
  .herogrid .portrait{ order:-1; width:148px; max-width:148px; aspect-ratio:3/4; height:auto; align-self:flex-start; }
  .herogrid .portrait:has(img){ border-top:0 }
}
@media (max-width:420px){ .herogrid .portrait{ width:130px; max-width:130px } }

/* mobil hero: a portré fölötti és alatti térköz egyenlő */
@media (max-width:980px){
  main:has(> .hero:first-child){ padding-top:33px }
  .herogrid .portrait{ width:176px; max-width:176px }
}
@media (max-width:420px){ .herogrid .portrait{ width:156px; max-width:156px } }

/* ---------- galéria: csúsztatható szalag ---------- */
.strip{ position:relative; margin-inline:calc(var(--sp-blk)*-1); }
.gal{
  display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; scroll-padding-inline:var(--sp-blk);
  padding-inline:var(--sp-blk); padding-block:2px;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab; outline:none;
}
.gal::-webkit-scrollbar{ display:none }
.gal.drag{ cursor:grabbing; scroll-snap-type:none }
.gal.drag img{ pointer-events:none }
.gal:focus-visible{ outline:2px solid var(--acc); outline-offset:4px }

.gal .gi{
  position:relative; flex:0 0 auto; height:300px; max-width:390px; padding:0; margin:0; border:0;
  background:var(--bg2); overflow:hidden; cursor:zoom-in; scroll-snap-align:start;
}
.gal .gi img{
  height:100%; width:100%; object-fit:cover; display:block;
  filter:saturate(.92) brightness(.88);
  transition:filter .35s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.gal .gi:hover img, .gal .gi:focus-visible img{ filter:none; transform:scale(1.04) }
.gal .gi::before{ content:""; position:absolute; top:0; left:0; width:30px; height:30px;
  border-top:2px solid var(--acc); border-left:2px solid var(--acc);
  opacity:0; transition:opacity .2s ease; z-index:2; pointer-events:none }
.gal .gi:hover::before, .gal .gi:focus-visible::before{ opacity:1 }
.gal .gi:focus-visible{ outline:none }

/* elhalványuló szélek: jelzik, hogy van tovább */
.sfade{ position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none;
  transition:opacity .25s ease }
.sfade.left{ left:0; background:linear-gradient(to right, var(--bg) 18%, transparent) }
.sfade.right{ right:0; background:linear-gradient(to left, var(--bg) 18%, transparent) }
.strip.atstart .sfade.left{ opacity:0 }
.strip.atend .sfade.right{ opacity:0 }

.snav{
  position:absolute; top:calc(50% - 23px); z-index:3; width:46px; height:46px; border-radius:50%;
  background:rgba(11,11,12,.8); border:1px solid var(--line2); color:var(--fg);
  font-size:23px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity .2s ease, border-color .2s ease, color .2s ease; backdrop-filter:blur(6px);
}
.snav:hover{ border-color:var(--acc); color:var(--acc) }
.snav.prev{ left:6px } .snav.next{ right:6px }
.snav.off{ opacity:0; pointer-events:none }
@media (hover:none){ .snav{ display:none } }

.galwrap{ display:flex; flex-direction:column; gap:14px }
.sfoot{ display:flex; align-items:center; gap:16px }
.sbar{ position:relative; flex:1; height:2px; background:var(--line) }
.sbar i{ position:absolute; top:0; bottom:0; left:0; background:var(--acc);
  transition:left .15s linear, width .15s linear }
.scount{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--fg3); white-space:nowrap }
.scount b{ color:var(--acc); font-weight:400 }

.galwrap.still .sfoot, .galwrap.still .galfoot .xs, .galwrap.still .snav{ display:none }
.galwrap.still .galfoot{ justify-content:flex-end }
.galfoot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.galfoot .xs{ margin:0 }
a.mkbtn{ display:inline-flex; align-items:center; gap:7px; flex:0 0 auto;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); border:1px solid var(--acc); border-radius:999px;
  padding:8px 15px; line-height:1; text-decoration:none; white-space:nowrap }
a.mkbtn::after{ content:"\2192" }
a.mkbtn:hover{ background:var(--acc); color:var(--acc-ink) }

@media (max-width:980px){
  .strip{ margin-inline:-24px }
  .gal{ padding-inline:24px; scroll-padding-inline:24px; gap:10px }
  .gal .gi{ height:250px; max-width:300px }
  .sfade{ width:60px }
}
@media (max-width:560px){ .gal .gi{ height:210px; max-width:250px } }

/* ---------- nagy nézet ---------- */
.lb[hidden]{ display:none }
.lb{ position:fixed; inset:0; z-index:300; background:rgba(6,6,7,.96);
  display:flex; align-items:center; justify-content:center; padding:clamp(14px,4vw,56px); }
.lb img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.lb button{ position:absolute; background:transparent; border:0; color:var(--fg3);
  cursor:pointer; line-height:1; padding:14px; font-size:30px; transition:color .15s ease; }
.lb button:hover, .lb button:focus-visible{ color:var(--acc); outline:none }
.lb-x{ top:6px; right:8px; font-size:20px }
.lb-p{ left:2px; top:50%; transform:translateY(-50%) }
.lb-n{ right:2px; top:50%; transform:translateY(-50%) }
.lb-c{ position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--fg3) }
@media (max-width:700px){ .lb{ padding:10px } .lb-p,.lb-n{ display:none } }

/* munkák: videó + szerep + leírás + „így készült” */
figure.media.work{ gap:11px }
figure.media.work figcaption{ align-items:flex-start }
figure.media.work figcaption .cap{ color:var(--fg); font-weight:700; font-size:13.5px; line-height:1.35 }
figure.media.work .xs{ line-height:1.6; max-width:52ch }

/* YouTube lejátszó, kattintásra töltődik */
.slot.yt{ position:relative; cursor:pointer; }
.slot.yt::after{ content:none }
.slot.yt .play{ position:absolute; inset:0; margin:auto; width:58px; height:58px; border-radius:50%;
  border:1px solid var(--line2); display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.slot.yt .play::before{ content:""; border-left:15px solid var(--fg2); border-top:9px solid transparent;
  border-bottom:9px solid transparent; margin-left:4px; transition:border-left-color .2s ease }
.slot.yt:hover .play, .slot.yt:focus-visible .play{ border-color:var(--acc); transform:scale(1.06) }
.slot.yt:hover .play::before, .slot.yt:focus-visible .play::before{ border-left-color:var(--acc) }
.slot.yt:focus-visible{ outline:2px solid var(--acc); outline-offset:3px }
.slot.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.slot.yt.playing{ cursor:default }
.ytfall{ color:var(--fg3) }
.ytfall a{ color:var(--fg2); text-decoration:none; border-bottom:1px solid var(--line2) }
.ytfall a:hover{ color:var(--acc); border-color:var(--acc) }

/* videó-előnézet */
.slot.yt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.8) brightness(.66); transition:filter .3s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.slot.yt:hover img, .slot.yt:focus-visible img{ filter:saturate(1) brightness(.88); transform:scale(1.035) }
.slot.yt .play{ z-index:2; background:rgba(11,11,12,.42); }
.slot.yt:hover .play, .slot.yt:focus-visible .play{ background:rgba(11,11,12,.55) }
.slot.yt.playing img{ display:none }

/* közösségi média */
.social{ display:flex; gap:14px; align-items:center; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3) }
.social a{ text-decoration:none; white-space:nowrap; transition:color .18s ease }
.social a:hover{ color:var(--acc) }
@media (max-width:1180px){ .social{ display:none } }

.fsocial{ display:inline-flex; gap:10px; flex-wrap:wrap; align-items:baseline }
.fsocial a{ color:var(--fg2) }
.fsocial a:hover{ color:var(--acc) }

/* záróblokk: elérhetőség + közösségi média */
.end .endactions{ display:flex; flex-direction:column; gap:12px; align-items:flex-end; flex:0 1 auto }
.contact.soc .b{ font-size:12.5px; padding:10px 18px; color:var(--fg2); border-color:var(--line) }
.contact.soc .b:hover{ color:var(--acc); border-color:var(--acc) }
@media (max-width:980px){ .end .endactions{ align-items:flex-start } }

/* „így készült” — kiemelt gomb, minden videó mellett */
figure.media figcaption{ align-items:center }
figure.media.work figcaption{ align-items:flex-start }
figure.media figcaption a{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc); background:transparent; border:1px solid var(--acc); border-radius:999px;
  padding:8px 15px; line-height:1; text-decoration:none; white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
figure.media figcaption a::after{ content:"\2192" }
figure.media figcaption a:hover,
figure.media figcaption a:focus-visible{ background:var(--acc); color:var(--acc-ink) }

/* hero: portré balra, szöveg jobbra */
@media (min-width:981px){
  .herogrid{ grid-template-columns:300px minmax(0,1fr) }
  .herogrid .herotop{ grid-column:2; grid-row:1 }
  .herogrid .portrait{ grid-column:1; grid-row:1 }
  .herogrid::before{ right:auto; left:calc(300px + var(--sp-blk)/2) }
  .herogrid::after{ right:auto; left:300px }
}

/* a portré fusson ki a sárga vonalig — nincs köztük rés */
@media (min-width:981px){
  .herogrid{ grid-template-columns:calc(300px + var(--sp-blk)/2) minmax(0,1fr) }
  .herogrid .portrait{ width:calc(300px + var(--sp-blk)/2) }
  .herogrid::after{ content:none }
}

/* felsorolás */
ul.bul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; max-width:62ch }
ul.bul li{ position:relative; padding-left:22px; font-size:15px; color:var(--fg2); line-height:1.55 }
ul.bul.sm{ gap:8px }
ul.bul.sm li{ font-size:14px }
ul.bul li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--acc) }

/* számozott folyamat */
.steps{ display:flex; flex-direction:column }
.steps .step{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px;
  padding:20px 4px; border-top:1px solid var(--line) }
.steps .step:last-child{ border-bottom:1px solid var(--line) }
.steps .n{ font-family:var(--mono); font-size:11.5px; color:var(--acc) }
.steps .t{ display:flex; flex-direction:column; gap:6px; max-width:66ch }
@media (max-width:560px){ .steps .step{ grid-template-columns:32px minmax(0,1fr); gap:12px } }

/* álló videó keskenyebb keretben */
figure.media.vert{ max-width:340px }

/* álló referenciasor: keskenyebb csempék */
.g3.vert{ grid-template-columns:repeat(3, minmax(0,290px)) }
.g3.vert figure.media.vert{ max-width:100% }
@media (max-width:980px){ .g3.vert{ grid-template-columns:repeat(2, minmax(0,260px)) } }
@media (max-width:640px){ .g3.vert{ grid-template-columns:minmax(0,300px) } }

/* kapcsolat — tagolt adatblokk */
.kard{ display:flex; flex-direction:column; gap:34px; max-width:520px;
  border:1px solid var(--line); padding:clamp(24px,3vw,34px) }
.kard .kblock{ display:flex; flex-direction:column; gap:10px }
.kard .kblock + .kblock{ border-top:1px solid var(--line); padding-top:30px }
.kard .kicker{ margin-bottom:2px }

/* mobil menü */
.burger{ display:none; width:40px; height:40px; padding:9px 8px; margin-right:-6px;
  background:transparent; border:0; cursor:pointer; flex-direction:column; justify-content:space-between }
.burger span{ display:block; height:1.5px; width:100%; background:var(--fg); border-radius:2px;
  transition:transform .22s ease, opacity .16s ease }
body.menuopen .burger span:nth-child(1){ transform:translateY(9.5px) rotate(45deg) }
body.menuopen .burger span:nth-child(2){ opacity:0 }
body.menuopen .burger span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg) }

.mobmenu{ display:none }
@media (max-width:980px){
  .burger{ display:flex }
  .mobmenu{ display:block; border-top:1px solid var(--line); background:var(--bg);
    padding:18px 24px calc(26px + env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 120px); overflow-y:auto }
  .mobmenu[hidden]{ display:none }
  .mobmenu nav{ display:flex; flex-direction:column }
  .mobmenu nav a{ padding:15px 0; border-bottom:1px solid var(--line);
    text-decoration:none; font-size:19px; letter-spacing:-.02em }
  .mobmenu nav a[aria-current]{ color:var(--acc) }
  .msocial{ display:flex; flex-wrap:wrap; gap:8px 18px; padding:20px 0 4px;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg3) }
  .msocial a{ text-decoration:none }
  .mcontact{ display:flex; flex-direction:column; gap:6px; padding-top:14px; font-size:14px; color:var(--fg2) }
  .mcontact a{ text-decoration:none }
  .mcontact a:first-child{ color:var(--acc) }
}