/* ==========================================================================
   CARCLASSICS — Youngtimer Garage × Q-Service
   Sötét, vörös akcentusú, nagy tipográfiájú látványterv.
   Betűk: Unbounded (display) · Barlow (szöveg) · Barlow Condensed (címkék)
   ========================================================================== */

:root{
  --bg:#08090c;
  --bg-2:#0e1015;
  --bg-3:#151820;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --text:#f4f4f5;
  --muted:#9ea3ad;
  --dim:#6b7078;
  --red:#e30613;
  --red-2:#ff2a36;
  --white:#ffffff;

  --display:"Unbounded",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  /* Minden nagybetűs, ritkított „címke" stílus (gombok, mezőfeliratok, morzsa,
     számsáv, lépések, címkék) EZT használja – korábban Barlow Condensed volt,
     a felhasználó kérésére semleges Helvetica/Arial lett az egész oldalon. */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --outline:"Syncopate","Unbounded",system-ui,sans-serif; /* statikus, átfedésmentes kontúr a text-stroke-hoz */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur:.6s;

  --gutter:clamp(20px,4vw,64px);
  --max:1440px;
  --nav-h:88px;

  /* A hero belépő-koreográfia közös nullpontja: ennyit vár a kapu felhúzására.
     Belső navigációnál (no-intro) nincs kapu, ezért azonnal indul minden. */
  --intro:1.5s;
}
.no-intro{--intro:0s}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.01em}
p{margin:0}
::selection{background:var(--red);color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,140px)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.section--line{border-top:1px solid var(--line)}

/* --- Tipográfiai skálák ------------------------------------------------- */
.t-display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.02em;font-size:clamp(34px,6.4vw,96px)}
/* A címek SOHA nem törhetnek szó közben – inkább legyen kisebb a betű.
   A méretek úgy vannak belőve, hogy a leghosszabb szó (Állapotfelméréstől)
   minden szélességen kiférjen. */
.t-h1{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;font-size:clamp(21px,4.1vw,58px)}
.t-h2{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:-.02em;font-size:clamp(20px,3.45vw,50px)}
.t-h3{font-family:var(--display);font-weight:700;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.t-lead{font-size:clamp(18px,1.35vw,21px);line-height:1.55;color:var(--muted);max-width:60ch}
.t-red{color:var(--red)}
.t-white{color:#fff}

.head{display:grid;gap:22px;align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
@media(min-width:900px){.head{grid-template-columns:1.2fr .8fr}.head .t-lead{justify-self:end;max-width:44ch}}

/* --- Gombok ------------------------------------------------------------- */
.btn{
  --pad:15px 28px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:var(--pad);border-radius:8px;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),background .35s,color .35s,border-color .35s;
  white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:translateY(102%);transition:transform .45s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.98)}
.btn--white{background:#fff;color:#0a0a0a}
.btn--white:hover{color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--red);color:#fff}
.btn--red{background:var(--red);color:#fff}
.btn--red::before{background:#fff}
.btn--red:hover{color:#0a0a0a}
.btn--sm{--pad:11px 20px;font-size:13px}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}

.link{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;font-size:14px;color:#fff;
}
.link::after{content:"→";transition:transform .3s var(--ease)}
.link:hover::after{transform:translateX(6px)}
.link:hover{color:var(--red)}

/* --- Navigáció ---------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .4s,backdrop-filter .4s,border-color .4s,height .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(8,9,12,.72);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:var(--line);height:72px}
.nav .wrap{display:flex;align-items:center;gap:32px;width:100%}
.nav__brand{flex:none;display:flex;align-items:center;gap:clamp(12px,1.2vw,20px)}
.nav__logo{display:flex;align-items:center}
/* A Q-Service logó MINDEN képernyőméretben ott van a fejlécben (a felhasználó
   kérése). Mobilon kisebb, hogy a Carclassics logó és a hamburger mellé
   320 px-en is kiférjen. */
.nav__qs{display:flex;align-items:center;padding-left:clamp(12px,1.2vw,20px);border-left:1px solid var(--line-2)}
.nav__qs img{height:40px;width:auto;transition:height .4s var(--ease)}
.nav.is-scrolled .nav__qs img{height:33px}
/* A Q-Service logó 900 px-től mindig látszik – a rövidebb menüsor mellett
   minden asztali szélességen elfér (1290–1920 px-en is 0 a túlcsordulás). */

/* Mobil/tablet nézetben a fejléc a lap tetején logó nélkül indul: a logó a
   hero közepén van, és görgetéskor „felcsúszik” a fejlécbe. Csak ott, ahol
   van hero-logó (a nav ilyenkor kapja a nav--heroLogo osztályt). */
@media(max-width:1289px){
  .nav--heroLogo .nav__brand{
    opacity:0;transform:translateY(16px);pointer-events:none;
    transition:opacity .5s var(--ease),transform .55s var(--ease);
  }
  .nav--heroLogo.is-logo .nav__brand,
  .menu-open .nav--heroLogo .nav__brand{opacity:1;transform:none;pointer-events:auto}
  /* Ha a hero-logó tényleg repül (JS kapcsolja), akkor a fejléc logója nem
     csúszik, csak halkan átveszi a helyét – így nincs villanás az átadásnál. */
  .nav--heroLogo.nav--fly .nav__brand{transform:none;transition:opacity .22s linear}
}
.nav__logo img{height:52px;width:auto;transition:height .4s var(--ease)}
.nav.is-scrolled .nav__logo img{height:42px}
@media(max-width:899px){
  .nav__logo img{height:44px}
  .nav.is-scrolled .nav__logo img{height:38px}
  .nav__qs{padding-left:10px}
  .nav__qs img{height:32px}
  .nav.is-scrolled .nav__qs img{height:28px}
}
.nav__links{display:none;list-style:none;margin:0 auto;padding:0;gap:clamp(18px,2.4vw,36px)}
.nav__links a{
  font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  position:relative;padding-block:6px;
}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
/* legördülő almenük (Szolgáltatásaink, Munkáink) */
.nav__links li{position:relative}
.nav__links .caret{
  display:inline-block;width:7px;height:7px;margin-left:8px;vertical-align:2px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease);
}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:rotate(225deg) translateY(-2px)}
.nav__sub{
  position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:14px;padding:8px;
  list-style:none;min-width:224px;background:rgba(14,16,21,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:0 22px 46px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.nav__sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  display:block;padding:10px 14px;border-radius:6px;
  font-family:var(--body);font-weight:500;font-size:14px;letter-spacing:.04em;text-transform:none;color:#d6d9df;
  transition:background .25s,color .25s;
}
.nav__sub a::after{display:none}
.nav__sub a:hover{background:rgba(255,255,255,.07);color:#fff}

.nav__cta{display:none;gap:12px;margin-left:auto}
.nav__burger{margin-left:auto;width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px}
.nav__burger span{display:block;width:22px;height:2px;background:#fff;position:relative;transition:transform .3s}
.nav__burger span::before,.nav__burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#fff;transition:transform .3s,top .3s}
.nav__burger span::before{top:-7px}.nav__burger span::after{top:7px}
.menu-open .nav__burger span{background:transparent}
.menu-open .nav__burger span::before{top:0;transform:rotate(45deg)}
.menu-open .nav__burger span::after{top:0;transform:rotate(-45deg)}
/* 1180-on a menü + gombok még nem fértek ki (a jobb szélső gomb levágódott) */
@media(min-width:1290px){
  .nav__links{display:flex}
  .nav__cta{display:flex}
  .nav__burger{display:none}
}

/* Mobil / teljes képernyős menü */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.menu-open .menu{clip-path:inset(0 0 0 0)}
.menu > ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.menu__row{display:block;overflow:hidden}
.menu__row a{
  display:block;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(21px,5.6vw,48px);line-height:1.15;
  transform:translateY(110%);transition:transform .7s var(--ease),color .3s;
}
.menu-open .menu__row a{transform:translateY(0)}
.menu__row a:hover{color:var(--red)}
.menu__sub{list-style:none;margin:2px 0 10px;padding:0 0 0 4px;display:flex;flex-wrap:wrap;gap:6px 18px}
.menu .menu__sub a{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transform:none;line-height:1.3;
}
.menu .menu__sub a:hover{color:#fff}
.menu__foot{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* --- Hero -----------------------------------------------------------------
   Bal oldalon a modern Porsche 911 GT3, jobb oldalon a klasszikus 911 – a két
   autó EGYMÁS FELÉ néz, mindkettő a képernyő szélén fut ki. Középen a jól
   látható Carclassics-logó. A képek eleve a megfelelő irányba néznek, ezért
   tilos tükrözni (a 911 oldalán a PORSCHE felirat olvasható marad).        */
.hero{
  position:relative;overflow:hidden;min-height:100svh;
  display:grid;grid-template-rows:1fr auto auto;
  padding-top:var(--nav-h);
  /* A hero alja beleolvad a következő szekció színébe (--bg), hogy ne legyen
     éles kontrasztváltás az adatsávnál. */
  background:
    linear-gradient(180deg,rgba(8,9,12,0) 48%,rgba(8,9,12,.55) 76%,rgba(8,9,12,.92) 92%,var(--bg) 100%),
    radial-gradient(135% 100% at 50% 20%,#242830 0%,#1e222a 46%,#14171d 100%);
}

/* A telephely madártávlati fotója illusztrációvá alakítva, halvány háttérként.
   A `#illu` SVG-szűrő posterizálja és élkiemeli, a maszk a szélek felé elhalványítja. */
.hero__aerial{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.2;overflow:hidden;
  /* a széleken és lefelé is elhalványul, hogy ne legyen éles vége */
  -webkit-mask-image:radial-gradient(118% 62% at 50% 20%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
  mask-image:radial-gradient(118% 62% at 50% 20%,#000 0%,rgba(0,0,0,.5) 44%,transparent 80%);
}
.hero__aerial img{
  width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  filter:url(#illu);transform:scale(1.06);
  animation:aerial 56s ease-in-out infinite alternate;
}
@keyframes aerial{to{transform:scale(1.14) translate(-1.5%,1%)}}

/* A színpad a rács 1. sora: a nav alatti szabad hely a szöveg fölött.
   Így az autók és a logó MINDIG a szöveghez igazodnak, nem fix %-hoz –
   ettől függetlenül jó marad az arány kis és nagy képernyőn is. */
/* A színpad NEM kap z-indexet (nem nyit új rétegkontextust), hogy a fejlécbe
   felúszó logó a nav (z-index:100) FÖLÉ tudjon kerülni repülés közben. */
.hero__stage{position:relative;grid-row:1;pointer-events:none;min-height:clamp(150px,22vh,340px)}

/* A logó háttérvilágítású műhelycégérként viselkedik: a jel mögött lágy
   fényudvar, magán a jelen többrétegű szórt fény, és egy nagyon lassú, alig
   érezhető lüktetés – mint egy bemelegedő világító tábla. */
.hero__mark{
  position:absolute;left:50%;top:30%;translate:-50% -50%;z-index:1;
  width:min(76vw,620px);max-height:88%;display:flex;justify-content:center;opacity:0;
  transform-origin:0 0;will-change:transform;
  /* a kapu felhúzása után beizzik: előbb pislákol, majd stabilan világít */
  animation:markFlicker 3.1s linear calc(var(--intro) + .05s) forwards;
}
.hero__mark::before{           /* fényudvar a jel mögött */
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:134%;height:155%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(205,225,255,.3),rgba(155,185,245,.12) 55%,transparent 78%);
  filter:blur(26px);
  animation:markHalo 7s ease-in-out calc(var(--intro) + 3.1s) infinite;
}
.hero__mark img{
  position:relative;max-width:100%;max-height:100%;width:auto;height:auto;opacity:.66;
  animation:
    markWarm 3.1s linear calc(var(--intro) + .05s) both,
    markGlow 7s ease-in-out calc(var(--intro) + 3.1s) infinite;
}
/* Neonos beizzítás: az elején hosszú sötét szünetek egy-egy villanással,
   aztán egyre sűrűbben villan, végül stabilan világít.
   A közeli kulcsérték-párok adják az éles ki-be kapcsolást (nem áttűnés). */
@keyframes markFlicker{
  0%,6%       {opacity:0}
  6.5%,8%     {opacity:.72}
  8.5%,21%    {opacity:.03}
  21.5%,23%   {opacity:.8}
  23.5%,34%   {opacity:.05}
  34.5%,36%   {opacity:.85}
  36.5%,45%   {opacity:.07}
  45.5%,47%   {opacity:.9}
  47.5%,54%   {opacity:.1}
  54.5%,56%   {opacity:.95}
  56.5%,61%   {opacity:.15}
  61.5%,63%   {opacity:1}
  63.5%,66%   {opacity:.25}
  66.5%,68%   {opacity:1}
  68.5%,70%   {opacity:.45}
  70.5%,71.5% {opacity:1}
  72%,73%     {opacity:.7}
  73.5%,100%  {opacity:1}
}
/* a szórt fény a pislákolás alatt erősödik fel */
@keyframes markWarm{
  0%{filter:drop-shadow(0 0 3px rgba(255,255,255,.1)) drop-shadow(0 0 8px rgba(170,200,255,.06))}
  45%{filter:drop-shadow(0 0 6px rgba(255,255,255,.2)) drop-shadow(0 0 20px rgba(170,200,255,.14))}
  74%{filter:drop-shadow(0 0 18px rgba(255,255,255,.62)) drop-shadow(0 0 60px rgba(180,210,255,.46))}
  100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.48)) drop-shadow(0 0 44px rgba(180,210,255,.34))}
}
@keyframes markGlow{
  0%,100%{filter:drop-shadow(0 0 14px rgba(255,255,255,.48)) drop-shadow(0 0 44px rgba(180,210,255,.34))}
  50%    {filter:drop-shadow(0 0 20px rgba(255,255,255,.64)) drop-shadow(0 0 68px rgba(180,210,255,.48))}
}
@keyframes markHalo{0%,100%{opacity:.72}50%{opacity:1}}
/* amikor a logó „beérkezett” a fejlécbe, a repülő példány eltűnik és a
   fejléc logója veszi át – visibility, mert az opacityt a beizzítás animáció
   (fill: forwards) felülírná */
.hero__mark.is-docked{visibility:hidden}
/* repülés közben a fejléc fölött úszik, hogy ne takarja el a nav sávja */
.hero__mark.is-flying{z-index:120}


/* A két autó ARÁNYOSAN van méretezve: a valós hosszuk aránya adja a képarányt
   (992 GT3 ~4573 mm, klasszikus 911 ~4291 mm -> 1,066). A képek a kerékvonalig
   vannak vágva, ezért azonos `bottom` értékkel pontosan egy vonalban állnak.
   A vízszintes eltolás úgy van beállítva, hogy a kompozíció (meddig látszik be
   az autó a képernyőre) a méretváltozástól függetlenül ugyanaz maradjon. */
.hero__car{position:absolute;z-index:1;filter:drop-shadow(0 18px 24px rgba(0,0,0,.55))}
.hero__body{display:block;width:100%;height:auto}
/* A kerekek külön, körbevágott képek a karosszéria megfelelő pontjain.
   Begurulás közben pontosan 2 teljes fordulatot tesznek, így a végén a
   féknyereg oda áll vissza, ahol a forrásképen volt. A negatív margó
   százaléka a szülő SZÉLESSÉGÉHEZ igazodik – ezért jó a --d mindkét irányban. */
.hero__body{position:relative;z-index:1}
.hero__wheel{
  position:absolute;left:var(--x);top:var(--y);width:var(--d);height:auto;z-index:2;
  margin-left:calc(var(--d) / -2);margin-top:calc(var(--d) / -2);
  animation:wheelRoll 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .25s) both;
}
.hero__car--classic .hero__wheel{animation-delay:calc(var(--intro) + .4s)}
@keyframes wheelRoll{from{rotate:-720deg}to{rotate:0deg}}
.hero__car--modern{
  left:0;bottom:clamp(10px,2.4vh,26px);width:92vw;
  translate:-44.5% 0;animation:carL 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .25s) both;
}
.hero__car--classic{
  right:0;bottom:clamp(10px,2.4vh,26px);width:86vw;
  /* Mindkét forráskép jobbra néz, ezért a jobb oldalit tükrözzük, hogy
     szembeforduljanak. Ezen a képen nincs oldalfelirat, így olvasható marad. */
  transform:scaleX(-1);
  translate:46.4% 0;animation:carR 1.35s cubic-bezier(.17,.84,.31,1) calc(var(--intro) + .4s) both;
}
@media(min-width:760px){
  .hero__car--modern{width:min(65vw,950px);translate:-47.4% 0}
  .hero__car--classic{width:min(61vw,891px);translate:46.5% 0}
}
/* teljesen a képernyőn kívülről gurulnak be, lassuló lendülettel */
@keyframes carL{from{translate:-100% 0}to{translate:-44.5% 0}}
@keyframes carR{from{translate:100% 0}to{translate:46.4% 0}}
@media(min-width:760px){
  @keyframes carL{from{translate:-100% 0}to{translate:-47.4% 0}}
  @keyframes carR{from{translate:100% 0}to{translate:46.5% 0}}
}

.hero__copy{
  /* a színpad abszolút, ezért a szöveget kézzel tesszük a 2. rácssorba */
  grid-row:2;
  position:relative;z-index:2;text-align:center;display:grid;justify-items:center;align-content:end;
  padding-bottom:clamp(16px,2.4vh,26px);
}
.hero__title{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  /* akkora, hogy a leghosszabb sor a két autó közé férjen (kb. a szélesség 46%-a) */
  font-size:clamp(19px,2.26vw,33px);line-height:1.1;letter-spacing:-.022em;
  animation:heroUp .9s var(--ease) calc(var(--intro) + .7s) both;
}
.hero__title em{font-style:normal;color:var(--red)}
.hero__lead{
  color:#cfd2d8;max-width:62ch;margin-top:clamp(14px,1.6vw,20px);font-size:clamp(15px,1.05vw,17.5px);
  animation:heroUp .9s var(--ease) calc(var(--intro) + .85s) both;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(22px,2.4vw,30px);animation:heroUp .9s var(--ease) calc(var(--intro) + 1s) both}
/* mobilon kisebb gombok, és Műhelyeink helyett Webshop */
.only-desk{display:none}
@media(max-width:759px){.hero__cta .btn{--pad:12px 20px;font-size:13px;letter-spacing:.06em}}
@media(min-width:760px){.only-desk{display:inline-flex}.only-mob{display:none}}

/* ---- legújabb videó ---- */
.hero__video{
  display:flex;align-items:center;gap:13px;text-align:left;max-width:100%;
  padding:8px 18px 8px 8px;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid var(--line-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background .3s,border-color .3s,transform .45s var(--ease);
  animation:heroUp .9s var(--ease) calc(var(--intro) + 1.15s) both;
}
.hero__video:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}
.hero__video__thumb{
  position:relative;flex:none;width:86px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:var(--bg-3);
}
.hero__video__thumb img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .6s var(--ease)}
.hero__video:hover .hero__video__thumb img{opacity:1;transform:scale(1.06)}
.hero__video__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:26px;height:26px;border-radius:50%;background:rgba(10,11,15,.62);
  border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;
  transition:background .3s,border-color .3s;
}
.hero__video__play::after{
  content:"";width:0;height:0;margin-left:2px;
  border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.hero__video:hover .hero__video__play{background:var(--red);border-color:var(--red)}
.hero__video__txt{display:grid;gap:3px;min-width:0}
.hero__video__txt i{
  font-style:normal;font-family:var(--sans);font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);
}
.hero__video__txt b{
  font-family:var(--body);font-weight:600;font-size:14px;line-height:1.25;color:#e9eaee;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hero__videoWrap{
  grid-row:3;z-index:3;display:flex;justify-content:center;
  padding-bottom:clamp(26px,4.5vh,54px);
}
/* Csak elég széles képernyőn ül a bal alsó sarokban – alatta a középre zárt
   gombsor alá csúszna, ezért ott marad a folyamban. */
@media(min-width:1200px){
  /* asztali nézetben a hero bal alsó sarkában ül, a szöveg mellett */
  .hero__videoWrap{
    position:absolute;left:0;right:auto;bottom:clamp(24px,4vh,48px);
    justify-content:flex-start;padding-bottom:0;
  }
  .hero__video{width:min(340px,28vw)}
  .hero__copy{padding-bottom:clamp(30px,5vh,62px)}
}
@keyframes heroUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---- adatsáv a hero alatt ---- */
.hero__facts{
  position:relative;z-index:1;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(2,1fr);
  border-bottom:1px solid var(--line);
}
@media(min-width:980px){.hero__facts{grid-template-columns:repeat(4,1fr)}}
.hero__facts > div{
  background:var(--bg);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px);min-height:104px;
}
.hero__facts b{font-family:var(--display);font-weight:800;font-size:clamp(18px,1.55vw,22px);letter-spacing:-.01em;white-space:nowrap;line-height:1}
.hero__facts span{font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--muted);line-height:1.25}
.hero__facts--q img{height:34px;width:auto}

/* Mobilon 2x2-es négyzetrács, mindent középre zárva (a Q-Service logót is).
   FONTOS: ez a blokk az alapszabályok UTÁN áll – különben azonos specificitás
   mellett az alapszabály `align-items:flex-start`-ja nyerne, és a logó balra
   csúszna. 520 px fölött már túl nagyok lennének a négyzetek, ott sima 2 oszlop. */
@media(max-width:520px){
  .hero__facts > div{
    aspect-ratio:1/1;min-height:0;
    align-items:center;justify-content:center;text-align:center;gap:10px;
    padding:14px 12px;
  }
  .hero__facts b{font-size:clamp(19px,5.6vw,25px)}
  .hero__facts span{font-size:11.5px;letter-spacing:.12em}
  .hero__facts--q img{height:40px}
}

/* ---- Shop-előnézet: valódi termékek a webshopból ---- */
.prodgrid{
  display:grid;gap:clamp(12px,1.6vw,22px);grid-template-columns:repeat(2,1fr);
  margin-top:clamp(28px,3.6vw,48px);
}
@media(min-width:760px){.prodgrid{grid-template-columns:repeat(4,1fr)}}
.prod{display:grid;gap:12px;align-content:start}
.prod__pic{
  display:block;overflow:hidden;border-radius:10px;background:var(--bg-3);
  border:1px solid var(--line);transition:border-color .35s,transform .5s var(--ease);
}
.prod__pic img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  filter:saturate(.92);transition:transform 1s var(--ease),filter .4s;
}
.prod:hover .prod__pic{border-color:var(--line-2);transform:translateY(-5px)}
.prod:hover .prod__pic img{transform:scale(1.06);filter:saturate(1)}
.prod__meta{display:grid;gap:4px;padding-inline:2px}
.prod__meta b{
  font-family:var(--body);font-weight:600;font-size:clamp(13px,1.05vw,15px);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prod__meta i{
  font-style:normal;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;
  color:var(--muted);transition:color .3s;
}
.prod:hover .prod__meta i{color:var(--red)}
.prodgrid__more{margin-top:clamp(22px,2.6vw,32px)}

/* --- Márka-marquee ---------------------------------------------------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding-block:18px;background:var(--bg-2)}
.marquee__track{display:flex;gap:0;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--outline);font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.6vw,21px);letter-spacing:.06em;
  padding-inline:34px;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);white-space:nowrap;
  transition:color .3s;
}
.marquee__track span:nth-child(odd){-webkit-text-stroke:0;color:#fff}
.marquee__track i{color:var(--red);font-style:normal;-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* --- Két műhely (split) ------------------------------------------------- */
.split{display:grid;gap:2px;min-height:560px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;transition:grid-template-columns .8s var(--ease)}
  .split:has(.split__pane:first-child:hover){grid-template-columns:1.35fr 1fr}
  .split:has(.split__pane:last-child:hover){grid-template-columns:1fr 1.35fr}}
.split__pane{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3.5vw,56px);
  min-height:520px;isolation:isolate;
}
.split__pane img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);transition:transform 1.4s var(--ease),filter .8s;filter:saturate(.7) brightness(.55)}
.split__pane:hover img.bg{transform:scale(1);filter:saturate(.9) brightness(.7)}
.split__pane::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,9,12,.15),rgba(8,9,12,.92) 75%)}
.split__tag{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.split__pane h3{font-size:clamp(26px,2.8vw,42px);text-transform:uppercase;margin:14px 0 12px}
.split__pane p{color:#d0d3d9;max-width:48ch}
.split__logo{position:absolute;top:clamp(24px,3vw,44px);left:clamp(28px,3.5vw,56px);height:56px;display:flex;align-items:center}
.split__logo img{height:100%;width:auto}

.split__foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}
.split__pane--q{border-left:0}
.split__pane--q .split__tag{color:#ffb3b7}

/* Az álló Q-Service logó (jel + felirat) nagyobb dobozt kap, mint a fekvő Carclassics-logó */
.split__logo:has(.qs-logo){height:92px}
.shop-card .pic .lg:has(.qs-logo){height:86px}
.choice .lg:has(.qs-logo){height:82px}
.loc__card .lg:has(.qs-logo){height:74px}
.footer__q .qs-logo{height:66px}

/* Q-Service szöveges fallback, ha még nincs logófájl */
.qs-word{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.02em;color:#fff}
.qs-word b{color:var(--red)}

/* --- Szolgáltatás lista ------------------------------------------------- */
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc li{
  display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding .35s var(--ease);
}
.svc li::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--red);transition:width .5s var(--ease)}
.svc li:hover::before{width:100%}
.svc li:hover{padding-left:10px}
.svc .n{font-family:var(--sans);font-weight:600;color:var(--dim);letter-spacing:.1em;font-size:15px}
.svc .name{font-family:var(--body);font-weight:600;font-size:clamp(17px,1.4vw,21px)}
.svc .who{display:flex;gap:6px}
.svc .who span{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line-2);border-radius:4px;color:var(--muted)}
.svc .who span.q{border-color:rgba(227,6,19,.5);color:#ff8a92}
.svc li.is-hidden{display:none}

.svc-groups{display:grid;gap:clamp(40px,5vw,72px)}
.svc-group{display:grid;gap:22px}
@media(min-width:900px){.svc-group{grid-template-columns:minmax(260px,350px) 1fr}}
.svc-group h3{font-size:clamp(19px,1.55vw,25px);text-transform:uppercase;line-height:1.12}

.svc-group p{color:var(--muted);margin-top:12px;max-width:34ch}

.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--line-2);border-radius:6px;color:var(--muted);transition:all .3s;
}
.filter button:hover{color:#fff;border-color:#fff}
.filter button.is-active{background:#fff;color:#0a0a0a;border-color:#fff}

/* --- Kiemelt szolgáltatás-rács (főoldal) ------------------------------- */
.grid6{display:grid;gap:2px;background:var(--line)}
@media(min-width:640px){.grid6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid6{grid-template-columns:repeat(3,1fr)}}
.cell{background:var(--bg);padding:clamp(24px,2.6vw,40px);min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;position:relative;overflow:hidden;transition:background .4s}
.cell:hover{background:var(--bg-3)}
.cell h3{font-size:clamp(18px,1.4vw,22px);text-transform:uppercase;line-height:1.15}
.cell p{color:var(--muted);font-size:15.5px;margin-top:8px}

/* --- Miért mi + számok -------------------------------------------------- */
.why{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:900px){.why{grid-template-columns:repeat(4,1fr)}}
.why__item{background:var(--bg);padding:clamp(24px,2.5vw,40px) clamp(20px,2vw,32px)}
.why__item h3{font-size:clamp(20px,1.6vw,24px);text-transform:uppercase;margin-bottom:12px}
.why__item p{color:var(--muted);font-size:15.5px}

/* Mobilon 2x2-es rács (nem négy sor egymás alatt), 700 px-től egy sorban mind a négy. */
.stats{display:grid;gap:2px;grid-template-columns:1fr 1fr;background:var(--line);border-bottom:1px solid var(--line)}
/* Négy hasáb csak 1180 px-től: a Helvetica szélesebb a korábbi Barlow
   Condensednél, és 700–1100 px között 2-3 sorba törte a feliratokat. */
@media(min-width:1180px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--bg-2);padding:clamp(26px,3vw,44px) clamp(20px,2vw,32px)}
.stat .v{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,68px);line-height:1;letter-spacing:-.02em}
.stat .v small{font-size:.45em;color:var(--red);margin-left:4px;font-weight:700}
.stat .l{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-top:12px}
/* Keskeny kijelzőn a 2x2 hasábba szűkebb betűtáv és kisebb belső margó fér. */
@media(max-width:560px){
  .stat{padding:24px 16px}
  .stat .l{font-size:11px;letter-spacing:.06em;margin-top:10px}
}

/* --- Munkáink kártyák --------------------------------------------------- */
.works{display:grid;gap:20px}
@media(min-width:640px){.works{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.works{grid-template-columns:repeat(3,1fr)}}
.work{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--bg-3);display:block;isolation:isolate}
.work img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.1s var(--ease),filter .6s;filter:saturate(.85)}
.work:hover img{transform:scale(1.09);filter:saturate(1)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,9,12,.92));z-index:1}
.work__meta{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:12px}
.work__meta h3{font-size:clamp(17px,1.3vw,21px);text-transform:uppercase;line-height:1.1}
.work__meta .brand{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px}
.work__meta .go{width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex:none;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.work:hover .go{background:var(--red);border-color:var(--red);transform:rotate(-45deg)}
.work.is-hidden{display:none}

/* vízszintes görgethető sáv a főoldalon */
.hscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll .work{flex:0 0 min(78vw,420px);scroll-snap-align:start;aspect-ratio:4/3}

/* --- Videók ------------------------------------------------------------- */
.videos{display:grid;gap:18px}
@media(min-width:640px){.videos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.videos{grid-template-columns:repeat(3,1fr)}}
.video{display:block;position:relative;border-radius:10px;overflow:hidden;background:var(--bg-3);text-align:left}
.video .thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.video .thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.8)}
.video:hover .thumb img{transform:scale(1.06)}
.video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;
  background:rgba(8,9,12,.6);backdrop-filter:blur(6px);border:1px solid var(--line-2);display:grid;place-items:center;
  transition:background .3s,transform .4s var(--ease);
}
.video .play::after{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.video:hover .play{background:var(--red);transform:translate(-50%,-50%) scale(1.08)}
.video .body{padding:18px 20px 22px}
.video h3{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.3}
.video p{color:var(--muted);font-size:14.5px;margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.video .ep{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:8px}

.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.86);display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__box{width:min(100%,1080px);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;transform:scale(.96);transition:transform .45s var(--ease)}
.modal.is-open .modal__box{transform:none}
.modal__box iframe{width:100%;height:100%;border:0}
.modal__close{position:absolute;top:22px;right:22px;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase;font-size:14px;color:#fff;padding:10px 14px;border:1px solid var(--line-2);border-radius:6px}

/* --- Hírek -------------------------------------------------------------- */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;gap:10px 24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:center}
@media(min-width:800px){.news li{grid-template-columns:130px 1fr auto}}
.news time{font-family:var(--sans);font-weight:600;letter-spacing:.14em;color:var(--red);font-size:14px;text-transform:uppercase}
.news h3{font-size:clamp(18px,1.6vw,24px);text-transform:uppercase}
.news p{color:var(--muted);margin-top:6px}

/* --- Shop banner -------------------------------------------------------- */
.shop{position:relative;border-radius:14px;overflow:hidden;min-height:380px;display:flex;align-items:end;padding:clamp(28px,3.5vw,56px);isolation:isolate}
.shop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:brightness(.6)}
.shop::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,9,12,.9),rgba(8,9,12,.2))}
.shop h2{text-transform:uppercase;font-size:clamp(22px,3.5vw,48px);line-height:1.05}
.shop p{color:#d5d7dc;max-width:46ch;margin:14px 0 24px}

/* --- Kapcsolat sáv ------------------------------------------------------ */
.contact{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:900px){.contact{grid-template-columns:1.1fr 1fr 1fr}}
.contact > div{background:var(--bg);padding:clamp(26px,3vw,44px)}
.contact .k{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:14px}
.contact .v{font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,24px);line-height:1.3}
.contact .v a:hover{color:var(--red)}
.contact .sub{color:var(--muted);margin-top:8px;font-size:15px}
.contact .map{padding:0;position:relative;min-height:260px;overflow:hidden}

/* --- Lábléc ------------------------------------------------------------- */
/* A lábléc semleges Helvetica/Arial betűvel fut, nem a display/condensed
   párossal – a felhasználó kérésére. */
.footer{
  border-top:1px solid var(--line);background:var(--bg-2);
  padding-block:clamp(48px,6vw,80px) 28px;font-family:var(--sans);
}
.footer__grid{display:grid;gap:clamp(30px,3.4vw,44px)}
@media(min-width:900px){.footer__grid{grid-template-columns:1fr .8fr 1fr .8fr}}
.footer__brand{display:grid;gap:26px;align-content:start;justify-items:start}
.footer__logo img{height:58px;width:auto}
.footer__qs{height:38px;width:auto}
.footer h4{
  font-family:var(--sans);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  font-size:12.5px;color:var(--muted);margin-bottom:18px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer li,.footer a{font-family:var(--sans);font-size:15px;line-height:1.45}
.footer ul a{font-weight:400;transition:color .3s}
.footer ul a:hover{color:var(--red)}
/* közösségi linkek ikonnal */
.footer__social a{display:inline-flex;align-items:center;gap:11px}
.footer__social svg{width:19px;height:19px;flex:none;fill:currentColor;opacity:.75;transition:opacity .3s,fill .3s}
.footer__social a:hover svg{opacity:1}
/* --- Lábléc mobilon: tömör, kétoszlopos elrendezés -----------------------
   900 px alatt a négy hasáb egymás alá került, ettől a lábléc kb. 620 px magas
   volt. Most: 1. sor a két logó EGYMÁS MELLETT, 2. sor Oldalak | Elérhetőség,
   3. sor a közösségi ikonok egy sorban a címke mellett. Kb. a felére rövidül. */
@media(max-width:899px){
  .footer{padding-block:38px 24px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .footer__brand{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:clamp(16px,5vw,28px)}
  .footer__logo img{height:46px}
  .footer__qs{height:30px}
  .footer__follow{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .footer__follow h4{margin-bottom:0}
  /* .footer ul a display:grid-et adja, ezért kell ide az erősebb szelektor */
  .footer ul.footer__social{display:flex;gap:clamp(18px,6vw,30px)}
  .footer__social svg{width:23px;height:23px;opacity:.9}
  /* a felirat marad a képernyőolvasóknak, csak nem látszik */
  .footer__social span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .footer__bar{margin-top:30px;padding-top:20px}
}

.footer__bar{
  display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  margin-top:clamp(36px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:13.5px;color:var(--dim);
}
.footer__bar a:hover{color:#fff}

/* --- Aloldal fejléc ----------------------------------------------------- */
.page-hero{padding-top:calc(var(--nav-h) + clamp(40px,7vw,100px));padding-bottom:clamp(40px,5vw,72px);position:relative;overflow:hidden;background:radial-gradient(900px 500px at 70% 0%,#161a23,transparent 70%)}
.page-hero .t-h1{max-width:22ch}
.page-hero .t-lead{margin-top:22px}
.page-hero__ghost{position:absolute;right:-2%;top:var(--nav-h);font-family:var(--outline);font-weight:700;text-transform:uppercase;font-size:clamp(70px,14vw,230px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);white-space:nowrap;pointer-events:none;user-select:none}
.crumbs{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:26px}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;color:var(--red);margin-inline:10px}

/* --- Műhelyeink oldal --------------------------------------------------- */
.shop-cards{display:grid;gap:22px}
@media(min-width:900px){.shop-cards{grid-template-columns:1fr 1fr}}
.shop-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg-2);display:grid;grid-template-rows:auto 1fr}
.shop-card .pic{aspect-ratio:16/9;overflow:hidden;position:relative}
.shop-card .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85);transition:transform 1.2s var(--ease)}
.shop-card:hover .pic img{transform:scale(1.05)}
.shop-card .pic .lg{position:absolute;left:22px;bottom:22px;height:54px;display:flex;align-items:center}
.shop-card .pic .lg img{height:100%;width:auto;object-fit:contain}

.shop-card .body{padding:clamp(24px,2.6vw,40px);display:grid;gap:18px;align-content:start}
.shop-card h3{font-size:clamp(22px,2vw,30px);text-transform:uppercase}
.shop-card .body p{color:var(--muted)}
.shop-card dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;font-size:15px}
.shop-card dt{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--dim);padding-top:3px}
.shop-card dd{margin:0}
.shop-card ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.shop-card ul li{padding-left:18px;position:relative;font-size:15.5px}
.shop-card ul li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:2px;background:var(--red)}

.compare{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{padding:16px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare th{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--muted)}
.compare td:first-child{color:var(--muted)}
.compare .yes{color:#fff;font-weight:600}
.compare .yes::before{content:"";display:inline-block;width:10px;height:10px;background:var(--red);border-radius:2px;margin-right:10px;vertical-align:1px}
.table-wrap{overflow-x:auto}

/* --- GYIK --------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px 1fr 40px;gap:16px;align-items:center;padding:22px 0;font-family:var(--body);font-weight:600;font-size:clamp(17px,1.4vw,20px);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--sans);color:var(--dim);letter-spacing:.1em;font-size:14px}
.faq summary .pm{width:34px;height:34px;border:1px solid var(--line-2);border-radius:50%;position:relative;justify-self:end;transition:transform .4s var(--ease),border-color .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:12px;height:2px}.faq summary .pm::after{width:2px;height:12px;transition:opacity .3s}
.faq details[open] summary{color:var(--red)}
.faq details[open] .pm{transform:rotate(90deg);border-color:var(--red)}
.faq details[open] .pm::after{opacity:0}
.faq .a{padding:0 0 26px 64px;color:var(--muted);max-width:70ch}
.faq .a a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* --- Rólunk ------------------------------------------------------------- */
.letter{display:grid;gap:40px}
@media(min-width:1000px){.letter{grid-template-columns:1.1fr .9fr;gap:72px}}
.letter__text p{margin-bottom:18px;color:#d5d7dc}
.letter__text p strong{color:#fff}
.letter__sign{margin-top:28px;font-family:var(--display);font-weight:700;font-size:20px}
.letter__sign small{display:block;font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-top:6px}
.letter__pics{display:grid;gap:14px;align-content:start}
.letter__pics img{border-radius:10px;width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.8)}
.letter__pics img:nth-child(2){aspect-ratio:16/9}

.team{display:grid;gap:2px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.team{grid-template-columns:repeat(4,1fr)}}
.team div{background:var(--bg);padding:26px 24px}
.team .name{font-family:var(--display);font-weight:700;font-size:18px}
.team .role{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--muted);margin-top:8px}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1px solid var(--line-2);margin-left:8px}
.timeline li{position:relative;padding:0 0 34px 34px}
.timeline li::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--bg)}
.timeline .y{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1}
.timeline p{color:var(--muted);margin-top:8px;max-width:52ch}

/* --- Ajánlatkérés ------------------------------------------------------- */
.choose{display:grid;gap:18px}
@media(min-width:800px){.choose{grid-template-columns:1fr 1fr}}
.choice{
  position:relative;text-align:left;border:1px solid var(--line-2);border-radius:14px;padding:clamp(24px,2.6vw,36px);
  background:var(--bg-2);display:grid;gap:14px;align-content:start;overflow:hidden;isolation:isolate;
  transition:border-color .35s,transform .45s var(--ease),background .35s;
}
.choice::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px 260px at 100% 0%,rgba(227,6,19,.18),transparent 70%);opacity:0;transition:opacity .4s}
.choice:hover{border-color:#fff;transform:translateY(-3px)}
.choice.is-active{border-color:var(--red);background:#120d0f}
.choice.is-active::before{opacity:1}
.choice .lg{height:52px;display:flex;align-items:center}
.choice .lg img{height:100%;width:auto;object-fit:contain}

.choice h3{font-size:clamp(20px,1.8vw,26px);text-transform:uppercase}
.choice p{color:var(--muted);font-size:15.5px}
.choice .tick{position:absolute;top:22px;right:22px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;transition:all .3s}
.choice .tick::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .35s var(--ease)}
.choice.is-active .tick{border-color:var(--red)}
.choice.is-active .tick::after{transform:scale(1)}
.choice .fits{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.choice .fits span{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);border-radius:4px;color:var(--muted)}

.form{display:grid;gap:18px;margin-top:40px}
/* Lépcsőzetes űrlap: a 2. rész csak műhelyválasztás után, a 3. rész csak a
   2. kötelező mezőinek kitöltése után jelenik meg. A `hidden`-t felül kell
   ütni, mert a `.qstep` saját `display`-t kap. */
.qstep{display:grid;gap:18px;animation:qstepIn .45s var(--ease) both}
.qstep[hidden]{display:none}
@keyframes qstepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* amíg nincs kiválasztva műhely, a helyén egy halk útmutató áll */
.form__wait{
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:13px;color:var(--dim);padding:26px 0 4px;
}
.form__wait[hidden]{display:none}
.form__row{display:grid;gap:18px}
@media(min-width:700px){.form__row{grid-template-columns:1fr 1fr}.form__row--3{grid-template-columns:1fr 1fr 1fr}}
.field{display:grid;gap:8px}
.field label{font-family:var(--sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:12.5px;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:8px;color:#fff;
  padding:15px 16px;font:inherit;font-size:16px;transition:border-color .3s,box-shadow .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--red);box-shadow:0 0 0 3px rgba(227,6,19,.18)}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border:1px solid var(--line-2);border-radius:6px;color:var(--muted);transition:all .25s}
.chips input:checked + span{background:#fff;color:#0a0a0a;border-color:#fff}
.chips span:hover{border-color:#fff;color:#fff}
.upload{border:1px dashed var(--line-2);border-radius:8px;padding:22px;text-align:center;color:var(--muted);font-size:15px;transition:border-color .3s,background .3s;cursor:pointer}
.upload:hover{border-color:#fff;background:var(--bg-2)}
.upload b{color:#fff}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.consent input{margin-top:5px;accent-color:var(--red);width:18px;height:18px}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.form__foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;margin-top:8px}
.form__foot .note{color:var(--dim);font-size:14px}
.step{font-family:var(--sans);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--muted);margin-bottom:14px}
.step b{color:var(--red);font-weight:600}
.selected-shop{display:none;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);margin-top:26px;font-size:15px}
.selected-shop.is-on{display:flex}
.selected-shop b{font-family:var(--display);font-weight:700;font-size:15px}
.selected-shop button{margin-left:auto;font-family:var(--sans);letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.selected-shop button:hover{color:#fff}

.done{display:none;padding:clamp(36px,5vw,72px);border:1px solid var(--line);border-radius:14px;text-align:center;background:var(--bg-2)}
.done.is-on{display:block}
.done h3{font-size:clamp(24px,2.6vw,36px);text-transform:uppercase}
.done p{color:var(--muted);margin-top:14px;max-width:52ch;margin-inline:auto}
.done .ok{width:74px;height:74px;border-radius:50%;background:var(--red);margin:0 auto 24px;display:grid;place-items:center}
.done .ok::after{content:"";width:14px;height:26px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg) translate(-2px,-3px)}

/* --- Jogi szöveg -------------------------------------------------------- */
.legal{max-width:78ch}
.legal p{margin-bottom:16px;color:#d0d3d9}
.legal h2{font-size:clamp(20px,1.8vw,26px);text-transform:none;margin:40px 0 16px;letter-spacing:0}
.legal ul{color:#d0d3d9;padding-left:20px}
.legal li{margin-bottom:8px}

/* --- Kapcsolat oldal ---------------------------------------------------- */
.loc{display:grid;gap:22px}
@media(min-width:900px){.loc{grid-template-columns:1fr 1fr}}
.loc__card{border:1px solid var(--line);border-radius:14px;padding:clamp(24px,2.6vw,40px);background:var(--bg-2);display:grid;gap:18px;align-content:start}
.loc__card h3{font-size:clamp(20px,1.8vw,26px);text-transform:uppercase}
.loc__card .lg{height:46px;display:flex;align-items:center}
.loc__card .lg img{height:100%;width:auto;object-fit:contain}

.loc__card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0}
.loc__card dt{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--dim);padding-top:3px}
.loc__card dd{margin:0;font-weight:500}
.loc__card dd a:hover{color:var(--red)}
/* `width:100%` nélkül az aspect-ratio + min-height párosból a SZÉLESSÉG jött
   (280 x 21/9 = 653 px), így mobilon a térkép jobb oldala lelógott a képernyőről. */
.map-big{width:100%;margin-top:22px;border-radius:14px;overflow:hidden;position:relative;aspect-ratio:21/9;min-height:280px}
/* Élő, görgethető Google-térkép. A Google nem enged saját stílust a kulcs nélküli
   beágyazásba, ezért CSS-szűrő teszi sötétté. Az `invert` + `hue-rotate(180deg)`
   páros a klasszikus sötét-mód trükk: a világosságot fordítja, a színárnyalatot
   viszont visszaforgatja – így a térkép sötét lesz, de a JELÖLŐ PIROS MARAD.
   (Sima `grayscale(1) invert()` mellett a jelölő szürke lenne.) */
.map-live{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:invert(.93) hue-rotate(180deg) saturate(1.25) contrast(.95) brightness(.88)}
/* Amíg rá nem kattintanak, egy átlátszó réteg fogja a görgetést – különben a
   térkép elnyelné a lapgörgetést (mobilon ez a legbosszantóbb hiba). */
.map__lock{
  position:absolute;inset:0;border:0;background:transparent;cursor:pointer;
  display:grid;place-items:center;
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
  color:transparent;transition:background .3s,color .3s;
}
.map__lock:hover,.map__lock:focus-visible{background:rgba(8,9,12,.35);color:#fff}
/* Érintőképernyőn nincs hover, ezért ott végig látszik a felirat. */
@media(hover:none){.map__lock{color:rgba(255,255,255,.85);background:rgba(8,9,12,.22)}}
.map__lock[hidden]{display:none}
/* A gomb a BAL FELSŐ sarokban van: alul a Google jelzése és a „Térképadatok ©"
   sor fut, azt nem szabad eltakarni. */
.map-big .btn{position:absolute;left:22px;top:22px}
@media(max-width:700px){.map-big .btn{left:14px;top:14px}}
.entrance{display:grid;gap:22px;margin-top:22px}
@media(min-width:900px){.entrance{grid-template-columns:1fr 1fr}}
.entrance img{border-radius:12px;width:100%;aspect-ratio:16/9;object-fit:cover}
.entrance p{color:var(--muted)}

/* --- Scroll-reveal ------------------------------------------------------ */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}.rv-d4{transition-delay:.4s}

/* --- Oldalátmenet (függöny) --------------------------------------------- */
.curtain{position:fixed;inset:0;z-index:300;background:var(--red);transform:translateY(100%);pointer-events:none}
.curtain.is-in{animation:curtainIn .55s var(--ease-io) forwards}
.curtain.is-out{transform:translateY(0);animation:curtainOut .7s var(--ease-io) forwards}
@keyframes curtainIn{to{transform:translateY(0)}}
@keyframes curtainOut{to{transform:translateY(-100%)}}

/* --- Egyéb -------------------------------------------------------------- */
.note-box{border:1px solid rgba(227,6,19,.4);background:rgba(227,6,19,.06);border-radius:10px;padding:18px 20px;font-size:15px;color:#d5d7dc}
.note-box b{color:#fff}
.two{display:grid;gap:22px}
@media(min-width:900px){.two{grid-template-columns:1fr 1fr}}
.pill-note{font-family:var(--sans);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
  .hero__title,.hero__lead,.hero__cta{animation:none;opacity:1;transform:none}
  .hero__mark{animation:none;opacity:1}
  .hero__mark img,.hero__mark::before{animation:none}
  .hero__car--modern,.hero__car--classic{animation:none;opacity:1}
  .hero__video{animation:none;opacity:1;transform:none}
}

/* --- Belépő: garázskapu felhúzása -----------------------------------------
   Az oldal betöltésekor egy szekcionált garázskapu látszik a Carclassics
   logóval, ami felcsúszik. Csak közvetlen betöltéskor fut le: belső
   navigációnál a vörös függöny (`.curtain`) veszi át, ilyenkor a <head>-ben
   lévő apró script `no-intro` osztályt tesz a <html>-re, még festés előtt. */
.garage{
  position:fixed;inset:0;z-index:500;pointer-events:none;
  display:grid;place-items:center;overflow:hidden;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(180deg,#171a21 0 86px,#0d0f14 86px 90px);
  will-change:transform;
  animation:garageUp 1.45s cubic-bezier(.72,0,.28,1) .8s forwards;
}
.garage::before{ /* halvány fény a kapu tetején */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%);
}
.garage::after{ /* a kapu alsó éle alatti árnyék a lapon */
  content:"";position:absolute;left:0;right:0;bottom:-26px;height:26px;
  background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);
}
.garage img{
  position:relative;width:min(52vw,320px);height:auto;
  opacity:0;transform:translateY(10px);
  animation:garageLogo .65s var(--ease) .15s forwards;
}
@keyframes garageLogo{to{opacity:1;transform:none}}
@keyframes garageUp{to{transform:translateY(-101%)}}
.no-intro .garage{display:none}
@media(prefers-reduced-motion:reduce){.garage{display:none}}