/* Fonts — self-hosted (avoids sending visitor IPs to Google on every page load).
   Raleway is the ONLY font the live site actually renders: headings at 700/600, and
   — this was the discrepancy that made this rebuild look "thinner" — body copy is
   also Raleway (weight 500), not Open Sans. Open Sans is the theme's unused default. */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens — matched to the live gergostich.com (audited via computed styles + screenshots) */
:root {
  --yellow: #FFC75E;
  --green: #61CE70;
  --black: #000000;
  --text: #4A4A4A;
  --gray-line: #E4E1DA;
  --gray-panel: #F8F8F8;
  --white: #FFFFFF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 16px; color: var(--text); background: var(--white); line-height: 1.8; }
h1, h3 { font-family: 'Raleway', sans-serif; font-weight: 700; color: var(--black); line-height: 1.2; }
/* Matches the live site exactly: these section titles (Testimonials, FAQ, How to Start)
   stay 40px/800 at every breakpoint there — no responsive scale-down like other headings. */
h2 { font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 40px; line-height: 40px; color: var(--black); }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }
p.justify { text-align: justify; }
.icon-wrap svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* NAV */
header { padding: 20px 0; position: relative; z-index: 60; background: #fff; }
nav.wrap { display: flex; align-items: center; justify-content: center; position: relative; }
.nav-links { display: flex; gap: 26px; flex-wrap: nowrap; white-space: nowrap; font-size: 0.95rem; font-weight: 600; font-family: 'Raleway', sans-serif; color: #333; }
.nav-links a:hover { color: var(--green); }
.lang-pill { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font-weight: 700; font-family: 'Raleway', sans-serif; font-size: 0.9rem; background: var(--gray-panel); color: var(--black); border: 1px solid var(--gray-line); border-radius: 999px; padding: 7px 14px 7px 10px; }
.lang-pill svg { width: 18px; height: 13px; border-radius: 2px; }
.hamburger { display: none; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); background: none; border: 1px solid var(--gray-line); border-radius: 4px; padding: 8px 10px; cursor: pointer; }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--black); margin: 4px 0; }
.mobile-menu { display: none; flex-direction: column; background: #fff; border-top: 1px solid var(--gray-line); padding: 10px 18px 18px; }
.mobile-menu a { display: block; padding: 12px 0; font-weight: 600; font-family: 'Raleway', sans-serif; border-bottom: 1px solid var(--gray-line); }
.mobile-menu.open { display: flex; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .lang-pill { right: 60px; }
  .hamburger { display: block; }
}

/* HERO — full-bleed photo background (matches live site: not a boxed image), with a
   frosted-glass text card that only appears at tablet/mobile, plus a soft fade-to-white
   at the bottom instead of a hard shape that can cut across the subject. */
.hero { position: relative; overflow: hidden; background-image: url('../img/gergo-hero.jpg.webp'); background-size: cover; background-position: right center; background-repeat: no-repeat; }
.hero .wrap { display: flex; align-items: flex-start; justify-content: flex-start; gap: 60px; min-height: 600px; padding-top: 50px; padding-bottom: 80px; }
.hero-text { max-width: 460px; }
.hero-text-inner { padding: 40px 20px; background: transparent; }
.hero h1 { font-size: 29px; margin-bottom: 20px; }
.hero p { font-size: 1rem; }
/* Fixed offset (not vertical-centering) so the badge always lands on the chest/shoulder,
   never drifting up onto the face as text height or container width changes. */
.why-badge { flex-shrink: 0; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,0.44); color: var(--black); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3px; padding: 10px; margin-top: 220px; }
.why-badge .icon-wrap svg { width: 24px; height: 24px; margin-bottom: 6px; stroke: var(--black); }
.why-badge strong { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.why-badge span { font-size: 0.78rem; font-family: 'Raleway', sans-serif; font-weight: 600; line-height: 1.5; }
/* Soft gradient fade — no hard shape edge, so it can never slice across an arm/face
   the way a fixed divider does once the photo crop shifts at a given width. */
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 75%, #fff 100%); pointer-events: none; }
@media (max-width: 1024px) {
  .hero h1 { font-size: 24px; }
  .hero-text-inner { background: rgba(255,255,255,0.44); }
  .hero { background-position: right bottom; }
  .hero .wrap { min-height: 550px; align-items: flex-end; }
  .why-badge { margin-top: 0; }
}
@media (max-width: 767px) {
  .hero h1 { font-size: 20px; }
  .hero { background-image: url('../img/gergo-hero-mobile.jpg.webp'); background-size: auto; background-position: -91px -80px; min-height: 620px; }
  /* Small gap here on purpose: the photo's face sits at a fixed pixel offset regardless
     of width, and narrow phones wrap the paragraph onto more lines, pushing the badge
     further down the taller stack — keeping this gap tight is what stops it reaching the face. */
  .hero .wrap { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; min-height: 0; padding: 40px 20px 350px; }
  .hero-text { max-width: none; }
  .hero-text-inner { padding-top: 0; padding-bottom: 10px; }
  .why-badge { align-self: center; border: 1px solid rgba(0,0,0,0.12); }
}

.highlight-line { text-align: center; padding: 40px 20px; }
/* Exact values from the live site's computed styles — flat 20px/24px at every
   breakpoint there, not a responsive clamp, and no vertical padding at all. */
.highlight-line p { display: inline; font-family: 'Raleway', sans-serif; font-weight: 600; font-size: 20px; background: var(--black); color: #fff; padding: 0 8px; line-height: 24px; }

.cta-wrap { text-align: center; padding: 10px 0 20px; }
.btn { display: inline-block; background: var(--green); border: 2.85px solid var(--black); color: #fff; font-weight: 700; font-family: 'Raleway', sans-serif; padding: 15px 32px; border-radius: 30px; font-size: 0.95rem; }
.btn:hover { background: #4fbb60; }

section.about { padding: 30px 0 0; }
.about-grid { display: grid; grid-template-columns: 0.55fr 1fr; gap: 50px; align-items: start; }
.about-col-left { display: flex; flex-direction: column; }
/* Below this width the two columns stack — but instead of the photo sitting in its own
   block above the text, it floats so the paragraph text wraps around it (matches the
   live site's tablet behaviour), which needs the grid's cell isolation turned off. */
@media (max-width: 780px) {
  .about-grid { display: flow-root; }
  /* Scales down smoothly with viewport width (instead of a fixed 320px) so the float
     never gets wider than the available space and pushes part of the photo — and the
     face — outside the visible area on narrow phones. */
  .about-col-left { float: left; width: clamp(120px, 40vw, 320px); margin: 0 20px 20px 0; }
}
/* Yellow highlight tag, consistent with the rest of the page's yellow — black text for
   contrast on white sections; sections already on a yellow background flip to black/white. */
.tag-title { display: inline-block; align-self: flex-start; font-family: 'Raleway', sans-serif; font-size: 2.3rem; font-weight: 800; line-height: 1.05; color: var(--black); background: var(--yellow); padding: 1px 12px; margin-bottom: 20px; }
/* Pulled up so it straddles the wave curve above (matches the live site: the title sits
   half-in/half-out of the boundary, with the body text starting at the normal flow position
   right below it). Grid items are their own formatting context, so this only shifts the
   title visually — it doesn't drag the rest of the column up with it. */
/* inline-block (the base .tag-title display) clamps a negative top margin to its line
   box instead of applying it in full — switching to block (sized to content) lets the
   full overlap into the wave actually render. */
/* position:relative + z-index forces this element onto its own paint layer — without
   it, overlapping the preceding wave SVG (via the negative margin) made some mobile
   browsers merge the two into one compositing layer and paint the black background
   across the SVG's full width instead of just the title's own box. */
.yellow-section .tag-title { display: block; width: fit-content; position: relative; z-index: 2; background: var(--black); color: #fff; margin-top: -80px; }
/* Capped so it stays a compact photo (not a full-width banner) once the grid stacks to
   one column on tablet — the column itself gets wide, but the image shouldn't. */
.section-photo { max-width: 380px; margin-top: 4px; margin-bottom: 20px; aspect-ratio: 3/2; overflow: hidden; border-radius: 2px; }
/* Portrait crop once the floated column gets narrow — a landscape 3:2 box at that width
   is too short to show him well; taller and narrower keeps the focus on him, not the
   building/pole on either side. */
@media (max-width: 480px) { .section-photo { aspect-ratio: 3/4; } }
.section-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.socials { display: flex; justify-content: center; gap: 12px; }
.socials a { width: 45px; height: 45px; border-radius: 8px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; }
.socials svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 1.8; }
.about-text p { margin-bottom: 16px; }
/* Centered below the paragraph at every width — matches the live site, which doesn't
   left-align this until the text column collapses to full-width; it centers always. */
.expand-link { display: flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-family: 'Raleway', sans-serif; margin-top: 10px; cursor: pointer; color: var(--black); }
.expand-link .plus { font-size: 1.1rem; transition: transform 0.2s ease; }
.expand-link.open .plus { transform: rotate(45deg); }
/* Expanded content breaks out to the full section width (not just the text column) and
   lays the extra paragraph out beside its own photo, matching the live site. */
/* display:none (not just max-height:0) while collapsed — a CSS grid still inserts a full
   row-gap above a track even at 0 height, so a max-height-only collapse leaves dead space
   below the expand link. Removing it from grid flow entirely avoids that. */
.extra-content { display: none; grid-column: 1 / -1; }
.extra-content.open { display: flow-root; margin-top: -34px; }
/* No grid row-gap to cancel out once .about-grid switches to display:block below, so the
   negative margin above would overlap the expand link instead — reset it here. */
@media (max-width: 780px) { .extra-content.open { margin-top: 20px; } }
/* Approach section nests its extra-content inside .about-text instead of breaking out of
   a grid row (About section's layout), so there's no row-gap to cancel out here — the
   gap above it should just be the same paragraph-to-paragraph margin as everywhere else. */
.about-text .extra-content.open { margin-top: 0; }
/* Photo floats so the paragraph wraps around its shape, then continues at full width
   once past its bottom edge — a real "picture embedded in text" layout, not a rigid
   two-column split that squeezes the whole paragraph into a narrow strip. */
.extra-photo { float: right; width: 244px; margin: 0 0 20px 24px; aspect-ratio: 3/4; overflow: hidden; border-radius: 2px; }
.extra-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 480px) { .extra-photo { width: 160px; } }

/* Text column left, photo column right — mirrors the about-grid's photo-left pattern,
   matching the live site's two-column (text/photo) split for this section. */
.approach-grid { display: grid; grid-template-columns: 1fr 0.55fr; gap: 50px; align-items: start; }
/* -30px recenters against the two paragraphs specifically — the row's own auto-height
   grew once the title's full overlap-margin stopped being clamped (inline-block fix
   above), which shifted plain center alignment away from the paragraph block. */
.approach-photo { align-self: center; margin-top: -30px; }
@media (max-width: 780px) {
  .approach-grid { display: block; }
  .approach-photo { margin-top: 20px; }
}
/* Two people side by side — stays landscape even where .section-photo's portrait mobile
   override would otherwise crop one of them out. */
@media (max-width: 480px) { .approach-photo { aspect-ratio: 3/2; } }

.wave { width: 100%; height: 60px; display: block; }
.wave.top { margin-bottom: -2px; }
.wave.bottom { margin-top: -2px; }

.yellow-section { background: var(--yellow); padding: 45px 0 20px; }
/* Lives outside .yellow-section now (white background, matching the live site, where
   these circles sit below the yellow box rather than inside it). */
.badge-row { display: flex; gap: 40px; justify-content: center; padding: 50px 0 0; flex-wrap: wrap; }
.circle-badge { width: 170px; height: 170px; border-radius: 50%; background: var(--black); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.circle-badge .icon-wrap svg { width: 32px; height: 32px; fill: #fff; stroke: none; }
.circle-badge strong { font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.05rem; padding: 0 20px; }

section.testimonials { padding: 60px 0; }
/* Aggregate rating line under the heading — the "X.X · N Google reviews" summary a
   real review widget leads with. */
.reviews-summary { font-family: 'Raleway', sans-serif; font-weight: 600; margin-top: 10px; }
.reviews-summary .stars { color: #FBBC04; letter-spacing: 1px; }
/* One testimonial at a time, auto-advancing — matches the live site's testimonial
   carousel (black speech-bubble card, yellow name/role, prev/next arrows either side)
   instead of a static grid of every quote at once. */
/* Fixed-width arrow columns (not flex shrink-to-fit) so the card's own left edge is
   at a known, constant offset from the carousel's — the "See more reviews" link
   below lines up against that same offset instead of guessing. */
.testimonial-carousel { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; max-width: 680px; margin: 30px auto 0; }
.carousel-viewport { grid-column: 2; min-width: 0; overflow: hidden; }
.carousel-arrow.prev { grid-column: 1; justify-self: start; }
.carousel-arrow.next { grid-column: 3; justify-self: end; }
.carousel-slide { display: none; flex-direction: column; align-items: center; text-align: center; opacity: 0; transition: opacity 0.4s ease; }
.carousel-slide.active { display: flex; }
.carousel-slide.visible { opacity: 1; }
.testimonial-card { position: relative; background: var(--black); color: #fff; border-radius: 4px; padding: 24px 30px; }
/* Google's own star-rating yellow, so the imported reviews read as a review widget. */
.testimonial-card .stars { color: #FBBC04; letter-spacing: 2px; margin-bottom: 10px; font-size: 0.9rem; }
.testimonial-card p { font-style: italic; font-size: 20px; line-height: 24px; margin: 0; }
.testimonial-card p a { color: #fff; font-style: normal; font-weight: 700; white-space: nowrap; }
/* Rotated-square "speech bubble" pointer under the card, same trick the live site uses. */
.testimonial-card::after { content: ""; position: absolute; bottom: -7px; left: 50%; width: 14px; height: 14px; background: var(--black); transform: translateX(-50%) rotate(45deg); }
.testimonial-footer { margin-top: 25px; }
.testimonial-footer .name { display: block; color: var(--yellow); font-weight: 600; font-size: 14px; font-family: 'Raleway', sans-serif; }
.testimonial-footer .role { display: block; color: var(--yellow); font-size: 16px; margin-top: 2px; }
.carousel-arrow { background: none; border: none; cursor: pointer; color: #999; font-size: 2rem; line-height: 1; padding: 6px 10px; font-family: Georgia, serif; }
.carousel-arrow:hover { color: var(--black); }
@media (max-width: 700px) {
  .testimonial-card p { font-size: 1rem; }
  .carousel-arrow { font-size: 1.5rem; padding: 4px 4px; }
}
/* Lines up with the card's own left edge (carousel's 48px arrow column), not the
   full-width wrap — matches sitting directly under the black box, not the page edge. */
.google-reviews-link { display: block; max-width: 680px; margin: 26px auto 0; padding-left: 48px; font-weight: 700; font-family: 'Raleway', sans-serif; color: var(--black); }

section.faq { padding: 15px 0 65px; }
.faq-item { border-bottom: 1px solid var(--gray-line); }
.faq-item:first-child { border-top: 1px solid var(--gray-line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 18px 4px; font-size: 1rem; font-weight: 600; font-family: 'Raleway', sans-serif; display: flex; align-items: center; gap: 14px; color: var(--black); }
.faq-q .sign { font-size: 1.2rem; font-weight: 400; width: 18px; flex-shrink: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a-inner { padding: 0 4px 20px 32px; font-size: 0.96rem; text-align: justify; }
.faq-item.open .faq-a { max-height: 340px; }
.faq-item.open .faq-q .sign { transform: rotate(45deg); }

section.start { padding: 10px 0 65px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 46px; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
.step-card { position: relative; background: var(--yellow); padding: 34px 22px 30px; text-align: center; border-radius: 2px; }
/* Pokes above the box — the live site's number badge straddles the card's own top
   edge, same overlap treatment as the wave/tag-title elsewhere on this page. */
.step-number { position: absolute; top: -14px; left: 16px; background: var(--black); color: #fff; font-family: 'Raleway', sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.2; padding: 2px 10px; }
.step-card .icon-wrap svg { width: 54px; height: 54px; stroke: var(--black); margin-bottom: 14px; }
.step-card h3 { font-size: 1.125rem; margin-bottom: 8px; }
.step-card p { font-size: 1rem; }

/* The form centers on the full section width — which, with the steps grid above
   being 3 equal columns, already lines it up under the middle step card. The arrow
   is positioned off that same centered form rather than sharing a grid column with
   it, so it can sit right at the form's edge without pushing the form off-center. */
.form-block { position: relative; }
/* Starts hidden, slides/fades in once scrolled into view (matches the live site's
   entrance animation on this element) — see the IntersectionObserver in main.js. */
.kezdd-itt { position: absolute; right: calc(50% + 210px + 10px); bottom: 24px; font-family: 'Raleway', sans-serif; font-weight: 700; font-size: 1.2rem; text-align: center; opacity: 0; transform: translate(-16px, 16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.kezdd-itt.in-view { opacity: 1; transform: translate(0, 0); }
.kezdd-itt .arrow { font-size: 3rem; display: block; margin-bottom: 6px; line-height: 1; }
@media (max-width: 700px) { .kezdd-itt { position: static; margin: 0 auto 16px; transform: translate(0, 16px); } .kezdd-itt.in-view { transform: translate(0, 0); } }
/* The dashed "collection of short lines" framing the enquiry form, centered rather
   than stretched to the full column width. */
.form-fields form { max-width: 420px; margin: 0 auto; border: 4px dashed var(--yellow); border-radius: 2px; padding: 24px; }
.form-fields label { display: block; font-weight: 700; font-family: 'Raleway', sans-serif; margin: 14px 0 6px; font-size: 0.92rem; }
.form-fields label:first-child { margin-top: 0; }
.form-fields input, .form-fields textarea { width: 100%; border: 1px solid var(--gray-line); border-radius: 4px; padding: 12px 14px; font-family: inherit; font-size: 0.95rem; }
.form-fields textarea { min-height: 100px; resize: vertical; }
.form-fields .btn { margin-top: 18px; width: 100%; text-align: center; border-radius: 4px; }
.form-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; margin-top: 12px; }

footer { background: var(--white); border-top: 1px solid var(--gray-line); color: #333; padding: 40px 0; }
.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; align-items: flex-start; }
.footer-grid h4 { font-family: 'Raleway', sans-serif; margin-bottom: 10px; font-size: 1rem; }
.footer-grid p, .footer-grid a { display: block; font-size: 0.9rem; color: #555; margin-bottom: 4px; }
.footer-socials { display: flex; gap: 10px; align-self: center; }
.footer-socials a { width: 38px; height: 38px; border-radius: 6px; background: var(--black); display: flex; align-items: center; justify-content: center; }
.footer-socials svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.8; }
.footer-lang { text-align: right; font-size: 0.9rem; }
.footer-lang div { margin-top: 6px; }
.footer-lang a { color: #555; }
.footer-lang a.current { color: var(--black); font-weight: 700; }

/* Cookie consent banner */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--yellow); padding: 16px 24px; display: none; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 0.9rem; box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
.cookie-bar.visible { display: flex; }
.cookie-bar .btn { padding: 10px 22px; font-size: 0.85rem; }
.cookie-bar a.policy-link { font-weight: 700; text-decoration: underline; }

/* Instagram preview (microblog) */
.ig-header { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.ig-header .icon-wrap { width: 56px; height: 56px; border-radius: 50%; background: var(--black); display: flex; align-items: center; justify-content: center; }
.ig-header .icon-wrap svg { width: 26px; height: 26px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 780px) { .ig-grid { grid-template-columns: 1fr; } }

/* Generic legal/resources page content */
.entry-content { max-width: 760px; margin: 0 auto; padding: 55px 40px; }
.entry-content h1 { font-size: 2rem; margin-bottom: 24px; }
.entry-content p { margin-bottom: 1.1em; }
.entry-content ul { margin: 0 0 1.1em 1.4em; }