/* ==========================================================================
   Zala Megyei Vállalkozók Egyesülete — közös stíluslap
   Minden oldal ezt a fájlt tölti be. Design tokenek a :root alatt.
   ========================================================================== */

:root{
  /* Az oldalnak nincs saját sötét témája — enélkül egyes böngészők
     (főleg Android Chrome) automatikusan, esetlegesen "sötétítik" a
     tartalmat egy rendszer-szintű sötét móddal, ami elrontja a
     színeket/kontrasztot. Ez a jelzés kikapcsolja azt: az oldal
     mindenhol ugyanúgy, a tervezett világos témában jelenik meg. */
  color-scheme: light;

  --ink:#1A2430;
  --navy:#0D2F5B;
  --navy-2:#081D38;
  --blue:#0D71B6;
  --blue-dark:#0A5690;
  --green:#2E9E3D;
  --green-dark:#26802F;
  --paper:#F3F6F8;
  --surface:#FFFFFF;
  --border:#DCE3E8;
  --border-strong:#BFCAD2;
  --muted:#5B6772;
  --muted-2:#8494A0;

  --display:"Archivo","IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --serif:var(--display);
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --container:1180px;
  --measure:640px;

  /* Motion design tokens — shared easing/duration scale so every transition
     and reveal animation across the site feels like one system. */
  --ease-premium:cubic-bezier(.16,.8,.24,1);
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:.2s;
  --dur-base:.4s;
  --dur-slow:.7s;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--surface);}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:800;color:var(--navy);letter-spacing:-.015em;}
p{margin:0;}

.skip-link{
  position:absolute;left:0;top:0;background:var(--navy);color:#fff;
  font-size:14px;font-weight:600;z-index:200;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}
.skip-link:focus{
  width:auto;height:auto;padding:12px 20px;margin:0;overflow:visible;
  clip-path:none;white-space:normal;
}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}

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

.demo-note{
  background:#FBF6E9;color:#5C4A12;font-size:13px;text-align:center;
  padding:8px 16px;border-bottom:1px solid #EDE0BC;
}

.kicker{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--blue);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:18px;
}
.kicker::before{content:"";width:22px;height:2px;background:currentColor;display:block;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  font-size:12.5px;color:var(--muted-2);margin-bottom:18px;
}
.breadcrumb a{color:var(--muted);text-decoration:none;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb .sep{color:var(--border-strong);}
.breadcrumb .current{color:var(--muted-2);}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--border);
}
@supports (backdrop-filter: blur(6px)){
  header{backdrop-filter:blur(10px);}
}
.navbar{
  display:flex;align-items:stretch;justify-content:space-between;position:relative;
  max-width:var(--container);margin:0 auto;padding:0 44px;
}
.logo{display:flex;align-items:center;gap:12px;line-height:1.15;padding:22px 0;flex:none;}
.logo-mark{width:42px;height:42px;max-width:none;flex:none;object-fit:contain;}
.logo .text{display:flex;flex-direction:column;}
.logo .name{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--navy);letter-spacing:-.01em;}
.logo .sub{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;}
@media (min-width: 1600px){
  .logo .logo-mark{width:54px;height:54px;}
}

nav.mainnav{display:flex;align-items:stretch;gap:0;flex:1;justify-content:center;position:static;transform:translateX(-70px);}
@media (max-width:1400px){
  nav.mainnav{transform:translateX(0);}
}
nav.mainnav > a{
  font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;
  padding:22px 18px;display:flex;align-items:center;justify-content:center;
  border-left:1px solid var(--border);
  transition:background .12s,color .12s;
  flex:none;white-space:nowrap;
}
nav.mainnav > a:hover{color:var(--navy);background:var(--paper);}
nav.mainnav > a.active{color:var(--blue);background:var(--paper);}
.nav-cta{
  background:var(--navy);color:#fff !important;text-decoration:none !important;
  font-weight:700 !important;border-left:none !important;
  border:2px solid var(--blue) !important;
  transition:background .15s;
}
.nav-cta:hover{background:var(--blue) !important;color:#fff !important;}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:22px;height:2px;background:var(--navy);margin:5px 0;transition:.2s;}

.mobile-panel{
  display:none;position:fixed;top:73px;left:0;right:0;bottom:0;background:#fff;z-index:70;
  padding:8px 24px 40px;overflow-y:auto;
}
.mobile-panel.open{display:block;}
.mobile-panel a{
  display:block;padding:16px 0;font-size:17px;font-weight:500;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--border);
}
.mobile-panel a.active{color:var(--blue);}
.mobile-panel .nav-cta{margin-top:20px;text-align:center;}

.mobile-panel .mp-item{border-bottom:1px solid var(--border);}
.mobile-panel .mp-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 0;font-size:17px;font-weight:500;color:var(--ink);
  background:none;border:none;text-align:left;cursor:pointer;font-family:inherit;
}
.mobile-panel .mp-toggle.active{color:var(--blue);}
.mobile-panel .mp-chev{
  flex:none;width:9px;height:9px;margin-left:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .2s;
}
.mobile-panel .mp-item.open .mp-chev{transform:rotate(-135deg);}
.mobile-panel .mp-sub{
  display:none;padding:10px 12px 12px 16px;margin:2px 0 8px;
  background:linear-gradient(180deg,var(--navy-2) 0%,var(--blue) 50%,var(--navy-2) 100%);
}
.mobile-panel .mp-sub a{color:#fff;border-bottom-color:rgba(255,255,255,.2);}
.mobile-panel .mp-sub a:hover,.mobile-panel .mp-sub a:active{color:#fff;text-decoration:underline;}
.mobile-panel .mp-sub-photo{
  margin:2px 0 10px;aspect-ratio:16/7;background:rgba(255,255,255,.08);
  clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
}
.mobile-panel .mp-sub-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.mobile-panel .mp-item.open .mp-sub{display:block;}
.mobile-panel .mp-sub a{
  padding:11px 0;font-size:15.5px;font-weight:500;border-bottom:1px dashed var(--border);
}
.mobile-panel .mp-sub a:last-child{border-bottom:none;}

/* ---------- Hero (homepage, full-bleed photo) ---------- */
.hero{position:relative;color:#fff;background:var(--navy-2);overflow:hidden;isolation:isolate;}
.hero-media{position:absolute;inset:0;z-index:0;background:var(--navy-2);}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:.92;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(8,29,56,.96) 0%,rgba(8,29,56,.91) 34%,rgba(8,29,56,.62) 62%,rgba(8,29,56,.28) 100%);
}
.hero-grid{position:relative;z-index:1;padding-top:118px;padding-bottom:90px;max-width:660px;margin:0;text-align:left;}
.hero .kicker{color:#8FC7EE;}
.hero h1{
  font-size:clamp(30px,3.6vw,44px);line-height:1.15;font-weight:800;color:#fff;
  max-width:17ch;margin:0 0 26px;
}
.hero .lead{
  font-size:17.5px;color:rgba(255,255,255,.84);max-width:var(--measure);margin:0 0 32px;line-height:1.65;
}
.hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:0;}
.hero-actions .text-link{color:#fff;border-color:rgba(255,255,255,.5);}
.hero-actions .text-link:hover{color:#8FC7EE;border-color:#8FC7EE;}

/* Split variant (homepage): text lives on a solid dark panel, the photo is
   its own full-height column next to it — nothing printed over the people. */
.hero-split-inner{
  display:grid;grid-template-columns:minmax(0,560px) 1fr;align-items:stretch;
  max-width:none;margin:0;gap:0;
}
.hero-split .hero-text{
  position:relative;z-index:1;padding:80px 56px 80px 0;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-split .hero-media{position:relative;inset:auto;min-height:560px;}
.hero-split .hero-media::after{background:rgba(8,17,28,.42);}
.hero-split .breadcrumb a{color:rgba(255,255,255,.7);}
.hero-split .breadcrumb a:hover{color:#fff;}
.hero-split .breadcrumb .current{color:rgba(255,255,255,.9);}
.hero-split .breadcrumb .sep{color:rgba(255,255,255,.35);}
.hero-split .hero-quote{background:rgba(0,0,0,.22);backdrop-filter:none;border-color:var(--border-strong,rgba(255,255,255,.14));}

@media (max-width:980px){
  .hero-split-inner{grid-template-columns:1fr;}
  .hero-split .hero-text{padding:56px 24px 40px;}
  .hero-split .hero-media{min-height:340px;}
}

/* Compact split variant — the 6 tevékenységeink detail pages. Same idea as the
   homepage split (text left, photo right, nothing printed over the photo),
   but much shorter, with the old page-hero's bottom hairline back, and the
   photo butting straight up against the text with no gap — the divider is
   just the photo's own left border, not a gutter. */
.hero-split-sm{border-bottom:1px solid rgba(255,255,255,.22);}
/* there's no text sitting on this photo (it's off to the side, on its own
   panel), so it doesn't need the heavy dark tint that a text-over-photo
   hero needs for contrast — keep it bright/vivid like rolunk.html's photo. */
.hero-split-sm .hero-media::after{background:rgba(8,17,28,.08);}
.hero-split-sm .hero-media img{opacity:1;}
.hero-split-sm .hero-text{padding:48px 0 48px 0;}
/* same photo scale as rolunk.html's page-hero.has-photo (~457px tall at
   1400px viewport) — the split layout keeps the text off the photo, but
   the photo itself should read at the same size/prominence. */
.hero-split-sm .hero-media{min-height:460px;border-left:1px solid rgba(255,255,255,.24);}
/* the photo is a header-style image, not a padded card — it runs flush to
   the page's own edge with no gutter (only the text side keeps the usual
   .wrap inset), so kill the right-hand padding the shared .wrap rule adds. */
.hero-split-sm .hero-split-inner{padding-right:0;}
@media (max-width:980px){
  .hero-split-sm .hero-text{padding:40px 24px 28px;}
  .hero-split-sm .hero-media{min-height:340px;border-left:none;border-top:1px solid rgba(255,255,255,.24);}
  .hero-split-sm .hero-split-inner{padding:0;}
}

.hero-quote{
  position:relative;margin-top:44px;max-width:480px;padding:22px 26px 22px 28px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:4px;
}
.hero-quote::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg,var(--blue),var(--green));
}
.hero-quote p{
  font-family:var(--display);font-style:normal;font-weight:600;
  font-size:clamp(16px,1.6vw,18px);line-height:1.5;color:#fff;margin:0 0 14px;letter-spacing:-.005em;
}
.hero-quote cite{
  font-style:normal;font-size:12px;font-weight:600;color:rgba(255,255,255,.68);
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- Page hero (interior pages, single column, photo variant) ---------- */
.page-hero{
  padding:44px 0 60px;border-bottom:1px solid var(--border);background:var(--paper);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy),var(--blue) 45%,var(--green));
}
.page-hero h1{
  font-size:clamp(28px,3.6vw,38px);line-height:1.2;max-width:18ch;margin:0 0 16px;
}
.page-hero .lead{font-size:16.5px;color:var(--muted);max-width:var(--measure);line-height:1.65;}

.page-hero.has-photo{padding:0;background:var(--navy-2);color:#fff;}
.page-hero.has-photo::before{display:none;}
.page-hero.has-photo .hero-media img{opacity:1;}
.page-hero.has-photo .hero-media::after{
  background:linear-gradient(100deg,rgba(8,29,56,.88) 0%,rgba(8,29,56,.68) 26%,rgba(8,29,56,.22) 56%,rgba(8,29,56,.04) 82%);
}
.page-hero.has-photo .wrap{position:relative;z-index:1;max-width:none;padding:64px 44px 56px;}
.page-hero.has-photo .kicker{color:#8FC7EE;}
.page-hero.has-photo h1{color:#fff;}
.page-hero.has-photo .lead{color:rgba(255,255,255,.84);}
.page-hero.has-photo .breadcrumb{position:relative;z-index:1;}
.page-hero.has-photo .breadcrumb a{color:rgba(255,255,255,.7);}
.page-hero.has-photo .breadcrumb a:hover{color:#fff;}
.page-hero.has-photo .breadcrumb .current{color:rgba(255,255,255,.9);}
.page-hero.has-photo .breadcrumb .sep{color:rgba(255,255,255,.35);}

/* ---------- Page hero, stacked photo variant (tevékenységeink detail pages) ----------
   Same full-width photo as .has-photo (same markup even — hero-media, then
   .wrap), but the photo is its own banner in normal flow instead of an
   absolute-positioned backdrop, and the text sits in its own block below it
   instead of overlaid on top — so the photo stays bright/uncropped-by-text,
   full page width, same scale as rolunk.html's team photo. */
.page-hero.has-photo-stack{padding:0;background:var(--navy-2);color:#fff;}
.page-hero.has-photo-stack::before{display:none;}
.page-hero.has-photo-stack .hero-media{position:relative;inset:auto;width:100%;height:340px;overflow:hidden;}
.page-hero.has-photo-stack .hero-media img{opacity:1;}
.page-hero.has-photo-stack .hero-media::after{
  background:linear-gradient(180deg,rgba(8,29,56,.14) 0%,rgba(8,29,56,.14) 62%,var(--navy-2) 100%);
}
.page-hero.has-photo-stack .wrap{position:relative;z-index:1;padding:44px 44px 48px;}
.page-hero.has-photo-stack .kicker{color:#8FC7EE;}
.page-hero.has-photo-stack h1{color:#fff;}
.page-hero.has-photo-stack .lead{color:rgba(255,255,255,.84);}
.page-hero.has-photo-stack .breadcrumb a{color:rgba(255,255,255,.7);}
.page-hero.has-photo-stack .breadcrumb a:hover{color:#fff;}
.page-hero.has-photo-stack .breadcrumb .current{color:rgba(255,255,255,.9);}
.page-hero.has-photo-stack .breadcrumb .sep{color:rgba(255,255,255,.35);}
@media (max-width:700px){
  .page-hero.has-photo-stack .hero-media{height:200px;}
  .page-hero.has-photo-stack .wrap{padding:32px 24px 36px;}
}

/* ---------- Buttons / links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;
  padding:14px 26px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-out-soft),
             box-shadow var(--dur-fast) var(--ease-out-soft);
}
.btn:active{transform:translateY(0);transition-duration:.08s;}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--border-strong);box-shadow:0 1px 2px rgba(13,113,182,0);}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(13,113,182,.55);}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--border-strong);}
.btn-outline:hover{border-color:var(--navy);transform:translateY(-1px);box-shadow:0 8px 16px -12px rgba(13,36,64,.35);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn-outline-light:hover{border-color:#fff;transform:translateY(-1px);}
.text-link{
  font-weight:600;font-size:14.5px;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--border-strong);padding-bottom:2px;
  transition:border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.text-link:hover{color:var(--blue);border-color:var(--blue);}

/* ---------- Section shell ---------- */
section{padding:84px 0;}
.alt-bg{background:var(--paper);}
.hairline-top{border-top:1px solid var(--border);}
.section-intro{max-width:var(--measure);margin-bottom:32px;}
.section-intro h2{font-size:clamp(24px,2.6vw,30px);line-height:1.28;margin-bottom:16px;}
.section-intro p{color:var(--muted);font-size:16px;margin-top:2px;}

/* ---------- About / long-form body text ---------- */
.about-body p{font-size:16.5px;color:var(--ink);max-width:var(--measure);line-height:1.75;}
.about-body p + p{margin-top:18px;}
.about-body h3{font-size:19px;margin:40px 0 16px;}
.about-body ul.plain-list{max-width:var(--measure);margin-top:10px;}
.about-body ul.plain-list li{
  font-size:15.5px;color:var(--ink);line-height:1.6;padding:14px 0;border-bottom:1px solid var(--border);
}
.about-body ul.plain-list li:last-child{border-bottom:none;}

/* ---------- Services / pillar tile grid ---------- */
.services-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);}
.service-item{
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  border-top:3px solid var(--navy);padding:32px 28px;position:relative;z-index:0;
  transition:background var(--dur-fast) var(--ease-standard),
             border-top-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-base) var(--ease-out-soft),
             box-shadow var(--dur-base) var(--ease-out-soft);
}
.service-item:hover{
  background:var(--paper);border-top-color:var(--blue);
  transform:translateY(-4px);box-shadow:0 20px 32px -22px rgba(13,36,64,.35);z-index:1;
}
a.service-item{display:block;text-decoration:none;color:inherit;}
.service-num{
  width:44px;height:44px;border-radius:50%;background:var(--paper);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  transition:background .15s,border-color .15s;
}
.service-num svg{color:var(--navy);width:20px;height:20px;transition:color .15s;}
.service-item:hover .service-num{background:var(--blue);border-color:var(--blue);}
.service-item:hover .service-num svg{color:#fff;}
.service-item h3{font-family:var(--sans);font-size:16.5px;font-weight:700;color:var(--navy);margin:0 0 10px;}
.service-item p{font-size:14px;color:var(--muted);line-height:1.6;}
.service-item .more{display:block;margin-top:14px;font-size:13px;font-weight:700;color:var(--blue);}

/* ---------- Pillar detail page ---------- */
.pillar-icon-lg{
  width:64px;height:64px;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;margin-bottom:24px;flex:none;
}
.pillar-icon-lg svg{width:30px;height:30px;color:var(--navy);}
.pillar-icon-lg.has-photo{
  width:92px;height:92px;border-radius:10px;overflow:hidden;padding:0;
}
.pillar-icon-lg.has-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.pillar-links{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);margin-top:0;}
.pillar-links a{
  display:flex;align-items:center;gap:10px;padding:18px 20px;text-decoration:none;
  border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:13.5px;font-weight:600;color:var(--ink);transition:background .12s,color .12s;
}
.pillar-links a:hover{background:var(--paper);color:var(--blue);}
.pillar-links a.current{color:var(--blue);background:var(--paper);}
.pillar-links .pnum{font-family:var(--serif);color:var(--muted-2);font-size:13px;}

/* ---------- Goal list (17 célkitűzés) ---------- */
.goal-group{margin-bottom:28px;}
.goal-group:last-child{margin-bottom:0;}
.goal-group-head{display:flex;align-items:baseline;gap:12px;margin-bottom:0;padding-bottom:10px;border-bottom:2px solid var(--navy);}
.goal-group-head h3{font-size:18px;color:var(--navy);}
.goal-group-head .count{font-size:12.5px;color:var(--muted-2);font-weight:600;}
.goal-row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--border);}
.goal-row:last-child{border-bottom:none;}
.goal-row .gn{
  font-size:0;line-height:0;align-self:start;justify-self:center;
  width:9px;height:9px;margin-top:10px;border-radius:50%;
  background:var(--blue);
}
.goal-row p{font-size:15px;color:var(--ink);line-height:1.6;max-width:var(--measure);}

/* ---------- Membership / CTA band (dark, reusable) ---------- */
.member-band{background:var(--navy-2);color:#fff;margin:0 24px;}
.member-band-full{margin:0;}
.member-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start;}
.member-grid h2{color:#fff;margin-bottom:16px;}
.member-grid .lead{color:#C9D3DE;font-size:16px;max-width:480px;margin:0 0 32px;line-height:1.65;}
.benefit-list{display:grid;gap:16px;margin-bottom:0;}
.benefit-list li{
  display:flex;gap:12px;font-size:15px;color:#E4E9EE;padding-bottom:16px;border-bottom:2px solid rgba(255,255,255,.3);
}
.benefit-list li:last-child{border-bottom:none;padding-bottom:0;}
.benefit-list li::before{content:"✓";color:var(--green);flex:none;font-weight:700;}
.member-band .btn-primary{margin-top:8px;}

.cta-band{background:var(--navy-2);color:#fff;padding:64px 0;}
.cta-band-inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.cta-band h2{color:#fff;font-size:26px;margin-bottom:12px;}
.cta-band p{color:#C9D3DE;font-size:15.5px;max-width:480px;}
.cta-band .actions{display:flex;gap:14px;flex-wrap:wrap;flex:none;}

/* ---------- News / events ---------- */
.news-note{font-size:13.5px;color:var(--muted-2);margin:-24px 0 40px;font-style:italic;}
.empty-state{
  border:1px dashed var(--border-strong);border-radius:8px;
  padding:56px 24px;text-align:center;color:var(--muted);font-size:15.5px;
}
.news-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:0 56px;}
.news-list{border-top:1px solid var(--border);}
.news-row{display:grid;grid-template-columns:60px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--border);}
.date-chip{
  width:56px;height:56px;background:var(--navy);color:#fff;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.date-chip .d{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1;}
.date-chip .m{font-size:10px;text-transform:uppercase;letter-spacing:.05em;margin-top:3px;}
.news-row .tag{display:block;font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;}
.news-row h3{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--navy);margin:0 0 6px;}
.news-row p{font-size:14px;color:var(--muted);line-height:1.55;}

.events-col{border-left:1px solid var(--border);padding-left:56px;}
.events-col h3{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.07em;margin-bottom:22px;}
.event-row{padding:16px 0;border-bottom:1px solid var(--border);}
.event-row:first-of-type{padding-top:0;}
.event-row:last-child{border-bottom:none;}
.event-row .when{font-size:12.5px;font-weight:600;color:var(--blue);}
.event-row .what{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:5px;}
.event-row .where{font-size:13px;color:var(--muted);margin-top:3px;}

/* Full news/event list pages (single column, more detail) */
.list-page-row{display:grid;grid-template-columns:76px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid var(--border);}
.list-page-row:first-child{padding-top:0;}
.list-page-row .date-chip{width:64px;height:64px;}
.list-page-row .date-chip .d{font-size:21px;}
.list-page-row h3{font-size:17px;margin:6px 0 8px;}
.list-page-row p{font-size:14.5px;color:var(--muted);line-height:1.6;max-width:var(--measure);}

/* ---------- Partners / tile grid (reused for directory placeholders) ---------- */
.partners-line{font-size:15px;color:var(--muted);max-width:760px;line-height:1.8;margin-bottom:32px;}
.partners-line strong{color:var(--navy);font-weight:600;}
.partners-grid,.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);border-left:1px solid var(--border);}
.partner-box,.tile{
  height:84px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--muted-2);
  font-size:12px;font-weight:600;text-align:center;padding:10px;letter-spacing:.02em;
}

/* ---------- Testimonial ---------- */
.testimonial{max-width:640px;}
.testimonial p{
  font-family:var(--display);font-style:normal;font-weight:700;font-size:clamp(19px,2.1vw,23px);
  color:var(--navy);line-height:1.4;margin-bottom:18px;letter-spacing:-.01em;
}
.testimonial cite{font-style:normal;font-size:13.5px;color:var(--muted);}
.testimonial cite strong{color:var(--ink);font-weight:600;}

/* ---------- Contact / newsletter ---------- */
.contact-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;}
.contact-grid h2{font-size:22px;margin-bottom:12px;}
.contact-grid .lead{color:var(--muted);font-size:15px;max-width:420px;}
.nl-form{display:flex;gap:0;flex:none;}
.nl-form label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;}
.nl-form-inner{display:flex;}
.nl-form input{
  padding:13px 16px;border:1px solid var(--border-strong);border-right:none;font-size:14px;width:250px;
  font-family:var(--sans);background:#fff;border-radius:3px 0 0 3px;
}
.nl-form input:focus{outline:none;border-color:var(--navy);}
.nl-form button{
  background:var(--navy);color:#fff;border:1px solid var(--navy);padding:13px 22px;font-weight:600;cursor:pointer;
  font-family:var(--sans);font-size:14px;border-radius:0 3px 3px 0;transition:background .15s;
}
.nl-form button:hover{background:var(--blue);border-color:var(--blue);}

/* ---------- Two-column split (kapcsolat) ---------- */
.split-64{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start;}

/* ---------- Generic forms (jelentkezés / kapcsolat) ---------- */
.form-card{max-width:720px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.field .hint{font-size:12.5px;color:var(--muted-2);font-weight:400;text-transform:none;letter-spacing:0;}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:15px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--border-strong);background:#fff;width:100%;
}
.field textarea{resize:vertical;min-height:120px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);}
.field-row-check{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);}
.field-row-check input{width:auto;margin-top:3px;}

/* ---------- Custom file upload (jelentkezés) ---------- */
.file-upload{display:flex;flex-direction:column;gap:10px;}
.file-upload-trigger{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 16px;border:1.5px dashed var(--border-strong);
  background:#fff;color:var(--navy) !important;font-family:var(--sans);font-size:14.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s,background-color .15s;
}
.file-upload-trigger:hover{border-color:var(--blue);background:var(--paper);}
.file-upload-trigger svg{flex:none;color:var(--muted);}
.file-upload-input:focus-visible + .file-upload-trigger,
.file-upload input:focus-visible ~ .file-upload-trigger{outline:2px solid var(--blue);outline-offset:2px;}
.file-upload-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.file-upload-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px 9px 12px;border:1px solid var(--border);background:var(--paper);
  font-family:var(--sans);font-size:13.5px;color:var(--ink);
}
.file-upload-item .fu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.file-upload-item .fu-size{flex:none;margin-left:auto;color:var(--muted-2);font-size:12px;}
.file-upload-remove{
  flex:none;width:24px;height:24px;border-radius:50%;border:none;background:transparent;
  color:var(--muted);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s,color .15s;
}
.file-upload-remove:hover{background:#fbe4e1;color:#c0392b;}

/* ---------- Digitális aláírás (jelentkezés) ---------- */
.signature-pad-wrap{display:flex;flex-direction:column;gap:8px;}
.signature-pad{
  width:100%;height:180px;background:#fff;border:1px solid var(--border-strong);
  touch-action:none;cursor:crosshair;display:block;
}
.signature-pad-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.signature-pad-actions .hint{font-size:12.5px;color:rgba(255,255,255,.55);text-transform:none;font-weight:400;letter-spacing:normal;}
.signature-pad-actions .text-link{background:none;border:none;padding:0;font-family:var(--sans);cursor:pointer;}
.form-actions{margin-top:32px;padding-top:24px;border-top:1px solid var(--border);}
.form-note{font-size:13px;color:var(--muted-2);margin-top:14px;font-style:italic;}

/* ---------- Contact detail card (kapcsolat) ---------- */
.contact-detail-list{display:flex;flex-direction:column;}
.contact-detail{padding:18px 0;border-bottom:1px solid var(--border);}
.contact-detail:last-child{border-bottom:none;}
.contact-detail-label{
  display:block;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px;
}
.contact-detail p{font-size:16.5px;line-height:1.6;color:var(--ink);}

/* ---------- Tables (tagsági feltételek) ---------- */
.table-wrap{overflow-x:auto;border-top:1px solid var(--border);border-left:1px solid var(--border);}
table.tiers{width:100%;border-collapse:collapse;min-width:640px;}
table.tiers th,table.tiers td{
  text-align:left;padding:16px 20px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  font-size:14.5px;color:var(--ink);vertical-align:top;
}
table.tiers thead th{
  background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.05em;
}
table.tiers td.tier-name{font-weight:700;color:var(--navy);font-family:var(--serif);font-size:16px;}
table.tiers td.price{font-weight:600;color:var(--blue);white-space:nowrap;}

/* ---------- Document list ---------- */
.doc-list{border-top:1px solid var(--border);}
.doc-row{
  display:flex;align-items:center;gap:18px;padding:20px 4px;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;margin:0 -4px;border-radius:3px;
  transition:background var(--dur-fast) var(--ease-standard),padding-left var(--dur-fast) var(--ease-out-soft);
}
a.doc-row:hover{background:var(--paper);padding-left:12px;}
.doc-row .doc-icon{
  width:40px;height:40px;flex:none;border:1px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
}
.doc-row .doc-icon svg{width:18px;height:18px;}
.doc-row .doc-name{font-size:15px;font-weight:600;color:var(--navy);}
.doc-row .doc-meta{font-size:12.5px;color:var(--muted-2);margin-top:3px;}
.doc-row .doc-action{margin-left:auto;font-size:13px;font-weight:700;color:var(--blue);flex:none;}

/* ---------- Footer ---------- */
footer{background:var(--navy-2);color:#B7C2CD;padding:64px 0 0;overflow:hidden;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px;}
.footer-grid h4{color:#fff;font-family:var(--sans);font-size:12.5px;margin:0 0 20px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;}
.footer-grid li{margin-bottom:13px;font-size:14px;}
.footer-grid a{text-decoration:none;color:#B7C2CD;transition:color .15s;}
.footer-grid a:hover{color:#fff;}
.foot-logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);color:#fff;font-weight:700;font-size:18px;margin-bottom:14px;letter-spacing:-.01em;}
.foot-about p{font-size:14px;color:#8FA0AF;margin:0 0 20px;max-width:280px;line-height:1.6;}
.social-row{display:flex;gap:16px;}
.social-row a{color:#B7C2CD;transition:color .15s;text-decoration:none;font-size:13.5px;font-weight:600;}
.social-row a:hover{color:#fff;}
.social-row a.social-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;}
.social-row a.social-icon svg{width:30px;height:30px;}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:12.5px;
  color:#748492;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.09);
}
.foot-bottom .legal-links{display:flex;gap:22px;}
.foot-bottom a{color:#748492;text-decoration:none;}
.foot-bottom a:hover{color:#fff;}

/* ---------- County gateway (index.html) ---------- */
.navbar-gateway{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  padding-left:20px;padding-right:44px;max-width:none;margin:0;gap:24px;
}
.navbar-gateway .logo{grid-column:1;}
.navbar-gateway .burger{grid-column:3;justify-self:end;}
.navbar-gateway nav.mainnav{
  grid-column:2;justify-self:center;
  flex:none;margin:0;transform:none;position:static;display:flex;gap:0;justify-content:flex-start;
}
.navbar-gateway nav.mainnav > a{
  border:2px solid var(--border-strong);border-right:none;
  flex:none;min-width:clamp(100px,14vw,180px);text-align:center;justify-content:center;
  padding:clamp(16px,2vw,22px) clamp(8px,1.6vw,16px);font-size:clamp(12px,1.1vw,15px);
}
.navbar-gateway nav.mainnav > a:last-child{border-right:2px solid var(--border-strong);}
.navbar-gateway nav.mainnav > a.nav-cta{border-color:var(--blue);}

/* "Rólunk" mega-menu dropdown — same box as the other nav pills, but reveals a
   panel with the Rólunk sub-pages + a photo on hover/focus. */
.navbar-gateway nav.mainnav .mainnav-item{
  flex:none;min-width:clamp(100px,14vw,180px);
  border:2px solid var(--border-strong);border-right:none;
  display:flex;align-items:stretch;justify-content:center;
}
.navbar-gateway nav.mainnav .mainnav-item > a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,2vw,22px) clamp(8px,1.6vw,16px);font-size:clamp(12px,1.1vw,15px);font-weight:600;color:var(--ink);text-decoration:none;
  transition:background .12s,color .12s;
  border:none;min-width:0;
}
.navbar-gateway nav.mainnav .mainnav-item > a:hover,
.navbar-gateway nav.mainnav .mainnav-item:hover > a{color:var(--navy);background:var(--paper);}
.navbar-gateway nav.mainnav .mainnav-item > a.active{color:var(--blue);}
.navbar-gateway nav.mainnav .mainnav-item.has-dropdown > a::after{
  content:'';display:inline-block;margin-left:7px;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;vertical-align:middle;transition:transform .15s;
}
.mainnav-item.has-dropdown.menu-open > a::after,
.mainnav-item.has-dropdown:hover > a::after,
.mainnav-item.has-dropdown:focus-within > a::after{transform:rotate(180deg);}

/* Full-width mega-menu. header has position:sticky (a positioned ancestor),
   so position:absolute here resolves against it — top:100% always lands right
   below the header regardless of its height, and centering escapes the narrow
   nav-item box it lives in without needing any JS.
   Visibility itself is driven by JS (.menu-open, added with a short close-delay
   in nav-dropdown.js) rather than pure :hover — the menu is visually detached
   from its trigger (anchored to the header edge, not the button), so a straight
   mouse path from an off-centre button crosses a gap with nothing under the
   cursor; plain :hover chains drop out there. :hover/:focus-within stay as a
   no-JS fallback. */
.megamenu{
  position:absolute;top:100%;left:50%;
  width:min(1160px,94%);
  background:linear-gradient(180deg,var(--navy-2) 0%,var(--blue) 50%,var(--navy-2) 100%);
  border:none;box-shadow:0 24px 40px -20px rgba(0,0,0,.45);
  z-index:100;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity var(--dur-base) var(--ease-out-soft),
             transform var(--dur-base) var(--ease-out-soft),
             visibility var(--dur-base);
}
.mainnav-item.has-dropdown.menu-open .megamenu,
.mainnav-item.has-dropdown:hover .megamenu,
.mainnav-item.has-dropdown:focus-within .megamenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}

.megamenu-inner{display:flex;align-items:stretch;gap:28px;padding:28px 32px;height:340px;}
.megamenu-photo{
  flex:1 1 42%;max-width:42%;
  margin:-28px 0 -28px -32px;
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%);
  background:rgba(255,255,255,.08);
}
.megamenu-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.megamenu-cols{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding-top:4px;min-width:0;overflow-y:auto;max-height:100%;}
.megamenu-col{display:flex;flex-direction:column;min-width:0;}
.megamenu-col a{
  display:block;padding:7px 4px;border:none;line-height:1.35;
  color:#fff;text-decoration:none;text-align:left;
  font-weight:600;font-size:19px;transition:color .12s;
}
.megamenu-col a:hover{color:#fff;text-decoration:underline;text-decoration-color:#fff;text-underline-offset:4px;}

/* header partner slider — its own grid column, filling whatever space is left
   next to the (truly centered) nav, instead of floating in the page corner. */
.navbar-gateway .partner-strip{grid-column:3;flex:1;min-width:60px;max-width:400px;display:none;}
.navbar-gateway .partner-strip-label{display:none;}
@media (min-width:1215px){
  .navbar-gateway{grid-template-columns:auto 1fr minmax(60px,400px);}
  .navbar-gateway .partner-strip{display:flex;}
}

.partner-strip{display:flex;align-items:center;gap:10px;}
.partner-strip-label{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;flex:none;white-space:nowrap;}
.partner-marquee{
  overflow:hidden;width:100%;flex:1;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.partner-track{display:flex;align-items:center;gap:18px;width:max-content;animation:partner-scroll 28s linear infinite;}
.partner-track.is-paused{animation-play-state:paused;}
@media (hover:hover){
  /* Scoped to real-hover (mouse) devices only — on touch, WebKit leaves
     :hover "stuck" active after a tap until the user touches elsewhere,
     which would keep the ribbon paused via this rule no matter what the
     is-paused class (managed in JS, touch-aware) says. */
  .partner-marquee:hover .partner-track{animation-play-state:paused;}
}
.partner-slot{flex:none;display:flex;align-items:center;height:44px;cursor:pointer;}
.partner-slot img{height:100%;width:auto;max-width:90px;object-fit:contain;display:block;}

/* larger in-page variant used in the "Partnereink" section (as opposed to the
   small header slider) — bigger logos, clickable cards with a hover lift */
.partner-strip-section{display:block;}
.partner-strip-section .partner-marquee{width:100%;padding:12px 0;}
.partner-strip-section .partner-track{gap:32px;animation-duration:106s;}
.partner-strip-section .partner-slot{
  height:76px;min-width:180px;padding:18px 28px;background:var(--navy-2);border:2px solid rgba(255,255,255,.16);
  border-radius:8px;justify-content:center;transition:transform .15s,box-shadow .15s,border-color .15s;
}
.partner-strip-section .partner-slot:hover{
  transform:translateY(-3px);border-color:var(--blue);
  box-shadow:0 14px 26px -16px rgba(0,0,0,.55);
}
.partner-strip-section .partner-slot img{max-width:140px;}
@keyframes partner-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .partner-track{animation:none;}
}

/* mobile-panel copy of the slider, shown under the Kapcsolat button */
.partner-strip-mobile{
  display:none;margin-top:20px;padding-top:20px;border-top:1px solid var(--border);
  flex-direction:column;align-items:flex-start;gap:10px;
}
@media (max-width:1200px){
  .partner-strip-mobile{display:flex;}
  .partner-strip-mobile .partner-marquee{width:100%;}
  .partner-strip-mobile .partner-slot{height:38px;}
}

/* Whole-page dark background for the gateway page */
body.page-gateway{
  background:linear-gradient(180deg,var(--navy-2) 0%,var(--blue) 50%,var(--navy-2) 100%);
}
body.page-gateway section{background:transparent;padding:48px 0;}
body.page-gateway .alt-bg{background:transparent;}
body.page-gateway .hairline-top{border-top-color:rgba(255,255,255,.3);}
body.page-gateway h1,
body.page-gateway h2,
body.page-gateway h3{color:#fff;}
body.page-gateway h2{font-size:22px;}
body.page-gateway .kicker{color:#8FC7EE;}
body.page-gateway .section-intro{margin-bottom:28px;}
body.page-gateway .section-intro p{color:rgba(255,255,255,.7);}
body.page-gateway .about-body p{color:rgba(255,255,255,.82);margin-bottom:24px;max-width:720px;}

body.page-gateway .services-list{border:none;gap:14px;}
body.page-gateway .service-item{
  background:#fff;border:2px solid var(--border-strong);border-top:3px solid var(--navy);
  padding:22px 20px;box-shadow:0 12px 24px -18px rgba(0,0,0,.6);
}
body.page-gateway .service-num{
  width:auto;height:auto;background:none;border:none;border-radius:0;
  font-family:var(--serif);font-weight:700;font-size:22px;color:var(--blue);
  margin-bottom:10px;line-height:1;display:block;
}
body.page-gateway .service-item:hover .service-num{background:none;border-color:transparent;}
body.page-gateway .service-item h3{color:var(--navy);font-size:15px;margin-bottom:6px;}
body.page-gateway .service-item p{font-size:13.5px;}

body.page-gateway .service-item-photo{padding-top:0;overflow:hidden;}
body.page-gateway .service-photo{
  margin:0 -20px 16px;aspect-ratio:16/4.5;overflow:hidden;background:var(--paper);
}
body.page-gateway .service-photo img{width:100%;height:100%;object-fit:cover;display:block;}
body.page-gateway .service-photo-tilt img{transform:scale(1.35) rotate(-4deg);}
body.page-gateway .service-photo-zoom img{transform:scale(1.25);}

body.page-gateway .gw-accordion{
  border-top:none;max-width:none;
  display:flex;flex-direction:column;gap:12px;
}
body.page-gateway .gw-acc-item{
  border-bottom:none;background:#fff;border:2px solid var(--border-strong);
  border-radius:8px;overflow:hidden;
  box-shadow:0 10px 22px -16px rgba(0,0,0,.55);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
body.page-gateway .gw-acc-item:hover{
  border-color:var(--blue);box-shadow:0 16px 30px -16px rgba(0,0,0,.6);transform:translateY(-1px);
}
body.page-gateway .gw-acc-item.open{border-color:var(--blue);}
body.page-gateway .gw-acc-trigger{color:var(--navy);font-size:15.5px;padding:18px 20px;}
body.page-gateway .gw-acc-trigger:hover{color:var(--blue);}
body.page-gateway .gw-acc-item.open .gw-acc-trigger{color:var(--blue);}
body.page-gateway .gw-acc-trigger svg{color:var(--muted-2);}
body.page-gateway .gw-acc-panel p,
body.page-gateway .gw-acc-panel ul.plain-list li{color:var(--muted);padding-left:20px;padding-right:20px;}
body.page-gateway .gw-acc-panel p a{color:var(--blue);}
body.page-gateway .gw-acc-panel ul.plain-list li{border-top-color:var(--border);}

body.page-gateway .ove-hero{background:transparent;}
body.page-gateway .ove-hero-shape{display:none;}
body.page-gateway .cta-band{background:transparent;padding:40px 0;}
body.page-gateway .cta-band h2{font-size:20px;}
body.page-gateway footer{background:transparent;}
body.page-gateway .map-frame{background:transparent;border:none;box-shadow:none;}

body.page-gateway .logo-mark{border-radius:8px;overflow:hidden;}

body.page-gateway h1,
body.page-gateway h2,
body.page-gateway h3{
  font-weight:800;
}
body.page-gateway .map-legend .legend-item{color:rgba(255,255,255,.85);}
body.page-gateway .map-legend .dot.active{background:#fff;}
body.page-gateway .map-legend .dot.pending{background:rgba(255,255,255,.5);}
body.page-gateway .hu-map .county-shape{fill:rgba(255,255,255,.9);}
body.page-gateway .hu-map .county-budapest{fill:rgba(230,236,240,.65);}
body.page-gateway .hu-map .hu-border{stroke:rgba(255,255,255,.4);}

.ove-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(115deg,var(--navy-2) 0%,var(--navy) 62%);
  padding:52px 0 56px;
}
.ove-hero-shape{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(155deg,var(--blue) 0%,var(--blue-dark) 55%,var(--green-dark) 100%);
  clip-path:polygon(64% 0,100% 0,100% 100%,42% 100%);
}
.ove-hero-shape::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(155deg,var(--green) 0%,transparent 45%);
  opacity:.55;
  clip-path:polygon(64% 0,76% 0,54% 100%,42% 100%);
}
.ove-hero-inner{position:relative;z-index:1;max-width:640px;}
.ove-hero .kicker{color:#8FC7EE;margin-bottom:14px;}
.ove-hero h1{
  color:#fff;font-size:clamp(24px,2.6vw,32px);font-weight:700;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 14px;max-width:19ch;
}
.ove-hero .lead{font-size:15.5px;color:rgba(255,255,255,.8);max-width:520px;line-height:1.6;margin:0 0 22px;}
.ove-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.text-link-light{
  font-weight:600;font-size:14.5px;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;transition:border-color .15s,color .15s;
}
.text-link-light:hover{color:#8FC7EE;border-color:#8FC7EE;}

.ove-cta{position:relative;overflow:hidden;isolation:isolate;}
.ove-cta-shape{opacity:.55;}
.ove-cta .cta-band-inner{position:relative;z-index:1;}
.gateway-hero{padding:64px 0 48px;text-align:center;}
.gateway-hero .kicker{justify-content:center;}
.gateway-hero h1{
  font-size:clamp(32px,4.6vw,52px);font-weight:900;line-height:1.1;
  letter-spacing:-.02em;margin:0 auto 20px;max-width:16ch;color:var(--navy);
}
.gateway-hero .lead{font-size:16.5px;color:var(--muted);max-width:620px;margin:0 auto;line-height:1.7;}

.map-section{padding-top:0;}

/* Ensure the instruction above the map uses the normal lead styling */
.map-section .lead{font-size:16.5px;color:var(--muted);max-width:620px;margin:0 0 22px;line-height:1.7;text-align:center}
.map-frame{
  max-width:1100px;margin:0 auto;padding:24px 32px 20px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.map-wrap{max-width:980px;margin:0 auto;}
.hu-map{width:100%;height:auto;display:block;overflow:visible;}
.hu-map .hu-border{fill:none;stroke:var(--border-strong);stroke-width:2.5;stroke-linejoin:round;}
.hu-map .county-shape{
  fill:var(--paper);stroke:#fff;stroke-width:6;stroke-linejoin:round;
  transition:fill .15s;
}
.hu-map .county-budapest{fill:var(--border-strong);}
.hu-map a.county-link{cursor:pointer;}
.hu-map a.county-link .county-active-shape{
  fill:var(--paper);stroke:#fff;stroke-width:6;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center;
  transition:fill .18s,transform .18s,filter .18s;
}
.hu-map a.county-link:hover .county-active-shape,
.hu-map a.county-link:focus-visible .county-active-shape{
  fill:var(--blue);
  transform:scale(1.07);
  filter:drop-shadow(0 12px 20px rgba(13,113,182,.5));
}
.hu-map a.county-link:focus-visible .county-active-shape{outline:2px solid var(--navy);outline-offset:2px;}

.map-legend{display:flex;justify-content:center;gap:28px;margin-top:28px;flex-wrap:wrap;}
.map-legend .legend-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);font-weight:600;}
.map-legend .dot{width:11px;height:11px;border-radius:50%;flex:none;}
.map-legend .dot.active{background:var(--blue);}
.map-legend .dot.pending{background:var(--border-strong);}

/* Accordion (GYIK) */
.gw-accordion{max-width:var(--measure);border-top:1px solid var(--border);}
.gw-acc-item{border-bottom:1px solid var(--border);}
.gw-acc-trigger{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:22px 2px;cursor:pointer;text-align:left;
  font-family:var(--display);font-weight:700;font-size:17px;color:var(--navy);
  transition:color .12s;
}
.gw-acc-trigger:hover{color:var(--blue);}
.gw-acc-trigger svg{width:18px;height:18px;flex:none;color:var(--muted-2);transition:transform .2s;}
.gw-acc-item.open .gw-acc-trigger svg{transform:rotate(180deg);}
.gw-acc-panel{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.gw-acc-item.open .gw-acc-panel{max-height:1200px;}
.gw-acc-panel p{color:var(--muted);font-size:15px;line-height:1.7;padding:0 2px 22px;}
.gw-acc-panel p a{color:var(--blue);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;}
.gw-acc-panel ul.plain-list{padding:0 2px 18px;}
.gw-acc-panel ul.plain-list li{font-size:14.5px;color:var(--ink);line-height:1.55;padding:10px 0;border-top:1px solid var(--border);}
.gw-acc-panel ul.plain-list li:first-child{border-top:none;}

@media (max-width:980px){
  .ove-hero-shape{clip-path:polygon(82% 0,100% 0,100% 100%,66% 100%);}
  .ove-hero-shape::after{clip-path:polygon(82% 0,90% 0,74% 100%,66% 100%);}
}
@media (max-width:700px){
  .ove-hero{padding:56px 0 48px;}
  .ove-hero-inner{max-width:none;}
  .ove-hero-shape{clip-path:polygon(88% 0,100% 0,100% 100%,80% 100%);}
  .ove-hero-shape::after{display:none;}
  .map-frame{padding:28px 20px 24px;}
  .map-wrap{max-width:420px;}
  .services-list{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important;}
}

@media (max-width: 1200px){
  nav.mainnav{display:none;}
  .navbar-gateway nav.mainnav{display:none !important;}
  .burger{display:block;}
}
/* pages whose nav has more items than index.html's (7 vs 4) need more
   room before the full nav fits. The pill buttons are full-size (min-width:180px,
   padding:22px 16px, font-size:15px) at wide desktop widths and shrink
   fluidly — width, padding AND font-size together, via clamp() — as the
   viewport narrows, so they visibly get smaller in step with the screen
   instead of jumping between fixed sizes at a breakpoint. */
@media (max-width: 1650px){
  body.page-gateway:not(.page-index) .navbar-gateway nav.mainnav{display:none !important;}
  body.page-gateway:not(.page-index) .navbar-gateway .burger{display:block !important;}
}
@media (max-width: 980px){
  .member-grid{grid-template-columns:1fr;gap:36px;}
  .news-grid{grid-template-columns:1fr;}
  .events-col{border-left:none;padding-left:0;border-top:1px solid var(--border);padding-top:32px;margin-top:8px;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;align-items:start;}
  .services-list{grid-template-columns:repeat(2,1fr);}
  .pillar-links{grid-template-columns:repeat(2,1fr);}
  .cta-band-inner{flex-direction:column;align-items:flex-start;}
  .split-64{grid-template-columns:1fr;gap:36px;}
}
@media (max-width: 700px){
  .navbar{padding:14px 24px;}
  .logo{padding:8px 0;gap:10px;}
  .logo-mark{width:36px;height:36px;}
  .wrap{padding:0 24px;}
  .gateway-header-band{padding:22px 20px 26px;margin-bottom:36px;}
  .gateway-brand-card{padding:12px 18px;gap:12px;}
  .gateway-brand-card img{height:44px;}
  .gbt-line1{font-size:14px;}
  .gbt-line2{font-size:13px;}
  .gbt-line3{font-size:9.5px;}
  section{padding:56px 0;}
  .hero-grid{padding-top:72px;padding-bottom:48px;}
  .hero-quote{padding:18px 20px 18px 22px;}
  .page-hero{padding:28px 0 36px;}
  .contact-info-card,.form-card{padding:24px 20px;}
  .page-hero.has-photo .wrap{padding:44px 24px 36px;}
  .page-hero.has-photo .hero-media img{object-position:center 20%;}
  .services-list{grid-template-columns:1fr;}
  .pillar-links{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .news-row,.list-page-row{grid-template-columns:1fr;gap:6px;}
  .partners-grid,.tile-grid{grid-template-columns:repeat(2,1fr);}
  .nl-form-inner{flex-direction:column;width:100%;}
  .nl-form input{width:100%;border-right:1px solid var(--border-strong);border-bottom:none;border-radius:3px 3px 0 0;}
  .nl-form button{border-radius:0 0 3px 3px;}
  .contact-grid{gap:28px;}
  .form-grid{grid-template-columns:1fr;}
  table.tiers{min-width:0;}
  table.tiers th,table.tiers td{padding:10px 10px;font-size:13px;}
  body.page-gateway table.tiers td{font-size:14px;}
  body.page-gateway table.tiers td.tier-name{font-size:15px;}
  body.page-gateway table.tiers td.price{font-size:15px;}
}

/* ---------- zala.html reuses the exact same page-gateway / navbar-gateway system
   as index.html — same bordered nav pills, same logo position, same full-page
   dark gradient. These extra rules only cover components that exist on zala.html
   but not on index.html (benefit list, news grid, testimonial, partner boxes,
   newsletter form) so they stay legible on the dark canvas. */
body.page-gateway .kicker{color:#8FC7EE;}
body.page-gateway .lead{color:rgba(255,255,255,.82);}
body.page-gateway .about-body p{color:rgba(255,255,255,.82);}
body.page-gateway .plain-list li{color:#fff;border-top-color:rgba(255,255,255,.32);border-top-width:2px;}
body.page-gateway .plain-list li strong{color:#fff;}

/* Site-wide readability pass: bigger, bolder running text everywhere,
   not just on one page — matches the treatment on tagsag-feltetelek.html. */
body.page-gateway .hero .lead,
body.page-gateway .page-hero .lead{font-size:19px;font-weight:600;}
body.page-gateway .section-intro p{font-size:18px;font-weight:600;}
body.page-gateway .about-body p{font-size:18px;font-weight:600;line-height:1.6;}
body.page-gateway .about-body ul.plain-list li,
body.page-gateway .plain-list li{font-size:18px;font-weight:600;}
body.page-gateway .goal-row p{font-size:17px;font-weight:600;}
body.page-gateway .benefit-list li{font-size:17px;font-weight:600;}
body.page-gateway table.tiers td{font-size:17px;font-weight:600;}
body.page-gateway table.tiers td.tier-name{font-size:18px;}
body.page-gateway table.tiers td.price{font-size:19px;}
body.page-gateway .doc-row .doc-name{font-size:17px;}
body.page-gateway .service-item p,
body.page-gateway .event-row .what{font-size:16px;font-weight:600;}

body.page-gateway .pillar-icon-lg{background:#fff;border-color:var(--border-strong);}
body.page-gateway .pillar-icon-lg svg{color:var(--navy);}
body.page-gateway .goal-row{border-bottom-color:rgba(255,255,255,.32);border-bottom-width:2px;}
body.page-gateway .goal-row .gn{background:#8FC7EE;}
body.page-gateway .goal-row p{color:rgba(255,255,255,.85);}
body.page-gateway .pillar-links{border-color:rgba(255,255,255,.18);}
body.page-gateway .pillar-links a{color:#fff;border-color:rgba(255,255,255,.18);}
body.page-gateway .pillar-links a .pnum{color:rgba(255,255,255,.5);}
body.page-gateway .pillar-links a.current,
body.page-gateway .pillar-links a:hover{color:var(--blue);background:var(--paper);}
body.page-gateway .pillar-links a.current .pnum,
body.page-gateway .pillar-links a:hover .pnum{color:var(--muted-2);}
body.page-gateway .benefit-list li{color:#fff;}
body.page-gateway .partners-line{color:rgba(255,255,255,.7);}
body.page-gateway .partner-box,
body.page-gateway .tile{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:rgba(255,255,255,.65);
}
body.page-gateway .tile strong{color:#fff !important;}
body.page-gateway .news-note{color:rgba(255,255,255,.65);}
body.page-gateway .empty-state{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.25);}
body.page-gateway .news-row p{color:rgba(255,255,255,.75);}
body.page-gateway .news-row .tag{color:#8FC7EE;}
body.page-gateway .events-col{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);}
body.page-gateway .event-row{border-color:rgba(255,255,255,.14);}
body.page-gateway .event-row .when{color:#8FC7EE;}
body.page-gateway .event-row .what{color:#fff;}
body.page-gateway .event-row .where{color:rgba(255,255,255,.6);}
body.page-gateway .testimonial p{color:#fff;}
body.page-gateway .testimonial cite{color:rgba(255,255,255,.65);}
body.page-gateway .text-link{color:#fff;border-color:rgba(255,255,255,.5);}
body.page-gateway .text-link:hover{color:#8FC7EE;border-color:#8FC7EE;}

/* newsletter form stays a light input bar on the dark section */
body.page-gateway .nl-form input{background:#fff;color:var(--ink);}
body.page-gateway .nl-form label{color:rgba(255,255,255,.82);}

/* pricing / data tables had no background of their own — give them a white
   card background so the (unchanged) navy/blue text stays legible */
body.page-gateway .table-wrap{
  background:#fff;border-radius:8px;border:2px solid var(--border-strong);
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  box-shadow:0 16px 34px -20px rgba(0,0,0,.6);
}
body.page-gateway table.tiers{border:none;}

/* kapcsolat.html: the contact details and the form were sitting directly on
   the dark gradient using light-theme text colours (grey labels, faint
   borders), which read as washed-out — dark glass cards instead, same
   family as .hero-quote/.megamenu, so it stays on-brand with the rest of
   the dark page instead of popping a white box into it. */
body.page-gateway .split-64{
  background:var(--navy-2);border:1px solid rgba(255,255,255,.14);gap:0;
  box-shadow:0 16px 34px -20px rgba(0,0,0,.6);
}
body.page-gateway .contact-info-card{
  padding:40px;border-right:1px solid rgba(255,255,255,.14);
}
body.page-gateway .form-card{padding:40px;}
@media (max-width:980px){
  body.page-gateway .contact-info-card{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);}
}
body.page-gateway .contact-info-card .kicker{color:#8FC7EE;}
body.page-gateway .contact-info-card h2{color:#fff;}
body.page-gateway .contact-detail{border-bottom-color:rgba(255,255,255,.16);}
body.page-gateway .contact-detail-label{color:rgba(255,255,255,.55);}
body.page-gateway .contact-detail p{color:#fff;}
body.page-gateway .contact-detail p strong{color:#fff;}
body.page-gateway .contact-info-card .text-link{color:#8FC7EE;border-color:rgba(143,199,238,.5);}
body.page-gateway .contact-info-card .text-link:hover{color:#fff;border-color:#fff;}
body.page-gateway .form-card .field label{color:rgba(255,255,255,.65);}
body.page-gateway .form-card .form-actions{border-top-color:rgba(255,255,255,.18);}
body.page-gateway .form-card .form-note{color:rgba(255,255,255,.55);}

/* the navy member-band already had its own dark styling before this change —
   keep it exactly as it was, don't let it go transparent */

/* ---------- Cookie consent popup ---------- */
.cookie-backdrop{
  position:fixed;inset:0;z-index:500;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,17,28,0);
  opacity:0;visibility:hidden;
  transition:opacity .22s,background .22s,visibility .22s;
}
.cookie-backdrop.show{
  opacity:1;visibility:visible;background:rgba(8,17,28,.62);
}
.cookie-modal{
  width:100%;max-width:440px;
  background:var(--surface);border:2px solid var(--border-strong);border-radius:8px;
  box-shadow:0 32px 64px -24px rgba(8,29,56,.5);
  padding:32px 30px;
  transform:translateY(16px) scale(.98);opacity:0;
  transition:transform .22s,opacity .22s;
}
.cookie-backdrop.show .cookie-modal{transform:translateY(0) scale(1);opacity:1;}
.cookie-modal h2{
  font-family:var(--display);font-size:21px;font-weight:800;color:var(--navy);
  margin:0 0 12px;letter-spacing:-.01em;
}
.cookie-modal p{font-size:14.5px;color:var(--ink);line-height:1.6;margin:0;}
.cookie-modal-actions{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap;}
.cookie-modal-actions .btn{flex:1;justify-content:center;padding:13px 18px;font-size:14px;}

@media (max-width:480px){
  .cookie-modal{padding:26px 22px;}
}

body.page-gateway .cookie-modal{background:var(--navy-2);border-color:rgba(255,255,255,.2);}
body.page-gateway .cookie-modal h2{color:#fff;}
body.page-gateway .cookie-modal p{color:rgba(255,255,255,.82);}
body.page-gateway .cookie-modal .btn-outline{color:#fff;border-color:rgba(255,255,255,.4);}
body.page-gateway .cookie-modal .btn-outline:hover{border-color:#fff;}

/* ---------- Newsletter signup popup (corner toast) ---------- */
.visually-hidden{
  position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;
  margin:-1px !important;overflow:hidden !important;
  clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;
}
.newsletter-toast{
  position:fixed;right:24px;bottom:24px;z-index:480;width:100%;max-width:340px;
  background:var(--navy-2);border:1.5px solid rgba(191,202,210,.55);
  box-shadow:0 24px 48px -16px rgba(8,29,56,.55),0 0 0 1px rgba(0,0,0,.3);
  padding:24px 24px 22px;
  transform:translateY(20px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .28s ease,opacity .28s ease,visibility .28s;
}
.newsletter-toast.show{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
.newsletter-close{
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:rgba(255,255,255,.6);font-size:20px;line-height:1;cursor:pointer;
  transition:color .15s;
}
.newsletter-close:hover{color:#fff;}
.newsletter-toast h2{
  font-family:var(--display);font-size:17px;font-weight:800;color:#fff;
  margin:0 22px 8px 0;letter-spacing:-.01em;
}
.newsletter-toast p{font-size:13px;color:rgba(255,255,255,.78);line-height:1.5;margin:0 0 16px;}
.newsletter-field-row{display:flex;flex-direction:column;gap:8px;}
.newsletter-field-row input[type="email"]{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);
  padding:10px 12px;border:1px solid var(--border-strong);border-radius:3px;background:#fff;
}
.newsletter-field-row input[type="email"]:focus{outline:none;border-color:var(--blue);}
.newsletter-field-row .btn{width:100%;justify-content:center;padding:10px 18px;font-size:13.5px;}
.newsletter-status{font-size:12.5px;margin:10px 0 0;min-height:15px;color:rgba(255,255,255,.6);}

@media (max-width:480px){
  .newsletter-toast{right:12px;bottom:12px;left:12px;width:auto;max-width:none;}
}

/* ---------- Tagsági feltételek — one continuous document with a sticky
   contents rail, instead of repeated kicker+heading+divider blocks. ---------- */
.tf-page .page-hero .lead{font-size:19px;font-weight:700;color:#fff;}

.tf-doc{display:grid;grid-template-columns:200px minmax(0,1fr);gap:64px;align-items:start;}
.tf-doc-nav{
  position:sticky;top:104px;display:flex;flex-direction:column;gap:1px;
  border-left:2px solid rgba(255,255,255,.3);
}
.tf-doc-nav a{
  padding:9px 0 9px 18px;margin-left:-2px;border-left:2px solid transparent;
  font-size:14.5px;font-weight:600;color:rgba(255,255,255,.55);text-decoration:none;
  transition:color .15s,border-color .15s;
}
.tf-doc-nav a:hover{color:#fff;}
.tf-doc-nav a.active{color:#fff;border-left-color:var(--blue);font-weight:700;}

.tf-doc-body h2{
  font-family:var(--display);font-size:clamp(24px,2.6vw,29px);font-weight:800;color:#fff;
  margin:64px 0 14px;scroll-margin-top:100px;
}
.tf-doc-body h2:first-child{margin-top:0;}
.tf-doc-body > p{font-size:18px;font-weight:600;color:rgba(255,255,255,.8);line-height:1.55;max-width:720px;}
.tf-doc-body > .table-wrap,
.tf-doc-body > .tf-steps{margin-top:20px;}
.tf-sub{margin-top:22px;}
.tf-note{
  margin-top:16px;font-size:16px;font-weight:600;color:rgba(255,255,255,.68);
  line-height:1.55;max-width:720px;
}

.tf-page .tf-tiers th{font-size:14px;}
.tf-page .tf-tiers td{font-size:18px;font-weight:700;}
.tf-page .tf-tiers td.price{font-size:20px;}

.tf-h3{font-family:var(--display);font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;}

@media (max-width:900px){
  .tf-doc{grid-template-columns:minmax(0,1fr);gap:24px;}
  .tf-doc-nav{
    position:static;flex-direction:row;flex-wrap:wrap;gap:8px 18px;
    border-left:none;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:16px;
  }
  .tf-doc-nav a{padding:4px 0;border-left:none;border-bottom:2px solid transparent;margin-left:0;}
  .tf-doc-nav a.active{border-left:none;border-bottom-color:var(--blue);}
}

.tf-list{display:flex;flex-direction:column;}
.tf-list li{
  position:relative;padding:12px 0 12px 28px;border-bottom:2px solid rgba(255,255,255,.35);
  font-size:19px;font-weight:600;color:#fff;line-height:1.45;
}
.tf-list li:last-child{border-bottom:none;}
.tf-list li strong{font-weight:800;}
.tf-list li::before{
  content:"";position:absolute;left:0;top:21px;width:9px;height:9px;border-radius:50%;
  background:var(--blue);
}
.tf-list-alt li::before{background:var(--green);}

.tf-steps{display:flex;flex-direction:column;}
.tf-steps li{
  display:flex;gap:20px;align-items:flex-start;
  padding:16px 0;border-bottom:2px solid rgba(255,255,255,.35);
}
.tf-steps li:last-child{border-bottom:none;}
.tf-step-num{
  flex:none;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:17px;font-weight:800;margin-top:2px;
}
.tf-steps strong{display:block;font-size:19.5px;font-weight:800;color:#fff;margin-bottom:4px;}
.tf-steps p{font-size:17px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.5;}
body.page-gateway .member-band{background:var(--navy-2);}

/* ==========================================================================
   Motion system — scroll reveals, hero entrance, header scroll state.
   Driven by motion.js (IntersectionObserver, no external library). Every
   animated state lives inside prefers-reduced-motion:no-preference, so
   visitors who've asked for less motion simply see the finished layout with
   no opacity/transform staging at all — nothing to "wait for". */
@media (prefers-reduced-motion: no-preference){
  .reveal,.reveal-item{
    opacity:0;transform:translateY(22px) scale(.985);
    transition:opacity var(--dur-slow) var(--ease-premium) var(--reveal-delay,0s),
               transform var(--dur-slow) var(--ease-premium) var(--reveal-delay,0s);
    will-change:opacity,transform;
  }
  .reveal.in-view,.reveal-item.in-view{opacity:1;transform:translateY(0) scale(1);}

  .hero-enter{
    opacity:0;transform:translateY(16px);
    transition:opacity var(--dur-slow) var(--ease-premium) var(--reveal-delay,0s),
               transform var(--dur-slow) var(--ease-premium) var(--reveal-delay,0s);
  }
  .hero-enter.in-view{opacity:1;transform:translateY(0);}

  .hero-media-enter{
    opacity:0;transform:scale(1.04);
    transition:opacity var(--dur-slow) var(--ease-premium),transform 1.1s var(--ease-premium);
  }
  .hero-media-enter.in-view{opacity:1;transform:scale(1);}
}

/* header gains a touch more definition once the page has scrolled, instead
   of staying visually identical the whole time */
header{transition:box-shadow var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard);}
header.header-scrolled{box-shadow:0 8px 24px -18px rgba(8,29,56,.45);}

/* smoother, more premium mobile-panel motion (the megamenu's own
   opacity/transform transition already lives on .megamenu itself, above) */
@media (prefers-reduced-motion: no-preference){
  .mobile-panel.open{animation:mpSlide var(--dur-base) var(--ease-out-soft);}
  @keyframes mpSlide{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
}