/*
Theme Name: Schramm Farbgestaltung
Theme URI: https://schramm-farbgestaltung.de/
Author: Schramm Farbgestaltung
Description: WordPress-Theme für Schramm Farbgestaltung – 1:1 Nachbau wkh.gmbh mit Scroll-Animationen, ACF-Inhalten & WPForms Pro.
Version: 8.0.0
Text Domain: sf
*/

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'Exo 2';
  src: url('assets/fonts/Exo-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo 2';
  src: url('assets/fonts/Exo-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   CSS VARIABLES  (1:1 Original-Farben)
   ============================================================ */
:root {
  --red:          #E02926;
  --red-dark:     #c02020;
  --orange:       #FB7E12;
  --yellow:       #FCCA0B;
  --black:        #000;
  --white:        #fff;
  --grey:         #808080;              /* --base-color-brand--grey */
  --overlay-dark: rgba(0,0,0,0.47);    /* #00000078 */
  --nav-h:        80px;
  --max:          80rem;               /* container-large */
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; overflow-x: hidden; }
body {
  font-family: 'Exo 2', Arial, sans-serif;
  color: #fff;
  background: #000;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
img  { max-width: 100%; display: block; }
a    { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.wp-block-paragraph{
  margin-bottom: 1rem;
}

/* ============================================================
   WEBFLOW UTILITY — LAYOUT
   ============================================================ */
.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

/* container-large: max 80rem, centered */
.container-large {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
}

/* container-small */
.container-small {
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

/* container-medium */
.container-medium {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}

/* max-width helpers */
.max-width-large  { width: 100%; max-width: 48rem; }
.max-width-medium { width: 100%; max-width: 35rem; }
.max-width-small  { width: 100%; max-width: 30rem; }
.max-width-xlarge { width: 100%; max-width: 64rem; }
.max-width-xxlarge{ width: 100%; max-width: 80rem; }
.max-width-full   { width: 100%; max-width: none; }

/* padding-global: 4rem L/R (1:1 Original) */
.padding-global {
  padding-left: 4rem;
  padding-right: 4rem;
}

/* padding-global-2: 5% L/R (CTA + Contact-Bar) */
.padding-global-2 {
  padding-left: 5%;
  padding-right: 5%;
}

/* padding-section sizes */
.padding-section-xsmall {
  padding-top: 3rem;
  padding-bottom: 3rem;
  display: block;
}
.padding-section-xsmall.no-bottom-padding { padding-bottom: 0; }
.padding-section-medium  { padding-top: 5rem; padding-bottom: 5rem; }
.padding-section-large   { padding-top: 7rem; padding-bottom: 7rem; }

/* margin helpers */
.margin-bottom             { margin-bottom: 0; }
.margin-bottom.margin-large  { margin: 0 0 1rem; }
.margin-bottom.margin-medium { margin: 0; }
.margin-bottom.margin-small  { margin-top: 0; margin-left: 0; margin-right: 0; }
.margin-bottom.margin-xxlarge,.margin-bottom.margin-custom3,.margin-bottom.margin-custom1 {
  margin-top: 0; margin-left: 0; margin-right: 0; margin-bottom: 3rem;
}
.margin-bottom.margin-tiny { margin: 0; }
.margin-top                { margin-bottom: 0; }
.margin-top.margin-medium  { margin-top: 1.5rem; margin-bottom: 0; }

/* text-align */
.text-align-center { text-align: center; }

/* button-group */
.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

/* ============================================================
   WEBFLOW UTILITY — TYPOGRAPHY
   ============================================================ */
.heading-style-h1 {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.2;
}
/* Hero h1: Notosans, 4.2rem, uppercase, centered */
.heading-style-h1.text-color-white.head-top {
  text-align: center;
  text-transform: uppercase;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 3.2rem;
  position: relative;
}
.text-span { text-transform: uppercase; font-weight: bold; }

.heading-style-h2 {
  float: none;
  text-align: left;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.heading-style-h2.text-color-alternate {
  text-transform: uppercase;
  font-family: 'Exo 2', Arial, sans-serif;
}

.heading-style-h2-3 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.heading-style-h2-3.text-color-white { direction: ltr; }

.heading-style-h3 {
  color: #fff;
  text-align: left;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  position: static;
}

.heading-style-h4 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.heading-style-h5 {
  text-transform: none;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.heading-style-h6 {
  text-transform: uppercase;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.text-size-xlarge { font-size: 1.125rem; }
.text-size-xlarge.text-weight-bold {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 500;
}
.text-size-xlarge.text-color-white {
  color: #fff;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1rem;
}

.text-size-large {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1.25rem;
}

.text-size-medium { font-size: 1rem; }
.text-block.text-size-medium {
  text-align: center;
  font-family: 'Exo 2', Arial, sans-serif;
}

.text-size-small { font-size: .875rem; }

.text-weight-bold   { font-weight: 700; }
.text-weight-medium { font-weight: 500; }
.text-weight-normal { font-weight: 400; }
.text-weight-light  { font-weight: 300; }
.text-weight-xbold  { font-weight: 800; }
.text-weight-semibold { font-weight: 600; }

.text-color-white   { color: #fff; }
.text-color-black   { color: #000; }
.text-color-grey, .paragraph-5 { color: var(--grey); }
.text-color-red     { color: var(--red); }
.text-color-alternate { color: #fff; }

.paragraph, .paragraph-2, .paragraph-3 {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: .8rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.button {
  border: 0 solid #000;
  background-color: var(--red);
  color: #fff;
  text-align: center;
  border-radius: 12px;
  padding: .75rem 1.5rem;
  text-decoration: none;
  transition: font-size .2s;
  display: inline-block;
  cursor: pointer;
}
.button:hover {
  background-color: var(--orange);
  color: #fff;
}
.button.is-link {
  color: #000;
  background-color: transparent;
  border-style: none;
  padding: .25rem 0;
  line-height: 1;
}
.button.is-link.is-alternate { color: #fff; background-color: transparent; }
.button.is-link.is-icon {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: var(--red);
}
.button.is-link.is-icon.review-link {
  text-transform: uppercase;
  cursor: pointer;
}
.button.is-icon {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  justify-content: center;
  align-items: center;
  display: flex;
}
.button.is-small {
  border-radius: 10px;
  padding: .5rem 2.3rem;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
}
.button.is-secondary {
  border-width: 1px;
  border-style: solid;
  border-color: var(--red);
  color: var(--red);
  background-color: transparent;
}
.button.is-alternate {
  border-color: #fff;
  background-color: #fff;
  color: #000;
}
.button.background-color-black {
  background-color: #000;
  color: #fff;
  padding-left: 2.3rem;
  padding-right: 2.3rem;
  font-family: 'Exo 2', Arial, sans-serif;
}
.button.background-color-black:hover { background-color: #222; }
.button.background-color-black.termin-btn { cursor: pointer; }

/* ============================================================
   NAVBAR  (custom classes — header.php)
   Original: .navbar1_component-2 (fixed, z-30)
             .navbar1_container-2 (absolute pill 95% × 80px)
             .div-block-49 (glass overlay, opacity 0 → 1 on scroll)
             .div-block-50 (flex content inside pill)
   We replicate with: .site-header / .header-inner / .div-block-49
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: var(--nav-h);
  padding-top: 10px;
  padding-left: 2%;
  padding-right: 2%;
  background: transparent;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Glass pill: wraps logo/toggle row + mobile nav dropdown.
   Background/blur transitions in on scroll. On mobile it expands vertically
   to include the dropdown — no gap possible since both elements share one background. */
.header-wrap {
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  background-color: transparent;
  border-radius: 19px;
  width: 95%;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80px;
  padding: 5px 3%;
  position: relative;
  margin: 0 auto;
  pointer-events: auto;
  transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease;
}
.header-wrap.nav-visible {
  background-color: rgba(255,255,255,0.8);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
/* Logo/toggle row inside the pill */
.header-inner {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Nav links go dark on white background */
.header-wrap.nav-visible .header-nav a {
  color: #111;
}
.header-wrap.nav-visible .header-nav a:hover,
.header-wrap.nav-visible .header-nav a.active {
  color: var(--red);
}
.header-wrap.nav-visible .header-nav a.btn-red {
  color: #fff !important;
}
/* Hamburger lines go dark */
.header-wrap.nav-visible .nav-toggle span {
  background: #111;
}

/* Logo */
.header-logo { flex-shrink: 0; }
.header-logo img {
  height: 46px; width: auto; display: block;
  filter: brightness(0) invert(1);
  transition: filter .3s ease;
}
.header-wrap.nav-visible .header-logo img { filter: none; }

/* Nav links — .navbar1_link equivalent
   FIX: Regular links have NO border/background. Only CTA "Kontaktiere uns"
   has the red pill styling. */
.header-nav {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}
.header-nav a {
  color: #fff;
  border: none;
  background: none;
  border-radius: 0;
  padding: .5rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  transition: color .2s;
  text-transform: none;
  letter-spacing: normal;
}
.header-nav a:hover,
.header-nav a.active { color: var(--red); }

/* CTA button — only this one gets a styled pill */
.header-nav a.btn-red {
  background: var(--red);
  color: #fff !important;
  border-radius: 12px;
  border: none;
  padding: .75rem 1.5rem;
  font-weight: 400;
  margin-left: .5rem;
  transition: background .2s, color .2s;
}
.header-nav a.btn-red:hover { background: var(--orange); color: #fff !important; }

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 5px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block; width: 26px; height: 2px;
  background: #fff; transition: all .3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ============================================================
   HERO  —  .section_top  (1:1 Original)
   ============================================================ */
/* section_top: z-index:3 ensures it creates a stacking context above hero-blur-overlay (z-index:2),
   so the headline stays sharp — the backdrop-filter blurs only the video below, not the hero content. */
.section_top {
  object-fit: cover;
  height: auto;
  position: relative;
  top: 0;
  overflow: visible;
  z-index: 3;
}

/* div-block-43: fixed video background (z-index:0).
   No background-color here — the dark hero atmosphere comes from div-block-44 (in-flow, scrolls away with hero).
   This keeps the fixed video clean so the service section shows the blurred video without extra darkening. */
.div-block-43 {
  z-index: 0;
  width: 100vw;
  height: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}
.div-block-43 .background-video,
.div-block-43 .w-background-video { width: 100%; height: 100%; position: absolute; inset: 0; }
.div-block-43 video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* hero-blur-overlay: GSAP scrub controls opacity + backdrop-filter.
   z-index: 2 — sits above the fixed video (z-index:0) but below all
   content sections (z-index:20), so it ONLY blurs the hero video area. */
.hero-blur-overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100svh;
  z-index: 2;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
}

/* div-block-44: inner container — GSAP pin on .section_top controls scroll space.
   100svh ensures the pinned element fills the viewport exactly. */
.div-block-44 {
  background-color: #00000078;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  position: relative;
  overflow: visible;
}

/* div-block-46: GSAP pin on .section_top replaces sticky behavior.
   position:relative keeps it in normal flow within the pinned section. */
.div-block-46 {
  height: 100svh;
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
}

/* Hero cycling slides — scroll-through track (v8.5)
   div-block-22 clips the track; GSAP moves .hero-slides-track vertically
   to scroll slide 1 out and slide 2 into view. */
.div-block-22 {
  position: relative;
}
/* Track: stacks slides vertically, GSAP moves it */
.hero-slides-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
/* Each slide: fixed height matching the clip window */
.hero-slide-h1 {
  flex-shrink: 0;
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* section_header44: absolute, 100vw × 100svh, z-index 11 */
.section_header44 {
  z-index: 11;
  background-color: transparent;
  width: 100vw;
  height: 100svh;
  justify-content: center;
  align-items: center;
  display: block;
  position: absolute;
  top: 0;
}

/* top-hero-container: grid, centers content */
.top-hero-container {
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  width: 100%;
  height: 100%;
  display: grid;
}


/* hero-container: GSAP a-38 exit target */
.hero-container { /* height set by GSAP */ }

/* div-block-55: height 175px (vertical spacing) */
.div-block-55 { height: 175px; }

/* div-block-22: height 160px, overflow hidden — clips h1 entrance (a-21) */
.div-block-22 {
  text-align: center;
  height: 160px;
  overflow: hidden;
}

/* div-block-52: mobile CTA (hidden on desktop) */
.div-block-52 { display: none; }

/* ============================================================
   SERVICES  —  .section_layout242
   ============================================================ */
.section_layout242 {
  z-index: 20;
  color: #fff;
  background-color: #00000078;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}


.layout242_list {
  grid-column-gap: 1rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  place-items: stretch center;
  display: grid;
}

/* FIX: white card → text must be dark (body default is #fff) */
.layout242_item {
  background-color: #fff;
  border-radius: 18px;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 20px 20px 40px;
  display: flex;
  color: #111;
}
.layout242_item .heading-style-h6 { color: #111; }
.layout242_item .paragraph { color: #333; }

.layout242_item-icon-wrapper {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.icon-2x2-medium { width: 4rem; height: 4rem; }

/* ============================================================
   MARQUEE  —  .line_animation  (CSS-Text-Marquee, endlos)
   Row 1: läuft nach links   (section_loop_right → animation marq-left)
   Row 2: läuft nach rechts  (section_loop_left  → animation marq-right)
   Text: outlined / stroke-only wie Original
   ============================================================ */
/* v8.5: no borders on any marquee; first marquee is transparent (video bg),
   2nd + 3rd are solid black */
.line_animation {
  background-color: #000;
  flex-flow: column;
  display: flex;
  position: relative;
  overflow: hidden;
  z-index: 20;
  padding: 2rem 0;
  gap: 0;
  border: none;
}

/* First marquee (after services): stays transparent so blurred video shows through */
#section-service + .line_animation {
  background-color: #00000078 !important;
}

.section_loop_right,
.section_loop_left {
  overflow: hidden;
  width: 100%;
}

/* The scrolling track — duplicated for seamless loop */
.div-block-9 {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
}

/* v8.2: Marquee driven by GSAP scrub (main.js) — no CSS animation */

/* Each text item */
.loop_right_item,
.loop_left_item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.1;
  padding: 0 2rem;
  user-select: none;
}
.loop_right_item,
.loop_left_item  { color: var(--red); }

/* v8.2: No star separator, no CSS keyframes (GSAP scrub only) */

/* image-2: kept for potential image mode fallback */
.image-2 { width: 80%; }

/* ============================================================
   PROJECTS  —  .section.track  (Horizontal Scroll)
   ============================================================ */
/* FIX: Remove fixed height from section.track so JS height on
   .js-proj-outer determines the actual scroll space. A fixed
   height here (400vw) causes the section to be over-tall and
   creates a large gap before .section-2. */
.section.track {
  z-index: 20;
  background-color: #000;
  display: block;
  position: relative;
  height: auto;
}

/* Pin-outer: JS sets this element's exact height */
.js-proj-outer { position: relative; }

/* div-block-28: sticky container, 100vw × 100svh */
.div-block-28 {
  z-index: 20;
  background-color: #00000078;
  width: 100vw;
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: hidden;
}

/* div-block-12: absolute heading, top 100px */
.div-block-12 {
  z-index: 10;
  position: absolute;
  top: 100px;
}

/* collection-list-wrapper: full viewport, flex row */
.collection-list-wrapper {
  box-sizing: content-box;
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 100vw;
  height: 100svh;
  display: flex;
  position: sticky;
  top: 0;
}

/* collection-list.frame: flex row, full height */
.collection-list {
  box-sizing: border-box;
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  flex: none;
  width: auto;
  height: 100%;
  display: flex;
  overflow: visible;
}
.collection-list.frame {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

/* collection-item: each project slide */
.collection-item {
  box-sizing: border-box;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  flex: none;
  width: 100vw;
  height: 100%;
  position: relative;
}

/* div-block-14: dark overlay on each slide */
.div-block-14 {
  background-color: #0000005e;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0; left: 0;
}

/* text-block-8: city/location */
.text-block-8 {
  color: #fff;
  text-align: center;
  font-family: 'Exo 2', Arial, sans-serif;
}

/* portfo-title: project name (heading-style-h2.text-color-alternate) */
.portfo-title {
  font-family: 'Exo 2', Arial, sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
}

/* ============================================================
   ABOUT  —  .section-2
   FIX: z-index: 20 so it covers the fixed hero video (z-index:0)
   and the hero-blur-overlay (z-index:2). Without this the section
   appeared blurry and the video bled through.
   ============================================================ */
.section-2 {
  z-index: 20;
  background-color: #000;
  flex-flow: column;
  display: flex;
  position: relative;
  top: auto;
}

/* div-block-48: sticky separator bar (bleeds -99px into projects) */
.div-block-48 {
  z-index: 20;
  border-bottom: 1px solid var(--red);
  background-color: #000;
  height: auto;
  margin-top: 0;
  display: block;
  position: sticky;
  top: 0;
}

/* div-block-47: flex row — left + right columns */
.div-block-47 {
  display: flex;
  position: static;
}

/* div-block-30: 35% left nav */
.div-block-30 {
  border-bottom: 1px solid var(--red);
  width: 35%;
  position: static;
}

/* div-block-16: left nav content — pinned by GSAP ScrollTrigger on desktop */
.div-block-16 {
  border-right: 1px solid transparent;
  width: auto;
}

/* div-block-31: 65% right content */
.div-block-31 {
  border-left: 1px solid var(--red);
  width: 65%;
  padding-top: 0;
}

/* div-block-15: each content block in right column
   FIX v8.2: flex-direction column → heading ABOVE FAQ accordion */
.div-block-15 {
  border-bottom: 1px solid var(--red);
  background-color: #000;
  display: flex;
  flex-direction: column;
  position: static;
}

/* div-block-17 */
.div-block-17 { width: 100%; }
.div-block-17 .margin-bottom{ margin-bottom: 4.1rem}

/* v8.3: in the about section, container-small must left-align so heading
   lines up with the FAQ questions below (which use padding-global directly) */
#section-about .container-small {
  margin-left: 0;
  max-width: none;
}

/* left-nav-title-block */
.left-nav-title-block { margin-bottom: 20px; }

/* text-block-18: left nav labels (red, 36px, Notosans, 400) */
.text-block-18 {
  color: var(--red);
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
}
.text-block-18.show-mob { display: none; }
.text-block-18.hide-mob { display: block; }
/* v8.3: inactive left-nav labels turn white (not grey) */
.text-block-18.label-inactive {
  color: #fff !important;
  transition: color .5s ease;
}

/* CEO stats block */
/* div-block-18: flex row, justify space-between */
.div-block-18 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  display: flex;
}
/* div-block-18.margin-bottom.margin-small: CSS Grid — image spans both rows, stats+fio stack in right column */
.div-block-18.margin-bottom.margin-small {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "image stats"
    "image fio";
  column-gap: 4.1rem;
  row-gap: 1.5rem;
  align-items: start;
}
.div-block-18.margin-bottom.margin-small .div-block-19 { grid-area: image; }
.div-block-18.margin-bottom.margin-small .div-block-4  { grid-area: stats; }
.div-block-18.margin-bottom.margin-small .fio-block    { grid-area: fio; }

/* div-block-19: CEO photo col */
.div-block-19 { width: 50%; }
.div-block-19.margin-bottom.margin-medium { width: auto; }

/* image-3: CEO photo */
.image-3 {
  border-radius: 13px;
  max-width: 260px;
  position: relative;
}

/* div-block-20: stats column */
.div-block-20 {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.5rem;
  width: auto;
  display: flex;
}

/* div-block-4: stats list */
.div-block-4 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  flex-flow: column;
  flex: none;
  justify-content: space-between;
  height: 80%;
  display: flex;
}

/* div-block-3: each stat row */
.div-block-3 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  color: var(--red);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* text-block-4: stat number (Gogh, 3.2rem, red) */
.text-block-4 {
  color: var(--yellow);
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}

/* text-block-5: stat label (Notosans, 1.1rem, 300) */
.text-block-5 {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: #fff;
}

/* text-block-12: CEO name (Gogh, 1rem, 800, red, uppercase) */
.text-block-12 {
  color: var(--red);
  text-transform: uppercase;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

/* text-block-13: CEO role (white, 0.8rem) */
.text-block-13 {
  color: #fff;
  font-size: .8rem;
}

/* fio-block: CEO name+role block */
.fio-block { flex-direction: column; align-items: flex-start; align-self: flex-start; }


/* ============================================================
   FAQ  —  .faq6_*
   ============================================================ */
.faq6_list-grid {
  grid-column-gap: 0;
  grid-row-gap: 0;
  border-radius: 1px;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: start stretch;
  display: grid;
  border-top: 1px solid var(--red);
}

.faq6_accordion {
  border-style: none none solid;
  border-width: 1px;
  border-color: transparent transparent var(--red);
  background-color: #000;
  color: #fff;
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
  overflow: hidden;
}

.faq6_icon-wrapper {
  flex: none;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  width: 3rem;
  display: flex;
}

/* FIX v8.2: + icon always red and larger */
.faq6_icon {
  color: var(--red);
  font-size: 1.5rem;
  transition: transform .4s ease;
  display: flex; align-items: center; justify-content: center;
}
.faq6_icon svg { width: 28px; height: 28px; stroke: var(--red); }
.faq6_accordion.open .faq6_icon { transform: rotate(45deg); }

.faq6_question {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  cursor: pointer;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  display: flex;
}

/* faq6_answer: JS sets explicit px height for smooth animation */
.faq6_answer {
  height: 0;
  overflow: hidden;
  transition: height .4s cubic-bezier(0.4, 0, 0.2, 1), padding .4s ease;
  padding-bottom: 0;
}
.faq6_answer-inner { padding-bottom: 2rem; }
.faq6_accordion.open .faq6_answer { padding-bottom: 0; /* JS sets explicit height */ }

/* ============================================================
   CTA RED  —  .section_layout192-2
   v8.4: overflow:hidden clips x-slide animation; will-change for GPU
   ============================================================ */
.cta-outer {
  position: relative;
  z-index: 20;
  background-color: #000;
}

.section_layout192-2 {
  background-image: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  color: #fff;
}

/* layout192_component-2: flex row, gap 70px */
.layout192_component-2 {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  display: flex;
  align-items: flex-start;
}

/* layout192_image-wrapper-2: photo column */
.layout192_image-wrapper-2 {
  box-sizing: border-box;
  object-fit: fill;
  border-radius: 0;
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

/* layout192_image-2: person photo */
.layout192_image-2 {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 19px;
  width: auto;
  max-width: 316px;
  height: auto;
  display: block;
  overflow: hidden;
}

/* text-block-15: name (Gogh, 1.3rem, 800, uppercase, white) */
.text-block-15 {
  color: #fff;
  text-transform: uppercase;
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
}

/* text-block-16: role (white) */
.text-block-16 { color: #fff; }

/* layout192_content-right: flex column, gap 21px */
.layout192_content-right {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
  flex: 1;
}
.layout192_content-right.max-width-large { justify-content: flex-start; }
.layout192_content-right .heading-style-h2-3 { margin-bottom: 1rem; }
.layout192_content-right p { margin-bottom: 1.5rem; }

/* ============================================================
   TESTIMONIALS  —  .section_testimonial17
   ============================================================ */
.section_testimonial17 {
  background-color: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 20;
}

/* div-block-7 */
.div-block-7 {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}
.div-block-7.margin-bottom { margin-bottom: 1rem; }

/* gallery21_slider: clips the sliding mask */
.gallery21_slider {
  background-color: transparent;
  width: 100%;
  padding-bottom: 5rem;
  display: block;
  position: relative;
  overflow: hidden;
}

/* div-block-42: review link (absolute bottom left) */
.div-block-42 {
  position: absolute;
  bottom: 0;
  left: 0;
}

/* gallery21_mask: flex track — JS translates this; .gallery21_slider clips it */
.gallery21_mask {
  display: flex;
  transition: transform .5s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

/* gallery21_slide: 50% each — 2 visible side-by-side on desktop */
.gallery21_slide {
  flex: 0 0 50%;
  min-width: 0;
  padding-right: 2rem;
  box-sizing: border-box;
}

/* testimonial17_card */
.testimonial17_card {
  border: 1px none;
  background-color: #fff;
  border-radius: 1rem;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: auto;
  display: inline-flex;
  padding: 2rem;
  color: #000;
  vertical-align: top;
}

/* testimonial17_content-top */
.testimonial17_content-top {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
  position: relative;
  margin-bottom: 1rem;
}

/* rating stars */
.testimonial17_rating-wrapper { display: flex; }
.icon-rate svg path { fill: var(--yellow); }
.testimonial17_rating-icon {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: .25rem;
  display: flex;
}
.icon-embed-xsmall { display: flex; }
.icon-embed-xsmall svg { width: 18px; height: 17px; }

/* review text */
.section_testimonial17 .text-size-xlarge {
  font-size: 1.125rem;
  color: #333;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* testimonial17_client */
.testimonial17_client {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.testimonial17_client-info { flex: 1; }
.text-weight-semibold strong {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: .9rem;
  font-weight: 800;
  color: #111;
  text-transform: uppercase;
}

/* gallery21_nav: prev/next arrows */
.gallery21_nav {
  display: flex;
  gap: 12px;
  margin-top: 2rem;
}
.gallery21_arrow {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--red);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s;
}
.gallery21_arrow:hover { background: var(--red-dark); }

/* image-6: arrow icon in review-link */
.image-6 { width: 60px; }

/* div-block-56 */
.div-block-56 { position: static; }

/* ============================================================
   CONTACT FORM  —  .section-form
   ============================================================ */
.section-form {
  padding-top: 100px;
  position: relative;
  z-index: 20;
  background-color: #000;
}

/* div-block-32: flex row, bordered top+bottom red */
.div-block-32 {
  border-top: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  display: flex;
}

/* div-block-33: 35% title column */
.div-block-33 { width: 35%; }

/* div-block-34: 65% form column */
.div-block-34 {
  border-left: 1px solid var(--red);
  width: 65%;
}

/* contact1_form-block */
.contact1_form-block {
  border-left: 1px none var(--red);
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
  font-family: 'Exo 2', Arial, sans-serif;
}

/* form placeholder */
.form-placeholder {
  color: rgba(255,255,255,.5);
  font-size: .9rem;
  line-height: 1.6;
  padding: 2rem;
}

/* ── WPForms Styling ── */
.section-form .wpforms-container { width: 100%; }
.section-form .wpforms-field-label { display: none !important; }
.section-form .wpforms-field {
  border-bottom: 1px solid var(--red) !important;
  padding: 18px 0 !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.section-form .wpforms-field input[type="text"],
.section-form .wpforms-field input[type="email"],
.section-form .wpforms-field input[type="tel"],
.section-form .wpforms-field textarea {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-family: 'Exo 2', Arial, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 300 !important;
  padding: 0 0 0 1rem !important;
  width: 100% !important;
  outline: none !important;
}
.section-form .wpforms-field input::placeholder,
.section-form .wpforms-field textarea::placeholder {
  color: rgba(255,255,255,.45) !important;
  font-weight: 300 !important;
}
.section-form .wpforms-field textarea { min-height: 120px; resize: none; }
.section-form .wpforms-field-gdpr-checkbox { padding-left: 1rem !important; padding-right: 1rem !important; }
.section-form .wpforms-submit-container { padding: 0 !important; margin-top: 0 !important; }
.section-form .wpforms-submit {
  background-color: var(--red) !important;
  border-top: 1px solid #000 !important;
  width: 100% !important;
  height: auto !important;
  padding-top: 1.4rem !important;
  padding-bottom: 1.4rem !important;
  font-family: 'Exo 2', Arial, sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 300 !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  display: block !important;
}

/* ============================================================
   CONTACT BAR  —  .section-5
   v8.4: black bg, overflow:hidden, .div-block-24 slides in from left (GSAP)
   ============================================================ */
.section-5 {
  position: relative;
  z-index: 20;
  background-color: #000;
  overflow: hidden;       /* clips x-animation of inner block */
}
/* The red inner block slides in via GSAP — starts off-canvas left */
.section-5 .div-block-24 {
  will-change: transform;
}

/* div-block-24: red background wrapper */
.div-block-24 {
  background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
  justify-content: space-between;
  display: block;
}

/* div-block-25: flex row, spaced */
.div-block-25 {
  justify-content: space-around;
  align-items: start;
  display: flex;
}

/* div-block-40: WhatsApp link */
.div-block-40 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  color: #fff;
  align-items: center;
  display: flex;
}
.div-block-40:hover { filter: invert(); color: #000; }

/* div-block-41: Email link */
.div-block-41 {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  align-items: center;
  display: flex;
}
.div-block-41:hover { filter: invert(); }

/* image-4, image-5: contact icons */
.image-4, .image-5 { width: 32px; height: 32px; }

/* text-block-10/11: contact text labels */
.text-block-10 {
  border: 1px none #fff;
  color: #fff;
  font-size: 3rem;
}
.text-block-10.text-size-large { font-size: 2rem; }
.text-block-10.text-size-large:hover { color: rgba(255,255,255,.8); }

.text-block-11 { color: #fff; font-size: 3rem; }
.text-block-11.text-size-large { font-size: 2rem; }
.text-block-11.text-size-large:hover { color: rgba(255,255,255,.8); }

.footer-contact { font-family: 'Exo 2', Arial, sans-serif; }

/* ============================================================
   FOOTER  (custom classes — footer.php)
   ============================================================ */
.site-footer {
  background: #000;
  z-index: 20;
  position: relative;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 4rem;
  flex-wrap: wrap;
}

.footer-company {
  font-family: 'Exo 2', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.footer-address a { color: rgba(255,255,255,.65); font-size: .875rem; line-height: 1.6; }
.footer-address a:hover { color: #fff; }

.footer-hours-label {
  font-size: .75rem;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

.footer-hours { font-size: .875rem; color: rgba(255,255,255,.65); line-height: 1.6; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 4rem;
  border-top: 1px solid rgba(193,18,28,.2);
  flex-wrap: wrap;
}

.footer-copy { font-size: .8rem; color: rgba(255,255,255,.4); }

.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .8rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer-links a:hover { color: var(--red); }

.footer-social { display: flex; gap: 1rem; align-items: center; }
.footer-social a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  font-size: .9rem;
  transition: border-color .2s, color .2s;
}
.footer-social a:hover { border-color: var(--red); color: var(--red); }

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

/* ============================================================
   DATA-ANIM FALLBACK  (IntersectionObserver)
   ============================================================ */
[data-anim] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-anim].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — 991px (Tablet)
   ============================================================ */
@media screen and (max-width: 991px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .site-header { overflow: visible; }

  /* Pill becomes a flex column to include the dropdown in the same background */
  .header-wrap {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 80px;
    padding: 0;
  }
  .header-inner {
    padding: 5px 3%;
    height: 80px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
  }

  /* When menu open: wrapper takes matching background, border-radius wraps entire pill+dropdown */
  .site-header.menu-open .header-wrap {
    background-color: rgba(0,0,0,.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header.menu-open .header-wrap.nav-visible {
    background-color: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
  }

  /* Nav dropdown — in-flow (not absolutely positioned), background transparent so wrapper shows through */
  .header-nav {
    display: none;
    position: static;
    margin-left: 0;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 0 3rem;
    background: transparent;
    border-radius: 0;
  }
  .header-nav.open {
    display: flex;
    animation: menuSlideDown 0.35s ease forwards;
  }
  .header-nav.closing {
    display: flex;
    animation: menuSlideUp 0.25s ease forwards;
  }
  .header-nav a { font-size: 1.2rem; padding: .75rem 1.5rem; }

  /* Hero */
  .section_top { overflow: visible; }
  .div-block-22  { height: 290px; }
  .hero-slide-h1 { height: 290px; }
  .div-block-55  { height: 305px; }
  .heading-style-h1.text-color-white.head-top { font-size: 2.4rem; }
  .hero-btn-mob { width: 100%; text-align: center; }

  /* Services */
  .layout242_list {
    grid-column-gap: 2rem;
    flex-flow: column;
    grid-auto-flow: row;
    display: flex;
    gap: 1.5rem;
  }
  .text-block.text-size-medium { margin-top: 1.5rem; }

  /* Projects */
  .section.track { height: auto; }

  /* About */
  .div-block-15 { flex-flow: column; }
  .div-block-16 {
    background-color: #000;
    border-right-style: none;
    border-bottom: 1px solid transparent;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    top: var(--nav-h);
  }
  .div-block-17 { width: 100%; }
  .section-2 { flex-flow: column; }
  .div-block-30 {
    z-index: 20;
    border-bottom: 1px solid var(--red);
    width: 100%;
  }
  .div-block-31 { border-left-style: none; width: 100%; }
  .div-block-47 { flex-flow: column; }
  .text-block-18 { color: #fff; font-size: 22px; display: block; }
  .text-block-18.show-mob { display: block; }
  .text-block-18.hide-mob { display: none; }

  /* CTA */
  .layout192_component-2 { grid-column-gap: 41px; flex-direction: column; }
  .heading-style-h2-3 { font-size: 2.75rem; }
  .layout192_content-right.max-width-large { grid-column-gap: 0; grid-row-gap: 0; }

  /* Contact form */
  .div-block-32 { flex-flow: column; }
  .div-block-33 { width: 100%; border-bottom: 1px solid var(--red); }
  .div-block-34 { border-left-style: none; width: 100%; }
  .contact1_form-block { border-left-style: none; }

  /* Contact bar */
  .div-block-25 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    flex-flow: column;
  }

  /* General */
  .padding-global { padding-left: 2rem; padding-right: 2rem; }
  .top-hero-container { position: sticky; top: 0; }
}

/* ============================================================
   RESPONSIVE — 767px (Mobile Landscape)
   ============================================================ */
@media screen and (max-width: 767px) {
  /* Typography */
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2.25rem; }

  /* Hero */
  .div-block-22  { height: 265px; }
  .hero-slide-h1 { height: 265px; }
  .div-block-55  { height: 280px; }
  .heading-style-h1.text-color-white.head-top { font-size: 2.2rem; }

  /* Services */
  .layout242_list {
    grid-row-gap: 1.5rem;
    grid-template-columns: 1fr;
  }

  /* Marquee */
  .div-block-7 {
    grid-column-gap: 29px;
    grid-row-gap: 29px;
    flex-flow: column;
  }
  .loop_right_item { flex: none; }
  .image-2 { width: auto; height: 50px; }

  /* About */
  .div-block-17 { width: auto; }
  .div-block-18.margin-bottom.margin-small {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
  }
  .div-block-18.margin-bottom.margin-small .div-block-19 { order: 1; width: 100%; }
  .div-block-18.margin-bottom.margin-small .div-block-4  { order: 3; }
  .div-block-18.margin-bottom.margin-small .fio-block    { order: 2; }

  /* Testimonials */
  .gallery21_slide { flex: 0 0 100%; padding-right: 1.5rem; }
  .testimonial17_client { flex-direction: column; align-items: flex-start; width: 100%; }
  .testimonial17_card { padding: 1.5rem; }

  /* Contact bar */
  .text-block-10.text-size-large,
  .text-block-11.text-size-large { font-size: 1.4rem; }

  /* Padding */
  .padding-global { padding-left: 1.5rem; padding-right: 1.5rem; }
  .padding-section-xsmall { padding-top: 2rem; padding-bottom: 2rem; }
  .faq6_question { padding: 2rem 0; }
  .faq6_icon-wrapper { width: 1.75rem; }
}

/* ============================================================
   RESPONSIVE — 479px (Mobile Portrait)
   ============================================================ */
@media screen and (max-width: 479px) {
  /* Hero */
  .div-block-22  { height: 225px; }
  .hero-slide-h1 { height: 225px; }
  .div-block-55  { height: 240px; }
  .heading-style-h1.text-color-white.head-top { font-size: 1.85rem; }
  .heading-style-h2-3 { font-size: 2.25rem; }
  .div-block-52 {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
  .hero-container { height: auto; }

  /* Marquee */
  .div-block-7 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
  }
  .loop_right_item { flex: none; }
  .image-2 { flex: 0 auto; width: auto; height: 40px; }

  /* About */
  .div-block-17 { width: 100%; }
  .div-block-18, .div-block-18.margin-bottom { flex-flow: column; gap: 0; }

  /* Nav pill */
  .header-wrap {
    border-radius: 14px;
    width: 95%;
    margin: 0 auto;
  }

  /* Misc */
  .left-nav-title-block { margin-bottom: 5px; }
  .padding-global { padding-left: 1rem; padding-right: 1rem; }
  .footer-top { padding: 2rem 1rem; }
  .footer-bottom { padding: 1rem; }
}

/* Legal page */
.page-legal-title {
  margin-bottom: 2rem;
}