/* Komfort Gipsz Kft. — 2b "Split modern" · Lora + Inter */
:root{
  --bg:#051112; --bg-2:#071819; --bg-3:#0a1617; --panel:#061011;
  --field:#111d1e; --border:#183335; --border-2:#273b3d; --border-3:#2d4a4d;
  --accent:#02969b; --accent-2:#008287;
  --ink:#e6f2f4; --ink-2:#e1eff0; --text:#b0ced1; --muted:#759396;
  --label:#81a8ac; --faint:#6a8386;
  --pill-ink:#08dde2; --link:#00b7bc; --link-h:#00dce0; --cream:#e9e6e2;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --maxw:1120px; --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-h)}
h1,h2,h3{font-family:var(--serif); color:var(--ink); font-weight:700; line-height:1.12; margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.section{padding:64px 0}
.section--alt{background:var(--bg-2)}
.kicker{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:10px}
.h2{font-size:clamp(24px,4vw,34px); font-weight:600; margin-bottom:26px}
.lead{font-size:clamp(15px,2.2vw,18px); color:var(--text); max-width:60ch}

/* szekció-bevezető (kicker + cím + rövid lead): középre igazítva, középről nő
   kétfelé — a div.kicker mindig ezt a mintát jelöli (a p.kicker az almezők
   alcíme, pl. "Projekttípusok", az balra marad, ahogy a tartalom alatta is). */
.section > .wrap > div.kicker, .subhead div.kicker{text-align:center}
.section > .wrap > .h2, .subhead .h2{text-align:center}
.section > .wrap > p.lead, .subhead .lead{text-align:center; max-width:60ch; margin-left:auto; margin-right:auto}
.hero .lead{text-align:left}

/* focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--pill-ink); outline-offset:2px; border-radius:6px}

/* logo — „KG" jelvény tükör-motívummal (D7; design 3a „Fő jelvény").
   A monogram alsó fele saját, elhalványuló tükörképe. Méret: --kg. */
.kg{--kg:44px; width:var(--kg); height:var(--kg); border-radius:50%;
  border:1.5px solid var(--accent);
  display:flex; align-items:center; justify-content:center; flex:none}
.kg-in{width:86%; height:86%; border-radius:50%; border:1px solid var(--border-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden}
.kg-mark{font-family:var(--serif); font-weight:700; font-size:calc(var(--kg)*.262);
  letter-spacing:.02em; color:var(--ink); line-height:1}
.kg-rule{width:calc(var(--kg)*.292); height:1px; background:var(--accent);
  margin:calc(var(--kg)*.038) 0}
.kg-echo{font-family:var(--serif); font-weight:700; font-size:calc(var(--kg)*.262);
  letter-spacing:.02em; line-height:1; transform:scaleY(-1); color:var(--accent);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 85%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.65),transparent 85%)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--accent);
  color:#b8edee; background:transparent; padding:13px 28px; border-radius:30px;
  font-family:var(--sans); font-size:15px; font-weight:600; cursor:pointer; transition:background .18s,color .18s}
.btn:hover{background:var(--accent); color:#001011}
.btn--block{width:100%; justify-content:center}

/* header */
.site-header{position:sticky; top:0; z-index:40;
  background:rgba(5,17,18,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px}
.brand-name{font-size:13px; letter-spacing:.03em; color:var(--text)}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{color:#95c6cb; font-size:14px; font-weight:600; letter-spacing:.02em}
.nav-links a:hover{color:var(--ink)}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px;
  color:#08dde2; font-size:22px}

/* hero */
.hero{padding:56px 0 24px}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center}
.hero h1{font-size:clamp(34px,6vw,58px); margin-bottom:16px}
.tag{display:inline-block; border:1px solid var(--accent); border-radius:22px;
  padding:6px 16px; font-size:12.5px; color:var(--pill-ink); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; margin-bottom:22px}
.hero .lead{margin-bottom:28px}
.hero-media{border-radius:6px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.4);
  aspect-ratio:4/5; background:var(--bg-3)}
.hero-media img{width:100%; height:100%; object-fit:cover}

/* méhsejt fotó-mozaik (brosúra-stílus).
   Lapos tetejű szabályos hatszög: szélesség/magasság = 2/√3 = 1.1547.
   Oszlopköz = 0.75 x hatszög-szélesség, a szomszédos oszlop fél hatszöggel lejjebb.
   Asztali nézeten 3 oszlop x 2 sor -> a doboz aránya 2.5 : 2.1651 (a magasság
   nem nő, mert a 3. oszlop az 1. oszloppal azonos --y-okat használ).
   Mobilon (lásd media query) visszaáll a 2 oszlopos 1.75 : 2.1651 arányra,
   és a 3. oszlop (5-6. hex) elrejtve — ne uralja a kis képernyőt. */
.hexcomb{position:relative; aspect-ratio:2.5/2.1651;
  border-radius:0; box-shadow:none; overflow:visible; background:none}
.hexcomb .hex{position:absolute; left:var(--x); top:var(--y); margin:0;
  width:40%; aspect-ratio:1.1547/1; background:var(--bg-3);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  transform:scale(.984)}
.hexcomb .hex img{width:100%; height:100%; object-fit:cover; display:block}

/* services */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.card{border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; background:var(--bg)}
.section--alt .card{background:var(--bg-2)}
.card h3{font-family:var(--sans); font-size:16px; font-weight:700; color:#d6ebee; margin-bottom:8px; line-height:1.3}
.card p{font-size:14px; color:var(--muted); margin:0}
.card--wide{grid-column:1/-1}

/* stats */
.stats{display:flex; gap:12px; text-align:center; margin-bottom:22px}
.stat{flex:1; border:1px solid var(--border); border-radius:10px; padding:22px 8px}
.stat b{display:block; font-family:var(--serif); font-size:clamp(24px,5vw,32px); color:var(--pill-ink); font-weight:700}
/* az ikonok optikai igazítása: a glifák rajzolt mérete betűtípusonként eltér
   (⚒ 26px-en 82x76, ⌖ csak 38px-en éri el ugyanezt) — ezért --ic felülírható */
.stat .ic{font-family:var(--serif); font-size:var(--ic,26px); color:var(--accent); line-height:1}
.stat span{display:block; font-size:11.5px; color:var(--muted); margin-top:6px}

/* márkalogók (Hilti/DeWalt/Makita) — a brosúrán is szereplő logók, egységes
   magasságra igazítva, a szélesség a képarányuk szerint változik */
.brand-logos{display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:16px}
.brand-logo{height:32px; width:auto; display:block}

/* references */
.reflock{position:relative; border:1px solid var(--border); border-radius:var(--radius);
  padding:34px 22px; text-align:center; overflow:hidden; margin-bottom:18px}
.reflock .lockmsg{font-size:13px; color:#a5c7ca}
.reflock .lockmsg b{display:block; color:var(--ink-2); font-family:var(--serif);
  font-size:18px; font-weight:600; margin-bottom:8px}
.refnames{display:none; flex-wrap:wrap; gap:9px; justify-content:center}
.refnames .chip{border:1px solid var(--border-3); border-radius:20px; padding:7px 15px;
  font-size:13px; color:#cde4e6}
/* projekttípusok — a brosúra címlapjának mozaikja: döntött élű fotó-csempék.
   A dőlést clip-path adja, nem forgatás, így a felirat vízszintes marad.
   A képet a --img, a kivágás helyét a --pos egyedi tulajdonság állítja,
   így ugyanaz a néhány fotó más-más részletét mutatja csempénként.
   A kép (.chip-bg) és a felirat (.chip-label) külön réteg: hoverkor/fókuszkor
   csak a kép nagyít (transform:scale), a szöveg helyben marad. Kattintásra/
   Enterre a main.js lightbox megnyitja a data-full képet teljes méretben. */
.reftypes{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.reftypes .chip{
  position:relative; min-height:172px; display:block;
  color:var(--ink); border:0; border-radius:0; overflow:hidden;
  background-color:var(--bg-3); cursor:zoom-in;
  clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}
.reftypes .chip-bg{
  position:absolute; inset:0;
  background-image:linear-gradient(178deg,rgba(5,17,18,.06) 0%,rgba(5,17,18,.18) 42%,rgba(5,17,18,.90) 100%),var(--img,none);
  background-size:cover,cover; background-position:center,var(--pos,center);
  transition:transform .35s ease}
.reftypes .chip:hover .chip-bg,
.reftypes .chip:focus-visible .chip-bg{transform:scale(1.08)}
.reftypes .chip-label{
  position:absolute; left:26px; right:20px; bottom:15px;
  font-size:13.5px; font-weight:600; line-height:1.25}
.reftypes .chip-label::after{content:''; position:absolute; left:0; bottom:-8px; width:26px; height:2px;
  background:var(--accent)}
.reftypes .chip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.section--alt .reftypes .chip{background-color:var(--bg-2)}

/* lightbox: a projekttípus-fülek teljes képű nagyítása (lásd main.js) */
.lightbox{position:fixed; inset:0; background:rgba(2,8,9,.92); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:28px;
  opacity:0; pointer-events:none; transition:opacity .2s ease}
.lightbox.open{opacity:1; pointer-events:auto}
.lightbox img{max-width:min(92vw,1100px); max-height:88vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 24px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute; top:18px; right:20px; width:44px; height:44px;
  border-radius:50%; border:1px solid var(--border-2); background:var(--bg-2);
  color:var(--ink); font-size:24px; line-height:1; cursor:pointer}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gallery a,.gallery .ph{border-radius:10px; overflow:hidden; aspect-ratio:1/1; background:var(--bg-3);
  border:1px solid var(--border); position:relative}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .3s}
.gallery a:hover img{transform:scale(1.04)}
.gallery .ph{display:flex; align-items:center; justify-content:center; color:var(--faint); font-size:12px; text-align:center; padding:10px}

/* form — a doboz középre igazítva (szimmetrikus margó), a benne lévő mezők
   viszont balra rendezettek maradnak (ez a szokásos, jól használható forma-
   elrendezés — csak a szöveg középre igazítása lenne itt rossz olvashatóság). */
.form{display:flex; flex-direction:column; gap:14px; max-width:560px; margin-left:auto; margin-right:auto}
.field label{display:block; font-size:12px; color:var(--label); font-weight:600; margin-bottom:6px}
.field .in{width:100%; background:var(--field); border:1px solid var(--border-2); color:#dae9ea;
  border-radius:10px; padding:12px 14px; font-family:var(--sans); font-size:14px}
.field .in::placeholder{color:#6a888c}
textarea.in{resize:vertical; min-height:110px}
.consent{display:flex; gap:10px; align-items:flex-start; padding-top:2px}
.consent input{margin-top:4px; flex:none; width:16px; height:16px; accent-color:var(--accent)}
.consent label{font-size:12px; color:var(--label); line-height:1.5}
.form-note{margin-top:8px; font-size:12px; color:var(--faint)}
.form-status{font-size:14px; padding:12px 14px; border-radius:10px; display:none}
.form-status.ok{display:block; background:#16281a; color:#bfe6c6; border:1px solid #2f5a37}
.form-status.err{display:block; background:#2a1620; color:#e6bcc8; border:1px solid #6b3346}

/* footer */
.site-footer{background:var(--panel); border-top:1px solid var(--border); padding:40px 0 26px}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:28px 36px; align-items:start}
/* copyright külön alsó sávban: így a Jogi hasáb keskeny maradhat,
   és mobilon a két info-hasáb elfér egymás mellett */
.foot-bottom{margin-top:28px; padding-top:16px; border-top:1px solid var(--border)}
/* olyan egységek, amiket nem szabad sor közben eltörni (cím, adószám) */
.nb{white-space:nowrap}
.foot-brand{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.foot-brand .kg{--kg:64px}
.foot-info{font-size:12.5px; color:var(--muted); line-height:1.7}
.foot-info b{color:#b0ced1; font-weight:600}
.foot-legal{font-size:12px; color:var(--faint)}
.foot-legal a{color:var(--label)}

/* subpage */
.subhead{padding:48px 0 8px}
.back{font-size:13px; color:var(--label)}
.prose{max-width:74ch}
.prose h2{font-size:20px; margin:28px 0 10px; color:var(--ink-2)}
.prose h3{font-family:var(--sans); font-size:15px; font-weight:700; color:#cde4e6; margin:18px 0 6px}
.prose p,.prose li{font-size:14.5px; color:var(--text)}
.prose ul{padding-left:20px}
.todo{border:1px dashed var(--accent-2); border-radius:10px; padding:12px 16px; margin:14px 0;
  font-size:13px; color:#92d7da; background:rgba(2,150,155,.06)}

/* mobile */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr; gap:26px}
  .hero-media{aspect-ratio:16/11; order:-1}
  /* a méhsejt megtartja a saját (asztali, 3 oszlopos) arányát, csak
     kicsinyítve — mind a 6 hex látszik mobilon is, nem csak 4.
     width + justify-self kell, mert margin:auto grid-elemen zsugorodásra vált,
     és az abszolút pozicionált hatszögektől a doboz 0 széles lenne. */
  .hexcomb{aspect-ratio:2.5/2.1651; width:84%; justify-self:center}
  /* lábléc mobilon: a márkablokk teljes sor, alatta két hasáb —
     így nem egyetlen hosszú oszlopba nyúlik el. */
  .reftypes{grid-template-columns:1fr 1fr; gap:8px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px 16px}
  .foot-grid > :first-child{grid-column:1 / -1}
  .foot-brand .kg{--kg:52px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .nav-links{position:absolute; top:72px; left:0; right:0; background:var(--bg-2);
    border-bottom:1px solid var(--border); flex-direction:column; gap:0; padding:8px 0;
    display:none}
  .nav-links.open{display:flex}
  .nav-links li{padding:0}
  .nav-links a{display:block; padding:14px 22px}
  .nav-toggle{display:block}
}
@media (max-width:480px){
  .cards{grid-template-columns:1fr}
  .stats{flex-direction:row}
  .section{padding:48px 0}
}