/* ============================================================
   Passion Gumiszervíz — stylesheet
   Fonts: Antonio (display/condensed) · Afacad (body)

   Sizing is derived from the 1920px-wide reference comps.
   Every clamp() below reads:  clamp(mobile-min, <ref-px/1920>vw, ref-px)
   so the layout reproduces the comp exactly at 1920 and scales down.
   ============================================================ */

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --blue:#2e9de6;
  --line:#e6e6e6;
  --gray-text:#4a4a4a;

  --font-display:'Antonio', sans-serif;
  --font-body:'Afacad', sans-serif;

  /* footer / content column measured at 1266px @1920 */
  --container:1270px;
  --pad:clamp(16px, 2vw, 40px);
  /* header: icons sit at y29..93 in the comp -> ~118px tall */
  --header-h:clamp(64px, 6.15vw, 118px);
  /* page gutter for the full-bleed edges (comp: 26px @1920) */
  --edge:clamp(16px, 1.45vw, 28px);
  /* small breathing room for the giant wordmarks — they still read as
     bleeding off the left edge, just not welded to it */
  --title-inset:clamp(10px, 1.05vw, 20px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* Releasing the paged lock at the last segment turns the document
     scrollable, and the scrollbar appearing narrows the viewport — every
     centred thing jumps left, then jumps back on recapture. Reserving the
     gutter permanently keeps the width identical in both states. */
  scrollbar-gutter:stable;
}

/* Respect the OS-level "reduce motion" preference: neutralize durations
   rather than stripping animations outright, so end states still apply. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

body{
  margin:0;
  background:var(--white);
  color:var(--black);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

button{ font:inherit; }

ul{ list-style:none; margin:0; padding:0; }

/* Decorative "x" watermark texture behind all content.
   It drifts as one sheet: inset by a full tile on every side so translating
   the layer by exactly one tile never exposes an edge, and the loop is
   therefore seamless. Moving it with transform rather than background-position
   keeps it on the compositor instead of repainting the whole viewport. */
body::before{
  content:"";
  position:fixed;
  inset:-160px;
  z-index:-1;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M8 8 L18 18 M18 8 L8 18' stroke='%23000000' stroke-opacity='0.09' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:watermarkDrift 44s linear infinite;
  will-change:transform;
}

@keyframes watermarkDrift{
  from{ transform:translate3d(0, 0, 0); }
  to{ transform:translate3d(160px, 160px, 0); }
}

/* ---------------- Loading screen ----------------
   Visible by default (no JS needed to show it) so there's never a flash of
   unstyled/unloaded content; script.js waits for fonts + window load, then
   fades this out and only then releases the hero's entrance animations. */

body.is-loading{ overflow:hidden; }

.loading-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(18px, 2.4vw, 34px);
  background:var(--white);
  transition:opacity .5s ease, visibility 0s linear .5s;
}

.loading-screen.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .5s ease, visibility 0s linear .5s;
}

/* Held back until the webfonts have actually arrived, so the wordmark fades
   in already set in Antonio rather than appearing in a fallback face. */
.loading-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
  opacity:0;
}

body.fonts-ready .loading-mark{
  animation:
    loadingMarkIn .4s ease both,
    loadingPulse 1.6s ease-in-out infinite .4s;
}

@keyframes loadingMarkIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.loading-logo{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(40px, 6.5vw, 90px);
  letter-spacing:-0.02em;
  color:var(--black);
}

.loading-logo-sub{
  font-family:var(--font-body);
  font-size:clamp(14px, 1.5vw, 21px);
  margin-top:clamp(4px, 0.6vw, 9px);
  color:var(--black);
}

@keyframes loadingPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.5; }
}

.loading-bar{
  width:clamp(120px, 15vw, 200px);
  height:2px;
  background:var(--line);
  border-radius:2px;
  overflow:hidden;
}

.loading-bar-fill{
  display:block;
  height:100%;
  width:40%;
  background:var(--black);
  border-radius:2px;
  animation:loadingBarSweep 1.1s cubic-bezier(.65,0,.35,1) infinite;
}

@keyframes loadingBarSweep{
  0%{ transform:translateX(-130%); }
  100%{ transform:translateX(290%); }
}

/* ---------------- Header ---------------- */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--white);
}

/* full-bleed: comp puts the facebook mark at x=26 and the mail mark at x=1878 */
.header-inner{
  max-width:none;
  margin:0;
  height:var(--header-h);
  padding:0 var(--edge);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.facebook-link{ display:flex; transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.facebook-link img{ width:clamp(32px, 3.45vw, 66px); height:auto; }
.facebook-link:hover{ transform:scale(1.1); }
.facebook-link:active{ transform:scale(0.92); }

.nav-center{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.6vw, 31px);
}

.hamburger-btn,
.info-btn{
  background:none;
  border:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}

.hamburger-btn:hover,
.info-btn:hover{ transform:scale(1.1); }
.hamburger-btn:active,
.info-btn:active{ transform:scale(0.92); }

.info-btn img{ width:clamp(20px, 2.3vw, 44px); height:auto; }

/* Contact popover hanging off the header info button */
.info-wrap{ position:relative; display:flex; }

.info-popover{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  z-index:110;
  min-width:max-content;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:10px;
  background:var(--white);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.16);
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, -8px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear .25s;
}

.info-popover.open{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s;
}

/* little pointer up toward the button */
.info-popover::before{
  content:"";
  position:absolute;
  bottom:100%;
  left:50%;
  margin-left:-7px;
  border:7px solid transparent;
  border-bottom-color:var(--white);
}

.info-popover-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:9px;
  text-decoration:none;
  color:var(--black);
  font-family:var(--font-body);
  font-size:clamp(14px, 1vw, 19px);
  line-height:1;
  white-space:nowrap;
  transition:background-color .2s ease;
}

.info-popover-row:hover,
.info-popover-row:focus-visible{ background:#f4f4f4; }

.info-popover-row img{ width:16px; height:auto; flex-shrink:0; }

/* Hamburger drawn in CSS (not an image) so it can morph into an X. */
.hamburger-bars{
  position:relative;
  display:block;
  width:clamp(20px, 2.1vw, 40px);
  height:clamp(15px, 1.55vw, 30px);
}

.hamburger-bars .bar{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:var(--black);
  border-radius:2px;
  transform-origin:center;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}

.hamburger-bars .bar:nth-child(1){ transform:translateY(-6px); }
.hamburger-bars .bar:nth-child(2){ transform:translateY(0); }
.hamburger-bars .bar:nth-child(3){ transform:translateY(6px); }

.hamburger-btn.is-open .hamburger-bars .bar:nth-child(1){ transform:translateY(0) rotate(45deg); }
.hamburger-btn.is-open .hamburger-bars .bar:nth-child(2){ opacity:0; transform:translateY(0) scaleX(0); }
.hamburger-btn.is-open .hamburger-bars .bar:nth-child(3){ transform:translateY(0) rotate(-45deg); }

.logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--black);
  line-height:1;
  transition:opacity .2s ease;
}

.logo:hover{ opacity:.7; }

.logo-main{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(20px, 2.65vw, 51px);
  letter-spacing:0.01em;
  text-transform:uppercase;
  line-height:0.9;
}

.logo-sub{
  font-family:var(--font-body);
  font-size:clamp(10px, 1.05vw, 20px);
  margin-top:clamp(2px, 0.35vw, 7px);
  letter-spacing:0.02em;
  line-height:1;
}

.header-contacts{
  display:flex;
  align-items:center;
  gap:clamp(14px, 1.95vw, 37px);
}

.header-contacts a{ display:flex; transition:transform .25s cubic-bezier(.22,.61,.36,1); }
.header-contacts a:hover{ transform:scale(1.1); }
.header-contacts a:active{ transform:scale(0.92); }
.header-contacts img{ width:clamp(18px, 2.1vw, 40px); height:auto; }

.mobile-nav{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--white);
  display:flex;
  flex-direction:column;
  max-height:0;
  overflow:hidden;
  box-shadow:0 20px 30px rgba(0,0,0,.07);
  transition:max-height .45s cubic-bezier(.22,.61,.36,1);
}

.mobile-nav.open{ max-height:520px; }

.mobile-nav a{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:clamp(16px, 1.3vw, 25px);
  padding:clamp(14px, 1.2vw, 22px) var(--edge);
  text-decoration:none;
  color:var(--black);
  border-top:1px solid #f0f0f0;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
}

.mobile-nav a:hover,
.mobile-nav a:focus-visible{ background-color:#f7f7f7; }

/* staggered entrance, only while the panel is open */
.mobile-nav.open a{ opacity:1; transform:translateY(0); }
.mobile-nav.open a:nth-child(1){ transition-delay:.05s; }
.mobile-nav.open a:nth-child(2){ transition-delay:.1s; }
.mobile-nav.open a:nth-child(3){ transition-delay:.15s; }
.mobile-nav.open a:nth-child(4){ transition-delay:.2s; }
.mobile-nav.open a:nth-child(5){ transition-delay:.25s; }

/* ---------------- Buttons ---------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
}

/* comp: white pill, soft shadow, no stroke — 496x120 with 50px type */
.btn-outline{
  background:var(--white);
  color:var(--black);
  border:none;
  box-shadow:0 16px 38px rgba(0,0,0,.16);
  padding:clamp(13px, 1.6vw, 31px) clamp(28px, 6.8vw, 131px);
  font-size:clamp(15px, 2.6vw, 50px);
  transition:background .2s ease, color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.22,.61,.36,1);
}

.btn-outline:hover{
  background:var(--black);
  color:var(--white);
  box-shadow:0 20px 44px rgba(0,0,0,.3);
  transform:translateY(-3px);
}

.btn-outline:active{ transform:translateY(-1px) scale(.97); }

/* comp: 326x71 pill, right edge 42px / bottom 35px from the viewport */
.fixed-cta{
  position:fixed;
  right:clamp(16px, 2.2vw, 42px);
  bottom:clamp(16px, 1.8vw, 35px);
  background:var(--black);
  color:var(--white);
  border:none;
  padding:clamp(12px, 1.1vw, 21px) clamp(20px, 3.35vw, 64px);
  font-size:clamp(12px, 1.25vw, 24px);
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-radius:999px;
  text-decoration:none;
  z-index:90;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
  transition:opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, background-color .25s ease;
}

.fixed-cta:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px rgba(0,0,0,.3);
}

.fixed-cta:active{ transform:translateY(-1px) scale(.97); }

.fixed-cta.is-hidden{
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
}

/* ---------------- Section title row (big headings) ----------------
   Comp: cap-height 177px, glyphs flush to x=0, baseline ~11px off the
   bottom edge, small caption sitting on the same baseline to the right. */

/* width:auto (not 100%) so the horizontal margin below actually insets the
   row instead of pushing a full-width box past the viewport edge */
.section-title-row{
  width:auto;
  max-width:none;
  margin:0 var(--title-inset);
  padding:0;
  display:flex;
  align-items:baseline;
  gap:clamp(6px, 0.7vw, 14px);
  flex-wrap:wrap;
}

.section-title{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  /* vh guard keeps the wordmark from swallowing short viewports */
  font-size:min(clamp(3rem, 10.5vw, 201px), 22vh);
  line-height:0.88;
  letter-spacing:-0.08em;
  margin:0;
}

/* line-height:0 keeps the caption from adding descender space below the
   shared baseline, which would otherwise lift the wordmark off the edge */
.section-counter,
.section-subtitle{
  font-family:var(--font-body);
  font-size:clamp(12px, 1.05vw, 20px);
  line-height:0;
  color:var(--black);
  white-space:nowrap;
}

/* ---------------- Hero ---------------- */

/* Vertical rhythm for the non-paged (no-JS / narrow) fallback. Paged mode
   overrides padding on .segment, so these only apply to continuous flow. */
.hero{
  position:relative;
  padding:clamp(12px, 1.5vw, 28px) 0 clamp(40px, 6vw, 110px);
}

.hero-visual{
  position:relative;
  width:min(100%, 1560px);
  aspect-ratio:1560 / 560;
  margin:0 auto;
}

/* comp: car artwork ~930px wide, sitting on the floor of the stage */
.hero-car{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:auto;
  margin:0 auto;
  width:60%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 46px 34px rgba(0,0,0,.22));
  z-index:1;
  /* held invisible until the loading screen clears — see body.is-ready below */
  opacity:0;
}

body.is-ready .hero-car{
  animation:heroCarIn 1s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes heroCarIn{
  from{ opacity:0; transform:scale(.93); }
  to{ opacity:1; transform:scale(1); }
}

.hero-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
  /* difference gives a nice adaptive tint against the dark parts of the car,
     but mix-blend-mode only sees backdrop painted inside .hero-lines' own
     stacking-context group — the .hero segment is transformed for the
     crossfade, which bounds that group before it reaches the plain page
     background, so over open space there's nothing to diff against and a
     white line there would vanish into the white page. The drop-shadow is
     the real guarantee of visibility there: a dark halo around the line
     itself, independent of whatever's behind it. */
  mix-blend-mode:difference;
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.65))
    drop-shadow(0 0 2.5px rgba(0,0,0,.35));
}

/* Leader lines "draw" toward each badge, then the pointer dot pops in.
   Scoped to .hero.is-active so the whole annotation choreography replays
   every time the hero comes back into view, not only on first load.

   Note the resting state here is the FINISHED state, with the pre-animation
   state applied only while body isn't ready yet. Doing it the other way
   round (resting = hidden, animation holds it visible) means that the moment
   .is-active is dropped the animation stops matching, its fill is discarded,
   and the element snaps invisible in the middle of the segment's fade-out. */
.hero-lines line{
  stroke-dasharray:500;
  stroke-dashoffset:0;
}

body:not(.is-ready) .hero-lines line{ stroke-dashoffset:500; }

body.is-ready .hero.is-active .hero-lines line{
  animation:heroLineDraw 1s cubic-bezier(.65,0,.35,1) both .5s;
}

.hero-lines circle{ opacity:1; }

body:not(.is-ready) .hero-lines circle{ opacity:0; }

body.is-ready .hero.is-active .hero-lines circle{
  animation:heroDotIn .3s ease both 1.35s;
}

@keyframes heroLineDraw{ from{ stroke-dashoffset:500; } to{ stroke-dashoffset:0; } }
@keyframes heroDotIn{ from{ opacity:0; } to{ opacity:1; } }

/* comp: rim card x300..600, tire card x1210..1500 */
.badge{
  position:absolute;
  z-index:3;
  width:19.5%;
  min-width:190px;
  max-width:305px;
}

.badge-rim{ left:7.7%; top:19%; }
.badge-tire{ right:15.4%; top:3%; }

body:not(.is-ready) .badge{ opacity:0; }

/* replays on every return to the hero — see the note on .hero-lines above */
body.is-ready .hero.is-active .badge-rim{ animation:badgeIn .7s cubic-bezier(.22,.61,.36,1) both .55s; }
body.is-ready .hero.is-active .badge-tire{ animation:badgeIn .7s cubic-bezier(.22,.61,.36,1) both .75s; }

@keyframes badgeIn{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.badge-card{
  display:flex;
  align-items:flex-start;
  gap:clamp(10px, 0.85vw, 16px);
  background:var(--white);
  border-radius:14px;
  box-shadow:0 16px 34px rgba(0,0,0,.09);
  padding:clamp(14px, 1.1vw, 21px) clamp(14px, 1.15vw, 22px);
  /* gentle idle float, independent of the one-shot entrance above */
  animation:badgeFloat 5.5s ease-in-out infinite 1.3s;
}

.badge-tire .badge-card{ animation-duration:6.2s; animation-delay:1.6s; }

@keyframes badgeFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.badge-card img{
  width:clamp(30px, 2.3vw, 44px);
  height:auto;
  flex-shrink:0;
  margin-top:2px;
}

.badge-card p{
  margin:0;
  font-family:var(--font-body);
  font-weight:600;
  font-size:clamp(12px, 0.7vw, 14px);
  line-height:1.35;
}

/* Fake-scroll needs a nudge: a quiet, dismissible hint that this page
   responds to scrolling even though nothing actually scrolls. Sits in the
   open margin right of the car, clear of both the tire badge and the CTA
   pinned to the viewport's bottom-right. */
.scroll-hint{
  position:absolute;
  right:1%;
  bottom:3%;
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-family:var(--font-body);
  font-size:clamp(10px, 0.75vw, 13px);
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--black);
  opacity:0;
  pointer-events:none;
}

body.is-ready .scroll-hint{
  animation:scrollHintIn .6s ease both 1s;
}

.scroll-hint svg{ width:14px; height:14px; }

body.is-ready .scroll-hint svg{
  animation:scrollHintBob 1.8s ease-in-out infinite 1.6s;
}

.scroll-hint.is-hidden{ animation:none !important; opacity:0 !important; }

@keyframes scrollHintIn{ to{ opacity:.5; } }
@keyframes scrollHintBob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}

/* comp: SOLYMÁR / PASSION / Gumiszervíz all flush to the left edge,
   with "Gumiszervíz" sitting on the PASSION baseline to its right. */
/* same small inset as .section-title-row — it's the hero's equivalent of it */
.hero-wordmark{
  width:auto;
  max-width:none;
  margin:0 var(--title-inset);
  padding:0;
  text-align:left;
  opacity:0;
}

body.is-ready .hero-wordmark{
  animation:wordmarkIn .8s cubic-bezier(.22,.61,.36,1) both .3s;
}

@keyframes wordmarkIn{
  from{ opacity:0; transform:translateY(20px); }
  to{ opacity:1; transform:translateY(0); }
}

.hero-pre{
  display:block;
  font-family:var(--font-body);
  text-transform:uppercase;
  font-size:clamp(18px, 2.6vw, 50px);
  letter-spacing:0.06em;
  line-height:1;
  margin-bottom:clamp(2px, 0.35vw, 7px);
}

.hero-mark{
  display:flex;
  align-items:baseline;
  gap:clamp(5px, 0.5vw, 10px);
  flex-wrap:wrap;
}

.hero-wordmark h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:min(clamp(3.4rem, 10.5vw, 201px), 22vh);
  line-height:0.88;
  letter-spacing:-0.08em;
}

.hero-post{
  font-family:var(--font-body);
  font-size:clamp(14px, 1.2vw, 23px);
  line-height:1;
}

/* ---------------- Services steps / carousels ----------------
   Comp: chevrons at x238..267 and x1645..1674, copy starts x363,
   artwork spans x957..1535. */

.services{ padding:clamp(40px, 6vw, 110px) 0; }

.carousel{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 clamp(14px, 12.4vw, 238px);
  display:flex;
  align-items:center;
  gap:clamp(12px, 4.9vw, 95px);
}

.carousel-arrow{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  width:clamp(20px, 1.56vw, 30px);
  height:clamp(34px, 2.7vw, 52px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--black);
  transition:opacity .2s ease, transform .2s ease;
}

.carousel-arrow:hover{ transform:scale(1.12); }
.carousel-arrow:active{ transform:scale(.9); }
.carousel-arrow svg{ width:100%; height:100%; }

.carousel-track{ flex:1; overflow:hidden; }

.carousel-slide{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(20px, 5.5vw, 107px);
}

.carousel-text{
  /* Without this, a flex item's shrink floor defaults to its content's
     min-content width — the widest unbreakable word — so a long single
     word at this font-size (e.g. "GUMIABRONCSOK") could refuse to shrink
     below its own ~800px and overflow straight past the column into
     whatever's next to it, clipped only where that happens to land. */
  min-width:0;
}

.carousel-text h3{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  /* Sized so the longest title in each carousel stays on ONE line.
     Measured against the real column widths (which differ per carousel —
     MIÉRT NÁLUNK loses ~270px to its arrows, so its column is the tighter
     of the two despite the shorter words):

       viewport 1890 → services col 726px, why-us col 459px
       viewport 1250 → services col 478px, why-us col 317px

     Worst case is "Vendéglátás" in the narrow why-us column at wide
     viewports (needs ≤3.89vw) and "Új gumiabroncsok" at narrow ones
     (≤4.0vw). 3.7vw clears both with ~8% headroom at every width.

     The 73px ceiling matters past ~1970px: beyond there the carousel's
     side padding has hit its own 238px cap and the why-us column stops
     widening (it settles at the paragraph's 470px measure), so the title
     would outgrow a column that is no longer growing with it. */
  font-size:clamp(26px, 3.7vw, 73px);
  margin:0 0 clamp(14px, 2.2vw, 42px);
  letter-spacing:0.055em;
  line-height:1;
  /* fallback for the rare word that's still too wide for the column even
     alone on its own line at this size — breaks it rather than overflowing */
  overflow-wrap:break-word;
  word-break:break-word;
}

.carousel-text p{
  font-family:var(--font-body);
  font-size:clamp(15px, 1.51vw, 29px);
  line-height:1.4;
  max-width:clamp(280px, 24.5vw, 470px);
  margin:0;
}

.carousel-img{
  width:clamp(200px, 31vw, 595px);
  flex-shrink:0;
}

/* SZOLGÁLTATÁSOK only: image on the left, copy on the right. Markup/JS keep
   copy first in DOM (so it's announced before the image), swapped visually
   here rather than reordered at the source. Scoped to .services so MIÉRT
   NÁLUNK keeps its own (unswapped) layout. */
.services .carousel-img{ order:-1; }

/* Text-only slide variant (no accompanying image) — decided per slide,
   since a carousel can mix image and text-only entries (e.g. Profizmus
   has an image, Kényelem/Korrektség/Vendéglátás don't). */

.carousel-slide.text-only{ justify-content:center; }

.carousel-slide.text-only .carousel-text{
  max-width:min(100%, 900px);
  margin:0 auto;
  text-align:center;
}

.carousel-slide.text-only .carousel-text p{
  margin:0 auto;
  max-width:clamp(280px, 36vw, 690px);
}

/* SZOLGÁLTATÁSOK isn't a click carousel: steps "pop up" on scroll instead
   of sliding, so each freshly-rendered slide plays a one-shot fade+rise. */
@keyframes serviceStepPop{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

.carousel--fade .carousel-slide{
  animation:serviceStepPop .55s cubic-bezier(.22,.61,.36,1) both;
}

/* MIÉRT NÁLUNK is a real click carousel: each slide slides in from the
   side the arrow points to, rather than fading in place. */
@keyframes slideInFromRight{
  from{ opacity:0; transform:translateX(36px); }
  to{ opacity:1; transform:translateX(0); }
}

@keyframes slideInFromLeft{
  from{ opacity:0; transform:translateX(-36px); }
  to{ opacity:1; transform:translateX(0); }
}

#whyUsCarousel.dir-next .carousel-slide{
  animation:slideInFromRight .5s cubic-bezier(.22,.61,.36,1) both;
}

#whyUsCarousel.dir-prev .carousel-slide{
  animation:slideInFromLeft .5s cubic-bezier(.22,.61,.36,1) both;
}

/* Small pulse whenever a step/slide counter updates, so the number change
   itself reads as an event rather than a silent text swap. */
@keyframes counterBump{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

.section-counter.bump{ animation:counterBump .3s ease; }

/* ---------------- Why us ---------------- */

.why-us{ padding:clamp(40px, 6vw, 110px) 0; }

/* ---------------- Booking (now nested inside the booking-banner segment) ---------------- */

.booking-inner{
  text-align:center;
  padding:0 var(--edge);
  margin-bottom:clamp(40px, 6vw, 90px);
}

.booking-inner h2{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(26px, 5.2vw, 100px);
  margin:0;
  letter-spacing:0.055em;
  line-height:1;
}

.booking-cta{
  position:relative;
  width:fit-content;
  margin:clamp(40px, 10.4vw, 199px) auto 0;
}

/* comp: 91px badge hanging off the pill's top-right corner */
.booking-info-btn{
  position:absolute;
  bottom:calc(100% + 6px);
  right:calc(-1 * clamp(16px, 2.7vw, 52px));
  top:auto;
  background:none;
  border:none;
  padding:0;
  display:flex;
  cursor:pointer;
  border-radius:50%;
  transition:transform .25s cubic-bezier(.22,.61,.36,1);
}

.booking-info-btn:hover{ transform:scale(1.1); }
.booking-info-btn:active{ transform:scale(.92); }

.booking-info-icon{
  width:clamp(38px, 4.74vw, 91px);
  height:auto;
}

/* ---------------- Modal ---------------- */

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--edge);
  background:rgba(10,10,10,.45);
  opacity:0;
  transition:opacity .3s ease;
}

.modal-backdrop[hidden]{ display:none; }
.modal-backdrop.open{ opacity:1; }

.modal{
  position:relative;
  width:min(100%, 480px);
  background:var(--white);
  border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.3);
  padding:clamp(30px, 4vw, 44px) clamp(22px, 3vw, 38px) clamp(22px, 2.6vw, 32px);
  text-align:center;
  transform:translateY(18px) scale(.96);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}

.modal-backdrop.open .modal{ transform:translateY(0) scale(1); }

.modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:34px;
  height:34px;
  padding:7px;
  background:none;
  border:none;
  border-radius:50%;
  color:var(--black);
  cursor:pointer;
  transition:background-color .2s ease, transform .2s ease;
}

.modal-close:hover{ background:#f2f2f2; transform:rotate(90deg); }
.modal-close svg{ width:100%; height:100%; display:block; }

.modal-icon{
  width:clamp(42px, 5vw, 56px);
  height:auto;
  margin:0 auto clamp(14px, 1.6vw, 20px);
  color:var(--blue);
  display:block;
}

.modal-text{
  font-family:var(--font-body);
  font-size:clamp(16px, 1.15vw, 22px);
  line-height:1.45;
  margin:0 0 clamp(22px, 2.4vw, 30px);
  color:var(--black);
}

.modal-ok{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-size:clamp(14px, 0.95vw, 18px);
  padding:12px 38px;
  border:none;
  border-radius:999px;
  background:var(--black);
  color:var(--white);
  cursor:pointer;
  transition:transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}

.modal-ok:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.25); }
.modal-ok:active{ transform:translateY(0) scale(.97); }

/* ---------------- Booking banner ---------------- */

.booking-banner{ padding:clamp(40px, 6vw, 110px) 0; }

/* ---------------- Footer ---------------- */

.site-footer{
  background:var(--white);
  box-shadow:0 -12px 30px rgba(0,0,0,.08);
  border-top:1px solid var(--line);
  padding-top:clamp(40px, 7.3vw, 140px);
}

.footer-brand{
  text-align:center;
  margin-bottom:clamp(40px, 7.9vw, 151px);
}

.footer-logo{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(38px, 7.86vw, 151px);
  letter-spacing:-0.03em;
  line-height:1;
}

.footer-logo-sub{
  display:block;
  font-family:var(--font-body);
  font-size:clamp(17px, 3.07vw, 59px);
  margin-top:clamp(4px, 0.7vw, 14px);
  line-height:1;
}

.footer-columns{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge) clamp(40px, 4.5vw, 86px);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:clamp(30px, 3vw, 58px);
  text-align:left;
}

.footer-col h3{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(14px, 2.13vw, 41px);
  letter-spacing:0.05em;
  margin:0 0 clamp(16px, 3.4vw, 65px);
  line-height:1;
}

.footer-col p{
  font-family:var(--font-body);
  font-size:clamp(14px, 1vw, 19px);
  line-height:1.45;
  margin:0;
}

/* underline grows in on hover instead of snapping on/off */
.footer-col a{
  text-decoration:none;
  background-image:linear-gradient(currentColor, currentColor);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:0% 1px;
  transition:background-size .35s cubic-bezier(.22,.61,.36,1);
}

.footer-col a:hover{ background-size:100% 1px; }

.hours-row{
  display:flex;
  gap:clamp(20px, 2.2vw, 42px);
  font-family:var(--font-body);
  font-size:clamp(14px, 1vw, 19px);
  margin-bottom:clamp(6px, 0.6vw, 12px);
}

.hours-row span:first-child{ min-width:clamp(60px, 4.6vw, 88px); }

.footer-map{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge) clamp(40px, 4.5vw, 86px);
}

.footer-map h3{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(14px, 2.13vw, 41px);
  letter-spacing:0.05em;
  margin:0 0 clamp(18px, 3.4vw, 65px);
  line-height:1;
}

.map-row{
  display:flex;
  align-items:center;
  gap:clamp(20px, 3.5vw, 67px);
  flex-wrap:wrap;
}

.map-embed{
  flex:1 1 480px;
  aspect-ratio:900 / 380;
  border-radius:18px;
  overflow:hidden;
  background:#f2f2f2;
}

.map-embed iframe{ width:100%; height:100%; border:0; }

.map-address{
  font-family:var(--font-body);
  font-size:clamp(14px, 1vw, 19px);
  text-decoration:underline;
  white-space:nowrap;
  transition:opacity .2s ease;
}

.map-address:hover{ opacity:.65; }

.footer-bottom{
  position:relative;
  border-top:1px solid var(--line);
  padding:clamp(22px, 2.4vw, 46px) var(--edge);
  text-align:center;
}

.made-by{
  font-family:var(--font-body);
  font-size:clamp(14px, 1.35vw, 26px);
  margin:0 0 clamp(10px, 1.2vw, 23px);
}

.legal-links{
  display:flex;
  justify-content:center;
  gap:clamp(16px, 1.7vw, 33px);
  flex-wrap:wrap;
}

.legal-links a{
  font-family:var(--font-body);
  font-size:clamp(12px, 0.95vw, 18px);
  text-decoration:underline;
  color:var(--gray-text);
  transition:color .2s ease;
}

.legal-links a:hover{ color:var(--black); }

.footer-logos{
  position:absolute;
  right:var(--edge);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:clamp(16px, 1.7vw, 33px);
}

.blckt-logo{
  font-family:var(--font-body);
  text-transform:lowercase;
  font-size:clamp(18px, 1.8vw, 35px);
}

.footer-mini-logo{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(16px, 1.7vw, 33px);
  letter-spacing:-0.02em;
  line-height:1;
  display:flex;
  flex-direction:column;
}

.footer-mini-logo small{
  font-family:var(--font-body);
  text-transform:none;
  font-size:clamp(9px, 0.63vw, 12px);
  letter-spacing:0;
  margin-top:2px;
}

/* ============================================================
   Fade-scroll segments (desktop only, JS-driven)
   Grid — not flex — so children keep normal block sizing:
   a flex item with `margin:0 auto` opts out of stretch and
   shrink-wraps, which silently centred every block.
   ============================================================ */

html.segments-locked,
body.segments-locked{
  overflow:hidden;
  /* stops touch devices rubber-banding / pull-to-refreshing the locked page */
  overscroll-behavior:none;
  scroll-behavior:auto;
}

.segments.is-paged{
  position:relative;
  height:calc(100vh - var(--header-h));
  /* mobile browsers count the collapsing URL bar in 100vh, so a paged stage
     sized in vh gets its bottom edge cropped — dvh tracks the real viewport.
     The vh line above stays as the fallback for browsers without dvh. */
  height:calc(100dvh - var(--header-h));
  overflow:hidden;
}

.segments.is-paged .segment{
  position:absolute;
  inset:0;
  width:100%;
  display:grid;
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at the row's min-content
     height, so a tall row silently pushes the grid past the segment and
     makes the pane scrollable by a few stray pixels. That slack is enough
     for the wheel handler to hand gestures to native scrolling instead of
     paging, which reads as "scrolling does nothing for a while". */
  grid-template-rows:minmax(0, 1fr) auto;
  /* comp: the wordmark baseline sits ~11px off the bottom edge */
  padding:0 0 clamp(3px, 0.35vw, 6px);
  /* scrollable as a safety net on short viewports, but the comps have no
     visible scrollbars — a few px of slack must not paint a track. x is
     hard-hidden: overflow-x computes to auto once overflow-y is auto, and a
     horizontal bar would steal height and re-trigger the problem above. */
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(4vh);
  /* visibility isn't animatable, but delaying it to match the opacity
     duration keeps the outgoing segment paintable for its whole fade-out —
     without the delay it snaps invisible the instant .is-active is removed,
     silently skipping the fade and leaving only the incoming fade-in visible */
  transition:
    opacity .45s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear .45s;
  pointer-events:none;
}

.segments.is-paged .segment::-webkit-scrollbar{ display:none; }

.segments.is-paged .segment.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:
    opacity .45s cubic-bezier(.22,.61,.36,1),
    transform .45s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 0s;
  pointer-events:auto;
}

/* Scrolling back up mirrors the motion: the previous segment should drop
   back down into place instead of reusing the "advance" direction. */
.segments.nav-up.is-paged .segment{ transform:translateY(-4vh); }
.segments.nav-up.is-paged .segment.is-active{ transform:translateY(0); }

/* content rides the flexible row, the big wordmark hugs the bottom edge */
.segments.is-paged .segment > *{
  grid-row:1;
  align-self:center;
  min-width:0;
}

.segments.is-paged .segment > .section-title-row,
.segments.is-paged .segment > .hero-wordmark{
  grid-row:2;
  align-self:end;
}

/* ============================================================
   Responsive
   ============================================================ */

/* Paged mode runs at every width — a phone gets the same one-screen-per-
   segment experience, just laid out for a tall, narrow viewport. The
   `:not(.is-paged)` rules further down are the no-JS fallback only. */

@media (max-width:900px){

  /* ---- typography: the giant wordmarks must not swallow a small screen ---- */
  .section-title{ font-size:min(clamp(2.6rem, 11vw, 201px), 17vh); }
  .hero-wordmark h1{ font-size:min(clamp(3rem, 12vw, 201px), 20vh); }

  /* ---- hero ---- */
  .hero-lines{ display:none; }

  .badge{ width:38%; min-width:0; max-width:230px; }
  .badge-rim{ left:var(--edge); top:0; }
  .badge-tire{ right:var(--edge); top:0; }
  .badge-card{
    gap:8px;
    padding:10px 12px;
    border-radius:11px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  .badge-card img{ width:26px; margin-top:1px; }
  .badge-card p{ font-size:11px; line-height:1.3; }

  /* swipe affordance, centred in the strip left free below the car */
  .scroll-hint{
    right:auto;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
  }

  /* ---- carousels: stack copy over artwork, arrows stay flanking ---- */
  .carousel{
    padding:0 var(--edge);
    gap:clamp(6px, 1.6vw, 14px);
  }

  .carousel-arrow{ width:26px; height:44px; }

  .carousel-slide{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:clamp(16px, 3vw, 26px);
  }

  .carousel-text h3{
    font-size:clamp(24px, 6.4vw, 46px);
    margin-bottom:clamp(10px, 2vw, 18px);
    letter-spacing:0.03em;
  }

  .carousel-text p{
    font-size:clamp(15px, 3.5vw, 22px);
    max-width:none;
    margin:0 auto;
  }

  .carousel-img{ width:min(66%, 320px); flex-shrink:1; }

  .carousel-slide.text-only .carousel-text p{ max-width:none; }

  /* ---- booking ---- */
  .booking-inner{ margin-bottom:clamp(30px, 6vw, 60px); }
  .booking-inner h2{ font-size:clamp(26px, 7vw, 52px); }
  .booking-cta{ margin-top:clamp(40px, 12vw, 110px); }

  .btn-outline{
    font-size:clamp(16px, 4.4vw, 28px);
    padding:14px clamp(34px, 10vw, 70px);
    box-shadow:0 10px 26px rgba(0,0,0,.16);
  }

  /* ---- fixed CTA: shrink so it stops sitting on top of the wordmark ---- */
  .fixed-cta{
    right:12px;
    bottom:12px;
    padding:9px 18px;
    font-size:12px;
  }

  /* ---- footer ---- */
  .footer-logos{
    position:static;
    transform:none;
    justify-content:center;
    margin-top:20px;
  }

  /* ---- paged layout (JS on) ---- */

  /* the visual fills whatever height is left above the wordmark instead of
     holding the desktop comp's very wide 1560:560 letterbox */
  .segments.is-paged .hero > .hero-visual{
    align-self:stretch;
    aspect-ratio:auto;
    width:100%;
  }

  /* On a tall, narrow screen the desktop's floor-standing car leaves a dead
     white band above it, so centre it in the stage instead — top:0 + margin
     auto against a bottom offset that reserves the swipe-hint strip. */
  .segments.is-paged .hero .hero-car{
    width:min(96%, 470px);
    top:0;
    bottom:clamp(26px, 5vw, 40px);
    margin:auto;
    filter:drop-shadow(0 22px 20px rgba(0,0,0,.2));
  }

  /* ---- continuous-flow fallback (JS off) ---- */
  .segments:not(.is-paged) .hero{ padding-bottom:clamp(30px, 6vw, 60px); }

  .segments:not(.is-paged) .hero-visual{
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }

  .segments:not(.is-paged) .badge{ position:static; width:100%; max-width:360px; }
  .segments:not(.is-paged) .badge-rim{ order:1; }
  .segments:not(.is-paged) .hero-car{ order:2; position:relative; width:88%; }
  .segments:not(.is-paged) .badge-tire{ order:3; }
  .segments:not(.is-paged) .scroll-hint{ display:none; }

  .segments:not(.is-paged) .services,
  .segments:not(.is-paged) .why-us,
  .segments:not(.is-paged) .booking-banner{ padding:clamp(40px, 8vw, 80px) 0; }
}

@media (max-width:600px){
  .nav-center{ gap:12px; }

  /* Stacked. column-reverse keeps the giant title welded to the bottom edge
     with the caption above it, rather than the caption pushing it up. */
  .section-title-row{
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:4px;
  }

  /* upright again here — they own a line instead of sharing a baseline */
  .section-counter,
  .section-subtitle{ line-height:1.3; }

  /* Phones have no room for badges *beside* the car, so stack the hero into
     a column instead — card, car, card — and let flex centre the group.
     Absolute positioning is dropped entirely here rather than fought with. */
  .segments.is-paged .hero > .hero-visual{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(10px, 2.4vw, 18px);
    padding:0 var(--edge) clamp(24px, 5vw, 34px);
  }

  .segments.is-paged .hero .badge{
    position:static;
    width:100%;
    max-width:340px;
  }

  .segments.is-paged .hero .badge-rim{ order:1; }
  .segments.is-paged .hero .badge-tire{ order:3; }

  /* specificity has to match the >900 paged rule that pins it absolutely */
  .segments.is-paged .hero .hero-car{
    order:2;
    position:static;
    width:100%;
    max-width:420px;
    margin:0;
  }

  .segments.is-paged .hero .badge-card{
    padding:11px 13px;
    gap:10px;
  }

  .segments.is-paged .hero .badge-card img{ width:30px; }
  .segments.is-paged .hero .badge-card p{ font-size:12px; line-height:1.35; }

  .info-popover{ font-size:14px; }

  .footer-columns{ flex-direction:column; gap:36px; text-align:center; }
  .hours-row{ justify-content:center; }

  .map-row{ flex-direction:column; align-items:flex-start; }
  .map-embed{ width:100%; }

  .booking-info-btn{ right:-10px; }

  /* The giant wordmark spans the full width down here, so lift the floating
     CTA clear of it instead of letting it land on the lettering. */
  .fixed-cta{ bottom:74px; }

  /* ...which puts the CTA where a centred hint would be, so send the hint
     to the opposite corner rather than stacking the two. */
  .scroll-hint{
    left:var(--edge);
    right:auto;
    transform:none;
    align-items:flex-start;
  }
}

/* ============================================================
   Short viewports (landscape phones, short desktop windows)
   A paged segment has exactly one screen to work with, so when height is
   the scarce axis everything gets measured against vh instead of vw.
   ============================================================ */

@media (max-height:520px){
  .segments.is-paged .badge{ display:none; }
  .segments.is-paged .scroll-hint{ display:none; }

  .section-title{ font-size:min(clamp(1.8rem, 11vw, 201px), 13vh); }
  .hero-wordmark h1{ font-size:min(clamp(2rem, 12vw, 201px), 15vh); }
  .hero-pre{ font-size:clamp(13px, 2.6vw, 24px); }

  .segments.is-paged .hero .hero-car{ width:min(58%, 380px); }

  .carousel-text h3{ font-size:clamp(18px, 3.4vw, 34px); margin-bottom:8px; }
  .carousel-text p{ font-size:clamp(13px, 1.7vw, 18px); }

  /* bounded by height, not width — height is what's actually scarce */
  .carousel-img{ width:auto; max-width:38%; max-height:38vh; }

  .booking-inner h2{ font-size:clamp(20px, 4vw, 40px); }
  /* the info badge hangs above the pill, so this gap can't close past its
     height or the badge lands on the heading */
  .booking-cta{ margin-top:clamp(58px, 11vh, 90px); }
  .btn-outline{ font-size:clamp(14px, 2vw, 22px); padding:10px 30px; }
}

/* Landscape has width to spare even when it has no height, so put the copy
   back beside the artwork rather than stacking it underneath. */
@media (max-height:520px) and (min-width:560px){
  .carousel-slide{ flex-direction:row; align-items:center; text-align:left; }
  .carousel-slide .carousel-text p{ margin:0; }
  .carousel-slide.text-only{ flex-direction:column; text-align:center; }
  .carousel-slide.text-only .carousel-text p{ margin:0 auto; }
}