/* ==========================================================================
   ODEN-STEEL DESIGN TOKENS
   --------------------------------------------------------------------------
   A projekt hivatalos Design Token rendszere.
   Minden vizuális érték (szín, tipográfia, spacing stb.) kizárólag innen
   származhat. Közvetlen értékek használata a komponens CSS-ekben tilos.

   Források:
   - design-bible/04-color-system.md
   - design-bible/05-typography.md
   - ui-kit/foundations/layout.md
   - ui-kit/foundations/spacing.md
   - ui-kit/navigation/header.md
   ========================================================================== */

/* Document shell: sötét gyökérháttér + vízszintes overscroll védelem */
@import url("./base.css");

:root {
  /* ==========================================================================
     COLORS
     Forrás: design-bible/04-color-system.md
     ========================================================================== */

  --color-black-primary: #0b0b0b;
  --color-black-secondary: #151515;
  --color-surface-dark: #1e1e1e;
  --color-gold: #d6a300;
  --color-gold-rgb: 214, 163, 0;
  --color-gold-light: #f2c230;
  --color-gold-light-rgb: 242, 194, 48;
  --color-white: #ffffff;
  --color-gray-light: #f5f5f5;
  --color-gray-border: #d9d9d9;
  --color-gray-text: #7c7c7c;

  /* Felület-specifikus származtatott színek */
  --color-header-scrolled: rgba(15, 15, 15, 0.92);
  --color-border-subtle: rgba(255, 255, 255, 0.08);

  /* Rendszerállapotok — kizárólag rendszerüzenetekhez */
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-error: #c62828;
  --color-info: #1565c0;

  /* ==========================================================================
     TYPOGRAPHY
     Forrás: design-bible/05-typography.md (Manrope referencia betűtípus)
     ========================================================================== */

  --font-family-base:
    "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ==========================================================================
     FONT SIZES
     Forrás: design-bible/05-typography.md
     ========================================================================== */

  --font-size-display-xl: 4.5rem; /* 72 px — hero cím, reszponzív felülírással */
  --font-size-body-lg: 1.25rem; /* 20 px — hero alcím, kiemelt bekezdés */
  --font-size-body: 1.125rem; /* 18 px */
  --font-size-body-sm: 1rem; /* 16 px */
  --font-size-nav: 1rem; /* 16 px desktop menü */
  --font-size-nav-mobile: 1.125rem; /* 18 px mobil menü */
  --font-size-button: 1.125rem; /* 18 px */

  /* ==========================================================================
     FONT WEIGHTS
     ========================================================================== */

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ==========================================================================
     LINE HEIGHTS
     ========================================================================== */

  --line-height-display: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.7;

  /*
   * Display heading geometry (NOT a type-size token).
   * Prefer natural breaks; only split long HU compounds as last resort.
   */
  --text-wrap-display: break-word;

  /* ==========================================================================
     LETTER SPACING
     ========================================================================== */

  --letter-spacing-heading: -0.01em;
  --letter-spacing-button: 0.01em;
  --letter-spacing-uppercase: 0.03em;

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

  --radius-sm: 6px;
  --radius-md: 10px;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --shadow-header: 0 12px 32px rgba(0, 0, 0, 0.22);
  --shadow-dropdown: 0 20px 48px rgba(0, 0, 0, 0.35);

  /* ==========================================================================
     ELEVATION
     --------------------------------------------------------------------------
     Rétegzett felületek emelkedési szintjei.
     További szintek a komponenskönyvtár bővülésével kerülnek ide.
     ========================================================================== */

  /* --elevation-... */

  /* ==========================================================================
     BORDERS
     ========================================================================== */

  --border-width-thin: 1px;

  /* ==========================================================================
     LAYOUT
     Forrás: ui-kit/foundations/layout.md, ui-kit/navigation/header.md
     Reszponzív felülírások a fájl alján.
     ========================================================================== */

  --page-margin: 80px;
  --header-height: 88px;
  --header-height-scrolled: 72px;
  --site-header-height: var(--header-height);
  --reality-stage-gap: 24px;
  --logo-height: 46px;
  --hero-height: 92vh;
  --hero-min-height: 720px;

  /* Service hero readability overlays (shared; pages may intensify via modifier) */
  --hero-overlay-global: 0.22;
  --hero-overlay-left-0: 0.86;
  --hero-overlay-left-22: 0.74;
  --hero-overlay-left-42: 0.48;
  --hero-overlay-left-64: 0.14;
  --hero-overlay-left-78: 0;
  --hero-overlay-veil-top: 0.16;
  --hero-overlay-veil-bottom: 0.24;
  --hero-overlay-radial: 0;
  --hero-overlay-radial-x: 22%;
  --hero-overlay-radial-y: 48%;
  --hero-overlay-mobile-top: 0.5;
  --hero-overlay-mobile-mid: 0.76;
  --hero-overlay-mobile-bottom: 0.88;
  --hero-overlay-mobile-side: 0.54;

  --reality-scene-min-height: 720px;
  --touch-target-min: 48px;

  /* Reality Check — architectural panel system */
  --reality-bg: #0a0a0b;
  --reality-panel: #121316;
  --reality-panel-solution: #141318;
  --reality-border: rgba(255, 255, 255, 0.1);
  --reality-border-hover: rgba(255, 255, 255, 0.18);
  --reality-accent: rgba(214, 163, 0, 0.85);
  --reality-divider-problem: rgba(255, 255, 255, 0.14);
  --reality-divider-solution: rgba(214, 163, 0, 0.42);
  --reality-card-radius: 14px;
  --reality-card-pad-x: 38px;
  --reality-card-pad-y: 36px;
  --reality-grid-size: 48px;
  --reality-hover-duration: 220ms;
  --reality-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reality-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ==========================================================================
     CONTAINER WIDTHS
     Forrás: ui-kit/foundations/layout.md
     ========================================================================== */

  --container-main: 1440px;
  --container-content: 1180px;
  --container-text: 760px;
  --container-narrow: 640px;

  /* ==========================================================================
     GRID
     --------------------------------------------------------------------------
     Oszlopszámok és gutter értékek a grid alapú szekciók fejlesztésekor
     kerülnek ide (12 / 8 / 4 oszlop, gutter 32 / 24 / 20 px).
     ========================================================================== */

  /* --grid-... */

  /* ==========================================================================
     BREAKPOINTS
     --------------------------------------------------------------------------
     Referencia (media query-ben CSS variable nem használható):
     small mobile:  0 - 479 px
     mobile:      480 - 767 px
     tablet:      768 - 1023 px
     laptop:     1024 - 1279 px
     desktop:    1280 - 1535 px
     large:      1536 px felett
     ========================================================================== */

  /* ==========================================================================
     SPACING
     Forrás: ui-kit/foundations/spacing.md (8 pontos rendszer)
     ========================================================================== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;
  --space-6xl: 160px;
  --space-7xl: 220px;

  /* Komponens spacing */
  --button-padding-y: 18px;
  --button-padding-x: 28px;

  /* ==========================================================================
     SEMANTIC TYPOGRAPHY ALIASES
     ========================================================================== */

  --fs-display: clamp(3.375rem, 5.5vw, 5.125rem);
  --fs-heading: clamp(2.125rem, 3vw, 3rem);
  --fs-heading-sm: 2rem;
  --fs-body: var(--font-size-body);
  --fs-body-lg: var(--font-size-body-lg);
  --fs-eyebrow: 0.75rem;

  /* ==========================================================================
     SEMANTIC COLOR ALIASES
     ========================================================================== */

  --color-text: rgba(255, 255, 255, 0.74);
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-text-soft: rgba(255, 255, 255, 0.62);
  --color-gold-soft: rgba(214, 163, 0, 0.12);
  --color-gold-soft-hover: rgba(214, 163, 0, 0.18);
  --color-gold-marker-mobile: rgba(214, 163, 0, 0.16);
  --color-gold-border-hover: rgba(214, 163, 0, 0.22);
  --color-gold-line-fade: rgba(214, 163, 0, 0);
  --color-surface-glass: rgba(255, 255, 255, 0.03);
  --color-trust-bg-start: #070707;
  --color-trust-bg-mid: #0a0a0a;
  --color-trust-bg-end: #070707;
  --color-trust-glow: rgba(214, 163, 0, 0.045);
  --color-trust-item-overlay-gold: rgba(214, 163, 0, 0.055);
  --color-trust-item-overlay-light: rgba(255, 255, 255, 0.045);

  /* ==========================================================================
     RADIUS + ELEVATION
     ========================================================================== */

  --radius-xl: 34px;
  --radius-lg: 26px;
  --radius-card: 24px;
  --elevation-none: none;

  /* ==========================================================================
     SERVICE TRUST — SPACING + TYPE SCALE
     ========================================================================== */

  --space-trust-item: 34px;
  --space-trust-intro: var(--space-5xl);
  --space-trust-closing: 130px;
  --space-trust-section-y: clamp(6rem, 11vw, 11.875rem);
  --space-trust-section-y-tablet: 9.375rem;
  --space-trust-section-y-mobile: calc(
    var(--space-4xl) + env(safe-area-inset-bottom, 0px)
  );
  --space-trust-section-y-mobile-landscape: calc(
    4.5rem + env(safe-area-inset-bottom, 0px)
  );
  /* Combined outer gap: trust closing quote → FAQ (do not stack section Y padding) */
  --space-trust-faq-gap: clamp(2.5rem, 2rem + 4vw, 6rem);
  --space-trust-intro-mobile: 4.5rem;
  --space-trust-item-padding-y: 3.375rem;
  --space-trust-item-padding-y-tablet: 2.625rem;
  --space-trust-item-inner-gap: 4.5rem;
  --trust-title-max-width: 900px;
  --trust-lead-max-width: 720px;
  --trust-lead-max-width-tablet: 680px;
  --trust-content-max-width: 620px;
  --trust-closing-max-width: 960px;
  /* Floor only — cards grow with content; never a fixed height budget */
  --trust-item-min-height: 21.25rem;
  --trust-line-width: 96px;
  --trust-line-width-mobile: 72px;
  --fs-closing: clamp(2.375rem, 4.8vw, 4.25rem);
  --fs-closing-mobile: clamp(1.875rem, 9vw, 2.625rem);
  --fs-marker: clamp(6rem, 11vw, 11.875rem);
  --fs-marker-tablet: clamp(4.5rem, 10vw, 7.5rem);
  --fs-marker-mobile: clamp(4.5rem, 18vw, 6rem);
  --fs-marker-mobile-landscape: 4rem;
  --fs-title-tablet: clamp(2.875rem, 7vw, 4rem);
  --fs-title-mobile: clamp(2.375rem, 10vw, 3rem);
  --fs-title-mobile-landscape: 2.25rem;
  --fs-eyebrow-mobile: 0.6875rem;
  --fs-body-tablet: 1.1875rem;

  /* ==========================================================================
     SERVICE FAQ — SPACING + TYPE + COLOR
     ========================================================================== */

  --container-faq: 1080px;
  --color-faq-bg-start: #090909;
  --color-faq-bg-end: #060606;
  --color-gold-separator: rgba(214, 163, 0, 0.18);
  --space-faq-section-y: 11.25rem;
  --space-faq-section-y-tablet: 9.375rem;
  --space-faq-section-y-mobile-top: var(--space-4xl);
  --space-faq-section-y-mobile-bottom: clamp(1.5rem, 7vw, 2rem);
  --space-faq-section-y-landscape-top: 4.5rem;
  --space-faq-section-y-landscape-bottom: 1.5rem;
  --space-faq-intro-bottom: 6.25rem;
  --space-faq-intro-bottom-tablet: 5rem;
  --space-faq-intro-bottom-mobile: 4rem;
  --space-faq-footer-top: 6.25rem;
  --space-faq-footer-top-tablet: 5.5rem;
  --space-faq-footer-top-mobile: 4.5rem;
  /* Shared Phone CTA (Service FAQ + Reality Check + future mounts) */
  --space-phone-cta-top: 24px;
  --space-phone-cta-top-mobile: 18px;
  --phone-cta-bg: #ffffff;
  --phone-cta-bg-hover: #f4f4f2;
  --phone-cta-text: #0a0a0a;
  --phone-cta-border: rgba(0, 0, 0, 0.14);
  --phone-cta-divider: rgba(0, 0, 0, 0.12);
  --phone-cta-height: 68px;
  --phone-cta-height-mobile: 60px;
  --phone-cta-icon-size: 66px;
  --phone-cta-icon-size-mobile: 58px;

  /* Project Compare — architectural presentation system */
  --compare-radius: 22px;
  --compare-radius-mobile: 20px;
  --compare-frame-bg: #121316;
  --compare-frame-border: rgba(255, 255, 255, 0.1);
  --compare-frame-highlight: rgba(255, 255, 255, 0.06);
  --compare-frame-shadow:
    0 18px 48px rgba(0, 0, 0, 0.38), 0 4px 12px rgba(0, 0, 0, 0.22);
  --compare-handle-size: 56px;
  --compare-handle-size-mobile: 48px;
  --compare-handle-bg: rgba(8, 8, 8, 0.62);
  --compare-handle-border: rgba(214, 163, 0, 0.58);
  --compare-handle-inner: rgba(214, 163, 0, 0.32);
  --compare-handle-core: rgba(214, 163, 0, 0.92);
  --compare-handle-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 28px rgba(0, 0, 0, 0.34);
  --compare-line: rgba(214, 163, 0, 0.72);
  --compare-line-active: rgba(214, 163, 0, 0.84);
  --compare-label-color: #f4f1ea;
  --compare-label-panel: rgba(10, 10, 10, 0.78);
  --compare-label-border: color-mix(
    in srgb,
    var(--color-gold) 42%,
    transparent
  );
  --compare-hover-duration: 220ms;
  --compare-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --compare-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0 0.85 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --space-faq-answer-top: var(--space-xl);
  --space-faq-answer-top-tablet: 1.75rem;
  --space-faq-answer-top-mobile: var(--space-lg);
  --space-faq-answer-bottom-mobile: 1.75rem;
  --faq-title-max-width: 720px;
  --faq-lead-max-width: 640px;
  --faq-answer-max-width: 920px;
  --faq-toggle-min-height: 96px;
  --faq-toggle-min-height-tablet: 88px;
  --faq-toggle-min-height-mobile: 80px;
  /* Pre-JS accordion fallback — must exceed tallest answer at body LH 1.7–1.8 */
  --faq-answer-max-height: 80rem;
  --faq-toggle-gap-mobile: 18px;
  --faq-icon-size: 28px;
  --faq-icon-line: 18px;
  --faq-icon-stroke: 2px;
  --faq-icon-size-mobile: 44px;
  --faq-icon-line-mobile: 20px;
  --fs-faq-eyebrow: 0.75rem;
  --fs-faq-eyebrow-mobile: 0.6875rem;
  --fs-faq-title: clamp(3.5rem, 5vw, 4.625rem);
  --fs-faq-title-tablet: clamp(2.875rem, 7vw, 4rem);
  --fs-faq-title-mobile: clamp(2.25rem, 10vw, 2.875rem);
  --fs-faq-title-landscape: 2.125rem;
  --fs-faq-lead: var(--font-size-body-lg);
  --fs-faq-lead-tablet: 1.1875rem;
  --fs-faq-question: 1.875rem;
  --fs-faq-question-tablet: 1.75rem;
  --fs-faq-question-mobile: 1.5rem;
  --fs-faq-question-landscape: 1.375rem;
  --fs-faq-answer: var(--fs-body);
  --fs-faq-answer-mobile: 1.0625rem;
  --fs-faq-footer: 2rem;
  --fs-faq-footer-mobile: 1.75rem;
  --duration-faq-accordion: 280ms;
  --duration-faq-icon: 280ms;
  --focus-outline-width: 2px;
  --focus-outline-offset: 4px;

  /* ==========================================================================
     PROJECT LAUNCH — SPACING + TYPE + COLOR
     ========================================================================== */

  --container-project-launch: 980px;
  --container-project-launch-tablet: 900px;
  --color-launch-bg-start: #070707;
  --color-launch-bg-end: #040404;
  --color-launch-glow: rgba(214, 163, 0, 0.08);
  --color-launch-glow-solid: var(--color-gold);
  --color-launch-lead: rgba(255, 255, 255, 0.74);
  --color-gold-border: rgba(214, 163, 0, 0.72);
  --color-gold-border-strong: rgba(214, 163, 0, 0.88);
  --color-gold-shadow: rgba(214, 163, 0, 0.24);
  --color-gold-shadow-hover: rgba(214, 163, 0, 0.32);
  --color-gold-shadow-active: rgba(214, 163, 0, 0.21);
  --color-gold-shadow-inset: rgba(255, 255, 255, 0.28);
  --color-gold-shadow-inset-active: rgba(255, 255, 255, 0.24);
  --space-launch-gap-faq: 96px;
  --space-launch-section-y: 13.75rem;
  --space-launch-section-bottom: 12.5rem;
  --space-launch-section-y-tablet-top: 10.625rem;
  --space-launch-section-y-tablet-bottom: 9.375rem;
  --space-launch-section-y-mobile-top: clamp(2.5rem, 10vw, 3.5rem);
  --space-launch-section-y-mobile-bottom: 6.25rem;
  --space-launch-section-y-landscape-top: 2.5rem;
  --space-launch-section-y-landscape: 5rem;
  --space-launch-intro-eyebrow: 28px;
  --space-launch-lead-top: 42px;
  --space-launch-actions-top: 64px;
  --space-launch-actions-top-mobile: 56px;
  --space-launch-actions-top-landscape: 48px;
  --space-launch-lead-top-mobile: 32px;
  --space-launch-lead-max: 700px;
  --space-launch-lead-max-tablet: 680px;
  --space-launch-cta-max-mobile: 420px;
  --radius-btn-pill: 999px;
  --shadow-btn-gold:
    0 18px 40px var(--color-gold-shadow),
    inset 0 1px 0 var(--color-gold-shadow-inset);
  --shadow-btn-gold-hover:
    0 20px 44px var(--color-gold-shadow-hover),
    inset 0 1px 0 var(--color-gold-shadow-inset);
  --shadow-btn-gold-active:
    0 16px 34px var(--color-gold-shadow-active),
    inset 0 1px 0 var(--color-gold-shadow-inset-active);
  --duration-launch-cta: 180ms;
  --duration-launch-glow: 8s;
  --fs-launch-eyebrow: 0.75rem;
  --fs-launch-eyebrow-mobile: 0.6875rem;
  --fs-launch-title: clamp(4rem, 6vw, 5.75rem);
  --fs-launch-title-tablet: clamp(3rem, 7vw, 4.25rem);
  --fs-launch-title-mobile: clamp(2.375rem, 10vw, 3.25rem);
  --fs-launch-title-landscape: 2.125rem;
  --fs-launch-lead: 1.375rem;
  --fs-launch-lead-tablet: 1.25rem;
  --fs-launch-lead-mobile: 1.125rem;
  --fs-launch-lead-landscape: 1.0625rem;
  --btn-height-lg: 64px;
  --btn-height-xl: 68px;
  --btn-height-mobile: 56px;
  --btn-padding-xl: 0 2.75rem;
  --btn-padding-lg: 0 2.5rem;
  --btn-padding-mobile: 0 1.75rem;
  --btn-font-xl: 1.125rem;
  --btn-font-lg: 1.0625rem;
  --btn-font-mobile: 1.0625rem;

  /* ==========================================================================
     SERVICE PROCESS + PROJECT SHOWCASE — MOBILE SECTION RHYTHM
     ========================================================================== */

  --space-service-process-mobile-top: 6rem;
  --space-service-process-mobile-bottom: clamp(1.5rem, 7vw, 2rem);
  --space-service-process-landscape-bottom: 1.5rem;
  --space-project-showcase-mobile-top: clamp(2.5rem, 10vw, 3.5rem);
  --space-project-showcase-mobile-bottom: 6rem;
  --space-project-showcase-landscape-top: 2.5rem;

  /* ==========================================================================
     QUOTE MODAL
     ========================================================================== */

  --color-quote-modal-bg: #101010;
  --color-quote-modal-form-bg: #0f0f0f;
  --color-quote-modal-backdrop: rgba(0, 0, 0, 0.72);
  --color-quote-modal-border: rgba(255, 255, 255, 0.1);
  --color-quote-modal-muted: rgba(255, 255, 255, 0.68);
  --radius-quote-modal: var(--radius-lg);
  --shadow-quote-modal: 0 28px 80px rgba(0, 0, 0, 0.55);
  --space-quote-modal-inset: 24px;
  --space-quote-modal-header-pad: 1.35rem 1.5rem 1rem;
  --space-quote-modal-body-pad: 1.5rem 1.5rem 1.25rem;
  --space-quote-modal-scroll-pad-bottom: 32px;
  --space-quote-modal-footer-pad: 1rem 1.5rem;
  --space-quote-modal-footer-pad-bottom: 1rem;
  --space-quote-modal-step-gap: 1.75rem;
  --duration-quote-modal: 240ms;
  --duration-quote-modal-step: 220ms;
  --fs-quote-modal-body: 1rem;
  --fs-quote-modal-meta: 0.8125rem;
  --fs-quote-modal-step: 1.0625rem;
  --fs-quote-modal-question: 1.125rem;
  --fs-quote-modal-card: 0.9875rem;
  --fs-quote-modal-label: 0.9375rem;
  --fs-quote-modal-input: 1rem;
  --fs-quote-modal-btn: 0.9875rem;

  /* ==========================================================================
     Z-INDEX
     ========================================================================== */

  --z-header: 1000;
  --z-quote-modal: 1200;

  /* ==========================================================================
     ANIMATION DURATIONS
     Maximum 250 ms — lásd design-bible/03-visual-philosophy.md
     ========================================================================== */

  --duration-fast: 200ms;
  --duration-header: 220ms;
  --duration-medium: 250ms;

  /* ==========================================================================
     ANIMATION EASINGS
     ========================================================================== */

  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==========================================================================
     OPACITY
     ========================================================================== */

  --opacity-disabled: 0.5;

  /* ==========================================================================
     BLUR
     ========================================================================== */

  --blur-header: 16px;

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --transition-base: var(--duration-fast) var(--easing-standard);
  --transition-header: var(--duration-header) var(--easing-standard);
}

/* ==========================================================================
   RESZPONZÍV TOKEN FELÜLÍRÁSOK
   Töréspontok: ui-kit/foundations/layout.md
   ========================================================================== */

@media (max-width: 1279px) {
  :root {
    --page-margin: 64px;
    --hero-height: 88vh;
    --font-size-display-xl: 3.75rem; /* 60 px */
  }
}

@media (max-width: 1023px) {
  :root {
    --page-margin: 40px;
    --header-height: 80px;
    --hero-height: 80vh;
    --hero-min-height: 640px;
    --font-size-display-xl: 3.25rem; /* 52 px */
  }
}

@media (max-width: 767px) {
  :root {
    --page-margin: 24px;
    --header-height: 72px;
    --logo-height: 40px;
    --hero-height: 72vh;
    --hero-min-height: 560px;
    --font-size-display-xl: 2.25rem; /* 36 px */
    --font-size-body-lg: 1.125rem; /* 18 px */
    --button-padding-y: 16px;
    --button-padding-x: 24px;
  }
}

@media (max-width: 479px) {
  :root {
    --page-margin: 20px;
  }
}

/* --------------------------------------------------------------------------
   Scroll restoration — disable smooth scrolling during instant restore
   -------------------------------------------------------------------------- */

html[data-scroll-restoring="true"],
html.is-history-restore {
  scroll-behavior: auto !important;
}