/* ==========================================================================
   Webletica ↔ Elementor bridge
   Reconciles the static design CSS (which assumes the browser's default flex
   ROW) with Elementor containers (which default to flex COLUMN), and styles
   the WordPress Nav Menu widget to match the design header.
   Loaded after base.css / components.css / showpieces.css.
   ========================================================================== */

/* ---------- 1. Fixed header ---------- */
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 100;
  flex-direction: column !important;
  justify-content: center !important;
}
body.admin-bar .site-header{ top: 32px; }
.site-header .container{
  height: 100%;
  width: 100%;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px;
}
.site-header .container > .elementor-element{
  width: auto !important;
  flex: 0 0 auto !important;
}
.site-header .container > .main-nav{ flex: 0 1 auto !important; }

/* ---------- 2. WordPress Nav Menu → design nav ---------- */
.main-nav .elementor-widget-container{ display: flex; align-items: center; }
.main-nav ul.menu{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav ul.menu > li{ position: relative; list-style: none; }
.main-nav ul.menu > li > a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--c-muted);
  text-decoration: none;
  transition: color .2s, background-color .2s;
}
.main-nav ul.menu > li > a:hover,
.main-nav ul.menu > li.current-menu-item > a,
.main-nav ul.menu > li.current_page_item > a{ color: var(--c-text); }
.main-nav ul.menu .sub-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: -10px;
  min-width: 280px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: rgba(20, 20, 27, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--c-line-2);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, transform .3s var(--ease-out), visibility .25s;
  z-index: 60;
}
.main-nav ul.menu > li:hover > .sub-menu,
.main-nav ul.menu > li:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: none; }
.main-nav ul.menu .sub-menu a{
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--c-muted);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.main-nav ul.menu .sub-menu a:hover{ background: var(--c-surface-2); color: var(--c-text); }
.main-nav .dropdown-menu-toggle{ display: none !important; }

/* ---------- 3. Restore row flow where the design relies on flex row ---------- */
.hero,
.section-head,
.hero-meta,
.row,
.row-center,
.row-end,
.row-between,
.case-head,
.case-facts,
.case-showcase,
.footer-top,
.footer-cols,
.footer-bottom,
.steps,
.pricing,
.breadcrumbs,
.article-meta,
.contact-line,
.hero-actions,
.page-hero-actions,
.cta-band-actions,
.page-hero-actions.mt-md,
.gallery,
.discipline,
.price-amount,
.case-card-meta,
.page-hero-media + *{ flex-direction: row !important; }

/* explicit columns stay columns */
.icon-list,
.discipline-points,
.footer-col ul,
.stack,
.steps-vertical{ flex-direction: column !important; }

/* responsive: article layout is a row on desktop, column on mobile */
.article-layout{ flex-direction: row; }
@media (max-width: 960px){ .article-layout{ flex-direction: column; } }

/* ---------- 4. Hero sizing ---------- */
.hero{ min-height: 100svh; align-items: flex-end !important; }
.hero > .container{ position: relative; width: 100%; }
body.admin-bar .hero{ padding-top: calc(var(--header-h) + 32px); }
body.admin-bar .page-hero{ padding-top: calc(var(--header-h) + 32px + clamp(48px, 7vw, 96px)); }

/* ---------- 5. Columns stack on small screens ---------- */
@media (max-width: 900px){
  .row > .col{ width: 100% !important; }
}


/* ---------- 7. Hero meta items sit side by side ---------- */
.hero-meta-item{ flex: 1 1 220px !important; width: auto !important; }
.hero-meta-item > .elementor-element{ flex: 1 1 auto !important; width: auto !important; }
.row.hero-meta{ border-top: 1px solid var(--c-line-2); margin-top: clamp(48px,7vw,96px); }

/* ---------- 8. Headings inherit the design colour (not the kit primary) ---------- */
.elementor-widget-heading .elementor-heading-title{ color: inherit; }
.footer-col .elementor-heading-title{ color: var(--c-volt); }

/* ---------- 9. Rows: zero gap, spacing lives in column padding ---------- */
/* Elementor rows are zeroed in the document data; design classes with their
   own gap (footer, section-head, case-*) keep working because their rule is
   more specific than the element default. */
.row{ gap: 0 !important; }

/* section-head: text grows, action button sits on the right */
.section-head{ justify-content: space-between; }
.section-head .section-head-text{ width: auto !important; flex: 1 1 520px; max-width: 760px; }
.section-head > .elementor-element:not(.section-head-text){ width: auto !important; flex: 0 0 auto !important; }

/* ---------- 10. Widget titles follow the design text colour ---------- */
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-title span,
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-counter .elementor-counter-title,
.elementor-widget-testimonial .elementor-testimonial-name{ color: var(--c-text); }
.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-testimonial .elementor-testimonial-job,
.elementor-widget-testimonial .elementor-testimonial-content{ color: var(--c-muted); }
.elementor-widget-icon-box .elementor-icon-box-icon{ color: var(--c-volt); }

/* ---------- 11. Two-up blocks that size with flex-basis ---------- */
.discipline{ flex-wrap: nowrap !important; align-items: center !important; }
.discipline-body{ flex: 1 1 380px !important; width: auto !important; min-width: 0; }
.discipline-media{ flex: 1 1 420px !important; width: auto !important; min-width: 0; max-width: 50%; }
@media (max-width: 900px){ .discipline{ flex-wrap: wrap !important; } .discipline-media{ max-width: 100%; } }

.page-hero .col, .article-layout .col{ min-width: 0; }

/* ==========================================================================
   WPForms ? brand styling
   ========================================================================== */
div.wpforms-container-full{ margin: 0; }
div.wpforms-container-full .wpforms-form .wpforms-field{ padding: 0 0 20px; }
div.wpforms-container-full .wpforms-field-label,
div.wpforms-container-full .wpforms-field-sublabel,
div.wpforms-container-full .wpforms-field legend.wpforms-field-label,
div.wpforms-container-full .wpforms-field-label-inline{
  color: var(--c-text); font-weight: 600; font-size: .9rem; margin-bottom: 8px;
}
div.wpforms-container-full .wpforms-required-label{ color: var(--c-volt); }
div.wpforms-container-full .wpforms-field input[type=text],
div.wpforms-container-full .wpforms-field input[type=email],
div.wpforms-container-full .wpforms-field input[type=url],
div.wpforms-container-full .wpforms-field input[type=tel],
div.wpforms-container-full .wpforms-field input[type=number],
div.wpforms-container-full .wpforms-field textarea,
div.wpforms-container-full .wpforms-field select{
  background: var(--c-bg) !important;
  border: 1px solid var(--c-line-2) !important;
  border-radius: 12px !important;
  color: var(--c-text) !important;
  padding: 15px 16px !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
div.wpforms-container-full .wpforms-field textarea{ min-height: 150px; }
div.wpforms-container-full .wpforms-field input:focus,
div.wpforms-container-full .wpforms-field textarea:focus,
div.wpforms-container-full .wpforms-field select:focus{
  border-color: var(--c-volt) !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(215,255,58,.12) !important;
}
div.wpforms-container-full .wpforms-field input::placeholder,
div.wpforms-container-full .wpforms-field textarea::placeholder{ color: var(--c-dim); }
/* checkboxes (choice style) */
div.wpforms-container-full .wpforms-field-checkbox ul,
div.wpforms-container-full .wpforms-field-radio ul{ display: flex; flex-wrap: wrap; gap: 10px; }
div.wpforms-container-full .wpforms-field-checkbox ul li,
div.wpforms-container-full .wpforms-field-radio ul li{ margin: 0; }
div.wpforms-container-full .wpforms-field-checkbox ul li label,
div.wpforms-container-full .wpforms-field-radio ul li label{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--c-line-2); border-radius: 999px;
  color: var(--c-muted); font-weight: 500;
}
div.wpforms-container-full .wpforms-field-checkbox ul li input:checked + label,
div.wpforms-container-full .wpforms-field-radio ul li input:checked + label{
  border-color: var(--c-volt); background: var(--c-volt); color: var(--c-volt-ink);
}
/* submit */
div.wpforms-container-full .wpforms-submit-container{ padding: 0; }
div.wpforms-container-full .wpforms-submit{
  background: var(--c-volt) !important; color: var(--c-volt-ink) !important;
  border: 0 !important; border-radius: 999px !important;
  padding: .95em 1.5em !important; font-weight: 600 !important; font-size: .98rem !important;
  box-shadow: none !important;
}
div.wpforms-container-full .wpforms-submit:hover{ box-shadow: 0 14px 40px -10px rgba(215,255,58,.55) !important; }
/* errors */
div.wpforms-container-full .wpforms-error,
div.wpforms-container-full label.wpforms-error{ color: #ff8a8a; }

/* hide native checkbox/radio so the pill is the control */
div.wpforms-container-full .wpforms-field-checkbox ul li input[type=checkbox],
div.wpforms-container-full .wpforms-field-radio ul li input[type=radio]{
  position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important;
}
div.wpforms-container-full .wpforms-field-checkbox ul li,
div.wpforms-container-full .wpforms-field-radio ul li{ position: relative; }

/* ==========================================================================
   Hero canvas (lane lines) — the HTML widget wrapper must fill the hero,
   otherwise the canvas renders at zero height.
   ========================================================================== */
.hero{ position: relative; isolation: isolate; }
.hero > .elementor-widget-html{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
  z-index: 0;
}
.hero > .elementor-widget-html .elementor-widget-container{ width: 100%; height: 100%; }
.hero .hero-canvas{
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ---------- Nav chevron for items with children ---------- */
.main-nav ul.menu > li.menu-item-has-children > a::after{
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 8px;
  transition: transform .3s var(--ease-out);
}
.main-nav ul.menu > li.menu-item-has-children:hover > a::after{ transform: rotate(225deg) translateY(-1px); }

/* ---------- Elementor button icons ---------- */
.elementor-button .elementor-button-icon{ display: inline-flex; align-items: center; }
.elementor-button .elementor-button-icon i{ font-size: 0.95em; line-height: 1; }
.elementor-button .elementor-button-text{ display: inline-block; }

/* ==========================================================================
   Button interactions on the inner .elementor-button
   ========================================================================== */
.elementor-widget-button .elementor-button{
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
    background-color .25s, border-color .25s, color .25s;
}
.elementor-widget-button .elementor-button:hover{ transform: translateY(-2px); }
.elementor-button-icon{ transition: transform .35s var(--ease-out); }
.elementor-widget-button .elementor-button:hover .elementor-button-icon{ transform: translateX(4px); }
.btn-primary .elementor-button:hover{ box-shadow: 0 14px 40px -10px rgba(215,255,58,.55); }
.btn-ghost .elementor-button:hover,
.btn-ghost .elementor-button:focus{ color: var(--c-volt); border-color: var(--c-volt); background: transparent; }
.btn-ghost .elementor-button:hover .elementor-button-icon{ transform: translateX(4px); }
/* buttons keep their pill radius even if the kit default differs */
.elementor-widget-button .elementor-button{ border-radius: 999px; }

/* ==========================================================================
   Typography — match the static design (local @font-face families from base.css)
   ========================================================================== */
.elementor-widget-heading .elementor-heading-title{
  font-family: "Bricolage Grotesque", Inter, system-ui, sans-serif !important;
  font-weight: 700;
}
h1.elementor-heading-title{ font-size: clamp(2.6rem, 6vw, 5.4rem) !important; line-height: .98; letter-spacing: -.042em; }
h2.elementor-heading-title{ font-size: clamp(2.1rem, 4.4vw, 3.9rem) !important; line-height: 1.02; letter-spacing: -.036em; }
h3.elementor-heading-title{ font-size: clamp(1.3rem, 1.9vw, 1.6rem) !important; line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
h4.elementor-heading-title{ font-size: 1.1rem !important; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; }
p.elementor-heading-title{ font-family: "JetBrains Mono", ui-monospace, monospace !important; font-weight: 500; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.h-display .elementor-heading-title{ font-size: clamp(3rem, 8.2vw, 7.6rem) !important; line-height: .92; letter-spacing: -.048em; }
.hero-headline .elementor-heading-title{ font-size: clamp(3.4rem, 10.5vw, 10rem) !important; line-height: .88; letter-spacing: -.055em; }
.statement .elementor-heading-title{ font-size: clamp(1.9rem, 3.6vw, 3.2rem) !important; line-height: 1.08; letter-spacing: -.032em; font-weight: 650; }
.cta-band-title .elementor-heading-title{ font-size: clamp(2.6rem, 7vw, 6.4rem) !important; line-height: .95; letter-spacing: -.045em; }
.footer-wordmark .elementor-heading-title{ font-family: "Bricolage Grotesque", sans-serif !important; font-weight: 700; font-size: clamp(4rem, 17vw, 16rem) !important; line-height: .8; letter-spacing: -.06em; color: rgba(255,255,255,.035); -webkit-text-stroke: 1.5px rgba(255,255,255,.3); }
.elementor-widget-text-editor, .elementor-widget-text-editor p{ font-family: Inter, system-ui, -apple-system, sans-serif; }
.mono, .mono p, .mono span, .mono .elementor-heading-title{ font-family: "JetBrains Mono", ui-monospace, monospace !important; }

/* ==========================================================================
   Buttons — remove the dark Elementor fill, restore the design look
   ========================================================================== */
.elementor-widget-button .elementor-button{
  font-family: Inter, system-ui, sans-serif;
  box-shadow: none;
}
.elementor-button .elementor-button-content-wrapper{ gap: .55em; }
.btn-primary .elementor-button{ background-color: var(--c-volt) !important; color: var(--c-volt-ink) !important; border: 1px solid var(--c-volt) !important; }
.btn-primary .elementor-button:hover{ background-color: var(--c-volt) !important; }
.btn-ghost .elementor-button{ background-color: transparent !important; color: var(--c-text) !important; border: 1px solid var(--c-line-2) !important; }
.btn-ghost .elementor-button:hover{ background-color: transparent !important; }
.link-arrow .elementor-button{
  background: transparent !important; color: var(--c-text) !important;
  border: 0 !important; border-bottom: 1px solid var(--c-line-2) !important;
  border-radius: 0 !important; padding: 0 0 4px !important;
}
.link-arrow .elementor-button:hover{ color: var(--c-volt) !important; border-bottom-color: var(--c-volt) !important; }

/* ==========================================================================
   Remove Elementor's default widget bottom margin so the design's own
   margins (base.css) control vertical rhythm — this fixes the hero fold.
   ========================================================================== */
.elementor-widget:not(:last-child){ margin-block-end: 0 !important; }
.elementor-element > .elementor-widget-container > :last-child,
.elementor-widget-container > .elementor-heading-title,
.elementor-widget-container > p{ margin-bottom: 0; }
/* hero-inner: keep design margins only */
.hero .hero-kicker{ margin-bottom: clamp(20px, 3vw, 32px); }
.hero .hero-headline{ margin-bottom: clamp(24px, 3vw, 36px); }
.hero .hero-sub{ margin-bottom: clamp(28px, 3vw, 40px); }

/* Hero headline line-height: the runtime word spans must keep the design's .88 */
.hero-headline .elementor-heading-title,
.hero-headline .hero-word,
.hero-headline .hero-word-inner,
.hero-headline .hero-accent{ line-height: .88 !important; }

/* Hero meta: match the design (title/text are Inter, not the mono kicker style) */
.hero-meta{ margin-top: clamp(48px, 7vw, 96px); border-top: 1px solid var(--c-line-2); }
.hero-meta-item{ align-items: baseline !important; padding: 20px 24px 0 0; }
.hero-meta-index.elementor-heading-title,
.hero-meta-index .elementor-heading-title{ font-family: "JetBrains Mono", monospace !important; font-size: .75rem; text-transform: none; letter-spacing: 0; color: var(--c-volt); margin: 0; }
.hero-meta-title.elementor-heading-title,
.hero-meta-title .elementor-heading-title{ font-family: Inter, system-ui, sans-serif !important; font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.3; margin: 0; color: var(--c-text); }
.hero-meta-text.elementor-heading-title,
.hero-meta-text .elementor-heading-title{ font-family: Inter, system-ui, sans-serif !important; font-size: .92rem; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.4; margin: 0; color: var(--c-dim); display: block; }

.hero-meta-item{ flex-wrap: nowrap !important; }
.hero-meta-item > .elementor-element{ width: auto !important; flex: 1 1 auto !important; min-width: 0; }
.hero-meta-item > .elementor-element > .elementor-element{ width: auto !important; }
.hero-meta-item .elementor-widget-heading{ margin: 0 !important; }

/* Hero meta: compact single row per item (index | title/text) */
.hero-meta-item{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:baseline !important; padding:20px 24px 0 0 !important; }
.hero-meta-item > .elementor-element{ width:auto !important; max-width:none !important; flex:0 1 auto !important; min-width:0 !important; }
.hero-meta-item > .elementor-element:last-child{ flex:1 1 auto !important; }
.hero-meta-item .elementor-widget-heading,
.hero-meta-item .elementor-widget-container{ margin:0 !important; padding:0 !important; }
.hero-meta-item .elementor-heading-title{ margin:0 !important; padding:0 !important; line-height:1.35 !important; }
.hero-meta-text{ display:block !important; }
/* fold safety: slightly tighter hero padding (design: header+40 / 40-72) */
.hero{ padding-top: calc(var(--header-h) + 24px) !important; padding-bottom: clamp(32px, 5vw, 56px) !important; }

/* Keep each meta item at the design height (single index + two short lines) */
.hero-meta-item{ max-height: 76px; overflow: hidden; }

/* ==========================================================================
   Hero fold: keep the entire hero (kicker through meta) inside the viewport.
   On tall screens the full 10rem headline is kept; on shorter screens the
   headline and spacing scale down so nothing falls below the fold.
   ========================================================================== */
@media (max-height: 1000px){
  .hero{ padding-top: calc(var(--header-h) + 16px) !important; padding-bottom: clamp(24px, 4vw, 44px) !important; }
  .hero .hero-headline .elementor-heading-title{ font-size: clamp(2.9rem, 7.4vw, 7rem) !important; }
  .hero .hero-kicker{ margin-bottom: clamp(14px, 2vw, 22px) !important; }
  .hero .hero-headline{ margin-bottom: clamp(16px, 2vw, 26px) !important; }
  .hero .hero-sub{ margin-bottom: clamp(20px, 2.6vw, 30px) !important; }
  .hero .hero-meta{ margin-top: clamp(32px, 4.5vw, 60px) !important; }
}

/* Design component titles my global heading rules were clobbering */
.disciplines .discipline-title.elementor-heading-title,
.disciplines .discipline-title .elementor-heading-title{ font-size: clamp(2rem, 4vw, 3.6rem) !important; line-height: 1 !important; letter-spacing: -.04em !important; margin-bottom: .45em; }
.disciplines .discipline-text p,
.disciplines .discipline-text .elementor-widget-container{ font-size: 1.08rem !important; }
.disciplines .discipline-label.elementor-heading-title,
.disciplines .discipline-label .elementor-heading-title{ font-size: .78rem !important; letter-spacing: .14em !important; }
.process .process-step-title.elementor-heading-title,
.process .process-step-title .elementor-heading-title{ font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important; line-height: 1.05 !important; letter-spacing: -.03em !important; }

/* Discipline label must be the mono kicker style (design .discipline-label) */
.disciplines .discipline-label .elementor-heading-title,
.disciplines .discipline-label.elementor-heading-title{ font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--c-volt) !important; line-height: 1.2 !important; }

/* ===== Diensten: USPs, link button, image frame ===== */
.disciplines .icon-list .elementor-icon-list-text,
.disciplines .icon-list li{ color: var(--c-muted) !important; }
.disciplines .icon-list .elementor-icon-list-text{ line-height: 1.5 !important; }
.disciplines .icon-list .elementor-icon-list-icon i,
.disciplines .icon-list .elementor-icon-list-icon svg{ color: var(--c-volt) !important; fill: var(--c-volt) !important; width: 20px; height: 20px; font-size: 20px !important; }
.disciplines .icon-list .elementor-icon-list-item{ gap: 12px !important; }
.disciplines .icon-list .elementor-icon-list-items{ display: flex; flex-direction: column; gap: 12px; }
.btn .elementor-button{ display: inline-flex !important; width: auto !important; }
.discipline-link .elementor-button-content-wrapper{ flex-direction: row-reverse !important; gap: .65em !important; }
.discipline-media{ padding: 0 !important; }
.discipline-media .elementor-widget-image,
.discipline-media .elementor-widget-image .elementor-widget-container,
.discipline-media .elementor-image,
.discipline-media figure{ height: 100% !important; width: 100% !important; margin: 0 !important; }
.discipline-media img{ width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

/* ===== Fix: design .btn box was drawing on the widget wrapper (double border) ===== */
.elementor-widget-button.btn,
.btn.elementor-widget,
.btn.elementor-element{
  border: 0 !important; padding: 0 !important; background: none !important;
  border-radius: 0 !important; box-shadow: none !important; display: inline-block !important;
  min-width: 0 !important; gap: 0 !important;
}
.elementor-widget-button.btn .elementor-widget-container,
.btn.elementor-widget .elementor-widget-container,
.btn.elementor-element > .elementor-widget-container{
  border: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important;
}

/* ===== Site-wide vertical scroll-progress line (scroll-spine) ===== */
.scroll-spine{
  position: fixed;
  left: clamp(16px, calc((100vw - 1240px) / 2 - 28px), 160px);
  top: calc(var(--header-h) + 20px);
  height: calc(100vh - var(--header-h) - 44px);
  width: 2px;
  background: var(--c-line-2, rgba(255,255,255,.08));
  border-radius: 2px;
  z-index: 5;
  pointer-events: none;
}
.scroll-spine__fill{
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-volt);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top center;
  box-shadow: 0 0 10px rgba(215,255,58,.45);
  will-change: transform;
}
@media (max-width: 1023px){ .scroll-spine{ display: none; } }
@media (prefers-reduced-motion: reduce){ .scroll-spine{ display: none; } }

/* ===== Back-to-top button (Astra #ast-scroll-top) on-brand + working ===== */
#ast-scroll-top{
  background-color: var(--c-volt) !important;
  color: var(--c-bg) !important;
  width: 46px; height: 46px; border-radius: 14px !important;
  display: flex; align-items: center; justify-content: center;
  right: 26px; bottom: 26px;
  box-shadow: 0 14px 34px -12px rgba(215,255,58,.55) !important;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
#ast-scroll-top:hover{ transform: translateY(-3px); }
#ast-scroll-top .ast-icon svg, #ast-scroll-top svg{ fill: var(--c-bg) !important; color: var(--c-bg) !important; }
#ast-scroll-top .ast-icon.icon-arrow svg{ transform: translate(0,-20%) rotate(180deg) !important; }

/* ===== Footer: force design row layout (Elementor containers default to column) ===== */
.site-footer .footer-top{ flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 48px !important; }
.site-footer .footer-cols{ flex-direction: row !important; flex-wrap: wrap !important; gap: 40px !important; justify-content: space-between !important; }
.site-footer .footer-bottom{ flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 16px !important; }
.site-footer .footer-brand{ flex-direction: column !important; max-width: 380px !important; gap: 20px !important; }
.site-footer .footer-col{ flex-direction: column !important; flex: 1 1 150px !important; min-width: 150px; }
/* footer column headings are the small mono kickers, not big h2 */
.site-footer .footer-col h2.elementor-heading-title,
.site-footer .footer-col .elementor-heading-title{
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: .78rem !important; font-weight: 500 !important;
  letter-spacing: .14em !important; text-transform: uppercase !important;
  color: var(--c-volt) !important; margin: 0 0 18px !important; line-height: 1.2 !important;
}
.site-footer .footer-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer-col a,
.site-footer .footer-col .elementor-widget-container a{ color: var(--c-muted) !important; background: none !important; }
.site-footer .footer-col a:hover{ color: var(--c-volt) !important; }
.site-footer .footer-brand p{ color: var(--c-muted) !important; margin: 0 !important; font-size: .98rem !important; }
.site-footer .footer-brand img{ height: 30px !important; width: auto !important; align-self: flex-start; }

/* Up button: on-brand round button (was a square block) */
#ast-scroll-top{
  width: 48px !important; height: 48px !important; border-radius: 50% !important;
  background-color: var(--c-surface-2, #1B1B24) !important;
  border: 1px solid var(--c-line-2, rgba(255,255,255,.12)) !important;
  color: var(--c-volt) !important;
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.7) !important;
}
#ast-scroll-top svg{ fill: var(--c-volt) !important; color: var(--c-volt) !important; }
#ast-scroll-top:hover{ background-color: var(--c-volt) !important; border-color: var(--c-volt) !important; transform: translateY(-3px); }
#ast-scroll-top:hover svg{ fill: var(--c-bg) !important; color: var(--c-bg) !important; }

/* ===== Footer: full-width brand on top, columns below, full-bleed wordmark ===== */
.site-footer .footer-top{ flex-direction: column !important; align-items: stretch !important; gap: clamp(40px,5vw,64px) !important; }
.site-footer .footer-brand{ max-width: none !important; width: 100% !important; flex: 1 1 auto !important; align-items: flex-start !important; }
.site-footer .footer-brand p{ max-width: 74ch !important; }
.site-footer .footer-cols{ width: 100% !important; flex: 1 1 auto !important; }
.site-footer .footer-wordmark{
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
  font-size: 17vw !important; line-height: .8 !important; letter-spacing: -.06em !important;
  text-align: center !important; white-space: nowrap !important; overflow: hidden !important;
}
/* Header + footer logo sizing (@2x SVG renders ~300x42 intrinsic) */
.site-header .site-logo img, .site-header .elementor-element-2b93e62 img{
  height: 30px !important; width: auto !important; max-width: none !important; min-width: 0 !important;
}
@media (max-width: 1023px){
  .site-header .site-logo img, .site-header .elementor-element-2b93e62 img{ height: 24px !important; }
}

/* ===== Subpage hero: match design H1 metrics + compacter ===== */
.page-hero h1.elementor-heading-title{ line-height: .98 !important; letter-spacing: -.042em !important; font-weight: 700 !important; }
.page-hero .lead{ max-width: 46ch; }
.page-hero-media{ aspect-ratio: 4 / 5 !important; max-height: 560px !important; margin-left: auto !important; }
@media (max-height: 940px){
  .page-hero{ padding-top: calc(var(--header-h) + clamp(28px, 4.5vw, 64px)) !important; padding-bottom: clamp(40px, 5vw, 72px) !important; }
  .page-hero h1.elementor-heading-title{ font-size: clamp(2rem, 4.6vw, 3.4rem) !important; }
  .page-hero-media{ max-height: 44vh !important; }
}
@media (max-width: 1023px){
  .page-hero-media{ max-height: none !important; margin-left: 0 !important; }
}

@media (max-height: 940px){
  .page-hero h1.elementor-heading-title{ font-size: clamp(2.4rem, 5.2vw, 4rem) !important; }
}

/* Testimonials: design has no avatars -> hide Elementor's placeholder image */
.elementor-testimonial-image{ display: none !important; }
.elementor-testimonial .elementor-testimonial-meta-inner{ display: block !important; }