/* ORWAK shared styles — used by every page */
:root{
  /* ============================================================ ORWAK TOKENS
     Direction: "Engineered Restraint". Brand colours are held to the Figma
     file (verified against the design via the Figma REST API): --primary,
     --primary-2, --dark, --ink and --bg are unchanged. The only colour
     changes are measured WCAG failures — every ratio below was computed, not
     asserted. New roles are added alongside; every pre-existing name still
     resolves, so no component rule breaks on day one. */

  /* ── SURFACE — from Figma, unchanged ───────────────────────────────── */
  --bg:            #F3F2F2;
  --bg-2:          #EFEEEE;
  --surface:       #FFFFFF;
  --white:         #ffffff;
  --dark:          #2C2C2C;   /* Figma. white on it = 13.97:1 */
  --dark-2:        #1F1F1F;
  --dark-3:        #343434;   /* a panel resting ON a dark band, not a 2nd hue */

  /* one glass material for the three continuous overlay chromes */
  --glass:         rgba(44,44,44,.86);
  --glass-solid:   #232323;   /* @supports fallback where backdrop-filter is absent */
  --glass-blur:    blur(14px) saturate(1.12);

  /* ── INK — only the measured AA failures moved ─────────────────────── */
  --ink:           #4A4A4A;   /* Figma. 7.93:1 on --bg — PASSES, kept */
  --ink-2:         #5C6369;   /* was #818181 = 3.49:1 FAIL at 13 sites → 5.46:1 */
  --ink-3:         #686D72;   /* was #ABABAB = 2.30:1 FAIL → 4.68:1. TEXT FLOOR */
  --ink-4:         #9BA0A5;   /* NON-TEXT only: disabled glyphs, dividers */
  --ink-on-dark:   rgba(255,255,255,.92);
  --ink-on-dark-2: rgba(255,255,255,.66);

  /* ── ACCENT — one hue, three jobs, kept apart ──────────────────────── */
  --primary:       #DF5129;   /* Figma. GRAPHIC role: rules, bullets, marks,
                                 full-bleed fields. White on it is 3.93:1 —
                                 never small text. */
  --primary-2:     #F76C4E;   /* Figma. accent on --dark — 4.79:1 */
  --primary-ink:   #C2421C;   /* ACTION fill under white text — 5.13:1 ✓AA */
  --primary-700:   #A93715;   /* hover — 6.47:1. Retires all 7 literal var(--primary-700) */
  --primary-800:   #8F2D10;   /* active */
  --primary-text:  #B23C18;   /* orange AS TEXT on light — 5.29:1 */
  --primary-soft:  rgba(223,81,41,.08);
  --danger:        #C0331F;   /* form errors — 5.62:1 on #fff (was #d6402b, 4.54) */

  /* ── EDGE — depth lives here, not in blur ──────────────────────────── */
  --line:          #D7D7D7;   /* Figma. decorative hairline */
  --line-2:        #EFEEEE;
  --line-strong:   #767C82;   /* CONTROL boundary — 4.22:1 on #fff.
                                 Required by WCAG 1.4.11; --line is 1.29:1. */
  --line-dark:     rgba(255,255,255,.14);
  --line-dark-2:   rgba(255,255,255,.38);
  --bw-hair:       1px;
  --bw-rule:       2px;       /* the ORWAK rule: .machine__rail, .srv-item top */
  --bw-edge:       3px;

  /* ── ELEVATION — three steps, warm-tinted, default none ────────────── */
  --sh:            38,30,26;  /* warm charcoal, never pure black */
  --e0:            none;
  --e1:            0 1px 2px rgba(var(--sh),.05), 0 6px 14px -6px rgba(var(--sh),.08);
  --e2:            0 2px 6px -2px rgba(var(--sh),.07), 0 22px 40px -18px rgba(var(--sh),.20);
  --frame:         inset 0 0 0 1px rgba(var(--sh),.10);
  --frame-dark:    inset 0 0 0 1px rgba(255,255,255,.10);
  --shadow-card:   var(--e0);   /* alias — flattens .info */
  --shadow-lift:   var(--e1);   /* alias — reduces .hblog__grid */

  /* ── RADII — controls 2, media 4, panels 8 ─────────────────────────── */
  --r-0:           0;
  --r-1:           2px;
  --r-2:           4px;
  --r-3:           8px;
  --r-full:        999px;

  /* ── TYPE ──────────────────────────────────────────────────────────── */
  /* Figma specifies Effra, which is proprietary and not loaded. Mulish is the
     substitute the prototype chose; Effra is deliberately NOT in the stack —
     it is metrically different, so a designer with it installed locally would
     see a different layout from everyone else. */
  --font-sans:    "Mulish", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);

  /* Figma's own scale is 16 / 18 / 24 / 50 at weights 300-700. These steps
     hold that spine and add only the sizes the page genuinely needs. */
  --t-micro:    0.75rem;    /* 12 */
  --t-small:    0.875rem;   /* 14 */
  --t-body:     1rem;       /* 16  ← Figma */
  --t-body-lg:  1.125rem;   /* 18  ← Figma */
  --t-lead:     1.25rem;    /* 20 */
  --t-h4:       1.5rem;     /* 24  ← Figma */
  --t-h3:  clamp(1.375rem, 1.10rem + 1.10vw, 1.75rem);   /* 22 → 28 */
  --t-h2:  clamp(1.75rem,  1.15rem + 2.40vw, 2.625rem);  /* 28 → 42 */
  --t-h1:  clamp(2.125rem, 1.30rem + 3.10vw, 3.125rem);  /* 34 → 50  ← Figma */
  --t-hero:clamp(2.5rem,   1.30rem + 5.00vw, 4.5rem);    /* 40 → 72 */

  --lh-hero:    1.06;
  --lh-display: 1.12;   /* HARD FLOOR — clears the Ő/Ű double acutes */
  --lh-head:    1.22;
  --lh-caps:    1.25;
  --lh-snug:    1.40;
  --lh-body:    1.60;

  --tr-hero:   -0.022em;
  --tr-h1:     -0.018em;
  --tr-h3:     -0.010em;
  --tr-body:    0;
  --tr-caps:    0.08em;
  --tr-caps-lg: 0.05em;
  /* Hungarian guard rail: never below -0.03em, and never negative under 20px —
     negative tracking at small sizes closes up sz zs cs gy ny ty, which have
     to stay readable as pairs. */

  /* ── SPACE — 4px base ──────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;  --sp-7: 48px; --sp-8: 64px;
  --sp-9: 80px; --sp-10: 112px;
  --section-y:    clamp(64px, 8vw, 112px);
  --row-y:        clamp(48px, 5.4vw, 78px);   /* the artboards' row rhythm */
  --t-lead-lg:    1.875rem;                   /* 30 — the standing lede */
  --section-y-lg: clamp(80px, 10vw, 144px);

  /* ── CONTROLS ──────────────────────────────────────────────────────── */
  --ctl-h:     44px;   /* minimum comfortable target */
  --ctl-h-lg:  52px;
  --ctl-h-sm:  36px;

  /* ── MOTION — four durations, two curves, `infinite` banned ────────── */
  --d-1: 120ms;   /* state flips: colour, opacity */
  --d-2: 180ms;   /* transforms, small position */
  --d-3: 300ms;   /* surfaces: panels, overlays */
  --d-4: 500ms;   /* large media reveals */
  --ease-out: cubic-bezier(.2,.8,.25,1);   /* responses — starts instantly */
  --ease-io:  cubic-bezier(.65,0,.35,1);   /* reversible position */

  /* ── FOCUS — one ring, flipped per ground ──────────────────────────── */
  --focus-color: var(--primary-ink);
  --focus-ring:  0 0 0 2px var(--surface), 0 0 0 4px var(--focus-color);

  /* ── LAYOUT — unchanged ────────────────────────────────────────────── */
  --container: 1272px;
  --pad-x: 84px;
}

/* White ring on the dark grounds only. .hcontact is deliberately absent: it
   sits on the light page ground, as the design has it, so it takes the
   default dark ring. */
:where(.nav, .mega, .mnav, .srch, .footer, .partners,
       .stats__inner, .cside-card, .home-hero, .phero__copy,
       .sust){
  --focus-color: #FFFFFF;
}

*{ box-sizing:border-box; }

/* The UA stylesheet's [hidden]{display:none} loses to ANY author rule that
   declares display — .hcontact__form{display:grid} did exactly that, so
   `form.hidden = true` in shared.js left the form visible and a second success
   panel could be inserted below the first. Everything here toggles visibility
   with el.hidden, so the floor belongs at the top of the cascade. */
[hidden]{ display: none !important; }

/* Skip link. Off-screen until focused, then a real control at the top left —
   the site had none, so a keyboard user met the full header, mega menu and
   drawer on every page before reaching any content. */
.skip-link{
  position: absolute; left: -9999px; top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--dark); color: #fff;
  font: 500 15px/1 var(--font-sans);
  text-decoration: none;
  border-radius: 0 0 var(--r-1) 0;
}
.skip-link:focus{ left: 0; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ color: inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family: inherit; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }

/* ============================================================ NAV */
.nav{
  position: fixed; top:0; left:0; right:0; height:76px; z-index:50;
  background: rgba(44,44,44,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color:#fff;
  display:flex; align-items:center;
  padding: 0 var(--pad-x);
}
.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__mark{
  width:140px; height:26px;
  background: url('../img/orwak-logo-figma.png') left center/contain no-repeat;
  opacity: 1;
}
.nav__links{
  display:flex; align-items:center; gap:38px;
  margin-left: 88px;
}
.nav__links a{
  font-weight:500; font-size:16px; letter-spacing:0.2px;
  line-height: 38px;
  opacity:.92; transition: color .15s ease, opacity .15s ease;
}
.nav__links a:hover{ color: var(--primary-2); opacity:1; }
.nav__links a.is-active,
.nav__trigger.is-active{
  color: #fff;
  position: relative;
}
/* The bar is translucent and what sits behind it changes as the page scrolls,
   so an orange tint cannot be relied on to read. A solid rule under the label
   marks the current page at any backdrop. */
.nav__links a.is-active::after,
.nav__trigger.is-active::after{
  content: "";
  position: absolute; left: 0; right: 0;
  /* Was bottom:18px. The line box is 38px and the glyphs run 9→29 inside it,
     so 18px put the rule at y=20 — straight through the x-height, reading as a
     strikethrough rather than an underline. 5px clears the descenders. */
  bottom: 5px;
  height: var(--bw-rule);
  background: var(--primary-2);
}
.nav__trigger{
  display:flex; align-items:center; gap:6px;
  background:transparent; border:0; padding:0;
  color:#fff; cursor:pointer;
  font:500 16px/38px var(--font-sans); letter-spacing:.2px;
  opacity:.92; transition: color .15s ease, opacity .15s ease;
}
.nav__trigger:hover{ color: var(--primary-2); opacity:1; }

.nav__trigger.is-open{ color: var(--primary-2); opacity:1; }
.nav__caret{
  width:10px; height:6px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.nav__trigger.is-open .nav__caret{ transform: rotate(180deg); }

/* ============================================================ MEGA MENU */
.mega{
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(28,28,28,.95);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid rgba(255,255,255,.06);
  color: #fff;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  /* opacity:0 + pointer-events:none hides it from the mouse but NOT from the
     keyboard — its 14 links stayed in the tab order, invisible, inside an
     aria-hidden container. visibility:hidden removes them; it is transitionable,
     so the fade still works. */
  visibility: hidden;
  transition: opacity .28s cubic-bezier(.2,.7,.2,1), transform .28s cubic-bezier(.2,.7,.2,1),
              visibility 0s linear .28s;
  overflow: hidden;
}
.mega--open{
  opacity: 1; transform: translateY(0); pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}
.mega__panel{
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.mega__panel.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; }
.mega__inner{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  padding: 44px var(--pad-x) 48px;
  max-width: 1440px; margin: 0 auto;
}
.mega__head{ padding-right: 16px; }
.mega__eyebrow{
  display:block;
  font: 400 12px/1 var(--font-sans);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--primary-2);
  margin-bottom: 14px;
}
.mega__title{
  margin: 0 0 12px;
  font: 500 30px/1.15 var(--font-sans);
  letter-spacing: -0.01em;
  color: #fff;
}
.mega__lede{
  margin: 0 0 22px;
  font-size: 14px; line-height: 1.6;
  color: rgba(255,255,255,.7);
}
.mega__cta{
  display: inline-flex; align-items: center; gap: 8px;
  font:400 14px/1 var(--font-sans);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.3);
  padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease, gap .2s ease;
}
.mega__cta:hover{ color: var(--primary-2); border-color: var(--primary-2); gap: 12px; }

/* product cards */
.mega__grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.mega-card{
  position: relative;
  display: grid; grid-template-columns: 80px 1fr 20px;
  align-items: center; gap: 16px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
  text-decoration: none;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.mega-card:hover{
  background: rgba(255,255,255,.07);
  border-color: var(--primary-2);
}
.mega-card__img{
  width: 80px; height: 64px;
  /* background-image comes from the markup — see .pmos__img in home.css */
  background-size: cover; background-position: center;
  border-radius: 4px;
}
/* Three of the seven categories have no photograph in the design. A flat tinted
   block is honest; borrowing another category's machine photo is not. */
.mega-card__img--none{
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
}
.mega-card__body{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mega-card__t{
  font: 500 15px/1.2 var(--font-sans); color: #fff;
}
.mega-card__d{
  font: 300 13px/1.4 var(--font-sans);
  color: rgba(255,255,255,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mega-card__arrow{
  width: 16px; height: 16px;
  color: rgba(255,255,255,.5);
  transition: transform .25s ease, color .25s ease;
}
.mega-card:hover .mega-card__arrow{
  color: var(--primary-2);
  transform: translateX(4px);
}

/* services list */
.mega__list{ display: flex; flex-direction: column; }
.mega-row{
  display: grid; grid-template-columns: 56px 1fr 20px;
  align-items: center; gap: 16px;
  padding: 18px 4px;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease;
}
.mega-row:first-child{ border-top: 0; }
.mega-row:hover{ background: rgba(255,255,255,.03); }
.mega-row__num{
  font: 300 13px/1 var(--font-sans);
  color: var(--primary-2);
  letter-spacing: .08em;
}
.mega-row__t{
  display: block;
  font: 500 17px/1.3 var(--font-sans); color: #fff;
  margin-bottom: 4px;
}
.mega-row__d{
  display: block;
  font: 300 13px/1.5 var(--font-sans); color: rgba(255,255,255,.6);
}
.mega-row__arrow{
  color: rgba(255,255,255,.4);
  transition: transform .25s ease, color .25s ease;
}
.mega-row:hover .mega-row__arrow{ color: var(--primary-2); transform: translateX(4px); }

@media (max-width: 1180px){
  .mega{ display: none; }
}
.nav__right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav__icon-btn{
  width:44px; height:44px; display:grid; place-items:center; border-radius:6px;
  background:transparent; color:#fff; border:0; cursor:pointer;
  transition: background .15s ease;
}
.nav__icon-btn:hover{ background: rgba(255,255,255,.08); }
.nav__phone{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:16px;}
.nav__cta{
  /* Flat, full-bleed block — exactly as the Figma design specifies. The two
     infinite decorative loops (navCtaBreath 7s, navCtaShimmer 4.5s) that used
     to live here were invented by the prototype and are gone: ambient motion
     on a capital-purchase CTA reads as retail urgency, and a blurred,
     always-animating layer kept a compositor layer repainting all session.
     The old :hover also lifted the button 1px — and since it is exactly the
     76px height of .nav, that opened a visible seam in the fixed bar. It now
     responds with colour only.
     Fill is --primary-ink, not --primary: white 16px on #DF5129 measures
     3.93:1, below the 4.5:1 AA floor. #C2421C measures 5.13:1. */
  display: inline-flex; align-items: center;
  height: 76px; padding: 0 var(--sp-6);
  background: var(--primary-ink); color: #fff; border: 0;
  font: 500 var(--t-body)/76px var(--font-sans); letter-spacing: .2px;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out);
}
.nav__cta:hover{ background: var(--primary-700); }
.nav__cta:active{ background: var(--primary-800); }

/* ============================================================ PAGE HERO (dark panel + image) */
/* On every 1440px artboard the photo band is 571px and the dark panel runs
   327→755 — i.e. it overhangs the photo by 184px onto the page ground. The
   section therefore has to be 679px tall (76 + 679 = 755); at 571px the old
   value clipped 108px of the panel off. */
.phero{
  position: relative;
  margin-top: 76px;
  height: 679px;
  overflow: hidden;

  /* Every number below comes off the 1440px artboard, where the 1272px
     container leaves exactly 84px each side — the same as --pad-x. That
     coincidence is why the raw pixels worked at 1440 and fell apart above it:
     the panel stayed 924px while the viewport grew, so at 2000px it left
     1076px of dead ground beside it and the photo detached by 776px.

     --gutter is that 84px at 1440 and grows with the centred container above
     it, so the composition holds at any width. Below 1440 it floors at
     --pad-x, which is what the narrow layouts already assumed. */
  --gutter: max(var(--pad-x), calc((100% - var(--container)) / 2));
}
.phero__img{
  /* Full height, not a 571px band. The artboard draws the photo as a band and
     the dark panel below its lower edge, which leaves a large empty rectangle
     to the right of the panel — 326x501 on Termékeink, and it reads as an
     unfinished page. A hero photograph fills the hero; the panel sits on it. */
  position: absolute; inset: 0;
  background: url('../img/home-hero.jpg') center/cover no-repeat;
  background-size: cover;
  transform: scaleX(-1);
}
/* The --cat variant re-tasks .phero__img as the product cut-out, so the
   full-bleed photo band needs its own element. Geometry lives here rather than
   on the element: it was inline, and an inline style beats the mobile rule that
   re-flows the hero — which left this band painting over the breadcrumbs, the
   heading and the CTA at 375px. Only the background-image stays in the markup,
   because that is per-page. */
.phero__bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* The artboard lays a 20% black fill over the band (727:818, fill[1]). It is
   what stops the photograph competing with the dark panel that sits on it. */
.phero--wordmark .phero__bg::after{
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.20);
}
.phero__panel{
  position:absolute; left:0; top: 251px;
  width: calc(var(--gutter) + 840px); height: 428px;   /* 924 at 1440 */
  background: var(--dark);
}
/* The copy is vertically CENTRED in the 428px panel band, not pinned to a
   fixed offset — which is why the designer's top value differs on every page
   (393 on Márkaszerviz, 444 on Rólunk, 469 on Kapcsolat, 495 on Bérlés) while
   the panel centre is 541 on all of them. Centring reproduces every one of
   those from a single rule. */
.phero__copy{
  position: absolute; left: var(--gutter); top: 251px;
  height: 428px;
  width: 734px; max-width: calc(100% - 2*var(--gutter));
  display: flex; flex-direction: column; justify-content: center;
  color: #fff;
}
.phero__title{
  margin: 0; font-family: var(--font-display);
  font-weight: 600; font-size: var(--t-h1);
  /* was line-height:1 — below the --lh-display floor, which clips the double
     acute on Ő/Ű the moment a hero title wraps to a second line. */
  line-height: var(--lh-display);
  letter-spacing: 0.2px;
  color: #fff;
}
.phero__title em{ font-style: normal; color: var(--primary-2); }
.phero__sub{
  margin: 36px 0 0; max-width: 720px;
  font-weight: 400; font-size: 18px; line-height: 28px;
  color: rgba(255,255,255,.78);
}
/* The crumb strip is white type sitting directly on the hero photograph, and
   these are bright industrial photos — pale walls, sunlit ceilings, white
   cubes. Measured across all 14 pages that have a photo hero, the worst pixel
   under the glyphs ran 1.00–1.10:1 and most of the strip failed AA. Alpha
   cannot rescue it: white at .55 tops out at 6.16:1 and falls under 4.5:1 the
   moment the backdrop passes ~#464646.

   So the strip carries its own ground rather than trusting the photo. A local
   gradient behind the crumbs only — not a scrim over the whole photo, which
   would also darken the --wordmark and --cat variants where .phero__img is
   re-tasked as a product cut-out. */
.phero__crumbs{
  position:absolute; left: 0; right: 0; top:0;
  padding: 60px var(--gutter) 18px;
  display:flex; flex-wrap: wrap; row-gap: 4px; gap:10px; align-items:center;
  font-size:13px; letter-spacing:.4px; text-transform:uppercase;
  color: #fff;
  /* A solid band, not a gradient. A fading one put the glyphs in its
     transparent half — 9.1:1 at the top stop but ~2:1 where the text actually
     sits. The fade is a separate strip BELOW the text instead, so the
     transition still reads soft without touching the contrast. */
  background: rgba(18,18,18,.82);   /* white .86 on this over pure white = 8.5:1 */
}
.phero__crumbs::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:56px;
  background: linear-gradient(180deg, rgba(18,18,18,.82), rgba(18,18,18,0));
  pointer-events:none;
}
.phero__crumbs a{ color: rgba(255,255,255,.86); }   /* 8.9:1 on the scrim */
.phero__crumbs a:hover{ color: #fff; text-decoration: underline; }
.phero__crumbs span{ color: #fff; }

/* ============================================================ CTA STRIP (orange) */
.cta-strip{
  position: relative;
  margin-top: 90px;
  background: var(--primary);
  padding: 28px var(--pad-x);
}
.cta-strip__inner{
  max-width: var(--container); margin: 0 auto;
  display:flex; align-items:center; justify-content: space-between; gap: 32px;
}
.cta-strip__title{
  margin:0; font: 500 24px/1.2 var(--font-display); color:#fff; letter-spacing: .2px;
  flex:1;
}
.cta-strip__btn{
  display:inline-flex; align-items:center; gap:14px;
  height: 44px; padding: 0 22px;
  background:#fff; color: var(--ink);
  border-radius: var(--r-full); font: 600 var(--t-small) var(--font-sans); letter-spacing:.4px;
  border: 0; cursor:pointer;
  box-shadow: var(--e0);
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.cta-strip__btn:hover{ background: var(--dark); color: #fff; }

/* ============================================================ SECTION HEAD */
.section-head{
  display:flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
}
.section-head h2{
  margin:0; font-family: var(--font-display);
  font-weight: 500; font-size: 50px; line-height: 1; letter-spacing:.2px;
  color: var(--ink);
}
.section-head h2 em{ font-style: normal; color: var(--primary-text); }
.section-head .section-head__sub{
  color: var(--ink-2); font-size: 16px; max-width: 520px; line-height: 1.5;
}

.eyebrow{
  display:inline-block; font-size: var(--t-small); letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--primary-text);
  margin-bottom: 14px; font-weight: 600;
}

/* link with arrow (Tovább) */
.link-more{
  display:inline-flex; align-items:center; gap:10px;
  color: var(--primary-text); font-weight: 600; font-size: 14px;
  letter-spacing:.4px; text-decoration: none;
  transition: gap .15s ease;
}
.link-more:hover{ gap: 14px; }
.link-more svg{ width: 14px; height: 14px; }

/* button — pill */
.pill{
  display:inline-flex; align-items:center; gap:14px;
  height: var(--ctl-h); padding: 0 26px;
  background: var(--primary-ink); color:#fff;
  border-radius: var(--r-full); font: 500 var(--t-body) var(--font-sans); letter-spacing:.2px;
  border:0; cursor:pointer;
  box-shadow: var(--e0);
  transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.pill:hover{ background: var(--primary-700); }
.pill--ghost{
  background: transparent; color: var(--ink); border: 1px solid var(--line); box-shadow:none;
}
.pill--ghost:hover{ background:#fff; border-color: var(--primary); color: var(--primary-text); }
.pill--white{ background:#fff; color: var(--ink); }
.pill--dark{ background: var(--dark); color:#fff; }

/* ============================================================ PARTNERS */
.partners{
  background: var(--dark);
  color:#fff;
  padding: 64px var(--pad-x);
}
.partners__inner{ max-width: var(--container); margin: 0 auto; }
.partners h2{
  margin: 0 0 6px; font: 500 50px/1 var(--font-display); letter-spacing:.2px; color:#fff;
}
.partners__sub{
  font-size: 16px; color: var(--primary-2); margin: 0 0 36px;
}
.partners__row{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  align-items: center;
}
.partners__logo{
  background:#fff; border-radius: 6px; height: 95px;
  display:grid; place-items:center;
  padding: 12px;
}
.partners__logo img{ max-height: 60px; max-width: 90%; object-fit:contain; }
.partners__nav{
  display:flex; gap: 10px; justify-content: center; margin-top: 28px;
}
.partners__nav button{
  width: 34px; height: 34px; border-radius: 50%;
  background:#fff; color: var(--ink);
  border:0; cursor:pointer; display:grid; place-items:center;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: background .15s ease;
}
.partners__nav button:hover{ background: var(--primary-ink); color:#fff; }
.partners__nav button:disabled{ opacity:.5; cursor: default; }

/* ============================================================ FOOTER */
.footer{
  background: var(--dark);
  color: #fff;
  padding: 64px var(--pad-x) 40px;
}
.footer__inner{ max-width: var(--container); margin: 0 auto; }
.footer__top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__brand img{ width: 218px; height: auto; opacity:.9; }
.footer__intro{
  margin-top: 22px; padding-left: 14px; border-left: 2px solid var(--primary);
  font-size: 14px; line-height: 22px; font-weight:300; color: rgba(255,255,255,.78);
}
.footer__intro b{ display:block; margin-bottom: 6px; font-size:16px; font-weight: 700; color:#fff; }
.footer__col :is(h3,h4){
  margin: 0 0 16px; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight:600;
}
.footer__col ul{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }
.footer__col a{
  color: rgba(255,255,255,.78); font-size: 14px;
  transition: color .15s ease;
}
.footer__col a:hover{ color: var(--primary-2); }
.footer__bottom{
  margin-top: 24px;
  display:flex; justify-content:space-between; align-items:center; gap: 16px;
  color: rgba(255,255,255,.5); font-size: 13px;
}
.footer__social{ display:flex; gap: 8px; }
.footer__social a{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  transition: all .15s ease;
}
.footer__social a:hover{ background: var(--primary-ink); color:#fff; }

.icon{ width:20px; height:20px; }
.icon--lg{ width:24px; height:24px; }
.icon--sm{ width:16px; height:16px; }
/* Was only ever declared scoped to .cgdpr__box, so an .icon--xs used anywhere
   else had no size at all and the SVG expanded to fill its box. */
.icon--xs{ width:14px; height:14px; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1180px){
  :root{ --pad-x: 48px; }
  .nav__links{ display:none; }
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .partners__row{ grid-template-columns: repeat(3, 1fr); }
  .section-head h2{ font-size: 38px; }
}
@media (max-width: 720px){
  :root{ --pad-x: 24px; }
  .footer__top{ grid-template-columns: 1fr; }
  .nav__cta{ display:none; }
  .nav__phone span{ display:none; }
  .partners{ padding: 48px 24px; }
  .partners__row{ grid-template-columns: repeat(2, 1fr); }
  .partners h2{ font-size: 36px; }
  .cta-strip__inner{ flex-direction: column; align-items: flex-start; }
  .section-head{ flex-direction: column; align-items: flex-start; }
  .section-head h2{ font-size: 32px; }
}

/* ============================================================ SEARCH OVERLAY (Launchpad) */
.srch{
  position: fixed; inset: 0; z-index: 200;
  background: #0a0a0a;
  animation: srchFade .25s ease both;
  isolation: isolate;
  overflow-y: auto;
}
@keyframes srchFade{ from{ opacity: 0; } to{ opacity: 1; } }
.srch__bg{
  position: fixed; inset: 0;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(223,81,41,.18) 0%, transparent 60%),
    #0a0a0a;
  z-index: 0;
}
.srch__close{
  position: fixed; top: 26px; right: 28px;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  z-index: 3;
}
.srch__close:hover{ background: var(--primary-ink); border-color: var(--primary-ink); }
.srch__close svg{ width: 20px; height: 20px; }

.srch__inner{
  position: relative; z-index: 2;
  width: 100%; max-width: 1100px;
  margin: 12vh auto 0; padding: 0 40px 80px;
  animation: srchUp .4s cubic-bezier(.2,.7,.2,1) both;
}
/* The closing keyframe is transform:none, not translateY(0): with
   animation-fill-mode:both a lingering transform — even an identity one —
   makes .srch__inner a containing block for position:fixed descendants, which
   dragged the close button out of the viewport corner once it moved inside the
   dialog (top 26/right 28 became top 5/right 77). */
@keyframes srchUp{ from{ opacity: 0; transform: translateY(24px); } to{ opacity: 1; transform: none; } }

.srch__field{
  display: flex; align-items: center; gap: 18px;
  height: 84px; padding: 0 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  transition: border-color .2s ease, background .2s ease;
}
.srch__field:focus-within{
  border-color: var(--primary);
  background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 6px rgba(223,81,41,.12);
}
.srch__icon{ width: 26px; height: 26px; color: rgba(255,255,255,.65); flex: 0 0 auto; }
.srch__input{
  flex: 1; min-width: 0;
  height: 100%; border: 0; background: transparent;
  font: 400 24px/1 var(--font-display);
  color: #fff; letter-spacing: .2px;
  outline: none;
}
.srch__input::placeholder{ color: rgba(255,255,255,.45); }
.srch__esc{
  font: 500 11px/1 var(--font-sans); letter-spacing: .12em;
  padding: 7px 11px; border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.65);
}

.srch__chips{
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 26px 0 6px;
}
.srch__chip{
  height: 38px; padding: 0 20px;
  border-radius: 100px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  font: 400 14px/1 var(--font-display); letter-spacing: .2px;
  cursor: pointer;
  transition: all .18s ease;
}
.srch__chip:hover{ background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
.srch__chip.is-active{
  background: var(--primary-ink); border-color: var(--primary-ink); color: #fff;
}

.srch__section-title{
  margin: 32px 0 18px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.srch__empty{
  color: rgba(255,255,255,.65); font-size: 15px;
  padding: 24px; text-align: center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.srch__empty a{ color: var(--primary-2); text-decoration: none; font-weight: 500; }
.srch__empty a:hover{ color: #fff; }

.srch__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.srch-card{
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; color: #fff;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  animation: srchUp .4s cubic-bezier(.2,.7,.2,1) both;
}
.srch-card:hover{
  background: rgba(255,255,255,.08);
  border-color: var(--primary-2);
}
.srch-card__img{
  height: 140px; width: 100%;
  /* contain, not cover: these are cut-out product shots and cover cropped them */
  background: #1a1a1a center/contain no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.srch-card:hover .srch-card__img{ transform: scale(1.05); }
.srch-card__body{ padding: 16px 18px 18px; }
.srch-card__cat{
  font: 500 11px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary-2); margin-bottom: 8px;
}
.srch-card__name{
  font: 500 18px/1.2 var(--font-display); color: #fff; letter-spacing: .2px;
}
.srch-card__arrow{
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.5);
  display: grid; place-items: center;
  font-size: 16px; color: #fff;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
.srch-card:hover .srch-card__arrow{ opacity: 1; transform: translateX(0); }

.srch__quick{
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.srch__quick-label{
  font: 500 12px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-bottom: 16px;
}
.srch__quick-list{ display: flex; gap: 10px; flex-wrap: wrap; }
.srch__quick-item{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  padding: 8px 16px; border-radius: 100px;
  color: rgba(255,255,255,.78); cursor: pointer;
  font: 400 14px/1.2 var(--font-display);
  transition: all .15s ease;
}
.srch__quick-item:hover{ color: #fff; background: rgba(255,255,255,.08); border-color: var(--primary); }

@media (max-width: 720px){
  .srch__inner{ margin-top: 8vh; padding: 0 18px 40px; }
  .srch__field{ height: 64px; padding: 0 20px; }
  .srch__input{ font-size: 18px; }
  .srch__esc{ display: none; }
  .srch__grid{ grid-template-columns: 1fr; }
  .srch-card__img{ height: 120px; }
}

/* ============================================================ MOBILE NAV
   NOT in the Claude Design prototype. The mockup hides .nav__links below
   1180px with no replacement, which would leave phones/tablets with no
   navigation at all. Built from the existing mega-menu tokens so it reads
   as part of the same system. Remove this block to return to the mockup. */
.nav__burger{
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0; padding: 0;
  color: #fff; cursor: pointer;
  place-items: center;
}
.nav__burger-box{
  position: relative;
  width: 22px; height: 14px;
}
.nav__burger-box span{
  position: absolute; left: 0;
  display: block; width: 100%; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s ease;
}
.nav__burger-box span:nth-child(1){ top: 0; }
.nav__burger-box span:nth-child(2){ top: 6.25px; }
.nav__burger-box span:nth-child(3){ top: 12.5px; }
.nav__burger.is-open .nav__burger-box span:nth-child(1){ transform: translateY(6.25px) rotate(45deg); }
.nav__burger.is-open .nav__burger-box span:nth-child(2){ opacity: 0; }
.nav__burger.is-open .nav__burger-box span:nth-child(3){ transform: translateY(-6.25px) rotate(-45deg); }

.mnav{
  position: fixed; inset: 76px 0 0;
  z-index: 45;
  background: rgba(28,28,28,.97);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid rgba(255,255,255,.06);
  color: #fff;
  overflow-y: auto;
  padding: 8px var(--pad-x) 40px;
  /* Same defect as .mega: 20 drawer links sat in the tab order of every page
     while the drawer was closed. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .26s cubic-bezier(.2,.7,.2,1), transform .26s cubic-bezier(.2,.7,.2,1);
}
.mnav.is-open{ visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.mnav__link,
.mnav__trigger{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 16px;
  padding: 20px 0;
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff; text-align: left; cursor: pointer;
  font: 500 20px/1.2 var(--font-sans); letter-spacing: .2px;
}
.mnav__link.is-active{ color: var(--primary-2); }
.mnav__trigger svg{
  width: 12px; height: 7px; flex: 0 0 auto;
  color: rgba(255,255,255,.5);
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.mnav__trigger.is-open svg{ transform: rotate(180deg); color: var(--primary-2); }
.mnav__sub{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.2,.7,.2,1);
}
.mnav__sub.is-open{ grid-template-rows: 1fr; }
.mnav__sub-inner{ overflow: hidden; visibility: hidden; }
.mnav__sub.is-open .mnav__sub-inner{ visibility: visible; }
.mnav__sub a{
  display: block;
  padding: 14px 0 14px 18px;
  border-left: 1px solid rgba(255,255,255,.12);
  margin-left: 2px;
  font: 400 16px/1.35 var(--font-sans);
  color: rgba(255,255,255,.72);
}
.mnav__sub a:first-child{ padding-top: 18px; }
.mnav__sub a:last-child{ padding-bottom: 22px; }
.mnav__sub a:hover{ color: var(--primary-2); }
.mnav__sub span{
  display: block;
  font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,.45);
  margin-top: 3px;
}
.mnav__foot{
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 32px;
}
.mnav__phone{
  display: inline-flex; align-items: center; gap: 12px;
  font: 500 18px/1 var(--font-sans); color: #fff;
}
.mnav__phone svg{ width: 20px; height: 20px; color: var(--primary-2); }
.mnav__cta{
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px;
  background: var(--primary-ink);   /* action fill under white text — 5.13:1, not --primary’s 3.93 */ color: #fff;
  border-radius: 100px;
  font: 500 16px/1 var(--font-sans); letter-spacing: .2px;
}
.mnav__cta:hover{ background: var(--primary-700); }

@media (max-width: 1180px){
  .nav__burger{ display: grid; }
}
@media (min-width: 1181px){
  .mnav{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .mnav, .mnav__sub, .nav__burger-box span{ transition: none; }
}

/* The JSX set this via the React `style` prop; promoted to a real rule so the
   markup stays free of inline styles. (.nav__cta's display is merged into its
   base rule above — declaring it down here would override the max-width:720px
   rule that hides the button on phones.) */
.phero__copy .eyebrow{ color: var(--primary-2); margin-bottom: 18px; }

/* ============================================================ MOTION FLOOR
   Wins over every component rule in shared.css and in the page stylesheets
   regardless of load order, because every declaration carries !important. It
   used to rely on being the last block in the file; the hero variants were
   later appended after it, so the guarantee now rests on !important alone —
   which is the stronger of the two anyway. Do not remove those flags. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================ FOCUS
   Before this block the codebase had exactly ONE authored :focus-visible rule
   across ~2000 lines, against three rules that stripped the native outline.
   Keyboard users had almost no visible focus anywhere. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* Controls flush to an edge cannot show an outer ring — inset it instead. */
.nav__cta:focus-visible,
.mnav__cta:focus-visible,
.cta-strip__btn:focus-visible{
  outline: 2px solid #fff;
  outline-offset: -4px;
}
.srch__input:focus-visible{ outline: none; }
.srch__field:focus-within{ outline: 2px solid var(--primary-2); outline-offset: 2px; }

/* ============================================================ PAGE HERO — WORDMARK VARIANT
   Termékeink and Bálázógépek extend the standard .phero with a very large,
   translucent section word sitting below the dark panel, and push the panel
   down to make room. Everything else is inherited. */
/* 897, not 874. The wordmark sits at top:785 and its 108px box runs to 893, so
   at 874 the section clipped the bottom of the word — which is what the page
   looked broken from. 897 is the artboard's own number: the next section
   (Frame 164) starts at page y973, less the 76px nav. */
.phero--wordmark{ height: 897px; }
.phero--wordmark .phero__panel{ top: 391px; }
/* This variant sets the panel lower and puts a display word under it, so the
   copy is pinned rather than centred. */
.phero--wordmark .phero__copy{ top: 479px; height: auto; width: 501px; justify-content: flex-start; }
.phero--wordmark .phero__sub{ margin-top: 18px; font-size: var(--t-body-lg); }
.phero__wordmark{
  position: absolute; left: calc(var(--gutter) - 6px); top: 785px;   /* Figma page y 861 − 76px nav */
  margin: 0;
  font: 500 108px/1 var(--font-display);
  letter-spacing: var(--tr-hero);
  color: rgba(255,255,255,.57);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
/* .phero--wordmark has ONE photograph: the full-width .phero__bg band. It used
   to also re-task .phero__img into a 624px picture on the right, which the
   artboard does draw — but rendering both put two competing photos in the same
   hero. --cat still re-tasks .phero__img, as the machine cut-out; that rule is
   further down and is a different thing. */
@media (max-width: 1180px){
  .phero--wordmark{ height: 720px; }
  .phero__wordmark{ font-size: 72px; top: 600px; }
}

/* ============================================================ CONTACT BLOCK
   The Figma closing block has NO background fill: it sits on the page ground
   with dark text, white input fields, and orange icons. The prototype painted
   the whole section --primary and turned every string white, which put 17px
   body copy at 3.93:1 — below the AA floor — and forced a second, floating
   label form system that fought the one on the contact page.
   This is the design's version: one form pattern, and contrast that passes.

   Lives in shared.css because seven of the site's pages close with it. It used
   to sit in home.css, which meant termekeink.html rendered the markup with no
   stylesheet behind it at all. */
.hcontact{
  margin-top: var(--section-y);
  padding-bottom: var(--section-y);
  color: var(--ink);
}
.hcontact__inner{
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.hcontact__head{
  grid-column: 1 / -1;
  margin-bottom: var(--sp-7);
  max-width: 920px;
}
.hcontact__eyebrow{ margin-bottom: var(--sp-4); color: var(--primary-text); }
.hcontact__title{
  margin: 0;
  font: 400 var(--t-h1)/var(--lh-display) var(--font-display);
  color: var(--ink);
  letter-spacing: var(--tr-h1);
  text-wrap: balance;
}
.hcontact__title em{ font-style: normal; color: var(--primary-text); font-weight: 500; }
.hcontact__lede{
  margin: var(--sp-5) 0 0;
  font-size: var(--t-body-lg); line-height: var(--lh-body);
  color: var(--ink); max-width: 640px;
}
.hcontact__lede b{ font-weight: 700; }

/* ---- form: label above the field, as designed ---- */
.hcontact__form{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-6); }
.cfield{ display: flex; flex-direction: column; gap: var(--sp-2); }
.cfield--full{ grid-column: 1 / -1; }
.cfield label{
  font: 400 var(--t-body-lg)/1.3 var(--font-sans);
  color: var(--ink);
}
.cfield input,
.cfield textarea{
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--ink);
  font: 400 var(--t-body)/1.4 var(--font-sans);
  /* No outline:none here. It stripped the global :focus-visible ring from the
     closing contact form on 16 pages, leaving those fields with no visible
     keyboard focus at all. */
  transition: border-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.cfield textarea{ height: 132px; padding: 14px; resize: vertical; line-height: var(--lh-snug); }

/* Validation state for the closing contact form. The error text is created by
   shared.js on demand, so no page carries an empty node in its markup.
   --danger is used as TEXT here, so it has to clear 4.5:1 on --bg. */
.cfield.is-error input,
.cfield.is-error textarea{
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
.cfield__error{
  margin: 0;
  font-size: var(--t-small);
  line-height: var(--lh-snug);
  color: var(--danger);
}
.cfield input:focus, .cfield textarea:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ---- consent ---- */
.cgdpr{
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--t-small); color: var(--ink); line-height: var(--lh-snug);
  cursor: pointer; user-select: none;
}
.cgdpr input{ position: absolute; opacity: 0; pointer-events: none; }
.cgdpr__box{
  flex: 0 0 auto; width: 20px; height: 20px;
  border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: var(--surface);
  display: grid; place-items: center;
  color: transparent;
  transition: background-color var(--d-1) var(--ease-out), border-color var(--d-1) var(--ease-out);
  margin-top: 1px;
}

.cgdpr input:checked ~ .cgdpr__box{
  background: var(--primary-ink); border-color: var(--primary-ink); color: #fff;
}
.cgdpr input:focus-visible ~ .cgdpr__box{ outline: 2px solid var(--focus-color); outline-offset: 2px; }
.cgdpr a{ color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- submit ---- */
.cbtn{
  grid-column: 1 / -1; justify-self: start;
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-2);
  height: var(--ctl-h-lg); padding: 0 var(--sp-6);
  background: var(--primary-ink); color: #fff;
  border: 0; border-radius: var(--r-full);
  font: 600 var(--t-body)/1 var(--font-sans); letter-spacing: .2px;
  cursor: pointer;
  transition: background-color var(--d-1) var(--ease-out);
}
.cbtn:hover:not(:disabled){ background: var(--primary-700); }
.cbtn:active:not(:disabled){ background: var(--primary-800); }
.cbtn:disabled{
  background: var(--bg-2); color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: not-allowed;
}
.cbtn .icon--sm{ width: 18px; height: 18px; }

/* ---- details column: icon + text on the page ground, no card ---- */
.hcontact__side{ position: sticky; top: 100px; }
.cside-list{ display: grid; gap: var(--sp-5); }
.cside-row{ display: grid; grid-template-columns: 28px 1fr; gap: var(--sp-4); }
.cside-icon{ color: var(--primary-2); display: grid; place-items: start center; padding-top: 2px; }
.cside-icon svg{ width: 20px; height: 20px; }
.cside-row__t{
  font: 500 var(--t-body-lg)/1.35 var(--font-sans);
  color: var(--dark);
  margin-bottom: 2px;
}
.cside-row__d{
  font: 300 var(--t-body-lg)/1.45 var(--font-sans);
  color: var(--dark);
}
.cside-row__d a{
  color: inherit; text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--d-1) var(--ease-out);
}
.cside-row__d a:hover{ border-bottom-color: var(--primary); }

@media (max-width: 980px){
  .hcontact__inner{ grid-template-columns: 1fr; gap: var(--sp-7); }
  .hcontact__form{ grid-template-columns: 1fr; gap: var(--sp-4); }
  .hcontact__side{ position: static; }
}

/* ============================================================ PRODUCT CARD
   The .machine card and the grid that holds it. Promoted out of home.css: the
   category template (7 pages) and the product template (46 pages) draw exactly
   the same card, and neither loads the homepage stylesheet. */
.prods{ margin-top: 110px; }
.prods__head{
  text-align: left;
  max-width: 1100px;
  margin: 0 0 50px;
}
.prods__title{
  margin: 0 0 22px;
  font: 500 34px/41.82px var(--font-display);
  color: var(--ink);
  letter-spacing: .2px;
}
.prods__lede{
  margin: 0 0 32px;
  max-width: 920px;
  font: 300 18px/28px var(--font-display);
  color: var(--ink);
  letter-spacing: .2px;
  text-wrap: pretty;
}
.prods__actions{
  display: flex; align-items: center;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 56px;
}
.prods__chips{
  display: flex; gap: 18px; flex-wrap: wrap;
  margin: 0;
}
.chip{
  display: inline-flex; align-items: center;
  height: 48px; padding: 0 36px;
  border-radius: 100px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-strong); cursor: pointer;
  font: 400 16px/1 var(--font-display);
  letter-spacing: .2px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.chip:hover{ border-color: var(--line-strong); }
.chip.is-active{ background: #4a4a4a; color: #fff; border-color: #4a4a4a; }
.prods__all{
  display: inline-flex; align-items: center; gap: 14px;
  height: 48px; padding: 0 28px;
  background: var(--primary-ink); color: #fff;
  border: 0;
  border-radius: var(--r-full);
  font: 400 16px/1 var(--font-display);
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow: var(--e0);
  transition: background-color var(--d-1) var(--ease-out);
}
.prods__all:hover{ background: var(--primary-700); }
.prods__all:active{ background: var(--primary-800); }
.prods__all-arrow{
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid #fff;
  color: currentColor;
}
.prods__all-arrow svg{ width: 10px; height: 10px; }

.prods__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
  margin-top: 16px;
}
.machine{
  position: relative;
  padding: 0 0 0 30px;
  display: flex; flex-direction: column; gap: 14px;
  text-decoration: none; color: var(--ink);
  transition: transform .25s ease;
}
.machine:hover .machine__name{ color: var(--primary-text); }
.machine__rail{
  position: absolute;
  left: 0; top: 41px;
  width: 2px; height: 184px;
  background: var(--primary);
}
.machine__name{
  font: 700 18px/1.3 var(--font-display);
  color: var(--ink);
  letter-spacing: .2px;
}
.machine__img{
  height: 214px;
  background-color: #f0eeec;
  /* The client's photography is cut-out product shots on transparency, not
     scene photos. `cover` cropped the machine; `contain` shows it whole,
     which is the only way a product card is honest about the hardware. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Without background-origin the image paints over the padding box, so the
     padding did nothing and every machine ran to within 6px of the frame. */
  padding: var(--sp-4);
  background-origin: content-box;
  border-radius: 5px;
  box-shadow: var(--frame);
}

/* ── product photography still to come ──────────────────────────────────
   33 of the 46 products have not been photographed yet. The image is a soft
   ghost built from the client's own 3110 shot — recognisably an ORWAK machine,
   deliberately unrecognisable as any PARTICULAR one — and it is labelled, so
   nobody reads it as the product. Borrowing another model's photograph would
   be a claim about hardware the client sells. */
.machine__img.is-placeholder,
.srch-card__img.is-placeholder{
  position: relative;
  background-size: 62%;
}
.machine__img.is-placeholder::after,
.srch-card__img.is-placeholder::after{
    /* Not "Fotó hamarosan": the client's own shoot list leaves 25 models unshot
     and does not mention 13 of ours at all, so a promise is not ours to make.
     This states the present fact instead. */
  content: "Nincs még fotó";
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center;
  font: 500 var(--t-micro)/1.6 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);              /* 4.52:1 on #f0eeec, the card tint */
}
.srch-card__img.is-placeholder{
  background-color: rgba(255,255,255,.06);
  /* The dark ghost measured 1.04:1 on this tile — invisible, leaving the
     caption to carry the state alone. Light ghost for the dark ground. */
  background-image: url('../img/prod/_placeholder-dark.png') !important;
}
.srch-card__img.is-placeholder::after{ color: var(--ink-on-dark-2); }

.machine__cat{
  font: 400 18px/1.3 var(--font-sans);
  color: var(--ink-3);
  letter-spacing: .2px;
}
.machine__more{
  display: inline-flex; align-items: center; gap: 6px;
  width: max-content;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--primary);
  color: var(--primary-text);
  font: 400 var(--t-body)/1.3 var(--font-sans);
  letter-spacing: .2px;
  transition: gap .2s ease;
}
.machine:hover .machine__more{ gap: 10px; }
.machine__more svg{ width: 12px; height: 12px; }

/* ============================================================ STATS
   Promoted: balazogep-berles.html draws the same four figures with the same
   count-up. The JS binding is [data-stats], in home.js. */
.stats{ margin-top: 110px; }
.stats__inner{
  background: var(--dark-3);
  border-radius: var(--r-3);
  padding: 80px var(--pad-x) 70px;
  color: #fff;
}
.stats__head{ max-width: 1058px; margin: 0 auto 50px; text-align: left; }
.stats__head h2{
  margin: 0 0 18px;
  font: 500 50px/1 var(--font-display); color: #fff; letter-spacing:.2px;
}
.stats__head h2 em{ font-style:normal; color: var(--primary-2); font-weight:600; }
.stats__head p{
  margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.78); font-weight: 300;
}
.stats__grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1440px; margin: 0 auto;
}
.stat{
  position: relative;
  padding: 0 22px;
  min-width: 0;
  border-left: 1px solid rgba(255,255,255,.12);
}
.stats__grid .stat:first-child{ border-left: 0; padding-left: 0; }
.stat__icon{
  width: 32px; height: 32px;
  display: flex; align-items: center;
  color: var(--primary-2);
  margin-bottom: 14px;
}
.stat__icon svg{ width: 32px; height: 32px; }
.stat__num{
  display: flex; align-items: baseline; gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font: 500 52px/1.1 var(--font-display);
  color: #f0f0f0;
  letter-spacing: .2px;
  font-variant-numeric: tabular-nums;
}
.stat__num-suf{
  color: var(--primary-2); font-size: 36px; font-weight: 500;
}
.stat__label{
  margin-top: 14px;
  font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.78); font-weight: 400;
  max-width: 240px;
}

/* ============================================================ FORM — CARD VARIANT
   The validated card form: label above the field, inline error text, success
   panel. Promoted because any page that gains a form needs the same states. */
.formcard{
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  padding: 36px 36px 32px;
  box-shadow: var(--e1);
}
.formcard__title{
  margin: 0 0 6px;
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: .2px;
}
.formcard__subtitle{
  margin: 0 0 26px; font-size: 14px; color: var(--ink-2);
}
.form-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.field{ display: flex; flex-direction: column; gap: 8px; }
.field--full{ grid-column: 1 / -1; }
.field label{
  font-size: 13px; font-weight: 600; letter-spacing: .4px;
  color: var(--ink); text-transform: uppercase;
}
.field label .req{ color: var(--primary-text); margin-left: 2px; }
.field input, .field textarea, .field select{
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  background: #fff;
  font: 400 var(--t-body) var(--font-sans);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea{
  height: 132px; padding: 14px;
  resize: vertical;
  line-height: 1.5;
}
.field input:focus, .field textarea:focus, .field select:focus{
  /* was outline:none — same defect as .cfield above */
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(223,81,41,.15);
}
.field.is-error input, .field.is-error textarea, .field.is-error select{
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192,51,31,.14);
}
.field__error{
  font-size: 12px; color: var(--danger);
  min-height: 14px;
}

.topic-row{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  grid-column: 1 / -1;
}
.topic{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 6px;
  padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
  color: var(--ink);
}
.topic:hover{ border-color: var(--primary-2); }
.topic.is-on{
  border-color: var(--primary);
  background: rgba(223,81,41,.06);
  box-shadow: inset 0 0 0 1px var(--primary);
}
.topic__t{ font-weight: 700; font-size: 14px; letter-spacing: .2px; }
.topic__d{ font-size: 12px; color: var(--ink-2); line-height: 1.4; }

.checkbox{
  display: flex; align-items: flex-start; gap: 12px;
  grid-column: 1 / -1;
  font-size: 14px; color: var(--ink); line-height: 1.5;
  cursor: pointer; user-select: none;
}
.checkbox input{
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; border: 1px solid var(--line-strong); border-radius: var(--r-1);
  background: #fff; flex: 0 0 18px; margin-top: 2px;
  display: grid; place-items: center; cursor: pointer;
  transition: all .15s ease;
}
.checkbox input:checked{ background: var(--primary); border-color: var(--primary); }
.checkbox input:checked::after{
  content: ""; width: 10px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px);
}
.checkbox input:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.checkbox a{ color: var(--primary-text); text-decoration: underline; }
.checkbox__error{
  display: block; color: var(--danger); font-size: 12px; margin-top: 4px;
}

.submit-row{
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 4px;
}
.submit-row__note{ font-size: 13px; color: var(--ink-2); }
.btn{
  appearance: none; border: 0; cursor: pointer;
  padding: 0 28px; height: 50px;
  border-radius: 6px;
  background: var(--primary-ink); color: #fff;
  font: 600 var(--t-small) var(--font-sans); letter-spacing: .4px;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.btn:hover{ background: var(--primary-700); }
.btn:active{ background: var(--primary-800); }

.btn--ghost{
  background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.btn--ghost:hover{ background: #fff; color: var(--primary-text); border-color: var(--primary); }

.form-success{
  border-radius: 8px;
  padding: 22px;
  background: rgba(223,81,41,.08);
  border: 1px solid rgba(223,81,41,.25);
  color: var(--ink);
  display: flex; align-items: flex-start; gap: 14px;
}
.form-success__icon{
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
  background: var(--primary); color: #fff;
  display: grid; place-items: center;
}
.form-success__t{ font-weight: 700; font-size: 16px; color: var(--ink); }
.form-success__d{ font-size: 14px; color: var(--ink); margin-top: 4px; }
.form-success__reset{ margin-top: 16px; height: 40px; padding: 0 18px; }

/* ============================================================ TEAM
   Promoted out of kapcsolat.css: rolunk.html draws the same staff cards, and
   six of its people are already here with their real photographs. */
.team{
  max-width: var(--container);
  margin: 120px auto 0;
  padding: 0 var(--pad-x);
}
.team__head{
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
}
.team__title{
  margin: 0;
  font-weight: 500; font-size: 36px; letter-spacing: .2px; color: var(--ink);
}
.team__title em{ font-style: normal; color: var(--primary-text); font-weight: 600; margin-right: 8px; }
.team__sub{
  color: var(--ink-2); font-size: 14px; max-width: 380px;
}
.team__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 28px;
}
/* The three columns stop shrinking around 840px and push the document wider
   than the viewport. This lived twice — once in kapcsolat.css, once in
   rolunk.css — for a component that is shared. Once, here. */
@media (max-width: 1180px){ .team__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  720px){ .team__grid{ grid-template-columns: 1fr; } }
.person{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  border: 1px solid var(--line-2);
  transition: border-color var(--d-1) var(--ease-out);
}
.person:hover{ border-color: var(--primary); }
.person__avatar{
  width: 88px; height: 88px; border-radius: 50%;
  background-color: #eee; background-size: cover; background-position: center;
  border: 3px solid #fff;
  box-shadow: var(--frame);
}
.person__name{
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px; line-height: 1.3; letter-spacing: 0;
  color: var(--ink); margin: 0;
}
.person__role{
  margin: 4px 0 8px;
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
}
.person__email{
  color: var(--primary-text);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-size: 15px; word-break: break-all;
}
.person__email:hover{ color: var(--primary-700); }

/* ============================================================ SPLIT ROW
   A media panel on one side, a rule-led text column on the other, optionally
   on a full-bleed orange field. Nineteen instances across seven pages — the
   single biggest reuse on the site. `.pcat` is kept as an alias so the
   already-built Termékeink rows keep working.

   In WordPress this becomes one template part fed by a flexible-content row.

   Three custom properties carry every geometry difference the artboards ask
   for, so a page never needs to redeclare the component:
     --split-rule-h    height of the vertical rule (default: full column)
     --field-top       where the orange field starts inside the row
     --field-bottom    how far it overshoots the bottom */
.split,
.pcat{
  position: relative;
  margin-top: var(--row-y, var(--section-y));
  --split-rule-h: 100%;
  --field-top: 0px;
  --field-bottom: 0px;
}
.split__inner,
.pcat__inner{
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}
/* Order-swap on the children, never a reversed grid: the DOM stays in reading
   order for screen readers and for the CMS loop. */
.split--flip .split__media,
.pcat--flip .pcat__media{ order: 2; }
.split--flip .split__body,
.pcat--flip .pcat__body{ order: 1; }

/* The shipped Termékeink proportions, kept as an opt-in. */
.split--wide-media .split__inner,
.pcat__inner{ grid-template-columns: 625fr 500fr; }
.split--wide-media.split--flip .split__inner,
.pcat--flip .pcat__inner{ grid-template-columns: 500fr 625fr; }

.split__media,
.pcat__media{
  aspect-ratio: 625 / 408;
  background: var(--bg-2) center/cover no-repeat;
  border-radius: var(--r-2);
  box-shadow: var(--frame);
}

/* A cut-out product shot on a feature row. This MUST sit after the rule above:
   that one sets `background` as a shorthand, which resets background-size back
   to cover, and at equal specificity the later rule wins. Declared earlier in
   the file it was entirely dead and the three real 3110 photographs were being
   cropped through the middle of the machine. */
.split__media--product{
  background-color: #f0eeec;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* An honest placeholder beats borrowing an unrelated photograph. Four of the
   product page's five rows and all four of Rólunk's need this. */
.split__media--pending,
.pcat__media--pending{
  display: grid; place-items: center;
  background: var(--bg-2);
  color: var(--ink-3);
  font: 400 var(--t-small)/var(--lh-snug) var(--font-sans);
  text-align: center;
  padding: var(--sp-5);
  box-shadow: inset 0 0 0 1px var(--line);
}

.split__body,
.pcat__body{
  position: relative;
  padding-left: var(--sp-4);
}
.split__body::before,
.pcat__body::before{
  content: "";
  position: absolute; left: 0; top: 0;
  width: var(--bw-rule); height: var(--split-rule-h);
  background: var(--primary);
}
.split--bare .split__body{ padding-left: 0; }
.split--bare .split__body::before{ display: none; }

.split__title,
.pcat__title{
  margin: 0 0 var(--sp-3);
  font: 700 var(--t-h4)/var(--lh-head) var(--font-display);
  color: var(--ink);
  letter-spacing: .2px;
  text-wrap: balance;
}
.split__text,
.pcat__text{
  margin: 0 0 var(--sp-5);
  font: 400 var(--t-body-lg)/var(--lh-body) var(--font-display);
  color: var(--ink);
  text-wrap: pretty;
}
.split__text:last-child,
.pcat__text:last-child{ margin-bottom: 0; }
.split__cta{ margin-top: var(--sp-5); }

/* The row's own go-here affordance: a 192×38 white pill, as the artboards
   draw it. Named .pcat__more in the shipped Termékeink markup; .split__more
   is the name new pages should use. */
.split__more,
.pcat__more{
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  min-width: 192px; height: 38px; padding: 0 var(--sp-5);
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-full);
  font: 400 var(--t-body)/1 var(--font-sans);
  box-shadow: var(--e1);
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
.split__more:hover,
.pcat__more:hover{ background: var(--dark); color: #fff; }
.split__more svg,
.pcat__more svg{ width: 10px; height: 10px; }

/* ---- rows painted on a full-bleed orange field --------------------------
   Always --primary-ink, never --primary: these fields carry 16-18px body
   copy, which measures 3.93:1 on #DF5129 and 5.13:1 on #C2421C. */
.split--field,
.pcat--field{
  padding-bottom: var(--sp-7);
  isolation: isolate;
}
.split--field::before,
.pcat--field::before{
  content: "";
  position: absolute; left: 0; right: 0;
  top: var(--field-top); bottom: var(--field-bottom);
  background: var(--primary-ink);
  z-index: -1;
}
/* Was top:104px, which started the orange fill 104px BELOW the body cell — so
   the row's white heading and its first two lines sat on the #F3F2F2 page
   ground at 1.12:1, invisible. .split--field, the same component, starts at 0
   and measures 5.13:1. Matching it. */
.pcat--field::before{ top: 0; }
.split--field .split__body::before,
.pcat--field .pcat__body::before{ background: rgba(255,255,255,.55); }
.split--field .split__title, .split--field .split__text,
.pcat--field .pcat__title, .pcat--field .pcat__text{ color: #fff; }
.split--field .list-check{ color: #fff; }
.split--field .list-check li::marker{ color: rgba(255,255,255,.85); }

@media (max-width: 1180px){
  .split__inner, .pcat__inner,
  .split--wide-media .split__inner,
  .split--wide-media.split--flip .split__inner,
  .pcat--flip .pcat__inner{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .split--flip .split__media, .split--flip .split__body,
  .pcat--flip .pcat__media, .pcat--flip .pcat__body{ order: 0; }
  .split--field::before, .pcat--field::before{ top: 0; bottom: 0; }
  .split--field, .pcat--field{ padding-block: var(--sp-6); }
  .split__media, .pcat__media{ max-height: 380px; }
  .split{ --split-rule-h: 100%; }
}

/* ============================================================ LIST
   Figma stores these as one text node with newlines and no markers. Six pages
   were about to invent six ways to render them. The <ul> carries the meaning;
   the marker is decoration, which is what makes the accent colour defensible. */
.list-check{
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid; gap: var(--sp-3);
  font: 400 var(--t-body-lg)/var(--lh-snug) var(--font-sans);
  color: var(--ink);
}
.list-check li{
  position: relative;
  padding-left: 26px;
}
.list-check li::before{
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
}
.list-check--check li::before{
  content: "";
  top: 0.30em; left: 1px;
  width: 6px; height: 11px;
  border: solid var(--primary);
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: none;
  transform: rotate(45deg);
}
.split--field .list-check li::before{ background: rgba(255,255,255,.85); border-color: rgba(255,255,255,.85); }

/* ============================================================ LARGE LEDE
   A standing 30px/300 paragraph. Three pages named it independently as their
   own component; it is one type step the scale was missing. */
.lede-lg{
  margin: 0 0 var(--sp-6);
  font: 300 var(--t-lead-lg, 1.875rem)/1.40 var(--font-display);
  letter-spacing: .2px;
  color: var(--ink);
  max-width: 22ch;
  max-width: min(920px, 60ch);
  text-wrap: pretty;
}

/* ============================================================ BENEFITS
   Icon above label. Icons bottom-align to a shared line, labels top-align to
   a shared line, so the row reads as a row even when Mulish's metrics run
   wider than Effra's. */
.benefits{ margin-top: var(--section-y); }
.benefits__grid{
  display: grid;
  grid-template-columns: repeat(var(--benefits-cols, 5), 1fr);
  gap: var(--sp-6);
  align-items: end;
}
.benefits__item{ display: grid; gap: var(--sp-4); justify-items: center; text-align: center; }
.benefits__icon{
  width: 48px; height: 48px;
  color: var(--primary);            /* 3.39:1 — clears the 3:1 non-text bar */
  align-self: end;
}
.benefits__icon svg{ width: 100%; height: 100%; }
.benefits__label{
  margin: 0;
  min-height: 2.8em;                /* two lines, so the baseline survives */
  font: 500 var(--t-body)/var(--lh-snug) var(--font-sans);
  color: var(--ink);
  text-wrap: balance;
}
@media (max-width: 980px){ .benefits__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .benefits__grid{ grid-template-columns: 1fr; } }

/* ============================================================ CAROUSEL NAV
   The 34px circle pair. Was .partners__nav button; promoted so the product
   carousel and the blog pager stop reinventing it. The hit area is padded to
   44px while the circle stays 34px. */
.cnav{ display: flex; gap: 10px; }
.cnav__btn,
.partners__nav button{
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: #fff; color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--e1);
  position: relative;
  transition: background-color var(--d-1) var(--ease-out), color var(--d-1) var(--ease-out);
}
/* The glyph is sized here, with the component. It used to be sized only inside
   .postlist__pager in blog.css, so the same buttons on orwak-3110.html got an
   unsized <svg> — which defaults to 300×150 and rendered eleven times too big
   inside a 34px circle. A component's own metrics belong with the component. */
.cnav__btn svg,
.partners__nav button svg{ width: 11px; height: 11px; }
.cnav__btn--prev svg{ transform: scaleX(-1); }

.cnav__btn::after,
.partners__nav button::after{        /* 44×44 target without growing the circle */
  content: ""; position: absolute; inset: -5px;
}
.cnav__btn:hover:not(:disabled),
.partners__nav button:hover:not(:disabled){ background: var(--primary-ink); color: #fff; }
.cnav--dark .cnav__btn{ background: var(--ink); color: #fff; }
.cnav--dark .cnav__btn:hover:not(:disabled){ background: var(--dark); }
.cnav__btn:disabled,
.partners__nav button:disabled{ opacity: .5; cursor: default; }

/* ============================================================ POST CARD
   The archive and the homepage were about to read as two different blogs.
   One card; --compact is the homepage's smaller step. */
.postcard{ display: flex; flex-direction: column; gap: var(--sp-3); }
.postcard__img{
  aspect-ratio: 16 / 10;
  background: var(--bg-2) center/cover no-repeat;
  border-radius: var(--r-2);
  margin-bottom: var(--sp-2);
  box-shadow: var(--frame);
}
.postcard__date{ font-size: var(--t-small); color: var(--ink-2); letter-spacing: .4px; }
.postcard__title{
  margin: 0;
  font: 500 var(--t-h4)/var(--lh-head) var(--font-display);
  color: var(--ink);
  text-wrap: pretty;
}
.postcard__excerpt{
  margin: 0;
  font-size: var(--t-body-lg); line-height: var(--lh-snug);
  color: var(--ink-2);
  flex: 1;
}
.postcard--compact .postcard__title{ font-size: var(--t-lead); }
.postcard--compact .postcard__excerpt{ font-size: var(--t-small); }

/* ============================================================ PAGE HERO — CATEGORY VARIANT
   The seven product-category pages. Same machine as --wordmark, four numbers
   different: the panel sits at the standard offset but runs taller, the copy
   is a single paragraph plus a pill instead of a title+lede pair, and the
   product cut-out is bigger and higher. */
/* balazogepek.html carried this as an inline style, which beat the mobile
   rule's var(--dark) and left eight hero text nodes at 1.16:1 contrast. */
/* 850, not 778 — same clipping as the wordmark variant. The panel ends at 774
   and the word straddles that edge by design, running to 847. */
.phero--cat{ height: 850px; background: var(--bg-2); }
.phero--cat .phero__panel{ top: 251px; height: 523px; }
.phero--cat .phero__copy{ top: 349px; height: auto; width: 509px; justify-content: flex-start; }
.phero--cat .phero__img{
  left: auto; right: calc(var(--gutter) + 6px); top: 119px;   /* 90 at 1440 */
  width: 707px; height: 579px;
  transform: none;
  background-size: contain;
  background-position: center;
}
/* 739, not 690. The artboard puts BÁLÁZÓGÉPEK at page y815; 815 − 76 = 739.
   The 690 was wrong by 49px and pushed the word further into the clip. */
.phero--cat .phero__wordmark{ top: 739px; }
.phero__cta{ margin-top: var(--sp-5); align-self: flex-start; }

@media (max-width: 1180px){
  .phero--cat{ height: 700px; }
  .phero--cat .phero__img{ right: 0; width: 48%; }
  .phero--cat .phero__wordmark{ font-size: 72px; top: 560px; }
}


/* ============================================================ PAGE HERO — MOBILE
   Below 720px the hero stops being three absolutely-positioned layers inside a
   fixed 679px box and becomes ordinary flow: a photo band, then a dark field
   that grows with whatever copy it holds.

   Those fixed heights clipped Márkaszerviz's "Online hibabejelentés" pill out
   of existence — it laid out at y851 inside a box ending at y755, under
   overflow:hidden, so the page's only above-the-fold control was invisible and
   unreachable. The same rule cut Blogbejegyzés's seven-line H1 through the
   glyphs and chopped the tail off Garancia's three-level breadcrumb. A hero
   cannot be a fixed box when what sits in it is variable-length Hungarian.

   DOM order is already photo → crumbs → copy, so the flow reads correctly with
   no change to any page's markup. Selectors are scoped to .phero so they match
   the (0,2,0) specificity of the --wordmark and --cat variant rules and, being
   later in the file, win. */
@media (max-width: 720px){
  .phero, .phero--wordmark, .phero--cat{
    height: auto;
    overflow: visible;
    background: var(--dark);          /* the panel's job, now the section's */
  }
  .phero .phero__panel{ display: none; }

  .phero .phero__img,
  .phero .phero__bg{
    position: static; inset: auto;
    width: auto; height: 240px;
    display: block;
  }
  .phero--cat .phero__img{
    height: 220px;
    background-size: contain;         /* a cut-out, not a photograph */
  }

  .phero .phero__crumbs{
    position: static; inset: auto;
    padding: var(--sp-6) var(--pad-x) 0;
  }
  .phero .phero__copy{
    position: static; inset: auto;
    width: auto; max-width: none; height: auto;
    padding: var(--sp-5) var(--pad-x) var(--sp-8);
  }
  .phero .phero__title{
    font-size: 38px;
    /* Hungarian compounds run long — "hulladékkezelésért" overran the copy box
       and was chopped mid-word. Let them break rather than overflow. */
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .phero .phero__wordmark{
    position: static; inset: auto;
    padding: 0 var(--pad-x) var(--sp-7);
    font-size: 44px; white-space: normal;
  }
}

/* ============================================================ VERY NARROW
   320px is still a real device width — the small iPhones, and any phone with
   the display zoomed. Three fixed pixel values never got a narrow rule and
   overflowed there:

     the 140px logo left 308px of chrome in a 305px viewport;
     .stat__num is white-space:nowrap at 52px, so "1,4 ezer+" ran past its cell;
     .formcard's 36px side padding left the card wider than its column.

   Last in the file so it wins as the narrowest breakpoint. Measured at 320px:
   39px of horizontal overflow on the homepage before this block, 0 after. */
@media (max-width: 380px){
  :root{ --pad-x: 16px; }
  .nav__mark{ width: 108px; height: 20px; }
  .nav__icon-btn, .nav__burger{ width: 38px; height: 38px; }
  .stats .stat__num, .stats .stat__num-val{ font-size: 38px; }
  .formcard{ padding: 24px 20px 22px; }
  .hcontact__form{ grid-template-columns: 1fr; }

  /* What actually overflowed once the boxes fitted was the TEXT: Hungarian
     compounds do not break on their own. "megoldásaink" pushed .pmos__title
     47px past its column and "Bálázógépek" took the 44px wordmark 19px past
     the viewport. Every display line gets permission to break here — the
     pages carry lang="hu", so hyphens:auto can do it properly where the
     browser has the patterns, and break-word catches the rest. */
  h1, h2, h3,
  .home-hero__title, .phero__title, .phero__wordmark, .pmos__title,
  .sust__title, .hblog__title, .stats__title, .prods__title, .srvs__title,
  .team__title, .hcontact__title, .split__title, .pcat__title, .inds__title{
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .phero__wordmark{ font-size: 34px; }
}

/* ============================================================ 404
   Cloudflare Pages serves index.html for any unknown path unless a 404.html
   exists — so a mistyped URL silently showed the homepage as if that page
   were real. On a prototype whose whole point is review, a dead link has to
   look dead. */
.nf{ padding: clamp(96px, 14vw, 200px) var(--pad-x) var(--section-y); }
.nf__inner{ max-width: var(--container); margin: 0 auto; }
.nf__code{
  margin: 0 0 var(--sp-4);
  font: 500 var(--t-hero)/1 var(--font-display);
  color: var(--primary-text);
  letter-spacing: var(--tr-hero);
}
.nf__title{
  margin: 0;
  font: 500 var(--t-h1)/var(--lh-display) var(--font-display);
  color: var(--ink);
}
.nf__lede{
  margin: var(--sp-5) 0 0; max-width: 52ch;
  font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--ink-2);
}
.nf__next{
  margin: var(--sp-8) 0 0;
  font: 500 var(--t-h4)/var(--lh-head) var(--font-display);
  color: var(--ink);
}
.nf__links{ display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }