/* =========================================================
   SyncWell Műhelycsoport — site.css
   Szín: Arculati kézikönyv v2.0 (sötét kék alap, arany cselekvés)
   Jel:  Jelrendszer v5.0 (négy önálló pajzs + anyajel)
   Egyedi hex érték csak a :root blokkban van.
   ========================================================= */

/* ————— BETŰK (önhordó, latin + latin-ext a magyar ő/ű miatt) ————— */
@font-face{font-family:"ArchivoN";font-style:normal;font-weight:400 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url(../fonts/archivo-ext.woff2) format("woff2")}
@font-face{font-family:"ArchivoN";font-style:normal;font-weight:400 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(../fonts/archivo-lat.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url(../fonts/outfit-ext.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(../fonts/outfit-lat.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  src:url(../fonts/jetbrains-ext.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  src:url(../fonts/jetbrains-lat.woff2) format("woff2")}

/* ————— TOKENEK ————— */
:root{
  /* alap — kék, a logó #13354C-jéből származtatva */
  --bg:#081521; --bg-2:#0E1C29; --surface:#17232F; --raised:#1F2C39;
  --line:#2A3744; --line-2:#3A4855;
  --fg:#EFF2F6; --fg-2:#A8B3BF; --fg-3:#74808D;

  /* márka */
  --gold:#FFCB27; --gold-deep:#D59801; --ink:#101B24;

  /* műhelyszínek — OKLCH L .70 / C .19 */
  --w1:#4DA1FE; --w1-bg:#0F253E;
  --w2:#09B2C7; --w2-bg:#002A30;
  --w3:#BC79FA; --w3-bg:#2B1C39;
  --w4:#8E1B2E; --w4-bg:#1E070B;
  --w5:#0BBB81; --w5-bg:#022C1C;

  /* jelentés */
  --ok:#3FC168; --warn:#FCAB05; --bad:#F4514F;

  --g:"ArchivoN",Arial,system-ui,sans-serif;
  --ui:"Outfit",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:0; --nav-h:78px;

  /* oldalankénti műhelyszín — a body osztálya írja felül */
  --c:var(--gold); --c-bg:var(--surface);
}
body.p-kardan{--c:var(--w1);--c-bg:var(--w1-bg)}
body.p-felt{--c:var(--w2);--c-bg:var(--w2-bg)}
body.p-gomb{--c:var(--w3);--c-bg:var(--w3-bg)}
body.p-turbo{--c:var(--w4);--c-bg:var(--w4-bg)}
body.p-hidra{--c:var(--w5);--c-bg:var(--w5-bg)}
body.p-brand{--c:var(--gold);--c-bg:var(--surface)}

*{box-sizing:border-box}
/* A sima görgetés csak betöltés után kapcsol be (site.js: html.smooth): iOS Safari a horgonyra ugrást betöltés
   közben animálva túlfut az oldal aljáig, mert közben még nő az oldal (lusta képek, térkép). */
html{scroll-padding-top:calc(var(--nav-h) + 12px)}
html.smooth{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);font-weight:400;font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
p{margin:0}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:var(--g);font-weight:800;letter-spacing:-.026em;word-spacing:.09em;line-height:1.02;text-transform:uppercase}
h2{font-size:clamp(26px,4.2vw,48px)}
h3{font-size:clamp(17px,1.9vw,22px);letter-spacing:-.014em}
/* felfutó szám a főcímben (pl. „5 lépés") — a h2 vastagságával, nem ugráló számokkal */
h2 b[data-count]{font-weight:inherit;font-family:inherit;font-variant-numeric:tabular-nums}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(18px,3.6vw,44px)}
.kicker{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold);color:var(--ink);padding:12px 18px;font-size:14px;font-weight:600}
.skip:focus{left:12px;top:12px}
::selection{background:var(--gold);color:var(--ink)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ————— NAV ————— */
.nav{position:absolute;inset:0 0 auto;z-index:40;height:var(--nav-h);display:flex;align-items:center;color:var(--fg)}
.nav.fixed,.nav.solid{position:fixed;background:rgba(8,21,33,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
/* „A · Csendes”, középre zárt címerrel: öt menüpont balra, a címer a tengelyen, hajszálvonal, egy szám,
   egy gomb jobbra. Három oszlop (1fr auto 1fr), így a címer akkor is középen marad, ha a két szél nem
   egyforma széles. A második szám és az e-mail a Kapcsolat legördülőjében, a négy műhely a Műhelyek alatt. */
/* „C · Címeres”: a címer középen, a név alatta; balra Műhelyek ▾ / Rólunk / Tudástár, jobbra SOS / Kapcsolat ▾,
   majd a telefon-ikon (rámutatásra kinyílik a szám) és a gomb egy egységben. Burger a bal szélen, csak mobilon. */
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,2.4vw,32px);width:100%}
.nl,.nr{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);min-width:0}
.nr{justify-content:flex-end}
.nav .crest{flex-direction:column;gap:4px;text-align:center;justify-self:center}
.nav .crest svg{width:48px;height:48px}
.nav .crest .wm{align-items:center}
.nav .crest b{font-size:11px;letter-spacing:.16em}
.callg{display:inline-flex;align-items:stretch;gap:1px;margin-left:4px}
.callg .ic{display:inline-flex;align-items:center;height:38px;padding:0 11px;border:1px solid var(--gold);border-radius:var(--r) 0 0 var(--r);color:var(--gold);white-space:nowrap;transition:background .15s}
.callg .ic svg{width:16px;height:16px;fill:currentColor;flex:none}
.callg .ic span{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;max-width:0;opacity:0;overflow:hidden;margin-left:0;transition:max-width .35s cubic-bezier(.23,1,.32,1),opacity .2s,margin-left .35s cubic-bezier(.23,1,.32,1)}
.callg .ic:hover span,.callg .ic:focus-visible span{max-width:150px;opacity:1;margin-left:10px}
.callg .ic:hover{background:rgba(255,203,39,.1);color:var(--gold)}
.nav .ncta{border-radius:0 var(--r) var(--r) 0;height:38px;padding:0 16px;display:inline-flex;align-items:center}
.nr .dd .menu{left:auto;right:-14px}
.dd{position:relative;display:inline-flex;align-items:center}
.dd::after{content:"";position:absolute;left:-10px;right:-10px;top:100%;height:24px}
.dd .menu{position:absolute;left:-14px;top:calc(100% + 16px);min-width:440px;background:rgba(8,21,33,.97);backdrop-filter:blur(12px);border:1px solid var(--line);border-top:2px solid var(--gold);padding:6px 0;z-index:45;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s cubic-bezier(.23,1,.32,1),transform .18s cubic-bezier(.23,1,.32,1),visibility 0s .18s}
.dd:hover .menu,.dd:focus-within .menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd .menu a{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:9px 16px;font-size:14px;font-weight:500;color:var(--fg)}
.dd .menu.kapcs{min-width:420px}
.dd .menu.kapcs a{grid-template-columns:136px 1fr}
.dd .menu a:hover{background:var(--bg-2);color:var(--fg)}
.dd .menu a i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--fg-3);text-transform:uppercase}
.dd .menu a i.k{color:var(--c,var(--gold))}
/* Műhelyek legördülő: a sor bal szélén a műhelyszín (3px), a kód alatta apró, a név vastag, a szám arany —
   mono, nagyobb, +36-tal, hajszálvonalas dobozban; rámutatásra a doboz arany kitöltésű, sötét számmal. */
.dd .menu:not(.kapcs) a{grid-template-columns:8px auto 1fr auto;gap:12px;padding:10px 18px 10px 16px;font-weight:600;font-size:14.5px;transition:background .15s}
/* rombusz a sor elején a műhely színével — ugyanaz a jel, ami a pajzsok két oldalán ül */
.dd .menu:not(.kapcs) a::before{content:"";width:7px;height:7px;background:var(--c,var(--gold));transform:rotate(45deg);justify-self:center;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.dd .menu:not(.kapcs) a:hover::before{transform:rotate(45deg) scale(1.35)}
.dd .menu:not(.kapcs) a.all::before{background:none;border-left:1px solid var(--gold);border-bottom:1px solid var(--gold);width:5px;height:5px;transform:rotate(-135deg) translate(1px,-1px)}
.dd .menu:not(.kapcs) a.all i.k{display:none}
.dd .menu:not(.kapcs) a i.k{width:58px;font-size:9px}
.dd .menu:not(.kapcs) a i:last-child:not(:empty){font-size:13px;letter-spacing:.04em;font-weight:500;color:var(--gold);padding:5px 9px;border:1px solid rgba(255,203,39,.38);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.dd .menu:not(.kapcs) a i:last-child:not(:empty)::before{content:"+36 ";opacity:.6}
.dd .menu:not(.kapcs) a:hover i:last-child:not(:empty){background:var(--gold);color:var(--ink);border-color:var(--gold)}
.dd .menu:not(.kapcs) a:hover i:last-child:not(:empty)::before{opacity:.75}
.dd .menu a.all{border-top:1px solid var(--line);margin-top:6px;padding-top:11px;color:var(--gold);font-weight:600}
.dd .menu a.all i.k{color:var(--gold)}
.nav a,.nav button{font-size:14.5px;font-weight:500;color:var(--fg);background:none;border:0;cursor:pointer;font-family:var(--ui);display:inline-flex;align-items:center;gap:7px;padding:0}
.nav a:hover,.nav button:hover{color:var(--gold)}
.nav a[aria-current]{color:var(--gold)}
.nav .car{width:9px;height:9px;flex:none;opacity:.7}
.nav .tel{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.03em;color:var(--gold)}
.crest{display:flex;align-items:center;gap:12px;flex:none}
.crest svg{width:44px;height:44px;flex:none}
.crest .wm{display:flex;flex-direction:column;line-height:1.15}
.crest b{font-family:var(--g);font-weight:800;font-size:16px;letter-spacing:-.01em;text-transform:uppercase}
.crest i{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.nav .burger{display:none;width:38px;height:38px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.6px;background:var(--fg);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:var(--fg)}
.burger span::before{top:-6px}.burger span::after{top:6px}
@media(max-width:1100px){.nl>.dd,.nl>a,.nr>a,.nr>.dd{display:none}.nav .burger{display:flex}.nav .wrap{grid-template-columns:auto 1fr auto}}
@media(max-width:900px){.nav .ncta{display:none}.callg .ic{border-radius:var(--r)}}
@media(max-width:620px){.crest i{display:none}.crest b{font-size:14px}.crest svg{width:36px;height:36px}.nav .crest svg{width:40px;height:40px}.nav .crest b{font-size:10px}.nav .wrap{gap:12px}}
@media(max-width:400px){.nav .crest .wm{display:none}}

/* ————— HERO (nyitóoldal) ————— */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.hero .shot{position:absolute;inset:0;background-size:cover;background-position:center 42%;filter:grayscale(.45) contrast(1.05) brightness(.66)}
/* A fotókat itt kötjük az elemhez, nem inline style-ban: a CSS-ben lévő relatív
   útvonal mindig ehhez a fájlhoz képest oldódik fel — az inline custom property
   (--hero:url(...)) viszont a stylesheethez képest, tehát félremegy. */
.hero-main .shot{background-image:url(../img/kardan-differencial.jpg)}
.hero .veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,21,33,.9) 0%,rgba(8,21,33,.55) 30%,rgba(8,21,33,.72) 62%,rgba(8,21,33,.98) 100%)}
.hero .mid{position:relative;text-align:center;padding:var(--nav-h) clamp(18px,4vw,40px) 56px;max-width:1180px}
.hero h1{font-size:clamp(30px,6.2vw,80px);line-height:.97;letter-spacing:-.03em;word-spacing:.1em;text-wrap:balance}
.hero h2{font-family:var(--mono);font-weight:500;font-size:clamp(11px,1.25vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:clamp(18px,2.2vw,26px)}
.hero .sub{margin-top:14px;color:var(--fg-2);font-size:clamp(15px,1.75vw,19px);max-width:58ch;margin-left:auto;margin-right:auto}
.hero .cta{display:inline-flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.hero .emb{width:clamp(78px,10vw,116px);height:auto;margin:0 auto 24px;display:block}
/* nyitó embléma: a logó saját két keze csúszik össze (logóanim K terv) */
.hero .embw{position:relative;width:clamp(78px,10vw,116px);margin:0 auto 24px}
.hero .embw .emb{width:100%;margin:0}
.hero .flash{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
/* a kitöltések alapból rejtve (inline opacity:0 a jelölésben) — csak az animáció mutatja őket, így elavult CSS-sel sem ragadnak be */
/* nyitány: függöny, arany vonal a cím alatt */
.hero .curtain{position:absolute;inset:0;background:var(--bg-2);z-index:3;pointer-events:none;opacity:0}
.hero .mid{z-index:4}
.hero .rule{display:block;width:56px;height:1px;background:var(--gold);margin:clamp(18px,2.2vw,26px) auto 0}
.hero .rule+h2{margin-top:14px}
.credit{position:absolute;right:14px;bottom:12px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(239,242,246,.42);text-align:right;line-height:1.5}
.scrollcue{position:absolute;left:50%;translate:-50% 0;bottom:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
@media(max-width:620px){.credit{left:14px;right:auto;text-align:left}.scrollcue{display:none}}

/* ————— ALOLDALI FEJLÉC ————— */
.phero{position:relative;background:var(--bg-2);overflow:hidden;border-bottom:1px solid var(--line);
  padding:calc(var(--nav-h) + clamp(40px,5.4vw,74px)) 0 clamp(40px,5.4vw,74px)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--c)}
.phero .mark{position:absolute;right:clamp(-30px,-2vw,0px);top:50%;translate:0 -46%;width:min(38vw,340px);height:auto;opacity:.14;pointer-events:none}
/* fejléc fotóval (.phero.foto): bal a szöveg + három tény hajszálvonal fölött, jobb egy valódi
   műhelyfotó keretben, mono felirattal — a vízjel-embléma helyett; keskenyen a fotó a szöveg alá kerül */
.phero.foto .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:center}
.phero.foto .mark{display:none}
.phero.foto .inner{max-width:none}
.pfoto{margin:0;border:1px solid var(--line-2);background:var(--surface)}
.pfoto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.55) contrast(1.05) brightness(.82)}
.pfoto figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line-2);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pfoto figcaption span:first-child{color:var(--c,var(--gold))}
.pfacts{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:clamp(16px,2vw,22px) 0 0;border-top:1px solid var(--line);width:100%;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pfacts b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--gold));margin-bottom:6px;font-weight:500}
.pfacts span{font-size:14px;color:var(--fg);line-height:1.45}
@media(max-width:900px){.phero.foto .wrap{grid-template-columns:1fr}.pfoto img{aspect-ratio:16/10}}
@media(max-width:520px){.pfacts{grid-template-columns:1fr 1fr}}
.bparts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bparts-lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-top:16px}
.bparts a{display:flex;flex-direction:column;gap:4px;padding:10px 14px 11px 12px;min-width:132px;
  border:1px solid var(--line-2);border-left:2px solid var(--c);background:rgba(8,21,33,.62);color:var(--fg);font-size:14.5px;font-weight:700;font-family:var(--ui);
  transition:background .18s,border-color .18s,translate .28s cubic-bezier(.16,1,.3,1)}
.bparts a .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--c);font-weight:600}
.bparts a .h{display:block;font-size:12.5px;font-weight:400;color:var(--fg-2)}
.bparts a .h::after{content:" ↓";color:var(--c)}
.bparts a:hover{background:var(--raised);border-color:var(--c);translate:0 -2px}
.bparts a:hover .h{color:var(--fg)}
/* márkaoldal — "Magazin": óriás márkanév a fotó fölött, alatta logó + cím + bevezető +
   a négy tétel-lapocska; a tételek cikk-cakk sávban (fél műhelyfotó a jellel, fél szöveg,
   a tünet kiemelt idézet); a történet és a típuslista szerkesztőségi testben ragadós
   tartalomjegyzékkel; a galéria ötös csík. A lapocskák (.bparts) közösek a hőssel. */
.mg-hero{position:relative;overflow:hidden;background:var(--bg);padding-top:var(--nav-h)}
.mg-hero .ph{position:relative;height:min(62vh,560px)}
.mg-hero .ph img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block;filter:brightness(.8)}
.mg-hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,33,.1) 40%,var(--bg) 100%)}
.mg-hero .wrap{position:relative;margin-top:calc(-1 * clamp(60px,9vw,130px));padding-bottom:clamp(28px,4vw,48px)}
.mg-hero.nofoto .wrap{margin-top:clamp(28px,4vw,48px)}
.mg-hero .big{font-family:var(--g);font-weight:800;font-size:clamp(56px,12vw,180px);line-height:.82;letter-spacing:-.05em;text-transform:uppercase;color:var(--fg);display:block;word-break:break-word}
.mg-hero .sub{display:flex;gap:clamp(16px,3vw,40px);align-items:flex-end;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:2px solid var(--gold)}
.mg-hero .sub .emb{width:64px;height:auto}
.mg-hero .sub h1{font-size:clamp(18px,2vw,26px);letter-spacing:-.01em;text-transform:none;font-family:var(--ui);font-weight:600;margin-top:4px}
.mg-hero .sub p{color:var(--fg-2);max-width:56ch;flex:1 1 320px}
.mg-hero .cta{display:flex;gap:11px;flex-wrap:wrap}
.mg-hero .bparts-lab{display:block}
/* Rólunk — ugyanez a magazin-hős a cég saját emblémájával (inline svg), a lapocskák az öt
   alkatrész műhelyoldalára visznek (nyíl jobbra, nem le); a padfotó felső harmada marad látható */
.mg-hero .sub svg.emb{width:84px;height:84px;flex:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.55))}
.mg-hero.rh .ph img{object-position:50% 40%}
.mg-hero.rh.blog .ph img{object-position:50% 78%}
/* városoldal — a fotó helyén a megyetérkép (lapba ágyazott svg, a megye .akt-tal kiemelve), jobbra
   igazítva; a hosszú városnév a --n karakterszámból kap méretet, hogy egy sorban maradjon */
.mg-hero.varos .ph{display:flex;justify-content:flex-end;align-items:center;padding:28px clamp(18px,3.6vw,44px) 0}
.mg-hero.varos .ph .terkep{height:100%;width:auto;max-width:100%;opacity:.92;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.mg-hero.varos .big{font-size:min(clamp(56px,12vw,180px),calc((100vw - 2*clamp(18px,3.6vw,44px)) / var(--n,8) / .8))}
.bparts.ext a .h::after{content:" →"}
/* tételsávok */
.mg-zig{border-top:1px solid var(--line)}
.mrow{display:grid;grid-template-columns:1fr 1fr;min-height:min(60vh,520px);border-bottom:1px solid var(--line);scroll-margin-top:var(--nav-h);align-items:start;background:var(--bg-2)}
.mrow:nth-child(even) .ph{order:2}
/* a fotó nem nyúlik a hosszú szöveg teljes magasságára (az a fekvő képeket óriásira nagyítaná), hanem
   legfeljebb képernyőnyi, és ragadósan követi az olvasót a szöveg mellett */
.mrow .ph{position:sticky;top:var(--nav-h);height:min(calc(100vh - var(--nav-h)),620px);overflow:hidden;background:var(--bg-2)}
.mrow .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.05) brightness(.6)}
.mrow .ph::after{content:"";position:absolute;inset:0;background:var(--c);opacity:.12;mix-blend-mode:color}
.mrow .ph .emb{position:absolute;z-index:2;right:24px;bottom:24px;width:110px;height:110px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.mrow .tx{padding:clamp(32px,4.5vw,64px) clamp(24px,5vw,80px);border-left:3px solid var(--c);background:var(--surface);display:grid;align-items:center}
.mrow:nth-child(even) .tx{border-left:0;border-right:3px solid var(--c)}
.mrow .in{max-width:620px}
/* márkaoldal tételszakasz: „Röviden” három rubrika a cím alatt, és a nyitó bekezdés nagyobb — átfutva is olvasható */
.mrow .rovid{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mrow .rovid dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--gold));margin-bottom:5px}
.mrow .rovid dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--fg)}
.mrow .rovid+p{font-size:16.5px;color:var(--fg)}
@media(max-width:560px){.mrow .rovid{grid-template-columns:1fr}}
.mrow h2{font-size:clamp(24px,3vw,38px);margin:8px 0 14px}
.mrow p{color:var(--fg-2);margin:0 0 12px;font-size:15px}
.mrow .quote{margin:18px 0 20px;padding:12px 0 12px 18px;border-left:3px solid var(--c);font-family:var(--g);font-weight:800;text-transform:uppercase;font-size:clamp(17px,2vw,24px);letter-spacing:-.01em;line-height:1.1}
.mrow .quote small{display:block;font-family:var(--mono);font-weight:500;font-size:9.5px;letter-spacing:.14em;color:var(--fg-3);margin-top:8px}
.mrow .checks{margin-top:16px}
/* szerkesztőségi test */
.mg-body .wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(28px,5vw,80px);align-items:start;padding-top:clamp(32px,5vw,64px);padding-bottom:clamp(32px,5vw,64px)}
.mg-body .toc{position:sticky;top:calc(var(--nav-h) + 20px);border-top:1px solid var(--line-2);padding-top:14px}
.mg-body .toc .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);display:block;margin-bottom:8px}
.mg-body .toc a{display:block;padding:8px 0;border-bottom:1px solid var(--line);color:var(--fg-2);text-decoration:none;font-size:14px}
.mg-body .toc a:hover{color:var(--gold)}
.mg-body .toc .tel{margin-top:16px;font-family:var(--mono);color:var(--gold);font-size:15px;border:0}
.mg-body .art{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--line);scroll-margin-top:var(--nav-h)}
.mg-body .art:first-child{border-top:0;padding-top:0}
.mg-body .art h2{font-size:clamp(26px,3.2vw,40px);margin:8px 0 18px;max-width:22ch}
.mg-body .art p{color:var(--fg-2);margin:0 0 14px;max-width:68ch;font-size:16px}
.mg-body .art p:first-of-type::first-letter{font-family:var(--g);font-weight:800;font-size:3.2em;line-height:.8;float:left;padding:6px 10px 0 0;color:var(--gold)}
.mg-body .art .fig{margin:16px 0}
.mg-body .models{columns:3;column-gap:28px;list-style:none;margin:16px 0 0;padding:0;font-size:13.5px;color:var(--fg-2)}
.mg-body .models li{break-inside:avoid;padding:4px 0}
/* galéria-csík */
.strip5{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;margin-top:22px}
.strip5 figure{margin:0;position:relative}
.strip5 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.strip5 figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);background:linear-gradient(transparent,rgba(8,21,33,.9))}
@media (max-width:900px){
  .mg-hero .ph{height:min(48vh,380px)}
  .mg-hero .sub>div{flex:1 1 200px;min-width:0}
  .mrow{grid-template-columns:1fr;min-height:0}
  .mrow .ph{order:0!important;aspect-ratio:16/9;position:relative;top:auto;height:auto}
  .mrow .ph .emb{width:80px;height:80px;right:14px;bottom:14px}
  .mrow .tx{border:0!important;border-top:3px solid var(--c)}
  .mg-body .wrap{grid-template-columns:1fr}
  .mg-body .toc{position:static}
  .mg-body .models{columns:2}
  .strip5{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .bparts a{flex:1 1 calc(50% - 4px);min-width:0}
}
.phero .wrap{position:relative}
.phero .inner{max-width:64ch;display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.phero h1{font-size:clamp(30px,5.4vw,62px);line-height:1;letter-spacing:-.03em;word-spacing:.1em;text-wrap:balance}
.phero p{color:var(--fg-2);font-size:clamp(15.5px,1.7vw,18.5px)}
.phero .cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:10px}
.phero .num{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--c)}
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.55;padding:0 6px}

/* ————— GOMBOK ————— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;font-size:14px;font-weight:700;
  border:1px solid var(--gold);background:var(--gold);color:var(--ink);cursor:pointer;font-family:var(--ui);border-radius:var(--r);
  transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn.sec{background:transparent;color:var(--gold)}
.btn.sec:hover{background:rgba(255,203,39,.12);color:var(--gold)}
.btn.qui{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn.qui:hover{background:var(--raised);border-color:var(--line-2);color:var(--fg)}

/* ————— SZEKCIÓK ————— */
section{padding:clamp(50px,6.6vw,96px) 0}
.tone{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mid-head{max-width:74ch;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.mid-head p{color:var(--fg-2);font-size:clamp(15.5px,1.7vw,18px)}
.left-head{max-width:70ch;display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.left-head p{color:var(--fg-2);font-size:clamp(15.5px,1.7vw,18px)}
.center{text-align:center}
.mt{margin-top:clamp(26px,3.4vw,40px)}

/* műhely-kártyák — a műhelyszín csak a rajzon, a tételszámon és a fejlécvonalon */
.dir{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(30px,4vw,52px)}
@media(max-width:1040px){.dir{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dir{grid-template-columns:1fr}}
.dcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--c);
  border-radius:var(--r);transition:background .2s,transform .2s,border-color .2s}
.dcard:hover{background:var(--raised);transform:translateY(-2px)}
.dcard .im{padding:clamp(18px,2.4vw,26px) clamp(18px,2.4vw,26px) 0;display:flex;justify-content:center}
.dcard .im svg{width:min(100%,168px);height:auto}
.dcard .bd{padding:clamp(16px,2vw,20px);display:flex;flex-direction:column;gap:8px;flex:1}
.dcard .no{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-2)}
.dcard h3{font-size:clamp(19px,2.2vw,25px)}
.dcard p{font-size:clamp(15px,1.55vw,16.5px);line-height:1.6;color:var(--fg-2)}
.dcard .go{margin-top:auto;padding-top:14px;font-size:14.5px;font-weight:700;color:var(--gold)}

/* katalógus — cikk-cakk fotósávok: teljes szélességű sor, fél fotó / fél szöveg váltakozva,
   a műhely jele a varraton ül. A szöveg mindig a varrat felőli oldalon kap helyet. */
.zig{margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line)}
.zrow{display:grid;grid-template-columns:1fr 1fr;min-height:min(58vh,440px);position:relative;color:var(--fg);text-decoration:none;border-bottom:1px solid var(--line)}
.zrow:nth-child(even) .ph{order:2}
/* A fotó egészben látszik (contain), nem vág és nem zoomol; a szűrő a dobozra megy, így a --phbg-vel
   a fotó saját hátteréhez illesztett keret ugyanúgy sötétedik és színeződik, mint a kép.
   Soronként hangolható: --phg/--phb (szürkítés, fényerő nyugalomban), --phg-h/--phb-h (hoverre),
   --blend/--tint/--tint-h (a műhelyszín rávetítése; a kardánnál hue-blend, hogy a tengely kékje
   hoverre a jel kékjére álljon, a fehér háttér pedig fehér maradjon). */
.zrow .ph{position:relative;overflow:hidden;background:var(--phbg,var(--cb));filter:grayscale(var(--phg,.5)) contrast(1.05) brightness(var(--phb,.68));transition:filter .4s}
.zrow .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--fit,contain);display:block}
.zrow:hover .ph{filter:grayscale(var(--phg-h,.2)) contrast(1.05) brightness(var(--phb-h,calc(var(--phb,.68) + .1)))}
.zrow .ph::after{content:"";position:absolute;inset:0;background:var(--cc);opacity:var(--tint,.12);mix-blend-mode:var(--blend,color);transition:opacity .4s}
.zrow:hover .ph::after{opacity:var(--tint-h,var(--tint,.12))}
.zrow .tx{display:grid;align-items:center;background:var(--surface);border-left:3px solid var(--cc);transition:background .2s;
  padding:clamp(32px,4.5vw,64px) clamp(24px,4vw,64px) clamp(32px,4.5vw,64px) clamp(64px,8.5vw,124px)}
.zrow:hover .tx{background:var(--raised)}
.zrow:nth-child(even) .tx{border-left:0;border-right:3px solid var(--cc);padding-left:clamp(24px,4vw,64px);padding-right:clamp(64px,8.5vw,124px)}
.zrow .in{max-width:600px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.zrow:nth-child(even) .in{justify-self:end}
.zrow .no{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cc)}
.zrow h2{font-size:clamp(28px,3.6vw,44px)}
.zrow p{color:var(--fg-2);font-size:15px;margin:0}
.zrow .fx{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;font-size:13.5px;color:var(--fg)}
.zrow .fx b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-bottom:2px}
.zrow .btn{margin-top:6px}
.zrow .emb{position:absolute;z-index:2;left:50%;top:50%;width:clamp(96px,11vw,150px);height:auto;translate:-50% -50%;filter:drop-shadow(0 12px 30px rgba(0,0,0,.65))}
/* Szűk nézetben fotó fölül, szöveg alul; a jel a fotó alsó élére kerül, jobbra. */
@media(max-width:820px){
  .zrow{grid-template-columns:1fr;min-height:0}
  .zrow .ph{order:0!important;aspect-ratio:16/8}
  .zrow .tx{border-left:0!important;border-right:0!important;border-top:3px solid var(--cc);padding:60px clamp(18px,3.6vw,44px) 36px!important}
  .zrow .in{justify-self:start}
  .zrow .emb{left:auto;right:20px;top:calc(50vw - 46px);translate:none;width:92px}
}

/* széles fotósáv */
.band{position:relative;min-height:min(72vh,600px);display:grid;place-items:center;overflow:hidden;background:var(--bg)}
.band .shot{position:absolute;inset:0;background-size:cover;background-position:center 40%;filter:grayscale(.45) contrast(1.05) brightness(.72)}
.band-shop .shot{background-image:url(../img/kardan-hegesztes.jpg)}
.band-hall .shot{background-image:url(../img/kardan-felujitva.jpg)}
.band-axle .shot{background-image:url(../img/kardan-harom.jpg)}
.band .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,33,.74),rgba(8,21,33,.9))}
.band .mid{position:relative;text-align:center;max-width:900px;padding:clamp(40px,7vw,80px) clamp(18px,4vw,40px)}
.band p{margin-top:18px;color:var(--fg-2);font-size:clamp(15.5px,1.7vw,18px)}

/* keskeny CTA-sáv */
.strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(38px,5vw,68px) 0}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.strip h2{max-width:20ch}
.strip p{color:var(--fg-2);margin-top:12px;max-width:48ch}
.strip .cta{display:flex;gap:11px;flex-wrap:wrap}
/* SOS-sáv: aranykerettel emeljük ki, a szerkezete azonos a többivel */
.strip.sos{border-top:2px solid var(--gold);background:var(--bg-2)}
.strip .kicker{display:block;margin-bottom:11px}

/* lépések */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,48px)}
@media(max-width:1180px){.steps{grid-template-columns:repeat(3,1fr)}}
/* telefonon a lépések nem egymás alá esnek, hanem egy sorban lapozhatók (scroll-snap); a következő kártya
   széle belóg, az jelzi, hogy van tovább */
@media(max-width:900px){.steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .steps::-webkit-scrollbar{display:none}.step{flex:0 0 min(76vw,300px);scroll-snap-align:start}}
.step{background:var(--surface);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:10px}
.step .no{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;color:var(--gold)}
.step b{font-size:16.5px;font-weight:600}
.step p{color:var(--fg-2);font-size:14.5px}
/* A lépéssor görgetésre sorban kigyullad: az `.on` osztályt a JS teszi ki,
   ahogy a blokk átvonul a képernyőn. A cellák tetején összeérő arany vonal
   így magát a folyamatot rajzolja ki. Hover előre megmutat egy lépést.
   JavaScript nélkül nincs `.on`: a vonal rejtve marad, a szám arany. */
.step{position:relative;transition:background .28s}
.step::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.step.on::before,.step:hover::before{transform:none}
.step:hover{background:var(--raised)}
html.js .step .no{color:var(--fg-3);transition:color .3s}
html.js .step.on .no,html.js .step:hover .no{color:var(--gold)}

/* tények */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);margin-top:clamp(26px,3.6vw,44px);text-align:center}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{display:block;color:inherit;text-decoration:none;padding:6px 4px;border-radius:var(--r);transition:background .2s}
.fact:hover{background:var(--surface)}
.fact:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fact .n{display:block;font-family:var(--g);font-weight:800;font-size:clamp(28px,4.2vw,48px);line-height:1;letter-spacing:-.03em;white-space:nowrap;transition:color .2s}
.fact:hover .n{color:var(--gold)}
.fact .n b{font-weight:inherit;font-family:inherit;font-variant-numeric:tabular-nums}
.fact .n i{font-style:normal;font-size:.44em;font-weight:600;letter-spacing:0;color:var(--fg-2);margin-right:.22em;vertical-align:.28em}
.fact:hover .n i{color:var(--fg-2)}
.fact .l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);margin-top:10px;line-height:1.7;transition:color .2s}
.fact:hover .l{color:var(--fg-2)}

/* két hasáb */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:start;margin-top:clamp(28px,4vw,48px)}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.split.wide{grid-template-columns:1.15fr .85fr}
@media(max-width:880px){.split.wide{grid-template-columns:1fr}}

/* pipás lista */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.checks li{background:var(--surface);padding:15px 18px;display:flex;gap:13px;align-items:flex-start;font-size:15px}
.checks li::before{content:"";flex:none;width:7px;height:7px;margin-top:9px;background:var(--c)}
.checks li b{font-weight:600}
.checks li small{display:block;color:var(--fg-2);font-size:13.5px;margin-top:3px}

/* tünet- és jellemzőkártyák */
.symp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,48px)}
@media(max-width:900px){.symp{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.symp{grid-template-columns:1fr}}
.sy{background:var(--surface);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:9px}
.sy .t{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--c)}
.sy b{font-size:16px;font-weight:600}
.sy p{color:var(--fg-2);font-size:14.5px}

/* adattábla */
.spec{width:100%;border-collapse:collapse;font-size:15px;background:var(--surface)}
.spec th,.spec td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:500;width:34%}
/* háromoszlopos diagnosztikai táblázat: a sorfej keskenyebb, a fejléc kiemelt */
.spec.diag th{width:20%}.spec.diag thead th{background:var(--raised);color:var(--fg-2)}.spec.diag td{width:40%}
.spec td{color:var(--fg-2)}
.spec td b{font-weight:600;color:var(--fg)}
.spec a{color:var(--gold)}
.scroll-x{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-top:clamp(24px,3vw,40px)}

/* GYIK */
.faq{margin-top:clamp(26px,3.6vw,44px);border:1px solid var(--line);border-radius:var(--r);max-width:92ch;margin-inline:auto;background:var(--surface);overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:19px clamp(44px,6vw,56px) 19px clamp(18px,2.4vw,26px);position:relative;font-size:16.5px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:24px;top:50%;width:10px;height:10px;
  border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);translate:0 -70%;rotate:45deg;transition:rotate .22s}
.faq details[open] summary::after{rotate:225deg;translate:0 -30%}
.faq .a{padding:0 clamp(18px,2.4vw,26px) 22px;color:var(--fg-2);font-size:15.5px;max-width:80ch}
.faq .a p + p{margin-top:12px}

/* GYIK-oldal — szűrő, ugrósáv, sorszám */
.faq-tools{max-width:92ch;margin-inline:auto;display:flex;flex-direction:column;gap:13px}
.faq-tools .jump{display:flex;flex-wrap:wrap;gap:8px}
.faq-tools .jump a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2);
  border:1px solid var(--line);border-radius:0;padding:8px 14px;transition:color .2s,border-color .2s,background .2s}
.faq-tools .jump a:hover{color:var(--gold);border-color:var(--gold-deep);background:var(--surface)}
.faq-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.p-gyik .qa{max-width:92ch;margin-inline:auto}
.qa details[hidden],.faq details[hidden],.faq-grp[hidden]{display:none}
.qa.qa-collapsed details[data-more]{display:none}

/* folyószöveg */
.prose{max-width:78ch;margin-top:clamp(24px,3vw,40px)}
.prose h2{font-size:clamp(20px,2.4vw,28px);margin:clamp(30px,4vw,48px) 0 14px}
.prose h3{margin:26px 0 10px;font-size:17px}
.prose p,.prose li{color:var(--fg-2);font-size:15.5px}
.prose p + p{margin-top:14px}
.prose ul,.prose ol{margin:14px 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.prose a,.mrow .in p a,.mg-body .art p a{color:var(--gold);border-bottom:1px solid rgba(255,203,39,.35)}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.prose .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.prose .scroll-x{margin-top:18px}

/* képek, galéria */
figure{margin:0}
.fig{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.fig img{display:block;width:100%;filter:grayscale(.42) contrast(1.05) brightness(.92)}
.fig figcaption{margin-top:auto;padding:11px 14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3);border-top:1px solid var(--line)}
/* Rácsban azonos magasság: a különböző képarányokat egységes vágás fogja össze. */
.gallery .fig img{aspect-ratio:4/3;object-fit:cover}
/* Vízszintes tükrözés: a gép a képen jobbra nézzen. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(28px,4vw,44px)}
@media(max-width:900px){.gallery{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}}

/* blog */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vw,48px)}
@media(max-width:960px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:background .2s,transform .2s}
.post:hover{background:var(--raised);transform:translateY(-2px)}
.post .ph{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.post .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.05) brightness(.85)}
.post .bd{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:9px;flex:1}
.post .tagline{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--c2,var(--gold));display:flex;gap:10px;flex-wrap:wrap}
.post .tagline .d{color:var(--fg-3)}
.post h3{font-size:18px;line-height:1.12}
.post p{color:var(--fg-2);font-size:14.5px}
.post .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:700;color:var(--gold)}
.post.lead{grid-column:1/-1;flex-direction:row}
.post.lead .ph{flex:1 1 46%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--line)}
.post.lead .bd{flex:1 1 54%;justify-content:center;gap:12px;padding:clamp(22px,3vw,40px)}
.post.lead h3{font-size:clamp(21px,2.6vw,30px)}
@media(max-width:760px){.post.lead{flex-direction:column}.post.lead .ph{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}}

/* ————— blog a nyitóoldalon: címlap —————
   Egy kiemelt írás nagyban (fotó balra, cím és kivonat jobbra), alatta a
   többi hat két hasábban, tömör sorokként. Nincs kártya. */
.blogsec{border-top:2px solid var(--gold)}
.bfej{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,34px)}
.bfej h2{margin-top:10px;font-size:clamp(34px,5vw,64px)}
.bsub{margin-top:12px;color:var(--fg-2);font-size:clamp(15.5px,1.7vw,18px);max-width:52ch}
.meta{display:flex;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase}
.meta b{font-weight:500;color:var(--c2,var(--gold))}
.meta i{font-style:normal;color:var(--fg-3)}
.blead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
.blead .f{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);background:var(--bg);line-height:0}
.blead img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05) brightness(.9);transition:filter .3s,transform .6s cubic-bezier(.16,1,.3,1)}
.blead .bd{display:flex;flex-direction:column;gap:12px}
.blead .h{font-family:var(--g);font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.2vw,40px);line-height:1.06;letter-spacing:-.02em;color:var(--fg)}
.blead .p{color:var(--fg-2);font-size:16px;line-height:1.6;max-width:48ch}
.brest{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,60px)}
.brow{display:grid;grid-template-columns:150px minmax(0,1fr) 24px;gap:14px;align-items:center;padding:14px 0;
  border-bottom:1px solid var(--line);color:inherit;text-decoration:none;transition:background .18s}
.brow .meta{flex-direction:column;gap:3px}
.brow .h{font-family:var(--g);font-weight:800;text-transform:uppercase;font-size:16px;line-height:1.14;letter-spacing:-.014em;color:var(--fg)}
.brow .go{font-size:18px;color:var(--fg-3);transition:color .18s,transform 200ms cubic-bezier(.23,1,.32,1)}
.brow:focus-visible,.blead:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .blead:hover img{filter:none;transform:scale(1.03)}
  .brow:hover{background:var(--surface)}
  .brow:hover .go{color:var(--gold);transform:translateX(3px)}}
@media(max-width:820px){.blead,.brest{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.brow .go,.blead img{transition:none}}

.article{max-width:74ch;margin:0 auto}
.article .lede{font-size:clamp(17px,2vw,20px);color:var(--fg);margin-bottom:8px}
.artmeta{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3);
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,34px)}
.artmeta .c{color:var(--c)}
.pull{border-left:2px solid var(--gold);padding:6px 0 6px 20px;margin:clamp(24px,3vw,34px) 0;font-size:clamp(17px,2vw,20px);color:var(--fg)}
.callout{border:1px solid var(--line);border-left:2px solid var(--c);background:var(--surface);border-radius:var(--r);padding:clamp(18px,2.2vw,24px);margin:clamp(24px,3vw,34px) 0;display:flex;flex-direction:column;gap:9px}
.callout b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.callout p{color:var(--fg-2);font-size:15px}
.related{margin-top:clamp(34px,4.4vw,56px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,34px)}
.related .lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px;display:block}
.related ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.related a{color:var(--gold);font-size:15.5px}
.related a:hover{color:var(--fg)}

/* kapcsolat */
/* ————— kapcsolat: fotósáv + bal hasáb + űrlap —————
   Teljes szélességű szürke műhelyfotó, rajta a cím és a két szám műhelyszínű vonallal; alatta a bal hasáb
   (tények, tolómérős fotó, három lépés) és az űrlap panelje egy magasságban, a fotó aljából kiemelve. */
.kap{padding:0}
.kband{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;padding:calc(var(--nav-h) + 40px) 0 clamp(150px,18vw,220px);overflow:hidden;background:var(--bg-2)}
.kband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:grayscale(1) contrast(1.05) brightness(.55)}
.kband::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,21,33,.92) 0%,rgba(8,21,33,.6) 55%,rgba(8,21,33,.25) 100%),linear-gradient(0deg,var(--bg) 0%,rgba(8,21,33,0) 45%)}
.kov{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.kov h1{font-size:clamp(44px,7vw,96px);line-height:.94}
.kov>p{color:var(--fg-2);font-size:clamp(15.5px,1.6vw,18px);max-width:52ch;margin:0}
.knums{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;margin-top:14px}
.knums a{display:grid;gap:8px;color:inherit;text-decoration:none;padding-left:16px;border-left:3px solid var(--c)}
.knums span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.knums b{font-family:var(--g);font-weight:800;font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transition:color .2s}
.knums a:hover b{color:var(--gold)}
.kunder{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:start;padding-bottom:clamp(50px,6vw,90px)}
@media(max-width:960px){.kunder{grid-template-columns:1fr}}
.kpanel{background:var(--surface);border:1px solid var(--line);padding:clamp(22px,2.8vw,36px);margin-top:clamp(-170px,-13vw,-120px);position:relative;z-index:2}
.kph{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.kside{display:flex;flex-direction:column;gap:clamp(26px,3vw,36px);min-width:0;margin-top:clamp(-170px,-13vw,-120px);position:relative;z-index:2}
@media(max-width:960px){.kside{margin-top:0}.kpanel{margin-top:0;order:-1}.kband{padding-bottom:clamp(36px,6vw,56px);min-height:0}.kunder{padding-top:clamp(28px,5vw,44px)}} /* telefonon az űrlap megy elöl, a tények és a lépések utána, a térkép (Megközelítés) a végén */
/* .kap.flat (SOS): nincs .kband, az űrlap-rács nem lóg fel a sávra — sima szakasz, saját fejjel a bal oszlopban */
.kap.flat{padding:clamp(40px,6vw,90px) 0 0;border-bottom:1px solid var(--line)}
.kap.flat .kside,.kap.flat .kpanel{margin-top:0}
.kap.flat .kside .head h2{font-size:clamp(26px,3.2vw,40px);margin-top:8px}
.kap.flat .kside .head p{margin-top:12px;color:var(--fg-2)}
.kfacts a{color:var(--fg);text-decoration:none;font-family:var(--g);font-weight:800;font-size:19px;letter-spacing:-.01em}
.kfacts a:hover{color:var(--gold)}
.kfacts{display:grid;grid-template-columns:1fr 1fr;gap:26px 22px;padding-top:14px;margin:0}
.kfacts dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.kfacts dd{margin:0;font-size:15px;line-height:1.5;color:var(--fg)}
.kfacts small{display:block;margin-top:4px;font-size:12.5px;color:var(--fg-3);line-height:1.5}
.kshot{margin:0;border:1px solid var(--line)}
.kshot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.85)}
.kshot figcaption{padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--fg-3);border-top:1px solid var(--line)}
.ksteps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ksteps li{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ksteps i{grid-row:1/3;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold);padding-top:3px}
.ksteps b{font-family:var(--g);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:15px;color:var(--fg)}
.ksteps span{font-size:14px;line-height:1.55;color:var(--fg-2)}

/* ————— kapcsolat nyitány —————
   Rögzített, teljes képernyős réteg: a pecsét (site.js: liveEmb, .semb → kézfogás) középen, a két szám
   kétoldalt beúszik, a számjegyek 0–9 hengerként gördülnek. Aztán (.go) a pecsét és a háttér kifakul, a
   számok FLIP-pel átrepülnek a .knums a dobozába (ugyanaz a doboz, csak nagyítva indul), a lap elemei
   (.kap.anim → .reveal) lépcsőzve emelkednek elő, landoláskor (.landed) a szám aranyat villan.
   JS nélkül a lap <noscript> stílusa rejti el (a CSP miatt beágyazott script nem futhat); #ajanlat-ra érkezve, görgetve vagy csökkentett mozgásnál kimarad. */
.opn{position:fixed;inset:0;z-index:60;pointer-events:none;--cw:320px}
body.opn-lock{overflow:hidden}
html:has(body.opn-lock){scrollbar-gutter:stable} /* a görgetősáv helye megmarad a zár alatt, így a landolás után nem tolódik el a lap */
.kap.anim .knums a{opacity:0}
.kap.anim.landed .knums a{opacity:1}
.kap.landed .knums a b{animation:numTap .55s ease-out both}
@keyframes numTap{0%{color:var(--gold)}100%{color:var(--fg)}}
.kap.anim :is(.crumb,h1,.kov>p,.kfacts>div,.kshot,.ksteps li,.kpanel){opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.kap.anim .kband img{transform:scale(1.08);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.kap.anim.reveal :is(.crumb,h1,.kov>p,.kfacts>div,.kshot,.ksteps li,.kpanel){opacity:1;transform:none}
.kap.anim.reveal .kband img{transform:none}
.kap.reveal h1{transition-delay:.05s}.kap.reveal .kov>p{transition-delay:.14s}.kap.reveal .kpanel{transition-delay:.26s}
.kap.reveal .kfacts>div:nth-child(1){transition-delay:.3s}.kap.reveal .kfacts>div:nth-child(2){transition-delay:.38s}
.kap.reveal .kfacts>div:nth-child(3){transition-delay:.46s}.kap.reveal .kfacts>div:nth-child(4){transition-delay:.54s}
.kap.reveal .kshot{transition-delay:.62s}.kap.reveal .ksteps li:nth-child(1){transition-delay:.7s}
.kap.reveal .ksteps li:nth-child(2){transition-delay:.78s}.kap.reveal .ksteps li:nth-child(3){transition-delay:.86s}
.opn-bg{position:absolute;inset:0;background:var(--bg-2);transition:opacity .55s ease}
.opn-crest{position:absolute;left:50%;top:var(--cy,50%);display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .35s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.opn.ready .opn-crest{opacity:1;transform:translate(-50%,-50%)}
.opn-crest svg{width:var(--cw);height:auto;display:block;position:relative}
.opn-crest::after{content:"";position:absolute;left:50%;top:0;width:var(--cw);height:var(--cw);margin-left:calc(var(--cw) / -2);border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.opn.ready .opn-crest.play::after{animation:sw-villan .7s cubic-bezier(.23,1,.32,1) .82s forwards}
.opn-crest .addr{font-family:var(--g);font-weight:800;text-transform:uppercase;font-size:15px;line-height:1.2;text-align:center;color:var(--fg)}
.opn-crest .hrs{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.opn.go .opn-bg{opacity:0}
.opn.go .opn-crest{opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity .38s ease,transform .5s ease}
.fly{position:fixed;left:0;top:0;display:grid;gap:8px;padding-left:16px;border-left:3px solid transparent;color:var(--fg);text-decoration:none;
  transform-origin:0 0;pointer-events:auto;will-change:transform}
.fly::before{content:"";position:absolute;left:-3px;top:0;bottom:0;width:3px;background:var(--c);transform:scaleY(0);transform-origin:top;
  animation:ruleIn .55s cubic-bezier(.16,1,.3,1) .25s both}
@keyframes ruleIn{to{transform:none}}
.opn.ready .fly{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.fly .in{display:grid;gap:8px;animation:opnIn .6s .2s cubic-bezier(.16,1,.3,1) both}
.fly .lb{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.fly b{font-family:var(--g);font-weight:800;font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.fly .dg{display:inline-block;height:1em;overflow:hidden;vertical-align:top}
.fly .col{display:block;line-height:1;transform:translateY(0);animation:dgRoll .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.28s + var(--d,0ms))}
@keyframes dgRoll{to{transform:translateY(calc(var(--n) * -1em))}}
@keyframes opnIn{from{opacity:0;transform:translateX(var(--dx))}to{opacity:1;transform:none}}
/* műhelyek: ugyanez a nyitány, a két szám helyett a négy műhelyjel (.opn.emb, .fly.emb → .kemb a) — nincs
   bal vonal, a jel középen, alatta a tétel mono címkéje a műhely színében; a sáv alja rövidebb, mert nem lóg rá panel */
.kap.muh .kband{min-height:min(64vh,600px);padding-bottom:clamp(28px,4vw,48px)}
.kemb{gap:clamp(20px,4vw,64px);margin-top:22px}
.kemb a,.fly.emb{border-left:0;padding-left:0;gap:14px;justify-items:center;text-align:center}
.fly.emb::before{display:none}
.fly.emb .in{justify-items:center} /* a jel a repülés alatt is középen áll, így landoláskor nem ugrik */
.kemb svg,.fly.emb svg{width:clamp(88px,12vw,168px);height:auto;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55));transition:transform .4s cubic-bezier(.16,1,.3,1)}
.kemb a:hover svg{transform:scale(1.055)}
.kemb span,.fly.emb .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);white-space:nowrap}
.fly.emb .in{animation-delay:calc(.12s + var(--i,0) * 70ms)}
@media(max-width:520px){.kemb{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.kemb svg,.fly.emb svg{width:64px}.kemb span,.fly.emb .lb{font-size:8.5px;letter-spacing:.08em;white-space:normal}}
@media(prefers-reduced-motion:reduce){.opn{display:none}.kap.anim .knums a{opacity:1}
  .kap.anim :is(.crumb,h1,.kov>p,.kfacts>div,.kshot,.ksteps li,.kpanel){opacity:1;transform:none}.kap.anim .kband img{transform:none}}

.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,46px)}
@media(max-width:880px){.contact{grid-template-columns:minmax(0,1fr)}
  /* telefonon előbb az űrlap, aztán a műhelyszámok és a cím, a térkép a legvégén — mint a Kapcsolat lapon */
  .cbox#ajanlat{order:-1}
  .cbox.dark{display:flex;flex-direction:column}
  .cbox.dark .cmap{order:9;margin-top:18px}}
.cbox{background:var(--surface);padding:clamp(24px,3.4vw,42px)}
.cbox.dark{background:var(--bg-2)}
/* ————— kapcsolat: műhelyszínnel jelölt hívógombok —————
   Minden szám a saját műhelye színét viseli a bal élén, így
   ránézésre eldönthető, melyiket kell hívni. */
.dials{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
/* Három szám egymás alatt túl sok helyet vitt el, ezért a felirat és a
   szám egy sorba került — a lista így harmadával rövidebb. Ahol van
   harmadik sor (domainek, testvércég), az teljes szélességben alá fut. */
.dial{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:5px 14px;background:var(--surface);
  padding:10px 16px 10px 22px;color:inherit;text-decoration:none;transition:background .2s}
.dial::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c)}
.dial:hover{background:var(--raised)}
.dial:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.dial .s{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3)}
/* a felirat mellé a műhely saját jele, a saját színében */
.dial .dm{display:inline-flex;align-items:center;gap:5px;flex:none}
.dial .dg{display:block;width:52px;height:52px}
.dial .dg.mail{width:17px;height:21px;fill:currentColor}
@media(max-width:560px){.dial .dg{width:42px;height:42px}}
@media(max-width:400px){.dial .dg{width:36px;height:36px}.dial .dg.mail{width:16px;height:20px}}
.dial b{font-family:var(--mono);font-weight:500;white-space:nowrap;
  font-size:clamp(15px,1.45vw,18px);letter-spacing:.01em;color:var(--gold);
  transition:color .18s}
.dial:hover b{color:var(--fg)}
.dial small{flex:0 0 100%;font-size:11.5px;color:var(--fg-3);line-height:1.5}

/* nyitólapi kapcsolati térkép — ugyanaz a beágyazás és sötétítés, mint a
   kapcsolat oldalon, csak alacsonyabb kerettel. Süti-hozzájárulás nélkül
   a helyére a cím kerül, és a Google felé nem indul kérés. */
.cmap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--surface);margin-bottom:clamp(18px,2.2vw,26px)}
.cmap iframe{display:block;width:100%;height:clamp(210px,26vh,280px);border:0;
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) grayscale(.28)}
.cmap .cblock{min-height:clamp(210px,26vh,280px);padding:20px}

/* a testvércég közlése kikerült a gombból, hogy a három sor egyforma legyen */
.dnote{margin-top:11px;font-size:12.5px;line-height:1.55;color:var(--fg-3)}
.dnote b{color:var(--fg-2);font-weight:600}

/* nyitvatartás: minden nap saját sorban, egymás alá igazított időkkel */
.chours{margin:0;display:grid;gap:7px}
.chours>div{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:baseline}
.chours dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.chours dd{margin:0;font-size:14.5px;color:var(--fg-2);font-variant-numeric:tabular-nums}
.caddr b{display:block;color:var(--fg);font-weight:600;font-size:15.5px;margin-bottom:6px}

.cmeta{display:flex;flex-direction:column;gap:14px;margin-top:clamp(18px,2.2vw,26px)}
/* a nyitólapon a cím és a nyitvatartás egymás mellé fér, így a bal hasáb
   nem lóg túl az űrlapon */
.cmeta.cm2{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:14px clamp(18px,2.4vw,34px);align-items:start}
@media(max-width:520px){.cmeta.cm2{grid-template-columns:1fr}}
.cmeta p{font-size:14.5px;color:var(--fg-2);line-height:1.6}
.cmeta p b{display:block;color:var(--fg);font-weight:600;font-size:15.5px}
.cmeta p span{display:block;color:var(--fg-3);font-size:12.5px;margin-top:3px}
.cmeta a{color:var(--gold)}
.cmeta a:hover{color:var(--fg)}

form{display:grid;grid-template-columns:1fr 1fr;gap:13px}
@media(max-width:560px){form{grid-template-columns:minmax(0,1fr)}form>*{min-width:0}}
.f-full{grid-column:1/-1}
label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:7px}
input,select,textarea{width:100%;font:inherit;font-size:15.5px;padding:13px 14px;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);border-radius:var(--r)}
textarea{min-height:118px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--gold)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--fg-3) 50%),linear-gradient(135deg,var(--fg-3) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat;padding-right:38px}
/* ————— sürgősség —————
   Az SOS-kérés eddig semmiben nem különbözött a többitől, amikor beérkezett.
   Két látható kapcsoló és rejtett forrásmezők mennek az űrlappal, hogy a
   kérés már megjelöltként érkezzen. */
.urg{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.urg .ul{width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:-2px}
.urg label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:var(--ui);font-size:14px;font-weight:600;color:var(--fg-2);
  border:1px solid var(--line-2);border-radius:0;padding:9px 15px;
  transition:border-color .2s,color .2s,background .2s}
.urg label:hover{border-color:var(--fg-3);color:var(--fg)}
.urg input{width:14px;height:14px;flex:none;margin:0;padding:0;accent-color:var(--gold)}
.urg label:has(input:checked){border-color:var(--gold);color:var(--fg);background:rgba(255,203,39,.08)}
.urg label.sos:has(input:checked){border-color:var(--w4);color:var(--fg);background:var(--w4-bg)}
.urg label:focus-within{outline:2px solid var(--gold);outline-offset:2px}

/* ————— kapcsolati csempesor —————
   Három gyors elérés a blokk tetején: hívás, e-mail, cím. A jel négyzetes
   keretben ül, nem körben — a lap többi eleme is hajszálvonalas és szögletes. */
.cchips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,16px);
  margin-top:clamp(24px,3vw,36px)}
@media(max-width:820px){.cchips{grid-template-columns:1fr}}
.cchip{display:flex;align-items:center;gap:14px;min-width:0;color:inherit;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:background .2s,border-color .2s}
.cchip:hover{background:var(--raised);border-color:var(--line-2)}
.cchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cchip .ci{flex:none;width:40px;height:40px;display:grid;place-items:center;
  border:1px solid rgba(255,203,39,.32);border-radius:var(--r);color:var(--gold)}
.cchip .ci svg{width:17px;height:21px;fill:currentColor;display:block}
.cchip .ct{display:flex;flex-direction:column;gap:4px;min-width:0}
.cchip i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.cchip b{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;transition:color .2s}
.cchip:hover b{color:var(--gold)}

/* ————— melyik műhelyt hívja —————
   Öt sor, mindegyik a saját emblémájával: a hívó a jelről ismeri fel az
   alkatrészt, és rögtön a hozzá tartozó számot tárcsázza. */
.slabel{display:block;margin:clamp(18px,2.2vw,26px) 0 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3)}
.shoplist{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.shop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:6px 14px;background:var(--surface);padding:10px 16px 10px 13px;
  color:inherit;text-decoration:none;border-left:3px solid var(--c);
  transition:background .2s}
.shop:hover{background:var(--raised)}
.shop:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.shop .se{width:46px;height:46px;display:block;flex:none}
.shop .sn{display:flex;flex-direction:column;gap:3px;min-width:0}
.shop .sn b{font-size:15px;font-weight:600;line-height:1.25}
.shop .sn i{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3)}
.shop .sp{font-family:var(--mono);font-size:14px;color:var(--gold);white-space:nowrap;
  transition:color .18s}
.shop:hover .sp{color:var(--fg)}
@media(max-width:560px){
  .shop{grid-template-columns:auto minmax(0,1fr)}
  .shop .sp{grid-column:2}
  .shop .se{width:40px;height:40px}
}

/* ————— városoldal: ellátott települések —————
   Hosszú felsorolás, ezért levegős sorköz és középre zárás — így
   olvasható marad, és nem néz ki kulcsszóhalomnak. */
.towns{margin:0 auto;max-width:70ch;text-align:center;color:var(--fg-2);
  font-size:15px;line-height:2.1}
.towns span{color:var(--fg-3);margin:0 5px}

/* ————— az űrlap saját fejléce a dobozban ————— */
.fhead{margin-bottom:clamp(18px,2.2vw,26px);padding-bottom:clamp(15px,1.9vw,21px);
  border-bottom:1px solid var(--line)}
.fhead h3{font-size:clamp(21px,2.5vw,28px)}
.fhead p{margin-top:10px;color:var(--fg-2);font-size:14.5px;line-height:1.6;max-width:48ch}

/* Turnstile: a widget saját, rögzített méretű iframe-et rak be — csak helyet
   adunk neki. Amíg nincs valódi kulcs, a JS elrejti, hogy ne tátongjon üresen. */
.cf-turnstile{min-height:65px}
.cf-turnstile[hidden]{display:none}

.hint{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--fg-3)}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--fg-2);line-height:1.5}
.check input{width:16px;height:16px;flex:none;margin-top:3px;padding:0;accent-color:var(--gold)}
.check a{color:var(--gold)}
.ok{grid-column:1/-1;border:1px solid var(--gold);background:rgba(255,203,39,.09);color:var(--gold);padding:12px 14px;font-size:14px;border-radius:var(--r);display:none}
.ok.show{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* térkép, megközelítés */
.mapwrap{margin-top:clamp(28px,4vw,46px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
/* A világos csempéket teljes invertálás + 180°-os színforgatás teszi sötétté
   úgy, hogy a színek a helyükön maradjanak. Részleges invert sarat csinál. */
.mapwrap iframe{display:block;width:100%;height:min(56vh,460px);border:0;
  filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) grayscale(.28)}
/* A térkép csak kattintásra tölt be: addig nem indul külső kérés. */
.mapask{height:min(56vh,460px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:clamp(24px,4vw,44px);
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 12px,var(--bg-2) 12px,var(--bg-2) 24px)}
.mapask b{font-family:var(--g);font-weight:800;font-size:clamp(19px,2.4vw,26px);text-transform:uppercase;letter-spacing:-.02em}
.mapask p{color:var(--fg-2);font-size:14.5px;max-width:52ch}
.mapwrap .cap{padding:13px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3)}
.mapwrap .cap a{color:var(--gold)}
/* ————— szöveges kártyasor (kapcsolat: „hogyan jutsz el hozzánk") ————— */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.7vw,22px);
  margin-top:clamp(24px,3vw,36px)}
@media(max-width:760px){.ways{grid-template-columns:1fr}}
.way{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s,background .25s,transform .25s}
.way:hover{border-color:var(--line-2);background:var(--raised);transform:translateY(-2px)}
.way .bd{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:8px}
.way .t{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.way b{font-size:clamp(17px,1.9vw,20px);font-weight:600;line-height:1.24;letter-spacing:-.012em}
.way p{color:var(--fg-2);font-size:14.5px;line-height:1.62}
@media (prefers-reduced-motion:reduce){.way{transition:none}.way:hover{transform:none}}

/* ————— járműkör: hat kártya két feliratozott sorban —————
   Keret nélküli kártya: fotó, arany vonal, cím + sorszám, egy sor leírás,
   és alatta címkék arról, melyik alkatrészt javítjuk az adott járművön —
   a címke a műhely oldalára visz. A két sor (közúti / haszon és munkagép)
   bal szélén elforgatott monó felirat, hajszálvonallal. */
/* 10: hat címkés kártya 3×2-ben, csoportfelirat nélkül */
.jracs{margin-top:clamp(26px,3.4vw,44px)}
/* 15: a fotón címes kártya, két feliratozott sorban */
.jarmu{margin-top:clamp(26px,3.4vw,44px)}
.jcsop{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,40px);align-items:stretch;padding:clamp(22px,3vw,34px) 0;border-top:1px solid var(--line)}
.jcsop:last-child{border-bottom:1px solid var(--line)}
.jcsop .cl{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;justify-content:center;border-left:1px solid var(--line-2);padding:6px 0}
.jsor{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.jk{display:flex;flex-direction:column;gap:12px}
/* a keret tükrözve: minden jármű jobbra néz; a --z/--tx a képen belüli nagyítás
   és eltolás, hogy a jármű a keret közepére kerüljön (a hover ráépül) */
.jk .f{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);background:var(--bg);line-height:0;transform:scaleX(-1)}
.jk .f.nemtukor{transform:none}
.jk img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 50%;transform:translateX(var(--tx,0)) scale(var(--z,1));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.jk .fej{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:2px solid var(--gold);padding-top:10px}
.jk h3{font-size:clamp(15px,1.4vw,18px);line-height:1.12;letter-spacing:-.016em}
.jk .no{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--gold);flex:none}
.jk p{color:var(--fg-2);font-size:14.5px;line-height:1.6}
.jk .alk{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.jk .alk li{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:var(--r)}
.jk .alk a{display:block;padding:4px 8px;color:var(--gold);text-decoration:none;transition:background .15s,border-color .15s}
.jk .alk li:has(a){border-color:rgba(255,203,39,.4)}
.jk .alk a:hover{background:rgba(255,203,39,.12)}
.jk .alk a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.jk .alk .nem{padding:4px 8px;color:var(--fg-3);text-decoration:line-through;text-decoration-color:var(--line-2)}
@media(hover:hover) and (pointer:fine){.jk:hover img{transform:translateX(var(--tx,0)) scale(calc(var(--z,1)*1.04))}}
@media(max-width:900px){.jcsop{grid-template-columns:1fr}.jcsop .cl{writing-mode:horizontal-tb;transform:none;border:0;justify-content:flex-start;padding:0}.jsor{grid-template-columns:1fr}}
@media(max-width:900px) and (min-width:561px){.jsor{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.jk img{transition:none}.jk:hover img{transform:translateX(var(--tx,0)) scale(var(--z,1))}}

/* ————— járműkör 15-ös terv: a cím a fotón —————
   A címsor a kép aljára ül, de kicsiben és rövid sötétítéssel, hogy a
   jármű látszódjon alatta: a fedés csak az alsó harmadot érinti, és a
   három fotón ott már a talaj/út van, nem a jármű teste. A keret 4:3,
   hogy a fotó nagyobb legyen — az 1,5 körüli eredetikből ehhez csak a
   szélükből jön le pár százalék, nagyítás nélkül, a szín érintetlen. */
.vcard{display:flex;flex-direction:column;gap:15px}
.vcard .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg);
  border-radius:var(--r);line-height:0}
.vcard img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.vcard:hover img{transform:scale(1.05)}
/* csak az alsó harmadot sötétítjük, épp annyira, hogy a cím olvasható legyen */
.vcard .frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,21,33,0) 54%,rgba(8,21,33,.42) 74%,rgba(8,21,33,.9))}
.vcard .on{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(12px,1.5vw,17px) clamp(13px,1.6vw,18px);
  display:flex;flex-direction:column;gap:5px}
.vcard .on .t{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);line-height:1.2}
.vcard .on h3{font-size:clamp(14.5px,1.35vw,17px);line-height:1.14;letter-spacing:-.016em}
.vcard p{color:var(--fg-2);font-size:clamp(15px,1.55vw,16.5px);line-height:1.6;
  padding-left:13px;border-left:2px solid var(--gold)}
@media (prefers-reduced-motion:reduce){.vcard img{transition:none}.vcard:hover img{transform:none}}


/* ————— ügyfélvélemények: futószalag —————
   Tíz értékelés hasábokban túl magas szakaszt adott. Ugyanaz a mechanika,
   mint a lapon lévő szövegfutószalagé: a sor tartalma kétszer szerepel, és
   a sáv a saját szélessége felével csúszik el, ezért a hurok varrat nélkül
   zárul. A második példányt a JS teszi be, ezért JavaScript nélkül a sor
   egyszerűen oldalra húzható marad. Rámutatásra és billentyűzetes
   fókusznál megáll, különben olvashatatlan lenne.
   A nevek és a szövegek valódi, Google-on visszakereshető értékelések. */
.revs{margin-top:clamp(26px,3.4vw,44px);overflow-x:auto;padding-bottom:14px}
.revs .sav{display:flex;gap:clamp(14px,1.8vw,22px)}
/* A futó sáv görgethető doboz, amelynek a scrollLeft-jét a site.js lépteti — nem CSS-transformmal mozgatott réteg.
   A 20 kártyás, ~7000px-es sáv transformmal Safarin (Mac, iPhone) egyetlen csempézetlen kompozit réteg lett, a
   méretkorlát fölött üresen maradt, és csak újratöltésre jelent meg. A szélfakítás két álelem, nem mask-image. */
.revs.on{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:0;position:relative}
.revs.on::-webkit-scrollbar{display:none}
.revs.on .sav{width:max-content}
.revs.on::before,.revs.on::after,.lgsav.on::before,.lgsav.on::after{content:"";position:absolute;top:0;bottom:0;width:6%;z-index:1;pointer-events:none}
.revs.on::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.revs.on::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
@media(prefers-reduced-motion:reduce){
  .revs.on{padding-bottom:14px}.revs.on::before,.revs.on::after{display:none}
  .revs.on .sav{width:auto}.revs.on .sav>[aria-hidden]{display:none}
}

/* ————— ügyféllogók: sötét sáv —————
   Ugyanaz a felület, mint a többi .strip: --surface háttér, arany hajszálvonal
   a tetején, ahogy a véleménykártyákon. A logók színesen futnak; a fekete
   betűs márkák (.inv: Folyamat, FlottaCar, Q-Service) invert+hue-rotate
   szűrőt kapnak, ami a feketét fehérre váltja, a vörös jelet meghagyja.
   A Kaposi SVG kitöltése közvetlenül a fájlban lett fehér.
   Minden logó a cég saját oldalára visz, új lapon.
   A cím a bal szélen, a lap paddingjánál — nem a 1280-as wrapban —, a
   szalag pedig onnan a jobb képernyőszélig fut, hogy a logóknak több hely
   jusson. Alatta a kiírósor mondja meg, melyik cégen áll az egér — a
   kilenc logóból hármat ismer fel egy kívülálló.
   A szalag a .revs mechanikáját használja (site.js), rámutatásra megáll,
   egérrel meg is lehet fogni. */
.lsav{background:var(--surface);border-top:2px solid var(--gold);border-bottom:1px solid var(--line);
  padding:clamp(24px,3vw,38px) 0}
.lcim{padding-left:clamp(18px,4vw,48px);
  display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);
  align-items:center;gap:clamp(20px,3vw,40px)}
.lcim .cimke{padding-right:clamp(20px,3vw,38px);border-right:1px solid var(--line-2)}
.lcim .kick{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3)}
.lcim .cimke b{display:block;margin-top:7px;font-family:var(--g);font-weight:800;
  text-transform:uppercase;font-size:clamp(14px,1.5vw,18px);line-height:1.12;
  letter-spacing:-.012em;color:var(--fg)}
.kiiras{margin:10px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-height:1.35em}
.kiiras .ix{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.kiiras .nv{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--fg-2)}
.kiiras .nv b{font-family:var(--g);font-weight:800;text-transform:uppercase;
  font-size:12.5px;letter-spacing:.01em;color:var(--fg)}
.kiiras .nv i{font-style:normal;color:var(--fg-3)}
@media(max-width:760px){
  .lcim{grid-template-columns:1fr;gap:16px;padding-right:clamp(18px,4vw,48px)}
  .lcim .cimke{border-right:0;border-bottom:1px solid var(--line-2);padding:0 0 14px}}

/* a logó mint link: rámutatásra a többi visszahúzódik */
.lgo{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;text-decoration:none;
  flex:0 0 auto;display:block;border-radius:var(--r);outline-offset:6px;outline-color:var(--gold-deep);
  transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.lgo:active{transform:scale(.97)}
.lgo img{height:calc(var(--h) * var(--k,1));width:auto;max-width:100%;display:block;pointer-events:none;
  filter:saturate(.92);opacity:.88;transition:opacity .2s}
.lgo.inv img{filter:invert(1) hue-rotate(180deg) saturate(.92)}
.lgo:focus-visible img{opacity:1}
@media(hover:hover) and (pointer:fine){
  .lgo:hover img{opacity:1}
  .lgsav .sav:hover .lgo img{opacity:.35}
  .lgsav .sav:hover .lgo:hover img{opacity:1}}

.lgsav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab}
.lgsav::-webkit-scrollbar{display:none}
.lgsav.fogja{cursor:grabbing}
.lgsav .sav{display:flex;align-items:center;gap:clamp(30px,4.4vw,66px)}
/* A sáv görgethető doboz (scrollLeft-et léptet a site.js), nem transformmal mozgatott réteg — lásd a véleményeknél */
.lgsav.on{position:relative;overflow-x:auto}
.lgsav.on .sav{width:max-content}
.lgsav.on::before{left:0;background:linear-gradient(90deg,var(--surface),transparent)}
.lgsav.on::after{right:0;background:linear-gradient(270deg,var(--surface),transparent)}
@media(prefers-reduced-motion:reduce){
  .lgsav.on::before,.lgsav.on::after{display:none}
  .lgsav.on .sav{width:auto}.lgsav.on .sav>[aria-hidden]{display:none}
  .lgo img{transition:none}}

.rev{flex:0 0 clamp(300px,27vw,376px);margin:0;
  background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--gold);
  border-radius:var(--r);padding:clamp(20px,2.4vw,26px);
  display:flex;flex-direction:column;gap:13px;
  transition:background .2s,border-color .2s}
.rev:hover{background:var(--raised);border-color:var(--line-2)}
/* Az idézőjel maga a grafika: nagyban, aranyban, a kártya tetején. */
.rev .qm{font-family:var(--g);font-weight:800;font-size:64px;line-height:.7;
  color:var(--gold);display:block;height:30px}
.rev blockquote{margin:0;font-size:clamp(15.5px,1.7vw,17.5px);line-height:1.6;color:var(--fg)}
/* A név a kártya aljához van rögzítve — a sorban minden kártya egyforma
   magas, enélkül a rövid véleményeknél üres folt maradna alatta. */
.rev figcaption{margin-top:auto;padding-top:14px;border-top:2px solid var(--gold);
  display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px}
.rev .ki{display:flex;flex-direction:column;gap:3px;min-width:0}
.rev cite{font-family:var(--g);font-weight:800;text-transform:uppercase;font-style:normal;
  font-size:15px;letter-spacing:-.01em;color:var(--fg);line-height:1.1}
.rev .w{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);margin-top:5px;display:block}
.rev .stars{display:flex;gap:3px;color:var(--gold);line-height:0;flex:none}
.rev .stars svg{width:12px;height:12px;fill:currentColor}

/* lábléc */
/* ————— lapozó nyilak (site.js) — a kártyasorok és a folyamat-színpad szélén, csak keskenyen ————— */
.swipe{position:relative}
.swipe-btn{display:none;position:absolute;top:50%;translate:0 -50%;z-index:3;width:44px;height:44px;border-radius:50%;border:0;
  background:var(--gold);color:var(--ink);font:700 22px/1 var(--ui);box-shadow:0 8px 24px rgba(0,0,0,.55);cursor:pointer;place-items:center;padding:0}
.swipe-btn.prev{left:6px}.swipe-btn.next{right:6px}
.swipe-btn:active{transform:scale(.94)}
@media(max-width:1100px){
  .swipe .swipe-btn{display:grid}
  .swipe.at-start .prev,.swipe.at-end .next,.swipe.no-scroll .swipe-btn{display:none}
  .swipe .swipe-btn.next{animation:swipe-nudge 1.4s ease-in-out .6s 3}
}
@media(max-width:900px){
  .proc-stage .swipe-btn{display:grid;top:90px;width:40px;height:40px;font-size:20px} /* a 180px-es fotósáv közepén, nem a sorszámon és a szövegen */
  .proc-stage .swipe-btn.next{animation:swipe-nudge 1.4s ease-in-out .6s 3}
}
@keyframes swipe-nudge{0%,100%{translate:0 -50%}50%{translate:6px -50%}}
@media(prefers-reduced-motion:reduce){.swipe-btn{animation:none!important}}

footer{background:var(--bg-2);border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 28px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media(max-width:880px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
footer h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;font-weight:500}
footer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
footer li,footer a{font-size:14px;color:var(--fg-2)}
footer a:hover{color:var(--gold)}
.fnote{font-size:13px;color:var(--fg-3);line-height:1.65;margin-top:14px;max-width:44ch}
.fbot{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-3)}
.fbot .cr{max-width:64ch;line-height:1.7}
.fbot a{font-size:11.5px;color:var(--fg-3)}

/* lábléc címkesor: márka- és városoldalak (site.js szúrja be a .fgrid elé, a lábléc tetejére).
   Középre zárt, két sor: a márkák arany kerettel, a városok tömör arany címkével — a
   sötét láblécben ez a két sáv a leghangosabb elem, szögletes, nem pasztilla. */
.flinks{margin-bottom:clamp(40px,5vw,60px);padding-bottom:clamp(36px,4.5vw,52px);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:34px;text-align:center}
.frow h4{margin:0 0 14px;color:var(--gold);font-size:10.5px}
.frow ul{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
/* beúszás: minden címke a saját --i sorszáma szerint késve emelkedik fel, amikor a
   lábléc látótérbe ér (.on a site.js-ből); csökkentett mozgásnál a globális szabály kikapcsolja */
.frow li{line-height:1;opacity:0;transform:translateY(12px);
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*26ms)}
.flinks.on .frow li{opacity:1;transform:none}
.frow a{display:inline-block;font-family:var(--g);font-weight:700;font-size:13px;line-height:1;padding:10px 14px;
  border:1px solid var(--gold);border-radius:var(--r);color:var(--fg);white-space:nowrap;
  transition:background .18s,color .18s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s}
.frow a:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px);box-shadow:0 10px 18px -8px rgba(255,203,39,.6)}
.frow a:active{transform:translateY(0);box-shadow:none;transition-duration:.08s}
.frow.fv a{background:var(--gold);color:var(--ink)}
.frow.fv a:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ink)}
.frow a[aria-current]{background:var(--fg);border-color:var(--fg);color:var(--ink)}
@media(max-width:520px){.frow a{font-size:12px;padding:9px 11px}.frow ul{gap:6px}}

/* mobil fiók */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(4,10,17,.72);opacity:0;visibility:hidden;transition:.28s}
.sheet.open{opacity:1;visibility:visible}
.sheet .panel{position:absolute;inset:0 auto 0 0;width:min(340px,88vw);background:var(--bg-2);border-right:1px solid var(--line);
  padding:22px;display:flex;flex-direction:column;overflow-y:auto;transform:translateX(-102%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sheet.open .panel{transform:none}
/* A mobil menü szakaszokra osztva: fejléc a névvel, Nyitóoldal, majd három címkézett csoport
   (Műhelyek kóddal és színnel, Az oldalról, Hívás két számmal és a gombbal) — nem egy hosszú lista. */
.sheet .shead{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sheet .shead .wm{display:flex;flex-direction:column;line-height:1.15}
.sheet .shead b{font-family:var(--g);font-weight:800;font-size:15px;letter-spacing:-.01em;text-transform:uppercase}
.sheet .shead i{font-family:var(--mono);font-style:normal;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.sheet .x{border:0;background:none;font-size:26px;cursor:pointer;padding:2px 8px;line-height:1;color:var(--fg)}
.sheet a{padding:12px 4px;border-bottom:1px solid var(--line);font-size:16px;display:flex;align-items:center;gap:10px}
.sheet a:hover{color:var(--gold)}
.sheet a.home{padding:14px 4px;font-weight:600}
.sheet .sgrp{margin-top:22px;display:flex;flex-direction:column}
.sheet .sl{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);padding-bottom:8px;border-bottom:2px solid var(--gold);margin-bottom:2px}
.sheet .sgrp a i.k{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--fg-3));width:58px;flex:none}
.sheet .sgrp a[style]::before{content:"";width:6px;height:6px;background:var(--c);transform:rotate(45deg);flex:none;margin-right:2px}
.sheet .sgrp a.all{color:var(--gold);font-weight:600;font-size:14.5px;border-bottom:0}
.sheet .scta a.tel{margin:0;display:grid;gap:2px;padding:12px 4px;font-family:var(--mono);font-size:15.5px;font-weight:500;color:var(--gold);background:none;border-radius:0;text-align:left}
.sheet .scta a.tel i.k{width:auto;color:var(--fg-3)}
.sheet .scta a.tel:hover{background:none;color:var(--gold-deep)}
.sheet .scta .btn{margin-top:14px;justify-content:center;border-bottom:0}

/* 404 */
.oops{min-height:74svh;display:grid;place-items:center;text-align:center;padding-top:var(--nav-h)}
.oops .n{font-family:var(--g);font-weight:800;font-size:clamp(72px,18vw,190px);line-height:1;letter-spacing:-.05em;color:var(--surface)}
.oops h1{margin-top:-.16em;font-size:clamp(26px,4.6vw,46px)}
.oops p{margin-top:18px;color:var(--fg-2);max-width:48ch;margin-inline:auto}
.oops .cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ————— MOZGÁS —————
   Minden kezdőállapot a `no-preference` ágon belül van. Így csökkentett
   mozgásigénynél nem marad rejtve tartalom: a rejtés maga sem lép életbe.
   A görgetésre megjelenő elemeket a `html.js` is őrzi — JavaScript nélkül
   minden azonnal látszik. */
@media (prefers-reduced-motion:no-preference){

  /* nyitó címsor: soronként úszik fel egy maszk mögül */
  /* a rejtett állás 140%: a maszk .09em párnája + az ékezetek em-doboz fölé lógó része
     108%-nál még kilátszott a betűk teteje, mielőtt a sor felúszott volna */
  .hero h1 .ln{display:block;overflow:hidden;padding:.09em 0;margin:-.09em 0}
  .hero h1 .ln>span{display:block;transform:translateY(140%);
    animation:sw-rise .9s cubic-bezier(.16,1,.3,1) forwards}
  .hero h1 .ln>span{animation-duration:.55s;animation-delay:1s}
  .hero h1 .ln:nth-of-type(2)>span{animation-delay:1.08s}
  .hero h1 .ln:nth-of-type(3)>span{animation-delay:1.16s}

  .hero .rule{transform:scaleX(0);animation:sw-rise .5s cubic-bezier(.16,1,.3,1) 1.2s forwards}
  .hero h2,.hero .sub,.hero .cta,.hero .scrollcue{opacity:0;
    animation:sw-fade .75s cubic-bezier(.16,1,.3,1) forwards}
  .hero h2{letter-spacing:.42em;animation:sw-track .6s cubic-bezier(.16,1,.3,1) 1.25s forwards}
  .hero .sub{translate:0 10px;animation:sw-up .55s cubic-bezier(.16,1,.3,1) 1.3s forwards}
  .hero .cta{translate:0 10px;animation:sw-up .55s cubic-bezier(.16,1,.3,1) 1.38s forwards}
  .hero .scrollcue{animation-delay:1.7s}

  /* nyitány „Reflektor” (csak html.js): sötétben csak a nagy, középre tolt pecsét körül egy fénykör, amely a
     kézfogás alatt kitágul az egész képre; utána a pecsét a helyére csúszik. A site.js méri ki a --dy-t (a pecsét
     végleges helye és a képernyő közepe közti távolság) és a --s nagyítást, majd .go-val elindít mindent —
     addig minden hős-animáció áll (paused), a pecsét pedig nem látszik, hogy ne ugorjon. Görgetett
     újratöltésnél vagy horgonyra érkezve (.skip) nincs függöny és nincs tolás. */
  html.js .hero-main .curtain{opacity:1;--fk:70px;
    -webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--fk),#000 calc(var(--fk) + 160px));
    mask:radial-gradient(circle at 50% 50%,transparent var(--fk),#000 calc(var(--fk) + 160px));
    animation:sw-nyit 1s cubic-bezier(.76,0,.24,1) .35s both}
  html.js .hero-main .embw{transform:translateY(var(--dy,0px)) scale(var(--s,2.4));animation:sw-haza .6s cubic-bezier(.16,1,.3,1) .9s both}
  html.js .hero-main .shot{transform:scale(1.08);animation:sw-leul 2s cubic-bezier(.16,1,.3,1) .4s both}
  html.js .hero-main:not(.go) .embw{visibility:hidden}
  html.js .hero-main:not(.go) *{animation-play-state:paused}
  html.js .hero-main.skip .curtain{display:none}
  html.js .hero-main.skip .embw,html.js .hero-main.skip .shot{animation:none;transform:none}

  /* kézfogás (logóanim K terv): a logó saját három darabja — bal kéz, jobb kéz, a jobb kéz alul átkulcsoló
     ujjai — kívülről csúszik a helyére. Szétcsúszva a kezek ki vannak töltve (.hid: a bal hüvelyk alatti üreg,
     ill. a jobb hüvelyk alatti tenyér), ezek az érintkezéskor kikapcsolnak — ott már a másik kéz van. */
  .hero .kez{animation:sw-jon .7s cubic-bezier(.35,.15,.25,1) .05s both}
  .hero .kez.bal{--dx:-62px}.hero .kez.jobb{--dx:62px}
  /* a két kéz a logó saját darabja, pontosan a logó tartásában csúszik össze. Amíg külön vannak, az üregek
     (ahová a másik kéz kulcsolódik) ki vannak töltve (.hid) — egész kezek közelednek; érintéskor a kitöltés
     eltűnik, és ott már a másik kéz van. */
  .hero .hid{animation:sw-eltun .12s linear .5s both}
  .hero .embw .emb{transform-origin:50% 50%;animation:sw-szorit .32s cubic-bezier(.16,1,.3,1) .76s both}
  .hero .flash{animation:sw-villan .6s cubic-bezier(.23,1,.32,1) .8s both}

  /* görgetésre megjelenő blokkok — a --i adja a lépcsőzést */
  /* A megjelenés a translate tulajdonságot mozgatja, nem a transform-ot:
     így a hover-emelés (transform) nem ütközik vele. */
  html.js .rv{opacity:0;translate:0 18px;
    transition:opacity .62s cubic-bezier(.16,1,.3,1),translate .62s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(var(--i,0) * 80ms)}
  html.js .rv.in{opacity:1;translate:none}
}
@keyframes sw-rise{to{transform:none}}
@keyframes sw-up{to{opacity:1;translate:none}}
@keyframes sw-track{to{opacity:1;letter-spacing:.2em}}
@property --fk{syntax:'<length>';inherits:false;initial-value:70px}
@keyframes sw-nyit{to{--fk:1700px}}
@keyframes sw-haza{to{transform:none}}
@keyframes sw-leul{to{transform:none}}
@keyframes sw-fade{to{opacity:1}}
@keyframes sw-jon{from{transform:translateX(var(--dx))}to{transform:none}}
@keyframes sw-eltun{from{opacity:1}to{opacity:0}}
@keyframes sw-szorit{0%{transform:none}40%{transform:scale(1.045)}100%{transform:none}}
@keyframes sw-villan{from{opacity:.75;transform:scale(1)}to{opacity:0;transform:scale(1.42)}}

/* Hover: a jel arányosan nagyítható, de nem forog és nem nyúlik. */
/* A kártyán a nagyítás a .im burkon ül, nem az svg-n: az svg-n a belépő animáció (sw-szorit) futna rá
   ugyanarra a transform-ra, és rámutatáskor 1.045 → 1 ugrással indulna. */
.dcard .im,.zrow .emb{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.dcard:hover .im{transform:scale(1.045)}
/* jelvények: a forgó rész (lapátkerék, kardánkereszt, csuklóagy, csapágy) lassan jár */
.tb-fan{transform-origin:186px 214px;animation:tbspin var(--tb-spin,9s) linear infinite}
.em-spin{animation:tbspin var(--em-spin,8s) linear infinite}
@keyframes tbspin{to{transform:rotate(360deg)}}
.zrow:hover .emb{transform:scale(1.055)}
.dcard{transition:background .2s,transform .2s,border-color .2s}
.dcard:hover{border-color:var(--line-2)}
/* A .rv saját transition-listája (opacity, translate) felülírná a fenti hover-átmeneteket, így az emelés
   és a háttérváltás ugrana. Itt egyben soroljuk fel; a lépcsőzés késleltetése csak a megjelenésé.
   Saját réteg: az emelés a kompozitoron fut, nem festi újra a forgó jelvényes kártyát képkockánként. */
html.js .dcard.rv{will-change:transform;
  transition:opacity .62s cubic-bezier(.16,1,.3,1),translate .62s cubic-bezier(.16,1,.3,1),
    transform .25s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s;
  transition-delay:calc(var(--i,0) * 80ms),calc(var(--i,0) * 80ms),0s,0s,0s}
.dcard .go,.zrow .btn{transition:translate .28s cubic-bezier(.16,1,.3,1),background .18s,color .18s,border-color .18s}
.dcard:hover .go{translate:4px 0}
.zrow:hover .btn{background:rgba(255,203,39,.12)}

/* ————— a lépéskártyák kattinthatók: a régi oldal négy lépése ————— */
.step{color:inherit;text-decoration:none}
.step .sgo{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);transition:color .25s}
a.step:hover .sgo,a.step:focus-visible .sgo{color:var(--gold)}

/* ————— FOLYAMAT — lépésváltó (nyitóoldal) —————
   Bal oldalon az öt lépés füle, jobbra a kiválasztott lépés nagyban:
   fotó, szám, cím, három tény és a hozzá tartozó gomb. A JS 7 másodpercenként
   lépteti, a fül alján futó csík mutatja, mennyi van hátra; egérrel fölé
   érve vagy kattintás után megáll. JS nélkül az öt panel egymás alatt
   olvasható. */
.proc{display:grid;grid-template-columns:minmax(260px,.8fr) 1.5fr;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r);overflow:hidden;margin-top:clamp(28px,4vw,48px)}
.proc-nav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}
.proc-nav li{flex:1;display:flex}
.proc-tab{position:relative;flex:1;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,28px);background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;cursor:pointer;color:var(--fg-2);font-family:var(--ui);transition:background .25s,color .25s}
.proc-nav li:last-child .proc-tab{border-bottom:0}
.proc-tab .no{grid-row:1/3;align-self:start;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fg-3);padding-top:4px;transition:color .25s}
.proc-tab b{font-size:clamp(15.5px,1.6vw,18px);font-weight:700;color:var(--fg);line-height:1.2}
.proc-tab small{grid-column:2;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-top:5px}
.proc-tab .bar{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.proc-tab:hover{background:var(--raised)}
.proc-tab.on{background:var(--raised);color:var(--fg)}
.proc-tab.on .no,.proc-tab:hover .no{color:var(--gold)}
.proc-tab.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold)}
.proc.run .proc-tab.on .bar{animation:procbar var(--proc-t,7s) linear forwards}
@keyframes procbar{to{transform:none}}
.proc.hold .proc-tab.on .bar{animation-play-state:paused}
.proc:not(.run) .proc-tab .bar{display:none}

.proc-stage{position:relative;min-height:clamp(380px,44vw,500px);overflow:hidden}
.proc-panel{position:relative;min-height:inherit;display:flex;align-items:flex-end}
.proc-panel .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);filter:grayscale(.45) contrast(1.05) brightness(.5)} /* --fx/--fy a képen: hol a lényeg */
.proc-panel .veil{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,21,33,.94) 0%,rgba(8,21,33,.78) 45%,rgba(8,21,33,.28) 100%),
  linear-gradient(0deg,rgba(8,21,33,.9) 0%,rgba(8,21,33,0) 55%)}
.proc-panel .bd{position:relative;padding:clamp(24px,3vw,44px);max-width:58ch;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.proc-panel .num{font-family:var(--mono);font-size:clamp(28px,3.4vw,40px);font-weight:500;color:var(--gold);letter-spacing:-.02em;line-height:1}
.proc-panel .num em{font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--fg-3);margin-left:8px;vertical-align:middle}
.proc-panel h3{font-size:clamp(24px,3vw,38px);line-height:1;letter-spacing:-.02em}
.proc-panel p{color:var(--fg-2);font-size:clamp(15px,1.5vw,17px);max-width:52ch}
.proc-panel .facts{list-style:none;margin:2px 0 6px;padding:0;display:flex;flex-direction:column;gap:7px}
.proc-panel .facts li{position:relative;padding-left:22px;font-size:14.5px;color:var(--fg);text-align:left}
.proc-panel .facts li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:2px;background:var(--gold)}
html.js .proc-panel[hidden]{display:none}
html.js .proc-panel.on .bd>*{animation:proc-in .55s cubic-bezier(.16,1,.3,1) both}
html.js .proc-panel.on .bd>*:nth-child(2){animation-delay:.05s}
html.js .proc-panel.on .bd>*:nth-child(3){animation-delay:.1s}
html.js .proc-panel.on .bd>*:nth-child(4){animation-delay:.15s}
html.js .proc-panel.on .bd>*:nth-child(5){animation-delay:.2s}
html.js .proc-panel.on .shot{animation:proc-shot 7.5s linear both}
@keyframes proc-in{from{opacity:0;translate:0 14px}to{opacity:1;translate:none}}
@keyframes proc-shot{from{scale:1.06}to{scale:1}}
html:not(.js) .proc-panel+.proc-panel{border-top:1px solid var(--line)}
@media(max-width:900px){
  .proc{grid-template-columns:1fr}
  .proc-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .proc-nav li{flex:0 0 auto}
  .proc-tab{border-bottom:0;border-right:1px solid var(--line);padding:14px 16px;column-gap:10px}
  .proc-tab small{display:none}
  .proc-tab.on::before{width:100%;height:3px;bottom:auto}
  .proc-stage{min-height:0;touch-action:pan-y}
  .proc-panel{min-height:420px}
  .proc-panel .veil{background:linear-gradient(0deg,rgba(8,21,33,.94) 0%,rgba(8,21,33,.7) 55%,rgba(8,21,33,.35) 100%)}
}
@media (prefers-reduced-motion:reduce){
  html.js .proc-panel.on .bd>*,html.js .proc-panel.on .shot,.proc.run .proc-tab.on .bar{animation:none}
}

/* ————— GYIK ————— */
.qa{border-top:1px solid var(--line);margin-top:clamp(26px,3.4vw,42px)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;gap:clamp(12px,2vw,22px);padding:clamp(16px,2.2vw,22px) 0;
  cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{flex:1;margin:0;font-family:var(--ui);font-weight:600;font-size:clamp(15.5px,1.8vw,19px);
  letter-spacing:0;text-transform:none;line-height:1.35;transition:color .2s}
.qa summary .qn{flex:none;width:30px;font-family:var(--mono);font-size:10.5px;color:var(--fg-3)}
.qa summary:hover h3{color:var(--gold)}
.qa summary .pm{flex:none;width:13px;height:13px;position:relative}
.qa summary .pm::before,.qa summary .pm::after{content:"";position:absolute;background:var(--gold);
  transition:transform .22s cubic-bezier(.16,1,.3,1),opacity .22s}
.qa summary .pm::before{left:0;top:6px;width:13px;height:1.5px}
.qa summary .pm::after{left:5.75px;top:0;width:1.5px;height:13px}
.qa details[open] summary .pm::after{transform:rotate(90deg);opacity:0}
.qa .an{padding:0 0 clamp(18px,2.4vw,24px) calc(30px + clamp(12px,2vw,22px))}
.qa .an p{color:var(--fg-2);font-size:14.5px;max-width:72ch}
.qa .an p + p{margin-top:10px}
.qa .an a{color:var(--gold);border-bottom:1px solid rgba(255,203,39,.4)}
@media(max-width:620px){.qa .an{padding-left:0}}

/* ————— átemelt WordPress-tartalom ————— */
.wplist{list-style:none;padding:0;margin:clamp(24px,3vw,36px) 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wplist li{background:var(--surface);padding:clamp(16px,2vw,22px);font-size:15px;display:flex;gap:12px;align-items:flex-start}
.wplist li::before{content:"✓";color:var(--gold);font-weight:700;flex:none}
.infobox{background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--gold);border-radius:var(--r);
  padding:clamp(18px,2.4vw,26px);margin-top:clamp(20px,2.6vw,30px)}
.infobox p{color:var(--fg-2);font-size:15px}
.infobox p + p{margin-top:10px}
.infobox b{color:var(--fg)}
.infobox a{color:var(--gold)}
.dtable{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:18px}
.dtable th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);padding:0 14px 10px 0;border-bottom:1px solid var(--line-2)}
.dtable td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);color:var(--fg-2)}
.dtable td:first-child{color:var(--fg)}
.tblwrap{overflow-x:auto}
.wpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-top:clamp(26px,3.4vw,42px)}
.wpcard{background:var(--surface);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px;
  border-top:2px solid var(--c);transition:background .2s}
.wpcard:hover{background:var(--raised)}
.wpcard b{font-size:16.5px}
.wpcard span{color:var(--fg-2);font-size:14px}
@media(max-width:900px){.wpgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.wpgrid{grid-template-columns:1fr}}

/* ————— futószalag: kettős sáv, ellenirányban ————— */
.ticker{border-block:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.tk-lane{overflow:hidden;position:relative}
.tk-lane::before,.tk-lane::after{content:"";position:absolute;top:0;bottom:0;width:9%;z-index:1;pointer-events:none}
.tk-lane::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.tk-lane::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.tkt{display:flex;width:max-content;animation:tkrun 46s linear infinite}
.tkt span{white-space:nowrap;padding:0 26px}
.tkt i{font-style:normal}

/* felső sáv — nagy kontúrbetű, balra úszik */
.tk-out{padding:clamp(12px,1.6vw,20px) 0 clamp(9px,1.1vw,13px)}
.tk-out .tkt span{font-family:var(--g);font-weight:800;font-size:clamp(30px,5.4vw,64px);
  letter-spacing:-.02em;text-transform:uppercase;line-height:1;color:var(--fg-3)}
@supports (-webkit-text-stroke:1px currentColor){
  .tk-out .tkt span{color:transparent;-webkit-text-stroke:1px var(--fg-3)}
  .tk-out .tkt i{font-style:normal;-webkit-text-stroke-color:var(--gold)}
}

/* alsó sáv — halk mono, jobbra fut vissza */
.tk-sub{border-top:1px solid var(--gold-deep);padding:clamp(9px,1.1vw,13px) 0 clamp(10px,1.3vw,15px)}
.tk-sub .tkt{animation-name:tkrev;animation-duration:34s}
.tk-sub .tkt span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3)}
.tk-sub .tkt i{font-style:normal;color:var(--gold-deep)}

@keyframes tkrun{from{transform:translateX(0)}    to{transform:translateX(-50%)}}
@keyframes tkrev{from{transform:translateX(-50%)} to{transform:translateX(0)}}
@media(max-width:600px){.tk-sub .tkt span{font-size:10px;letter-spacing:.14em}}
@media(prefers-reduced-motion:reduce){.tkt{animation:none}
  .tk-lane::before{display:none}}


.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ————— hármas fotósáv a szolgáltatásoldalakon ————— */
.tri3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);margin-top:clamp(26px,3.4vw,42px)}
.tri3 figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tri3 img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.tri3 figure:hover img{transform:scale(1.04)}
.tri3 figcaption{padding:12px 14px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
@media(max-width:760px){.tri3{grid-template-columns:1fr}}

/* ————— hívás-blokk: kétoszlopos elrendezés ————— */
.callsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.cs-txt p{margin-top:16px;color:var(--fg-2);max-width:42ch}
.cs-nums{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.csrow{background:var(--surface);padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,22px);display:flex;flex-direction:column;gap:5px;
  transition:background .2s}
.csrow:hover{background:var(--raised)}
.csrow .k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.csrow b{font-family:var(--mono);font-size:clamp(15px,1.9vw,19px);color:var(--gold)}
.csrow.last b{font-family:var(--ui);font-size:15px;color:var(--fg)}
@media(max-width:860px){.callsplit{grid-template-columns:1fr}}

/* ————— második telefonszám a fejlécben ————— */

/* ————— kör alakú embléma ————— */
.badgewrap{display:flex;justify-content:center;margin-top:clamp(26px,3.4vw,42px)}
.badge{width:min(340px,80vw);height:auto}

/* ————— hozzájárulási sáv —————
   Csak akkor jelenik meg, ha a site.js-ben van megadva GTM-azonosító. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--surface);
  border-top:1px solid var(--line-2);box-shadow:0 -12px 34px rgba(0,0,0,.42);padding:16px 0}
.cbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px}
.cbar p{margin:0;max-width:62ch;color:var(--fg-2);font-size:14px;line-height:1.6}
.cbar a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.cbar .acts{display:flex;gap:10px;flex-shrink:0}
.cbar .btn{padding:11px 20px}
/* telefonon a sütisáv rövid: kisebb szöveg, a három gomb egy sorban, kevesebb belső tér — ne takarja a fél képernyőt */
@media (max-width:560px){
  .cbar{padding:10px 0}
  .cbar .wrap{gap:8px 12px}
  .cbar p{font-size:12.5px;line-height:1.45}
  .cbar .acts{width:100%;gap:8px;align-items:center}
  .cbar .acts .btn{flex:1;padding:10px 8px;font-size:13.5px}
  .cbar-set{font-size:12.5px;padding:0 4px}
}
@media (prefers-reduced-motion:no-preference){
  .cbar{animation:cbar-in .3s cubic-bezier(.16,1,.3,1) both}
  @keyframes cbar-in{from{translate:0 100%}to{translate:0 0}}
}

/* ————— PARTNERTÉRKÉP (partner-terkep komponens) —————
   A :root és a közös osztályok blokkja kihagyva: azokat a site.css
   már definiálja, azonos értékekkel. */
/* ————— PARTNERKERESŐ (partnerek.html) —————
   Bal oldalon ragadós térkép, jobb oldalon a teljes, kereshető lista.
   A lista statikus HTML: JavaScript nélkül is olvasható, csak a szűrés
   és a térképváltás marad ki. Az arany itt is kizárólag cselekvés. */
.loc{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(16px,2.2vw,28px);
  margin-top:clamp(28px,4vw,48px);align-items:start}
@media(max-width:980px){.loc{grid-template-columns:1fr}}

.loc-map{position:sticky;top:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
@media(max-width:980px){.loc-map{position:static}}
.ptabs{display:flex;gap:1px;background:var(--line)}
.ptab{flex:1;background:var(--surface);border:0;padding:14px 10px;cursor:pointer;font-family:var(--ui);
  font-size:13.5px;font-weight:600;color:var(--fg-2);display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .2s,color .2s}
.ptab i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--fg-3)}
.ptab:hover{background:var(--raised);color:var(--fg)}
.ptab.on{background:var(--raised);color:var(--gold)}
.ptab.on i{color:var(--gold)}
.loc-frame{background:var(--bg-2);border-top:1px solid var(--line)}
.loc-frame iframe{display:block;width:100%;height:min(62vh,560px);border:0}
@media(max-width:980px){.loc-frame iframe{height:min(56vh,420px)}}
.loc-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 15px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--fg-3)}
.loc-cap button{background:none;border:1px solid var(--line-2);color:var(--fg-2);border-radius:var(--r);
  padding:7px 12px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase}
.loc-cap button:hover{border-color:var(--gold);color:var(--gold)}

/* kereső */
.loc-find{display:block}
.loc-find input{width:100%}
.loc-count{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3)}
.loc-empty{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--fg-2);font-size:14.5px}
.loc-empty a{color:var(--gold)}

/* lista */
.plist{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pgroup{background:var(--bg-2);padding:12px 16px;display:flex;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.pgroup b{color:var(--gold);font-weight:500}
.pcard{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:5px;
  position:relative;transition:background .2s}
.pcard:hover{background:var(--raised)}
/* a kiválasztott partnert arany léc jelöli, ugyanúgy, mint a lépéssorban */
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.pcard.on::before{transform:none}
.pcard.on{background:var(--raised)}
.pc-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pc-top b{font-size:16px;font-weight:600}
.pc-town{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);flex:none}
.pc-addr{font-size:14px;color:var(--fg-2)}
.pc-none{color:var(--fg-3)}
.pc-who{font-size:13px;color:var(--fg-3)}
.pc-tel{font-family:var(--mono);font-size:13px}
.pc-tel a{color:var(--gold)}
.pc-tel a:hover{color:var(--fg)}
.pc-tel span{color:var(--fg-3);padding:0 3px}
.pc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.pc-act a,.pc-show{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--fg-2);
  border:1px solid var(--line-2);border-radius:var(--r);padding:7px 12px;background:none;cursor:pointer;
  transition:border-color .2s,color .2s}
.pc-act a:hover,.pc-show:hover{border-color:var(--gold);color:var(--gold)}

/* a [hidden] önmagában kevés: a display:flex felülírná */
.pcard[hidden],.pgroup[hidden]{display:none}
/* csak a képernyőolvasónak */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nyitóoldali kiemelő sáv */
.pband{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:var(--r);
  background:var(--surface);padding:clamp(22px,3vw,34px)}
.pband .n{font-family:var(--g);font-weight:800;font-size:clamp(30px,4.4vw,50px);line-height:1;letter-spacing:-.03em}
.pband .tx{flex:1 1 340px;display:flex;flex-direction:column;gap:7px}
.pband .tx b{font-size:17px;font-weight:600}
.pband .tx p{color:var(--fg-2);font-size:14.5px;max-width:56ch}
.pband .num{display:flex;align-items:baseline;gap:11px;flex:none}
/* :not(.n) kell, különben ez a szabály a nagy számot is lekicsinyítené —
   azonos elemre erősebb (0,2,1), mint a fenti .pband .n (0,2,0). */
.pband .num span:not(.n){font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);max-width:9ch;line-height:1.6}

/* ————— NYITÓOLDALI PARTNERTÉRKÉP —————
   Beágyazott SVG, futásidőben nulla külső kérés — a nyitóoldal így
   sütimentes marad. A pontok <a> elemek: JavaScript nélkül is kattinthatók,
   billentyűzettel is bejárhatók, és mindegyik a partner kártyájára visz. */
.pmap{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,58px);
  align-items:start;margin-top:clamp(26px,3.4vw,42px)}
@media(max-width:900px){.pmap{grid-template-columns:1fr;gap:28px}.pmap-fig::before,.pmap-fig::after{display:none}}
.pmap-side{display:flex;flex-direction:column;gap:15px;align-items:flex-start}
.pmap-side p{color:var(--fg-2);font-size:clamp(15.5px,1.7vw,17.5px);max-width:46ch}
/* határon túli megjegyzés: kisebb, a lista fölött, arany jellel */
.pmap-hatar{font-size:14.5px!important;border-left:2px solid var(--gold);padding-left:14px}
.pmap-hatar b{color:var(--fg);font-weight:600}

/* ————— partnerlista —————
   Egy sor = egy műhely, város elöl. A kiválasztott sor kinyílik a címmel
   és a linkekkel; a térképen ugyanaz a pont kap gyűrűt. Görgethető, hogy
   a bal oszlop ne nyúljon a térkép alá. */
.pmap-list{width:100%;max-height:min(46vh,380px);overflow:auto;margin:0;padding:0;list-style:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.pmap-list[hidden]{display:none}
.prow{border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:border-color .2s,background .2s}
.prow:last-child{border-bottom:0}
.prow[hidden]{display:none}
.prow-b{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline;width:100%;
  padding:10px 14px;background:none;border:0;text-align:left;cursor:pointer;color:var(--fg);font-family:var(--ui)}
.prow-b b{font-size:14.5px;font-weight:700;line-height:1.25}
.prow-b small{grid-column:1;font-size:13px;color:var(--fg-2);line-height:1.35}
.prow-b .rg{grid-column:2;grid-row:1;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3)}
.prow-km{grid-column:2;grid-row:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--gold)}
.prow.hov{background:rgba(255,203,39,.06)}
.prow.on{background:var(--raised);border-left-color:var(--gold)}
.prow.on .prow-b b{color:var(--gold)}
.prow-x{display:none;padding:0 14px 13px 14px}
.prow.on .prow-x{display:block}
.prow-x .pmap-addr{margin-top:0}
.prow-x .pmap-links a.tel{color:var(--gold);border-color:rgba(255,203,39,.4)}

/* városnevek a pontok mellett — a --zk-val visszaosztva nagyításkor sem nőnek */
.plab{font-family:var(--mono);font-size:calc(8.6px / var(--zk,1));letter-spacing:.05em;text-transform:uppercase;
  fill:var(--fg-2);pointer-events:none;transition:fill .2s,opacity .2s}
.plab.grp{fill:var(--fg-3);font-size:calc(8px / var(--zk,1))}
.plab.kz{opacity:0}
.pmap.kz-open .plab.kz{opacity:1}
.pmap.kz-open .plab.grp{opacity:0}
.pdot:hover .plab,.pdot.sel .plab,.pdot.hov .plab{fill:var(--gold)}
.pdot.hov .pin{opacity:1;r:calc(7px / var(--zk,1))}

.pmap-fig{margin:0;position:relative;isolation:isolate}
/* Két réteg: a .pm-alap statikus (csíkozott szomszédok + kontúr), saját rétegben egyszer rajzolódik ki; fölötte a
   pontok SVG-je (átlátszó), így a lüktetés és a rámutatás csak a pontokat rajzolja újra. A keret szélén a szomszédok
   CSS-átmenettel halványulnak el, nem SVG-maszkkal — nagyításkor (.zoom) és telefonon (csak Magyarország látszik) nincs. */
.pm-alap{position:absolute;inset:0;pointer-events:none;will-change:transform;transform:translateZ(0)}
.pmap-fig > svg:not(.pm-alap){position:relative;z-index:1}
.pmap-fig::before,.pmap-fig::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .4s}
.pmap-fig::before{background:linear-gradient(90deg,var(--bg),transparent 7%,transparent 93%,var(--bg))}
.pmap-fig::after{background:linear-gradient(180deg,var(--bg),transparent 10%,transparent 90%,var(--bg))}
.pmap.zoom .pmap-fig::before,.pmap.zoom .pmap-fig::after{opacity:0}
.pmap-hint{z-index:3}
/* kiválasztott partner kártyája a térkép alatt — csak telefonon (lent), asztalon a lista sora nyílik ki */
.pmap-sel{display:none}

/* ————— telefon (≤900px): a térkép a bevezető és az eszközök közé kerül, teljes szélességben; a kiválasztott
   partner adatai közvetlenül a térkép alatt (.pmap-sel) jelennek meg, nem a lejjebb lévő listában; a csipek egy
   sorban görgethetők; a pontok érintőfelülete nagyobb ————— */
@media(max-width:900px){
  .pmap-side{display:contents}
  .pmap{row-gap:16px}
  .pmap-fig{order:1;margin:4px calc(-1 * clamp(18px,3.6vw,44px)) 0}
  .pmap-fig figcaption{margin-left:clamp(18px,3.6vw,44px);margin-right:clamp(18px,3.6vw,44px)}
  .pmap-fig .pmap-hint{margin-left:clamp(18px,3.6vw,44px);margin-right:clamp(18px,3.6vw,44px);width:auto}
  .pmap-sel{order:2}
  .pmap-tools,.pmap-list,.pmap-side>.btn{order:3}
  .pmap .pmap-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * clamp(18px,3.6vw,44px));padding:0 clamp(18px,3.6vw,44px)}
  .pmap-chips::-webkit-scrollbar{display:none}
  .pmchip{flex:none}
  .pdot .hit{r:calc(22px / var(--zk,1))}
  .pdot .pin{r:calc(6px / var(--zk,1))}
  .pdot.sel .pin{r:calc(8px / var(--zk,1))}
  .pdot.sel .ring{r:calc(14px / var(--zk,1))}
  .pmap .pmap-dots .pdot.sel .plab{display:block;font-size:calc(10.5px / var(--zk,1));paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round} /* a kiválasztott város neve akkor is látszik, ha a többi rejtve */
  .pmap-sel{display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold)}
  .pmap-sel[hidden]{display:none}
  .pmap-sel b{font-size:16px;font-weight:700;line-height:1.25}
  .pmap-sel .nm{font-size:14px;color:var(--fg-2)}
  .pmap-sel .x{grid-column:2;grid-row:1/3;align-self:start;width:34px;height:34px;border:1px solid var(--line);background:none;color:var(--fg-2);font:18px/1 var(--ui);cursor:pointer;padding:0}
  .pmap-sel .pmap-addr{grid-column:1/-1}
  .pmap-sel .pmap-links{grid-column:1/-1;margin-top:6px}
  .pmap-sel .pmap-links a.tel{color:var(--gold);border-color:rgba(255,203,39,.4)}
}
.pmap-fig svg{display:block;width:100%;height:auto}
.pmap-hu{fill:var(--surface);stroke:var(--line-2);stroke-width:1.1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
/* határon túli területek: sötétebb felület, ritka arany csíkozás, név —
   pont nincs rajtuk, mert kiszerelő partner sincs; a keret szélén elhalványulnak */
.pm-sz{fill:url(#pm-csik);stroke:var(--line);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.pm-csik-bg{fill:var(--bg-2)}
.pm-csik{stroke:var(--gold);stroke-width:.8;opacity:.16}
.pm-nev text{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  fill:var(--fg-3);text-anchor:middle;paint-order:stroke;stroke:var(--bg-2);stroke-width:4px;stroke-linejoin:round}
/* ————— térképnagyítás —————
   Budapest körül tizenöt pont ült egymáson, egyenként nem lehetett rájuk
   kattintani. Országrész-szűréskor a viewBox ráközelít a látható pontokra.
   Nagyításkor viszont a pontok is nagyobbak lennének, és ugyanúgy takarnák
   egymást — ezért a sugarukat a --zk nagyítási aránnyal visszaosztjuk, így
   képernyőn végig ugyanakkorák maradnak, csak eltávolodnak egymástól. */
/* A pontméretek a régi, 668 egység széles kerethez lettek belőve; a keret
   azóta a határon túli területekkel 1076-ra nőtt, ezért az alapérték
   668/1076 — a JS ugyanezzel a viszonyszámmal számol. */
.pmap{--zk:.621}
.pdot .hit{r:calc(10px / var(--zk,1))}
.pdot .pin{r:calc(4.5px / var(--zk,1))}
.pdot .ring,.pdot:focus-visible .hit{vector-effect:non-scaling-stroke}
.me-halo{r:calc(13px / var(--zk,1))}
.me-dot{r:calc(4px / var(--zk,1))}
.pdot{cursor:pointer}
.pdot .hit{fill:transparent}          /* nagyobb kattintófelület a pont körül */
.pdot .pin{fill:var(--gold);opacity:.5;transition:fill .22s,opacity .22s,r .22s}
.pdot:hover .pin,.pdot:focus-visible .pin{opacity:1}
.pdot:hover .pin,.pdot:focus-visible .pin,.pdot.on .pin{fill:var(--gold);r:calc(7px / var(--zk,1))}
.pdot:focus{outline:0}
.pdot:focus-visible .hit{stroke:var(--gold);stroke-width:1.5;fill:rgba(255,203,39,.12)}
.pmap-fig figcaption{margin-top:11px;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}

/* a mélylinkkel megnyitott kártya kiemelése a partneroldalon */
.pcard:target{background:var(--raised)}
.pcard:target::before{transform:none}

/* ————— NYITÓOLDALI PARTNERTÉRKÉP — vezérlők ————— */
.pmap-tools{display:flex;flex-direction:column;gap:11px;width:100%}
.pmap-find{display:block}
.pmap-find input{width:100%}
.pmap-chips{display:flex;gap:7px;flex-wrap:wrap}
.pmchip{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-2);background:none;border:1px solid var(--line-2);border-radius:var(--r);
  padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:border-color .2s,color .2s,background .2s}
.pmchip i{font-style:normal;color:var(--fg-3)}
.pmchip:hover{border-color:var(--gold);color:var(--gold)}
.pmchip.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.pmchip.on i{color:var(--ink);opacity:.65}
.pmap-geo{font-family:var(--ui);font-size:13.5px;font-weight:600;color:var(--fg);
  background:none;border:1px dashed var(--line-2);border-radius:var(--r);
  padding:11px 14px;cursor:pointer;text-align:left;transition:border-color .2s,color .2s}
.pmap-geo:hover{border-color:var(--gold);color:var(--gold)}
.pmap-geo[disabled]{opacity:.55;cursor:default}

.pmap-addr{font-size:14px;color:var(--fg-2);margin-top:4px}
.pmap-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.pmap-links a{font-family:var(--ui);font-size:12.5px;font-weight:600;color:var(--fg-2);
  border:1px solid var(--line-2);border-radius:var(--r);padding:7px 12px;cursor:pointer;
  transition:border-color .2s,color .2s}
.pmap-links a:hover{border-color:var(--gold);color:var(--gold)}
.pmap-links a#pmTel{color:var(--gold);border-color:rgba(255,203,39,.4)}

/* pontok: alap, halványítva (szűrés), kiválasztva */
.pdot .ring{fill:none;stroke:var(--gold);stroke-width:1.6;opacity:0;
  transition:opacity .25s,r .25s}
.pdot.sel .ring{opacity:1;r:calc(11px / var(--zk,1))}
.pdot.sel .pin{fill:var(--gold);r:calc(6.5px / var(--zk,1))}
.pdot.dim{opacity:.16;pointer-events:none}
.pmap-dots{transition:opacity .2s}

/* ————— „ez kattintható" jelzés —————
   A visszajelzés szerint nem derült ki, hogy a pontokra kattintani kell.
   Ezért három egyszerre ható jel: a pontok aranyszínűek (fent), a térkép
   sarkában felirat ül, és a pontok néhányszor felvillannak, amikor a
   térkép a képernyőre ér. Az első kiválasztás után mindkettő leáll —
   a .pmap.picked kapcsolót a JS teszi rá. */
@keyframes pmbeat{
  0%   {opacity:0;   transform:scale(.4)}
  35%  {opacity:.85; transform:scale(1.15)}
  70%,100%{opacity:0;transform:scale(1.35)}
}
.pdot .ring{transform-box:fill-box;transform-origin:center}
.pmap-dots.hint .pdot:not(.dim) .ring{r:calc(11px / var(--zk,1));animation:pmbeat 2s ease-out 3}
.pmap.picked .pmap-dots.hint .pdot .ring{animation:none}

.pmap-hint{position:absolute;left:0;bottom:9%;z-index:2;
  display:inline-flex;align-items:center;gap:9px;pointer-events:none;
  padding:9px 15px;border-radius:0;background:var(--raised);
  border:1px solid rgba(255,203,39,.45);box-shadow:0 6px 22px rgba(4,10,16,.5);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);
  transition:opacity .3s,visibility 0s linear .3s}
.pmap-hint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;animation:pmtap 2.2s ease-in-out infinite}
@keyframes pmtap{0%,72%,100%{transform:none}80%{transform:translate(2px,3px)}}
.pmap.picked .pmap-hint{opacity:0;visibility:hidden}
@media(max-width:640px){.pmap-hint{bottom:6%;font-size:9px;padding:7px 11px;gap:7px}}

@media (prefers-reduced-motion:reduce){
  .pmap-dots.hint .pdot:not(.dim) .ring,.pmap-hint svg{animation:none}
}

/* „itt vagyok" jelölő a helymeghatározás után */
.me-halo{fill:rgba(77,161,254,.18);stroke:var(--w1);stroke-width:1}
.me-dot{fill:var(--w1)}

@media(max-width:900px){
  .pmap-list{max-height:300px}
}
/* A HTML `hidden` attribútum SVG-elemre nem hat Chrome-ban (a UA-szabály
   csak a HTML névtérre vonatkozik), ezért kézzel rejtjük — különben a
   „itt vagyok" jelölő a térkép bal felső sarkában ragad. */
.pmap-me[hidden]{display:none}
/* Ugyanaz a csapda, mint a .pcard-nál: a szerzői `display` erősebb, mint a
   böngésző [hidden] szabálya. A vezérlőknél ez fontos — JavaScript nélkül
   nem szabad megjelenniük, mert nem csinálnának semmit. */
.pmap-tools[hidden],.pmap-links[hidden]{display:none}

/* ————— sütibeállítások: sáv gomb, ablak, letiltott beágyazás ————— */
.cbar-set{background:none;border:0;color:var(--fg-2);font-family:var(--ui);font-size:13.5px;
  font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:11px 6px}
.cbar-set:hover{color:var(--gold)}

.cdlg{position:fixed;inset:0;z-index:100;background:rgba(4,10,16,.74);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.cdlg-panel{position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-top:2px solid var(--gold);
  border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.cdlg-x{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--fg-3);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px}
.cdlg-x:hover{color:var(--gold)}
.cdlg-panel h2{margin:9px 0 0;font-family:var(--g);font-weight:800;text-transform:uppercase;
  letter-spacing:-.022em;line-height:1.04;font-size:clamp(22px,3vw,30px)}
.cdlg-lead{margin-top:12px;color:var(--fg-2);font-size:14.5px;max-width:52ch}
.cdlg-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cdlg-list li{background:var(--bg-2);padding:15px 17px}
.cdlg-list p{margin-top:7px;color:var(--fg-2);font-size:13.5px;line-height:1.55;max-width:54ch}
.cdlg-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cdlg-row b{font-size:15.5px;font-weight:600}
.cdlg-fix{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-3);flex:none}

/* kapcsoló — a checkbox rejtve, a látható elem a hozzá tartozó span */
.cdlg-sw{position:relative;flex:none;display:inline-flex;cursor:pointer}
.cdlg-sw input{position:absolute;opacity:0;width:0;height:0}
.cdlg-sw span[aria-hidden]{display:block;width:44px;height:24px;border-radius:0;
  background:var(--raised);border:1px solid var(--line-2);position:relative;
  transition:background .2s,border-color .2s}
.cdlg-sw span[aria-hidden]::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;
  border-radius:50%;background:var(--fg-3);transition:translate .2s,background .2s}
.cdlg-sw input:checked + span[aria-hidden]{background:rgba(255,203,39,.18);border-color:var(--gold)}
.cdlg-sw input:checked + span[aria-hidden]::after{translate:20px 0;background:var(--gold)}
.cdlg-sw input:focus-visible + span[aria-hidden]{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .cdlg-sw span[aria-hidden],.cdlg-sw span[aria-hidden]::after{transition:none}
}

.cdlg-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* a letiltott beágyazás helye */
.cblock{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:11px;
  padding:clamp(22px,3vw,34px);background:var(--bg-2);min-height:min(56vh,460px)}
.cblock b{font-family:var(--g);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;
  font-size:clamp(17px,2vw,22px)}
.cblock p{color:var(--fg-2);font-size:14.5px;max-width:52ch}

/* lábléc: sütibeállítások megnyitása */
.fcookie{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.fcookie:hover{color:var(--gold)}

/* ————— AJÁNLATKÉRÉS ELŐTÉRBEN —————
   A „Kérjen ajánlatot” minden oldalon ugyanaz a három hely: a fejléc jobb szélén
   egy tömör arany gomb, a hero/záró sávban a nagyobb .pop változat (a telefon
   lett a másodlagos), mobilon pedig egy rögzített alsó sáv. A .pop fénycsík
   négy másodpercenként fut át — nem villog, csak felhívja magára a figyelmet. */
.nav .ncta{flex:none;padding:9px 16px;font-size:13.5px;font-weight:700;color:var(--ink);background:var(--gold);
  border:1px solid var(--gold);border-radius:var(--r);transition:background .18s,box-shadow .18s}
.nav .ncta:hover{background:var(--gold-deep);color:var(--ink);box-shadow:0 0 0 4px rgba(255,203,39,.16)}
@media(max-width:620px){.nav .ncta{padding:8px 12px;font-size:12.5px}}
@media(max-width:400px){.nav .ncta{display:none}}

/* a kiemelt gomb: csak nagyobb — se fénykör, se csillanás (a lekerekített, fénylő hatás kikerült) */
.btn.pop{padding:16px 30px;font-size:15.5px}
/* fejléc és hős: szögletes gombok */
.nav .ncta,.nav .btn,.callg .ic,.hero .btn{border-radius:0}

.ctabar{display:none}
@media(max-width:900px){
  /* lebegő sziget: a képernyő aljától elemelve, pirula formában, üvegesen. Lefelé görgetve úszik be,
     felfelé görgetve és az oldal tetején eltűnik (site.js: .show). */
  .ctabar{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:35;display:flex;align-items:center;gap:8px;
    padding:7px 8px 7px 9px;border-radius:0;background:rgba(10,24,38,.7);
    -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
    border:1px solid rgba(255,255,255,.13);box-shadow:0 22px 48px -16px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08);
    transform:translateY(calc(100% + 30px)) scale(.94);opacity:0;pointer-events:none;
    transition:transform .5s cubic-bezier(.2,.9,.25,1.15),opacity .3s}
  .ctabar.show{transform:none;opacity:1;pointer-events:auto}
  .ctabar .cemb{flex:none;display:block;width:40px;height:40px}
  .ctabar .cemb svg{width:100%;height:100%;display:block}
  .ctabar .btn{flex:1;padding:12px 10px;font-size:14px;border-radius:0}
  .ctabar .btn.sec{flex:0 0 auto;padding:12px 16px;border-radius:0;background:rgba(255,255,255,.06)}
  footer{padding-bottom:calc(28px + 70px + env(safe-area-inset-bottom))}
}

/* ————— ÉLŐ EMBLÉMA —————
   A fejléc címere és a záró sáv emblémája a JS-ből kapja a hero kézfogás-
   rajzát (site.js: liveEmb), így ugyanaz a K-terv animáció fut rajtuk:
   betöltéskor / képbe görgetéskor, majd minden rámutatásra újra. */
.strip .semb{position:relative;flex:none;width:clamp(84px,9vw,124px)}
.strip .semb svg{display:block;width:100%;height:auto}
.strip .semb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.strip .wrap>div:not(.semb):not(.cta){flex:1 1 300px}
@media(max-width:560px){.strip .semb{width:64px}}
.emb-live{overflow:visible}
@media (prefers-reduced-motion:no-preference){
  .play .emb-live .kez{animation:sw-jon .7s cubic-bezier(.35,.15,.25,1) .05s both}
  .play .emb-live .kez.bal{--dx:-62px}.play .emb-live .kez.jobb{--dx:62px}
  .crest.play .emb-live .kez.bal{--dx:-40px}.crest.play .emb-live .kez.jobb{--dx:40px}

  .play .emb-live .hid{animation:sw-eltun .12s linear .5s both}
  .play .emb-live{transform-origin:50% 50%;animation:sw-szorit .32s cubic-bezier(.16,1,.3,1) .76s both}
  .semb.play::after{animation:sw-villan .6s cubic-bezier(.23,1,.32,1) .8s forwards}
}

/* ————— ÉLŐ MŰHELYJELEK —————
   A site.js (liveWork) a helyére másolt pajzsot részekre címkézi. Belépéskor (.play): a külső gyűrű
   körberajzolódik, a műhelyszínű gyűrű ellenirányban utána, a piktogram kicsiről beúszik, a rombuszok
   kipattannak, az ívelt feliratok utoljára tűnnek elő. Rámutatásra ugyanez újra. A .semb-nél a meglévő
   arany villanógyűrű is elsül. Csökkentett mozgásigénynél minden azonnal a helyén van. */
.emb-work{overflow:visible}
.emb-work .emb-dia{transform-box:fill-box;transform-origin:center}
.emb-work .emb-pic{transform-origin:200px 200px}
@media (prefers-reduced-motion:no-preference){
  .play .emb-work .emb-ring{stroke-dasharray:1182;stroke-dashoffset:1182;animation:emb-draw .95s cubic-bezier(.4,0,.2,1) 0s forwards}
  .play .emb-work .emb-c{stroke-dasharray:918;stroke-dashoffset:-918;animation:emb-draw .8s cubic-bezier(.4,0,.2,1) .18s forwards}
  .play .emb-work .emb-ring2{opacity:0;animation:sw-fade .5s ease .55s forwards}
  .play .emb-work .emb-pic{opacity:0;animation:emb-pic .85s cubic-bezier(.16,1,.3,1) .32s forwards}
  .play .emb-work .emb-dia{opacity:0;animation:emb-pop .55s cubic-bezier(.16,1,.3,1) .78s forwards}
  .play .emb-work .emb-t{opacity:0;animation:sw-fade .6s ease .7s forwards}
  .play .emb-work{animation:sw-szorit .36s cubic-bezier(.16,1,.3,1) .95s}
}
@keyframes emb-draw{to{stroke-dashoffset:0}}
@keyframes emb-pic{from{opacity:0;transform:scale(.55) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes emb-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}

/* ————— 02 FOTÓSÁV: a műhelyoldalak (kardán, féltengely, gömbfej, turbó) szerkezete —————
   Teljes szélességű képsávok, a szöveg keskeny navy oszlopban, a szekciók váltakozva bal-jobb. */
.i2{--ease:cubic-bezier(.23,1,.32,1)}
/* sáv: fotó + szöveg */
.i2-band{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);border-bottom:1px solid var(--line)}
.i2-band.flip .ph{order:2}
.i2-band .ph{position:relative;overflow:hidden;background:var(--bg-2)}
.i2-band .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.05) brightness(.85);transform:scale(1.06);transition:transform 1.4s var(--ease)}
.i2-band.in .ph img,.i2-band .ph.in img{transform:none}
/* feliratozott rajz (fehér alapú ábra): nem vágjuk, nem szürkítjük — a címkék maradjanak olvashatók */
.i2-band .ph.fit img{object-fit:contain;background:#fff;filter:none;transform:none}
.i2-band .ph .cap{position:absolute;left:18px;bottom:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(239,242,246,.75);background:rgba(8,21,33,.7);padding:5px 8px}
.i2-band .tx{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(30px,4vw,60px) clamp(22px,4.5vw,72px);background:var(--bg)}
.i2-band.tone .tx{background:var(--bg-2)}
.i2-band .tx h2{font-size:clamp(28px,3.8vw,54px);letter-spacing:-.03em}
.i2-band .tx p{margin:0;color:var(--fg-2);font-size:clamp(15px,1.55vw,17.5px);max-width:48ch}
.i2-band .tx .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.i2-band .tx .rule{width:56px;height:2px;background:var(--gold);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease) .2s}
.i2-band.in .tx .rule{transform:none}
.i2-band .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:10px}
.i2-band .stats a{background:var(--bg-2);padding:16px 18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:2px}
.i2-band.tone .stats a{background:var(--surface)}
.i2-band .stats b{font-family:var(--g);font-weight:800;font-size:clamp(26px,3vw,40px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.i2-band .stats b i{font-style:normal;font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--fg-3);margin-right:5px}
.i2-band .stats small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.i2-band .tx .checks{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(18px,2.4vw,36px);background:none;border:0;border-radius:0;overflow:visible}
.i2-band .tx .checks li{background:none;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;gap:11px}
.i2-band .tx .checks li::before{margin-top:8px;width:6px;height:6px}
.i2-band .tx .checks li small{font-size:13px}
@media(max-width:1180px){.i2-band .tx .checks{grid-template-columns:1fr}}

/* folyamat: öt lépés egyszerre — nincs lapozás.
   Asztalon öt álló fotólap egymás mellett, fölöttük a számokat összekötő arany sín, ami képbe görgetve
   balról jobbra kirajzolódik; a lapok ugyanabban az ütemben, egymás után bukkannak elő (--i). 1100 alatt
   függőleges idővonal lesz: szám · fotó · szöveg sorok, a sín balra fordul. Rámutatásra a fotó kitisztul. */
.i2-five{border-bottom:1px solid var(--line);background:var(--bg-2);padding-bottom:clamp(28px,4vw,56px)}
html.js .i2-five.rv{opacity:1;translate:none}
.i2-five .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:clamp(28px,4vw,56px) clamp(18px,4vw,56px) 22px;flex-wrap:wrap}
.i2-five .head h2{font-size:clamp(28px,3.8vw,54px)}
.i2-five .head .hint{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.i2-five-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:0 clamp(18px,4vw,56px);background:var(--line);border:1px solid var(--line)}
.i2-five-grid::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--gold);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .1s}
.i2-five.in .i2-five-grid::before{transform:none}
.i2-stp{position:relative;aspect-ratio:3/4.3;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;justify-content:flex-end}
html.js .i2-stp{opacity:0;translate:0 22px;transition:opacity .7s var(--ease),translate .8s var(--ease);transition-delay:calc(.15s + var(--i,0) * 160ms)}
html.js .i2-five.in .i2-stp{opacity:1;translate:none}
.i2-stp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.5) brightness(.5);transform:scale(1.04);transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.i2-stp::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,33,.55) 0,rgba(8,21,33,.1) 35%,rgba(8,21,33,.94) 78%)}
.i2-stp:hover img{filter:grayscale(.1) brightness(.72);transform:scale(1.09)}
.i2-stp .n{position:absolute;left:clamp(14px,1.6vw,22px);top:clamp(10px,1.4vw,18px);z-index:1;font-family:var(--g);font-weight:800;font-size:clamp(44px,5vw,76px);line-height:.85;letter-spacing:-.05em;color:var(--gold)}
.i2-stp .n::after{content:"";position:absolute;left:2px;top:calc(100% + 10px);width:26px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) calc(.5s + var(--i,0) * 160ms)}
.i2-five.in .i2-stp .n::after{transform:none}
.i2-stp .bd{position:relative;z-index:1;padding:0 clamp(14px,1.6vw,22px) clamp(14px,1.8vw,24px);display:flex;flex-direction:column;gap:7px}
.i2-stp h3{font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em}
.i2-stp .s{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.i2-stp p{margin:0;color:var(--fg-2);font-size:13.5px;line-height:1.5}
.i2-stp ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--fg-2)}
.i2-stp li::before{content:"— ";color:var(--gold)}
/* keskenyen a fotós kártyák megmaradnak, csak egy sorban lapozhatók (scroll-snap) — a következő széle belóg */
@media(max-width:1100px){
  .i2-five-grid{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin-right:0;border-right:0;scroll-padding-left:0}
  .i2-five-grid::-webkit-scrollbar{display:none}
  .i2-stp{flex:0 0 min(72vw,300px);scroll-snap-align:start;aspect-ratio:3/4.1}
  .i2-five .head .hint::after{content:" · lapozz →"}
}

/* tudástár: vezető sáv + sorok */
.i2-rows{border-top:1px solid var(--line)}
.i2-rows a{display:grid;grid-template-columns:110px 1fr auto 24px;gap:clamp(12px,2vw,26px);align-items:center;padding:14px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.i2-rows a:hover{background:var(--bg-2)}
.i2-rows img{width:110px;aspect-ratio:16/10;object-fit:cover;display:block;filter:grayscale(.4)}
.i2-rows .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--gold));display:block;margin-bottom:4px}
.i2-rows h3{font-family:var(--ui);font-weight:600;text-transform:none;letter-spacing:0;font-size:17px}
.i2-rows .d{font-family:var(--mono);font-size:11px;color:var(--fg-3)}
.i2-rows .go{font-family:var(--mono);color:var(--fg-3);transition:color .15s,transform .2s var(--ease)}
.i2-rows a:hover .go{color:var(--gold);transform:translateX(4px)}

/* kérdések, kapcsolat */
.i2-sec{padding:clamp(40px,6vw,90px) 0;border-bottom:1px solid var(--line)}
.i2-sec .head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.i2-sec .head h2{font-size:clamp(28px,3.8vw,54px)}
.i2-sec .head p{margin:6px 0 0;color:var(--fg-2);max-width:56ch}
.i2-sec .contact{margin-top:clamp(22px,3vw,40px)}

/* aloldal: fotó-hero, tünetek fotón, három kép egymás mellett */
@media (prefers-reduced-motion:no-preference){
  .i2-phero .shot{animation:i2-settle 2.2s var(--ease) both}
  .i2-phero .semb{animation:i2-up .8s var(--ease) .1s both}
  .i2-phero .crumb{animation:i2-up .7s var(--ease) .2s both}
  .i2-phero .kicker{animation:i2-up .7s var(--ease) .3s both}
  .i2-phero h1{animation:i2-up .8s var(--ease) .38s both}
  .i2-phero p{animation:i2-up .8s var(--ease) .5s both}
  .i2-phero .cta{animation:i2-up .8s var(--ease) .62s both}
}
@keyframes i2-settle{from{transform:scale(1.08)}to{transform:none}}
@keyframes i2-up{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
.i2-phero{position:relative;min-height:min(84svh,820px);display:flex;align-items:flex-end;overflow:hidden}
.i2-phero .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.35) contrast(1.05) brightness(.55)}
.i2-phero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,33,.6),rgba(8,21,33,.1) 40%,rgba(8,21,33,.97))}
.i2-phero .in{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,40px);align-items:end;padding:calc(var(--nav-h) + 40px) clamp(18px,4vw,56px) clamp(28px,4vw,48px)}
.i2-phero .semb{width:clamp(84px,9vw,124px);position:relative}
.i2-phero .semb svg{display:block;width:100%;height:auto}
.i2-phero .semb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.i2-phero .crumb{margin-bottom:12px;display:block}
.i2-phero h1{font-size:clamp(38px,6.6vw,96px);line-height:.92;letter-spacing:-.04em;text-wrap:balance}
.i2-phero p{margin:14px 0 0;color:var(--fg-2);font-size:clamp(15px,1.6vw,18px);max-width:56ch}
.i2-phero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.i2-symp{position:relative;padding:clamp(40px,6vw,90px) clamp(18px,4vw,56px);overflow:hidden;border-bottom:1px solid var(--line)}
.i2-symp .shot{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.6) brightness(.3)}
.i2-symp .wrap{position:relative}
.i2-symp .head{margin-bottom:clamp(22px,3vw,36px)}
.i2-symp .head h2{font-size:clamp(28px,3.8vw,54px)}
.i2-symp .head p{margin:8px 0 0;color:var(--fg-2);max-width:56ch}
.i2-symp .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.i2-symp .sy{background:rgba(8,21,33,.9);padding:clamp(18px,2.2vw,26px);display:flex;flex-direction:column;gap:8px}
.i2-symp .sy .t{font-family:var(--g);font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:-.02em}
.i2-symp .sy b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.i2-symp .sy p{margin:0;color:var(--fg-2);font-size:14.5px}
.i2-symp .sy:nth-child(3n+1):last-child{grid-column:1/-1}
@media(max-width:960px) and (min-width:561px){.i2-symp .sy:nth-child(3n+1):last-child{grid-column:auto}.i2-symp .sy:nth-child(odd):last-child{grid-column:1/-1}}
.i2-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.i2-tri figure{margin:0;position:relative;aspect-ratio:4/3;overflow:hidden}
.i2-tri img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.3) brightness(.85);transition:transform 1s var(--ease)}
.i2-tri figure:hover img{transform:scale(1.04)}
.i2-tri figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(180deg,transparent,rgba(8,21,33,.9));font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-2)}
.i2-band .tx .spec{background:transparent;font-size:14.5px}
.i2-band .tx .spec th{padding-left:0}
.i2-band .tx .infobox{border-radius:0;margin-top:6px}

.i2-band .tx .semb{width:clamp(72px,7vw,96px);position:relative;margin-bottom:4px}
.i2-band .tx .semb svg{display:block;width:100%;height:auto}
.i2-band .tx .semb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){html.js .i2-rows .rv,html.js .i2-symp .rv,html.js .i2-tri .rv{transition-delay:calc(var(--i,0) * 70ms)}}
@media(max-width:960px){
  .i2-band{grid-template-columns:1fr;min-height:0}
  .i2-band .ph{aspect-ratio:16/10;order:0!important}
  .i2-band .ph img{position:static;display:block;height:100%}
  .i2-tri,.i2-symp .grid{grid-template-columns:1fr 1fr}
  .i2-phero .in{grid-template-columns:1fr}
  .i2-rows a{grid-template-columns:1fr auto}.i2-rows img,.i2-rows .go{display:none}
}
@media(max-width:560px){.i2-tri,.i2-symp .grid{grid-template-columns:1fr}}

/* ————— LÉPÉSSÁV a műhelyoldalakon —————
   A fejléc alatt ragadó vékony sáv: 01 Tünetek → 02 Mit csinálunk → 03 Így megy → 04 Ár és keretek → 05 Küldd el.
   Görgetéskor a site.js jelöli, hol tart az olvasó. */
.i2-steps{position:sticky;top:var(--nav-h);z-index:30;background:rgba(8,21,33,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.i2-steps ol{list-style:none;margin:0;padding:0;display:flex;gap:clamp(18px,3vw,44px);overflow-x:auto;scrollbar-width:none}
.i2-steps ol::-webkit-scrollbar{display:none}
.i2-steps a{position:relative;display:inline-flex;align-items:center;gap:9px;padding:13px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);text-decoration:none;white-space:nowrap;transition:color .15s}
.i2-steps a i{font-style:normal;color:var(--gold);opacity:.7}
.i2-steps a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.i2-steps a:hover{color:var(--fg)}
.i2-steps a.on{color:var(--fg)}
.i2-steps a.on i{opacity:1}
.i2-steps a.on::after{transform:none}
html:has(.i2-steps){scroll-padding-top:calc(var(--nav-h) + 56px)}
@media(max-width:620px){.i2-steps a{font-size:9.5px;padding:11px 0}}

/* ————— ár (két oszlop), küldd el (középre zárt CTA), SOS (tömör csík) a műhelyoldalakon ————— */
.i2-ar{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,4vw,64px);margin-top:clamp(18px,2.4vw,30px);align-items:start}
.i2-ar .t p{margin:0 0 12px;color:var(--fg-2);font-size:15.5px;max-width:62ch}
.i2-ar .t p b{color:var(--fg)}
.i2-ar .c .infobox{border-radius:0;margin:0}
.i2-ar .c .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.i2-cta{padding:clamp(52px,7vw,104px) 0;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.i2-cta .wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:820px}
.i2-cta .semb{width:clamp(88px,9vw,120px);position:relative;margin-bottom:6px}
.i2-cta .semb svg{display:block;width:100%;height:auto}
.i2-cta .semb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0;pointer-events:none}
.i2-cta h2{font-size:clamp(30px,4.4vw,60px);letter-spacing:-.03em}
.i2-cta p{margin:0;color:var(--fg-2);font-size:clamp(15.5px,1.6vw,18px);max-width:54ch}
.i2-cta .cta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.i2 .strip.sos{border-bottom:1px solid var(--line)}
@media(max-width:900px){.i2-ar{grid-template-columns:1fr}}

.i2-band .tx .spec th,.i2-band .tx .spec td{padding:11px 12px 11px 0;font-size:14px}
.i2-band .tx .spec th{width:30%}
.i2-band .tx>p{margin:0;color:var(--fg-2);font-size:15px;max-width:60ch}
.i2-band .tx>p b{color:var(--fg)}

/* ————— MOBIL (≤620px) —————
   Telefonon semmi nem csúszik oldalra és semmi nem fut magától:
   · a műhelyoldalak ragadó lépéssávján csak a számok ülnek egy sorban, az aktuális kapja a feliratot;
   · a nyitóoldal öt folyamat-füle öt egyenlő mezőre oszlik, a felirat csak az aktíván látszik;
   · a vélemények nem futószalag, hanem egymás alatt (a másolatok rejtve);
   · a térképen a szomszédos országnevek és az apró városcímkék lekerülnek, a súgó a térkép alá kerül;
   · a hero-k háttéremblémája nem takarja a címet. */
@media(max-width:620px){
  .i2-steps .wrap{padding:0 12px}
  .i2-steps ol{gap:0;justify-content:space-between;overflow:visible}
  .i2-steps a{font-size:0;gap:0;padding:12px 6px;letter-spacing:0}
  .i2-steps a i{font-size:10.5px;letter-spacing:.14em}
  .i2-steps a.on{font-size:9.5px;gap:7px;letter-spacing:.12em}
  html:has(.i2-steps){scroll-padding-top:calc(var(--nav-h) + 44px)}

  .proc-nav{overflow:visible}
  .proc-nav li{flex:1 1 0;min-width:0}
  .proc-nav li:has(.on){flex:2.6 1 auto}
  .proc-tab{padding:12px 8px;column-gap:8px;display:flex;align-items:center;justify-content:center}
  .proc-tab .no{padding-top:0;font-size:11px}
  .proc-tab b{display:none;font-size:13.5px;white-space:nowrap}
  .proc-tab.on b{display:block}
  .proc-panel{min-height:0}
  /* telefonon a fotó nem a szöveg mögött van a teljes panelen (álló kivágás: egy fekvő képből csak a közepe látszott,
     az árajánlatos szerelő teljesen kiesett), hanem 220px-es fekvő sáv a panel tetején, világosabban; a szöveg alatta */
  .proc-panel .shot{height:220px;bottom:auto;filter:grayscale(.3) contrast(1.05) brightness(.8)}
  .proc-panel .veil{background:linear-gradient(180deg,rgba(8,21,33,.18) 0,rgba(8,21,33,.18) 140px,var(--surface) 220px)}
  .proc-panel .bd{padding-top:226px}

  /* vélemények: ugyanaz a futószalag, mint asztalon, csak keskenyebb kártyákkal; érintésre megáll (site.js) */
  /* iOS Safari a szélfakító maszkot egyetlen textúrába rakja; a 20 kártyás, 3x-os sűrűségű szalag túllépi a
     méretkorlátját és üresen marad. Telefonon ezért nincs maszk, és csak öt vélemény (+ a hurok másolata) fut. */
  .rev{flex:0 0 min(82vw,340px);padding:18px}
  .rev .qm{font-size:52px}
  .rev blockquote{font-size:15px}

  /* blog: a vezető cikk címe a fotón, a többi sor kis kártya a rovat színével a bal szélén */
  .blead{position:relative;gap:0;border-radius:var(--r);overflow:hidden}
  .blead .f{aspect-ratio:4/3;border-radius:0}
  .blead .bd{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 16px;gap:8px;background:linear-gradient(180deg,transparent,rgba(8,21,33,.96) 60%)}
  .blead .h{font-size:22px}
  .blead .p{font-size:14px;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .brest{margin-top:10px;gap:8px}
  .brow{grid-template-columns:minmax(0,1fr) 22px;grid-template-rows:auto auto;gap:5px 10px;padding:12px 12px 12px 14px;border:1px solid var(--line);border-left:3px solid var(--c2,var(--gold));background:var(--surface)}
  .brow .meta{grid-column:1;grid-row:1;flex-direction:row;gap:10px}
  .brow .h{grid-column:1;grid-row:2;font-size:15px}
  .brow .go{grid-column:2;grid-row:1/3;align-self:center;color:var(--gold)}
  .bfej .btn{width:100%;justify-content:center}

  /* GYIK: kártyás sorok, a sorszám arany jelvényben, behúzás nélküli válasz */
  .qa{border-top:0;display:flex;flex-direction:column;gap:8px}
  .qa details{border:1px solid var(--line);border-left:3px solid var(--line-2);background:var(--surface);transition:border-color .2s,background .2s}
  .qa details[open]{border-left-color:var(--gold);background:var(--raised)}
  .qa summary{padding:13px 14px;gap:12px;align-items:flex-start}
  .qa summary .qn{width:auto;font-size:9.5px;color:var(--gold);padding:3px 6px;border:1px solid rgba(255,203,39,.4);line-height:1;margin-top:2px}
  .qa details[open] summary .qn{background:var(--gold);color:var(--ink);border-color:var(--gold)}
  .qa summary h3{font-size:15px;line-height:1.35}
  .qa summary .pm{margin-top:3px}
  .qa .an{padding:0 14px 14px}
  .qa .an p{font-size:14px}
  .qa-more,.qa+.center .btn{width:100%;justify-content:center}
  .center.mt{display:flex;flex-direction:column;gap:10px}

  .pm-nev{display:none}
  .pmap:not(.kz-open):not(.zoom) .plab{display:none}
  .pdot .hit{r:calc(24px / var(--zk,1))}
  .pdot .pin{r:calc(5.5px / var(--zk,1))}
  .pmap-hint{position:static;margin-top:10px;display:flex;justify-content:center;width:100%}
  .pmap.picked .pmap-hint{display:none} /* itt helyet foglal, ezért kiválasztás után nem csak elhalványul */
  .pmap-fig figcaption{margin-top:8px;font-size:8px}

  .phero .mark{display:none}
  .i2-phero .semb{width:64px}
  .lgsav-hint,.lgsav .hint{display:none}
  /* logószalag: maszk nélkül (iOS), és végtelenül fut telefonon is */
}