/* =====================================================================
   Ronai Jozsef ev. - publikus oldal stiluslapja
   Iranyelv: a ceges kiadvany/szorolap sajat vizuala - level- es
   hullammotivum, ket zold arnyalat (setet fenyves + kozepzold),
   feher/vilagosszurke papir alap, vastag "Anton" cimbetu +
   gepiras-szeru "Courier Prime" torzsszoveg.
   ===================================================================== */

:root{
  /* --- Szinek: a kiadvanybol pontosan kinyert kod, nevesitve --- */
  --ink:        #26332c;   /* fo szovegszin - setet fenyveszold-fekete */
  --spruce:     #33443c;   /* setet fenyveszold - sarok-hullamok, sotet savok */
  --spruce-2:   #2a3a32;   /* meg egy arnyalattal setetebb - hover */
  --moss:       #427961;   /* kozepzold - ELSODLEGES markaszin, gombok, ikonok */
  --moss-dark:  #34604c;   /* kozepzold hover/aktiv allapot */
  --clay:       #427961;   /* kiemelo szin = a markazold (nincs kulon harmadik szin a kiadvanyban) */
  --clay-dark:  #34604c;
  --sage:       #91b1a3;   /* halvany zsalyazold - finom hangsulyok, csempek */
  --birch:      #ffffff;   /* alap papirszin - tiszta feher, ahogy a kiadvanyban */
  --birch-2:    #f0f1f1;   /* vilagosszurke szekciovaltashoz (kiadvany also sav szine) */
  --card:       #ffffff;
  --stone:      #6c766f;   /* halvany szoveg - zoldes szurke */
  --stone-200:  #dde3df;   /* keretvonalak */
  --white:      #ffffff;

  --radius-tag:  3px;
  --radius-sm:   4px;
  --radius-md:   10px;
  --shadow-sm:  0 1px 2px rgba(38,51,44,.07);
  --shadow-md:  0 14px 34px -12px rgba(38,51,44,.3);
  --shadow-lg:  0 28px 70px -20px rgba(38,51,44,.42);

  --container-w: 1200px;
  --measure: 62ch;

  --font-display:'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:'Courier Prime', 'Courier New', ui-monospace, monospace;

  /* Visszatero level-vizjel SVG (corner-deco, hero, page-hero) - egy
     helyen definialva a haromszoros duplikacio helyett. */
  --leaf-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M100%20186C46%20150%2030%2076%2086%2020C156%2054%20172%20130%20126%20176C119%20183%20109%20186%20100%20186Z%22%20fill%3D%22%23427961%22/%3E%3C/svg%3E");
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  max-width:100vw;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--birch);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  margin:0 0 .5em; line-height:1.1; font-weight:400; color:var(--spruce);
  font-family:var(--font-display); letter-spacing:.01em; text-transform:uppercase;
}
p{ margin:0 0 1em; }
button{ font-family:inherit; }
::selection{ background:var(--moss); color:#fff; }
:focus-visible{ outline:2px solid var(--moss); outline-offset:3px; }

.container{ max-width:var(--container-w); margin:0 auto; padding:0 28px; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--spruce); color:#fff;
  padding:10px 16px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------- */
/* Eyebrow / field-tag - visszatero cimke elem                      */
/* ---------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body);
  font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--moss); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--moss); display:inline-block; }

/* ---------------------------------------------------------------- */
/* Buttons - lekerekitett, tomor zold gombok, a kiadvany "levelforma" */
/* ---------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 28px; border-radius:999px; font-weight:700; font-size:.86rem;
  letter-spacing:.04em; text-transform:uppercase; border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap; font-family:var(--font-body);
}
.btn::after{ content:"→"; transition:transform .18s ease; }
.btn:hover::after{ transform:translateX(3px); }
.btn-primary{ background:var(--moss); color:#fff; }
.btn-primary:hover{ background:var(--moss-dark); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:var(--spruce); color:var(--spruce); }
.btn-outline:hover{ background:var(--spruce); color:var(--birch); }
.btn-light{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-light:hover{ background:#fff; color:var(--spruce); border-color:#fff; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:.72rem; }
.btn-danger{ background:#a5372a; color:#fff; }
.btn-danger:hover{ background:#832a1f; }

/* ---------------------------------------------------------------- */
/* Header / Nav                                                     */
/* ---------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:500; border-bottom:1px solid var(--stone-200);
}
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
}
.header-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; height:84px; gap:24px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mark{ width:38px; height:38px; color:var(--moss); flex-shrink:0; }
.brand-mark svg{ width:100%; height:100%; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-family:var(--font-display); font-size:1.28rem; color:var(--spruce); font-weight:400; text-transform:uppercase; letter-spacing:.01em; }
.brand-text small{ color:var(--stone); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-body); }

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav ul{ display:flex; gap:30px; }
.main-nav a{
  font-weight:700; color:var(--ink); font-size:.82rem; position:relative; padding:6px 0;
  text-transform:uppercase; letter-spacing:.06em;
}
.main-nav a:hover, .main-nav a.active{ color:var(--moss); }
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--moss);
}
.nav-cta.btn{
  padding:13px 22px 13px 24px; text-transform:none; letter-spacing:0; font-size:.88rem;
  font-weight:700; border-radius:999px; gap:8px;
}
.nav-cta.btn::after{ content:none; }
.nav-cta svg{ width:15px; height:15px; transition:transform .18s ease; }
.nav-cta:hover svg{ transform:translateX(3px); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; background:transparent; border:1.5px solid var(--spruce); border-radius:var(--radius-sm);
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--spruce); margin:0 auto; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- */
/* Flash messages                                                   */
/* ---------------------------------------------------------------- */
.flash-wrap{ margin-top:18px; }
.flash{ padding:15px 18px; border-radius:var(--radius-sm); margin-bottom:12px; font-weight:600; border-left:4px solid; }
.flash-success{ background:#eaf3ee; color:var(--moss-dark); border-color:var(--moss); }
.flash-error{ background:#fbeee9; color:#963f1c; border-color:#b5572c; }

/* ---------------------------------------------------------------- */
/* Sarok-dekoracio: nagyon visszafogott, halvany level-vizjel -       */
/* csak egy aprocska brand-utalas, nem domináns forma. Mobilon        */
/* teljesen elrejtjuk, hogy sose zavarja a szoveget.                  */
/* ---------------------------------------------------------------- */
.corner-deco{
  background-image:var(--leaf-icon);
  background-repeat:no-repeat; background-position:top right; background-size:120px 120px;
  opacity:.14;
}
.corner-deco.deco-tl{ background-position:top left; transform:scaleX(-1); }
.corner-deco.deco-br{ background-position:bottom right; transform:scaleY(-1); }
.corner-deco.deco-bl{ background-position:bottom left; transform:scale(-1,-1); }
@media (max-width: 760px){ .corner-deco{ display:none; } }

/* ---------------------------------------------------------------- */
/* Ring divider - szekciok kozotti visszatero elem (level ikon)      */
/* ---------------------------------------------------------------- */
.ring-divider{ display:flex; align-items:center; gap:18px; justify-content:center; margin:0; }
.ring-divider::before, .ring-divider::after{ content:""; height:1px; background:var(--stone-200); flex:1; max-width:220px; }
.ring-divider svg{ width:22px; height:22px; color:var(--moss); flex-shrink:0; }

/* ---------------------------------------------------------------- */
/* Hero - vilagos alap + sarok-hullam dekoracio (mint a nevjegykartya) */
/* ---------------------------------------------------------------- */
.hero{
  position:relative; color:var(--ink); overflow:hidden; background:var(--birch);
  isolation:isolate; border-bottom:1px solid var(--stone-200);
}
.hero::before{
  content:""; position:absolute; top:0; right:0; width:130px; height:130px; z-index:0; pointer-events:none;
  background-image:var(--leaf-icon);
  background-repeat:no-repeat; background-size:100% 100%; opacity:.14;
}
@media (max-width: 760px){ .hero::before{ display:none; } }
/* padding-top/bottom csak - a .hero-inner ugyanazon az elemen van, mint
   a .container, egy sima "padding:110px 0 96px" a container bal/jobb
   28px-es margojat is lenullazna */
.hero-inner{ position:relative; z-index:2; padding-top:110px; padding-bottom:96px; display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:end; }
.hero-copy{ max-width:640px; }
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  padding:0; font-size:.78rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:22px; color:var(--moss);
}
.hero-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--moss); flex-shrink:0; }
.hero h1{
  color:var(--spruce); font-size:clamp(2.3rem, 4.6vw, 3.9rem); margin-bottom:24px; font-weight:400;
}
.hero h1 em{ font-style:normal; color:var(--moss); }
.hero p.lead{ color:var(--ink); opacity:.82; font-size:1.1rem; max-width:520px; margin-bottom:38px; font-family:var(--font-body); }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-side{ position:relative; z-index:2; }
.hero-figure{
  border:1.5px solid var(--stone-200); border-radius:var(--radius-md); padding:26px;
  background:var(--birch-2);
}
.hero-figure dl{ display:grid; gap:18px; margin:0; }
.hero-figure div{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:1px solid var(--stone-200); padding-bottom:14px; }
.hero-figure div:last-child{ border-bottom:none; padding-bottom:0; }
.hero-figure dt{ font-size:.78rem; color:var(--stone); text-transform:uppercase; letter-spacing:.05em; }
.hero-figure dd{ margin:0; font-family:var(--font-display); font-weight:400; font-size:1.15rem; color:var(--spruce); text-align:right; text-transform:uppercase; }

/* ---------------------------------------------------------------- */
/* Section base                                                     */
/* ---------------------------------------------------------------- */
section{ padding:100px 0; position:relative; }
section.tight{ padding:64px 0; }
.section-head{ max-width:640px; margin:0 auto 54px; text-align:center; }
.section-head.left{ margin:0 0 48px; text-align:left; max-width:640px; }
.section-head h2{ font-size:clamp(1.7rem, 3.2vw, 2.5rem); }
.section-head p{ color:var(--stone); font-size:1.05rem; }
.bg-alt{ background:var(--birch-2); }
.bg-dark{ background:var(--spruce); color:var(--birch); position:relative; overflow:hidden; }
.bg-dark h2, .bg-dark h3{ color:var(--birch); }
.bg-dark p{ color:rgba(255,255,255,.8); }
.bg-dark .eyebrow{ color:rgba(255,255,255,.8); }
.bg-dark .eyebrow::before{ background:var(--sage); }

/* Kiemelt "level-kartyas" szekcio - a kiadvany harom fo blokkjahoz
   (Rendelkezesre allunk / Karbantartastol a takaritasig / Sajat
   eszkozpark) hasznalt egyseges, sarok-dekoracios feher panel. */
.feature-block{ position:relative; overflow:hidden; border-top:6px solid var(--stone-200); }
.feature-block + .feature-block{ border-top-color:var(--birch-2); }
.feature-block-inner{ position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:center; }
.feature-icon{
  width:60px; height:60px; margin:0 auto 22px; border-radius:50%; background:var(--birch-2);
  display:flex; align-items:center; justify-content:center; color:var(--moss);
}
.feature-icon svg{ width:30px; height:30px; }
.feature-block h2{ font-size:clamp(1.6rem,3vw,2.3rem); margin-bottom:20px; }
.feature-block p{ color:var(--ink); opacity:.82; font-size:1.02rem; max-width:640px; margin:0 auto 1.2em; }
.feature-block .accent-line{ font-weight:700; color:var(--moss); text-transform:uppercase; letter-spacing:.03em; font-style:normal; }

/* ---------------------------------------------------------------- */
/* Intro / about snippet                                            */
/* ---------------------------------------------------------------- */
.intro-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.intro-visual{ position:relative; aspect-ratio:1/1; }
.intro-visual svg{ width:100%; height:100%; }
.intro-points{ display:grid; gap:22px; margin-top:30px; }
.intro-point{ display:flex; gap:16px; align-items:flex-start; border-top:1px solid var(--stone-200); padding-top:20px; }
.intro-point:first-child{ border-top:none; padding-top:0; }
.intro-point .ico{ width:20px; height:20px; color:var(--moss); flex-shrink:0; margin-top:3px; }
.intro-point .ico svg{ width:100%; height:100%; }
.intro-point h4{ margin-bottom:4px; font-size:1rem; font-family:var(--font-body); font-weight:700; text-transform:none; color:var(--ink); letter-spacing:0; }
.intro-point p{ margin:0; color:var(--stone); font-size:.94rem; }

/* ---------------------------------------------------------------- */
/* Services - "munkalap" ledger lista, NEM kartyaracs                */
/* ---------------------------------------------------------------- */
.service-ledger{ border-top:1px solid var(--spruce); }
.service-row{
  display:grid; grid-template-columns:32px 68px 1fr auto; gap:22px; align-items:center;
  padding:28px 8px; border-bottom:1px solid var(--stone-200); position:relative;
  transition:padding-left .2s ease, background-color .2s ease;
}
.service-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--moss);
  transition:width .2s ease;
}
.service-row:hover{ padding-left:22px; background:rgba(66,121,97,.06); }
.service-row:hover::before{ width:4px; }
.service-index{
  font-family:var(--font-display); color:var(--stone-200); font-size:1.5rem;
  font-weight:400; line-height:1; text-align:right;
}
.service-icon{
  width:68px; height:68px; border:1.5px solid var(--stone-200); border-radius:50%; color:var(--moss);
  background:var(--card); display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:border-color .2s ease, background-color .2s ease;
}
.service-row:hover .service-icon{ border-color:var(--moss); background:var(--birch-2); }
.service-icon svg{ width:30px; height:30px; }
.service-row h3{ font-size:1.14rem; margin-bottom:5px; }
.service-row p{ color:var(--stone); font-size:.92rem; margin:0; max-width:var(--measure); text-transform:none; }
.service-arrow{ width:18px; height:18px; color:var(--stone); transition:transform .2s ease, color .2s ease; }
.service-row:hover .service-arrow{ transform:translateX(4px); color:var(--moss); }
.services-more{ text-align:center; margin-top:48px; }

/* ---------------------------------------------------------------- */
/* Advantages - stat strip                                           */
/* ---------------------------------------------------------------- */
.adv-strip{ display:grid; grid-template-columns:repeat(4, 1fr); }
.adv-card{ padding:8px 28px; border-left:1px solid var(--stone-200); }
.adv-card:first-child{ border-left:none; padding-left:0; }
.adv-card h4{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; margin-bottom:8px; }
.adv-card p{ color:var(--stone); font-size:.9rem; margin:0; }

/* ---------------------------------------------------------------- */
/* Gallery (munkaink)                                                */
/* ---------------------------------------------------------------- */
.gallery-toolbar{
  display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  margin-bottom:40px; border-bottom:1px solid var(--stone-200); padding-bottom:28px;
}
.filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.filter-tab{
  padding:9px 16px; border-radius:999px; background:transparent; color:var(--ink);
  font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em;
  border:1px solid var(--stone-200); cursor:pointer; transition:.15s; font-family:var(--font-body);
}
.filter-tab:hover{ border-color:var(--moss); }
.filter-tab.active{ background:var(--spruce); color:var(--birch); border-color:var(--spruce); }
.search-box{ position:relative; min-width:240px; }
.search-box input{
  width:100%; padding:11px 16px 11px 38px; border-radius:999px; border:1px solid var(--stone-200);
  font-size:.9rem; background:var(--card);
}
.search-box input:focus{ outline:2px solid var(--moss); outline-offset:1px; }
.search-box svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--stone); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px; }
.project-card{
  overflow:hidden; background:var(--card); border:1px solid var(--stone-200);
  cursor:pointer; transition:.2s; display:flex; flex-direction:column; border-radius:var(--radius-md);
}
.project-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--moss); }
.project-thumb{ aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--birch-2); }
.project-thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.project-card:hover .project-thumb img{ transform:scale(1.06); }
.project-thumb .badge-count{
  position:absolute; right:10px; bottom:10px; background:rgba(51,68,60,.82); color:#fff;
  font-size:.7rem; padding:4px 9px; border-radius:var(--radius-tag); font-weight:700;
}
.project-body{ padding:22px 24px 26px; flex-grow:1; display:flex; flex-direction:column; }
.project-cat{
  display:inline-block; align-self:flex-start; background:transparent; color:var(--moss);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:0; margin-bottom:10px; border-bottom:1px solid var(--moss);
}
.project-body h3{ font-size:1.08rem; margin-bottom:8px; }
.project-body p{ color:var(--stone); font-size:.9rem; margin-bottom:14px; flex-grow:1; }
.project-date{ color:var(--stone); font-size:.78rem; font-weight:600; letter-spacing:.03em; }
.gallery-empty{ text-align:center; padding:60px 20px; color:var(--stone); display:none; }
.gallery-empty.show{ display:block; }
.featured-badge{
  position:absolute; left:10px; top:10px; background:var(--moss); color:#fff; font-size:.68rem;
  font-weight:700; padding:4px 10px; border-radius:var(--radius-tag); text-transform:uppercase; letter-spacing:.04em;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(23,30,26,.95); z-index:2000; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{ max-width:1000px; width:100%; }
.lightbox-figure{ position:relative; }
.lightbox-figure img{ width:100%; max-height:66vh; object-fit:contain; border-radius:var(--radius-sm); background:#000; }
.lightbox-close{
  position:absolute; top:-46px; right:0; background:none; border:none; color:#fff; font-size:1.8rem;
  cursor:pointer; line-height:1;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.14);
  border:none; color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-nav:hover{ background:var(--moss); }
.lightbox-nav.prev{ left:-8px; } .lightbox-nav.next{ right:-8px; }
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-caption{ color:#fff; margin-top:18px; }
.lightbox-caption h3{ color:#fff; margin-bottom:6px; }
.lightbox-caption p{ color:rgba(255,255,255,.75); margin-bottom:6px; }
.lightbox-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:.85rem; color:rgba(255,255,255,.6); }
.lightbox-counter{ text-align:center; color:rgba(255,255,255,.6); font-size:.85rem; margin-top:10px; }

/* ---------------------------------------------------------------- */
/* CTA band - tomor zold sav, ahogy a szorolap lablece                */
/* ---------------------------------------------------------------- */
.cta-band{
  background:var(--spruce); color:var(--birch); border-radius:var(--radius-md); padding:60px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
  position:relative; overflow:hidden;
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:var(--birch); margin-bottom:8px; }
.cta-band p{ color:rgba(255,255,255,.8); margin:0; }
.cta-band-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------------------------------------------------------------- */
/* Forms                                                             */
/* ---------------------------------------------------------------- */
.form-card{
  background:var(--card); border:1px solid var(--stone-200); border-radius:var(--radius-md); padding:44px;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-group{ margin-bottom:22px; display:flex; flex-direction:column; gap:8px; }
.form-group.full{ grid-column:1 / -1; }
label{ font-weight:700; font-size:.78rem; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; }
label .req{ color:var(--moss); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password],
input[type=file], input[type=search], select, textarea{
  width:100%; padding:13px 15px; border:1px solid var(--stone-200); border-radius:var(--radius-sm);
  font-size:.95rem; font-family:inherit; background:var(--white); color:var(--ink);
}
textarea{ resize:vertical; min-height:130px; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--moss); box-shadow:0 0 0 3px rgba(66,121,97,.16); }
.form-hint{ color:var(--stone); font-size:.8rem; text-transform:none; letter-spacing:0; font-weight:400; }
.form-error{ color:#963f1c; font-size:.82rem; }
.checkbox-row{ display:flex; align-items:center; gap:10px; }
.checkbox-row input{ width:auto; }

/* Contact split */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start; }
.contact-info-card{
  background:var(--spruce); color:var(--birch); border-radius:var(--radius-md); padding:40px; height:100%;
  position:relative; overflow:hidden;
}
.contact-info-card > *{ position:relative; z-index:1; }
.contact-info-card h3{ color:var(--birch); }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:22px; }
.contact-info-item:last-of-type{ border-bottom:none; }
.contact-info-item .ico{ width:20px; height:20px; color:var(--sage); flex-shrink:0; margin-top:3px; }
.contact-info-item .ico svg{ width:100%; height:100%; }
.contact-info-item a, .contact-info-item span{ color:rgba(255,255,255,.9); }

/* ---------------------------------------------------------------- */
/* Footer                                                            */
/* ---------------------------------------------------------------- */
.site-footer{ background:var(--spruce); color:rgba(255,255,255,.78); padding:70px 0 0; position:relative; overflow:hidden; }
.footer-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; }
.footer-col h3{ color:var(--birch); font-family:var(--font-body); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:18px; font-weight:700; }
.footer-col ul{ display:grid; gap:11px; }
.footer-col a{ color:rgba(255,255,255,.7); font-size:.92rem; }
.footer-col a:hover{ color:var(--birch); }
.footer-brand .brand-mark{ color:var(--sage); }
.footer-brand p{ color:rgba(255,255,255,.85); margin:16px 0 6px; font-family:var(--font-display); font-weight:400; font-size:1.1rem; text-transform:uppercase; }
.footer-slogan{ font-size:.86rem; color:rgba(255,255,255,.55) !important; font-family:var(--font-body) !important; text-transform:none !important; }
/* .footer-bottom ugyanazon az elemen van, mint a .container - csak
   fuggoleges paddingot adunk neki, kulonben a bal/jobb 28px-et lenullazna */
.footer-bottom{ position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.14); padding-top:22px; padding-bottom:22px; font-size:.8rem; color:rgba(255,255,255,.55); }

/* ---------------------------------------------------------------- */
/* Misc pages: legal, about                                          */
/* ---------------------------------------------------------------- */
.prose{ max-width:760px; margin:0 auto; }
.prose h2{ margin-top:1.8em; font-size:1.5rem; }
.prose ul{ list-style:none; padding-left:0; margin-bottom:1em; }
.prose ul li{ margin-bottom:.6em; padding-left:22px; position:relative; }
.prose ul li::before{ content:"—"; position:absolute; left:0; color:var(--moss); }
.placeholder{ background:var(--birch-2); padding:1px 6px; border-radius:3px; font-family:monospace; color:var(--stone); border:1px dashed var(--stone-200); }

.page-hero{ background:var(--birch); color:var(--ink); padding:76px 0; position:relative; overflow:hidden; border-bottom:1px solid var(--stone-200); }
.page-hero::before{
  content:""; position:absolute; top:0; right:0; width:110px; height:110px; pointer-events:none; opacity:.14;
  background-image:var(--leaf-icon);
  background-repeat:no-repeat; background-size:100% 100%;
}
@media (max-width: 760px){ .page-hero::before{ display:none; } }
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:var(--spruce); margin-bottom:10px; }
.page-hero p{ color:var(--stone); margin:0; font-size:1.05rem; text-transform:none; }

/* ---------------------------------------------------------------- */
/* Responsive                                                        */
/* ---------------------------------------------------------------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-side{ display:none; }
  .intro-grid{ grid-template-columns:1fr; }
  .intro-visual{ max-width:280px; margin:0 auto; }
  .adv-strip{ grid-template-columns:repeat(2,1fr); row-gap:24px; column-gap:20px; }
  .adv-card{ border-left:none; padding-left:0; }
  .adv-card:nth-child(2n){ border-left:1px solid var(--stone-200); padding-left:24px; }
  .adv-card:nth-child(n+3){ border-top:1px solid var(--stone-200); padding-top:22px; }
  .service-row{ grid-template-columns:56px 1fr auto; gap:18px; }
  .service-index{ display:none; }
  .service-icon{ width:56px; height:56px; }
  .service-icon svg{ width:26px; height:26px; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 760px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:fixed; top:84px; left:0; right:0; bottom:0; background:var(--birch); flex-direction:column;
    align-items:stretch; padding:28px 28px; gap:22px; transform:translateX(100%); transition:.25s ease;
    overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; gap:4px; }
  .main-nav ul a{ display:block; padding:16px 4px; border-bottom:1px solid var(--stone-200); }
  .nav-cta{ width:100%; text-align:center; justify-content:center; }
  /* csak a fuggoleges paddingot allitjuk - a .hero-inner ugyanazon az
     elemen van, mint a .container, igy egy sima "padding:52px 0 60px"
     a bal/jobb oldali 28px-et is lenullazna es a szoveg a kepernyo
     szelere tapadna */
  .hero-inner{ padding-top:52px; padding-bottom:60px; }
  .hero-tag{ font-size:.72rem; letter-spacing:.08em; margin-bottom:20px; gap:8px; }
  .hero h1{ font-size:clamp(1.9rem, 8vw, 2.4rem); margin-bottom:18px; }
  .hero p.lead{ font-size:1.02rem; margin-bottom:30px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  /* Keskeny kijelzon a nagybetus, betukozos gomb-feliratok tortek nelkul
     kilogtak volna a kepernyo szelere - mobilon engedjuk oket tordelodni. */
  .btn{ white-space:normal; text-align:center; }
  .hero-actions .btn{ width:100%; }
  section{ padding:56px 0; }
  .section-head{ margin-bottom:38px; }
  .service-row{ grid-template-columns:48px 1fr; gap:16px; padding:22px 4px; }
  .service-icon{ width:48px; height:48px; }
  .service-icon svg{ width:22px; height:22px; }
  .service-arrow{ display:none; }
  .adv-strip{ grid-template-columns:1fr; row-gap:0; }
  .adv-card{ border-left:none !important; padding-left:0 !important; border-top:1px solid var(--stone-200); padding-top:20px; padding-bottom:20px; }
  .adv-card:first-child{ border-top:none; padding-top:0; }
  .gallery-toolbar{ flex-direction:column; align-items:stretch; }
  .search-box{ min-width:0; width:100%; }
  .gallery-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:36px 26px; flex-direction:column; text-align:center; }
  .footer-grid{ grid-template-columns:1fr; }
  .form-card{ padding:26px; }
  .lightbox-nav{ width:38px; height:38px; }
  .lightbox-nav.prev{ left:-2px; } .lightbox-nav.next{ right:-2px; }
}

/* ---------------------------------------------------------------- */
/* Reduced motion                                                    */
/* ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
}

/* ---------------------------------------------------------------- */
/* Floating Phone Button                                            */
/* ---------------------------------------------------------------- */
.floating-phone-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: var(--moss);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.25s ease;
  text-decoration: none;
}

.floating-phone-btn svg {
  width: 24px;
  height: 24px;
  transition: transform 0.25s ease;
}

.floating-phone-btn:hover {
  background-color: var(--moss-dark);
  transform: scale(1.1);
  box-shadow: 0 10px 25px rgba(38, 51, 44, 0.4);
}

.floating-phone-btn:hover svg {
  transform: rotate(15deg);
}

/* Pulsing effect to make it feel alive and premium */
.floating-phone-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--moss);
  border-radius: 50%;
  opacity: 0.4;
  animation: phonePulse 2s infinite;
  pointer-events: none;
}

@keyframes phonePulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Responsive adjustments if needed */
@media (max-width: 760px) {
  .floating-phone-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  .floating-phone-btn svg {
    width: 22px;
    height: 22px;
  }
}