/*
Theme Name: VCapz Media
Theme URI: https://vcapz.com
Author: VCapz Media
Author URI: https://vcapz.com
Description: A dark, cinematic WordPress block theme for VCapz Media — your all-in-one media partner.
Version: 1.2.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vcapz-media
*/

/* =============================================
   ROOT & RESET
============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background-color: #0f172a;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #0f172a;
  color: #f8fafc;
  -webkit-font-smoothing: antialiased;
}

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

.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* =============================================
   HEADER
============================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* The frosted backdrop lives on a pseudo-element: backdrop-filter on the
   header itself makes it the containing block for position:fixed
   descendants, which trapped the mobile menu overlay inside the header
   bar instead of letting it cover the screen. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header .wp-block-group__inner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Polylang 3.9+ puts the class on a wrapper <div> around the <ul>;
   earlier versions put it on the <ul> itself. */
.lang-switcher,
.lang-switcher ul {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 3.9 also defaults the block to a vertical layout. */
.lang-switcher.wp-block-polylang-language-switcher ul {
  flex-direction: row;
}
.lang-switcher .lang-item a {
  color: rgba(248, 250, 252, 0.5);
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  transition: color 0.2s ease;
}
.lang-switcher .lang-item a:hover {
  color: #f8fafc;
}
.lang-switcher .lang-item.current-lang a {
  color: #6366f1;
}

/* Mobile menu overlay — the header nav is right-aligned, which the open
   overlay inherits, pinning the links against the screen edge. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 5rem 1.5rem 2rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: center;
  justify-content: flex-start;
  gap: 1.75rem;
  width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
}

.site-logo-img { display: flex; align-items: center; }
.site-logo-img img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.08);
}

/* =============================================
   HERO SECTION
============================================= */
.hero-section {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* avoids mobile browser toolbar jump */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 6rem;
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
  z-index: 0;
}

/* Orbs are split into an outer positioning element (the parallax target —
   JS sets its transform on scroll) and an inner element carrying the
   ambient CSS keyframe animation. A single element can't take a
   scroll-driven inline transform AND a CSS @keyframes transform at the
   same time — the running animation's computed value always wins and
   silently cancels the inline one, so the two effects must live on
   separate nested elements to compose instead of fight. */
.hero-orb-1, .hero-orb-2, .hero-orb-3 {
  position: absolute;
  z-index: 0;
}
.hero-orb-1 { top: -10%; left: -10%; width: 50%; height: 50%; }
.hero-orb-2 { bottom: -10%; right: -10%; width: 40%; height: 40%; }
.hero-orb-3 { top: 40%; right: 20%; width: 30%; height: 30%; }

.hero-orb-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.hero-orb-1 .hero-orb-inner {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
  filter: blur(60px);
  animation: orbFloat1 20s ease-in-out infinite;
}
.hero-orb-2 .hero-orb-inner {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.2), transparent 70%);
  filter: blur(80px);
  animation: orbFloat2 15s ease-in-out infinite;
}
.hero-orb-3 .hero-orb-inner {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
  filter: blur(80px);
  animation: orbFloat3 25s ease-in-out infinite;
}

@keyframes orbFloat1 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.2) rotate(90deg); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.4) rotate(-90deg); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translateX(0) translateY(0); }
  33%       { transform: translateX(40px) translateY(-30px); }
  66%       { transform: translateX(-20px) translateY(20px); }
}

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6366f1;
  backdrop-filter: blur(8px);
  margin-bottom: 2rem;
}

.hero-headline {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.8rem, 10vw, 7.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f8fafc;
  margin: 0 0 1rem;
}

.hero-rotating-word {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.hero-sub {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.25rem, 4vw, 3rem);
  font-weight: 700;
  color: rgba(248, 250, 252, 0.7);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

.hero-description {
  max-width: 600px;
  margin: 0 auto 3rem;
  font-size: 1.25rem;
  color: #94a3b8;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Targeting .wp-block-button__link (not the outer wrapper) is required:
   that inner <a> is the element WordPress's global button styles paint,
   so styling only the wrapper leaves the old indigo fill showing through
   underneath — the bug that made the outline button look broken. */
.btn-primary-hero .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: #6366f1;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.35);
}
.btn-primary-hero .wp-block-button__link:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.5);
  color: #fff;
}

.btn-outline-hero .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  background: rgba(255,255,255,0.05);
  color: #f8fafc;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-outline-hero .wp-block-button__link:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
  color: #f8fafc;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 10;
  opacity: 0.5;
}
.hero-scroll-indicator span {
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8;
}
.scroll-line {
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(to bottom, #6366f1, transparent);
  animation: scrollPulse 1.5s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.1); }
}

/* =============================================
   SECTION DIVIDERS
============================================= */
.section-divider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.08), transparent);
  margin: 0;
}

/* =============================================
   FULLSCREEN SECTIONS
   Scoped to :not(:has(.editor-styles-wrapper)) so the block editor
   iframe (which has no ancestor with that class) is left alone —
   forcing every section to 100vh inside the small editor canvas
   would make normal content editing painful.
============================================= */
html:not(:has(.editor-styles-wrapper)) .hero-section,
html:not(:has(.editor-styles-wrapper)) .services-section,
html:not(:has(.editor-styles-wrapper)) .work-section,
html:not(:has(.editor-styles-wrapper)) .branches-section,
html:not(:has(.editor-styles-wrapper)) .contact-section {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Decorative parallax blobs — one per full-height section, echoing the
   hero's glow-orb language for visual consistency. Positions/colors are
   set via modifier classes below; movement comes from the rAF scroll
   listener in functions.php, which is itself gated behind
   prefers-reduced-motion, so this is a static, motionless blob for
   anyone with that preference. */
.section-glow {
  position: absolute;
  width: 45%;
  height: 60%;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  /* Negative, not 0: a z-index:0 absolute element actually paints ABOVE
     plain non-positioned content per CSS stacking order, which would
     wash the glow over the section's text instead of sitting behind it. */
  z-index: -1;
}
.section-glow--tr { top: -10%; right: -10%; }
.section-glow--bl { bottom: -10%; left: -10%; }
.section-glow--primary   { background: radial-gradient(circle, rgba(99, 102, 241, 0.18), transparent 70%); }
.section-glow--secondary { background: radial-gradient(circle, rgba(236, 72, 153, 0.15), transparent 70%); }
.section-glow--accent    { background: radial-gradient(circle, rgba(139, 92, 246, 0.16), transparent 70%); }

/* =============================================
   SECTION HEADERS
============================================= */
.section-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6366f1;
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #f8fafc;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
}

.section-desc {
  color: #94a3b8;
  font-size: 1.25rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* =============================================
   SERVICE CARDS
============================================= */
.services-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.service-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.5rem;
  padding: 2.5rem;
  height: 100%;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(99,102,241,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: inherit;
}

.service-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(99, 102, 241, 0.15);
}
.service-card:hover::before { opacity: 1; }

.service-icon-wrap {
  width: 4rem;
  height: 4rem;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.75rem;
}

.service-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.875rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
}

.service-card-desc {
  color: #94a3b8;
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-feature-tag {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9999px;
  color: #cbd5e1;
  font-family: 'Inter', sans-serif;
}

/* =============================================
   PORTFOLIO / WORK SECTION
============================================= */
.work-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

/* Main content grows to fill the section, pushing the trusted-by strip
   to the bottom edge — the two form one screen instead of two. */
.work-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.work-trusted-by {
  flex-shrink: 0;
  width: 100%;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Recent Work carousel: a horizontally-scrolling flex row rather than a
   fixed grid. This naturally handles any number of posts (1 or 50) at
   any screen size without ever needing to reflow columns, and native
   overflow-x scrolling gives free touch-swipe support on mobile. */
/* The query block carries "align":"wide" so it reads as a nicely wide
   carousel — but it's nested two layout levels deep (work-section >
   work-main-content > query), one more than WordPress's alignwide
   breakout math expects. Instead of getting a centered negative margin,
   it renders at a flat 1440px (theme.json's wideSize) with zero margin,
   left-anchored at its container's edge — overflowing ~120px past the
   viewport on desktop, and far worse on mobile where it ignored the
   viewport entirely. Forcing it back to 100% of its actual parent fixes
   both: the carousel — and its last card — now fully fits and scrolls
   within the visible area at every screen size. */
.work-main-content .wp-block-query.alignwide {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.work-main-content .wp-block-query { position: relative; }
.work-main-content .wp-block-post-template {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 0.5rem;
  padding: 0.5rem 0.25rem 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,0.4) transparent;
}
.work-main-content .wp-block-post-template::-webkit-scrollbar { height: 6px; }
.work-main-content .wp-block-post-template::-webkit-scrollbar-thumb {
  background: rgba(99,102,241,0.4);
  border-radius: 999px;
}
/* core/post-template renders as <ul><li>, not plain divs — the <li> is
   the actual flex item here, not .project-card (which is one level
   deeper, inside each <li>). Sizing .project-card directly did nothing:
   the browser sized the unstyled <li> flex items evenly instead. */
.work-main-content .wp-block-post-template > li {
  flex: 0 0 clamp(260px, 32vw, 360px);
  scroll-snap-align: start;
  margin: 0;
  list-style: none;
}
.work-main-content .wp-block-post-template > li .project-card {
  height: 100%;
}

.work-carousel-nav {
  margin-top: 1.5rem !important;
}
.work-carousel-btn .wp-block-button__link {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: none !important;
}
.work-carousel-btn .wp-block-button__link:hover {
  background: rgba(99,102,241,0.25) !important;
  transform: translateY(-2px);
}

.project-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
  height: 100%;
}
.project-card:hover {
  border-color: rgba(99,102,241,0.4);
  transform: translateY(-6px);
}

.project-card-body {
  padding: 1.75rem;
}

.project-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6366f1;
  margin-bottom: 0.75rem;
}

.project-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

.project-excerpt {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

/* =============================================
   CLIENTS MARQUEE
   Now nested inside .work-trusted-by (bottom strip of the Recent Work
   screen) rather than being its own standalone section — see there for
   the container's padding/border treatment.
============================================= */
.marquee-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  /* Hints the browser to composite this on the GPU instead of repainting
     it every frame, which is what a continuous transform animation needs
     to stay smooth alongside the page's other blurred/filtered layers. */
  will-change: transform;
}
/* Animation only starts once JS has actually doubled the track's width
   (see the marquee-ready class in functions.php) — starting it earlier
   races the clone and the "-50%" loop target changes mid-flight. Without
   JS, the row is still a normal static (unanimated) list of logos. */
.marquee-track.marquee-ready {
  animation: marquee 26s linear infinite;
}

/* No pause-on-hover: a mouse cursor resting anywhere over this row while
   the user scrolls the page — extremely common, not a deliberate hover —
   was constantly stopping and restarting the animation, which read as
   stuttering rather than a real freeze. The per-logo colour reveal below
   still responds to hover; only the whole-track pause was the problem. */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* The real nesting is .marquee-track > .wp-block-query > ul.wp-block-post-template
   > li — display:contents only dissolves ONE level of box per element it's
   applied to, so both wrapper levels need it for the <li>s to actually
   become flex items of .marquee-track. Missing the query wrapper here was
   the bug: its children (the <li>s, once the <ul> itself dissolved) were
   still laid out in normal block flow by .wp-block-query, stacking
   vertically instead of joining the horizontal row. */
.marquee-track .wp-block-query,
.marquee-track .wp-block-post-template {
  display: contents;
}
.marquee-track .wp-block-post-template > li {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* .marquee-logo lands on core/post-featured-image's own <figure> wrapper,
   not the <img> inside it — sizing/filtering the figure alone left the
   actual image at its own natural (and wildly inconsistent, per-upload)
   pixel dimensions, which is what caused mismatched sizes and vertical
   alignment. The height/scale/filter all have to target the <img> itself. */
.marquee-logo {
  height: 2.5rem;
  /* Wide wordmark-style logos (e.g. a 6:1 aspect ratio) need real headroom
     here — the old 150px cap was tighter than 2.5rem-tall * their aspect
     ratio, so object-fit:contain shrank the whole image down to fit the
     width, undershooting the intended height and reading as "too small"
     next to square/tall logos that never hit that cap. */
  max-width: 280px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marquee-logo img {
  height: 100%;
  width: auto;
  max-width: 100%;
  /* WordPress hardcodes object-fit:cover inline on this img (for the
     generic "crop to thumbnail" case); !important is required to win
     over an inline style, and contain is what a logo needs — cover
     would crop pieces of it off. */
  object-fit: contain !important;
  filter: grayscale(1) brightness(1.8);
  opacity: 0.45;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.marquee-track .wp-block-post-template > li:hover .marquee-logo img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* =============================================
   BRANCHES
============================================= */
.branches-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.branch-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.branch-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: rgba(99,102,241,0.12);
  border-radius: 50%;
  filter: blur(40px);
  transition: transform 0.5s ease;
}

.branch-card:hover {
  border-color: rgba(99,102,241,0.35);
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(99,102,241,0.12);
}
.branch-card:hover::after { transform: scale(1.8); }

.branch-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6366f1;
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 9999px;
  padding: 0.3rem 0.85rem;
  margin-bottom: 1.25rem;
}

.branch-name {
  font-family: 'Outfit', sans-serif;
  font-size: 2.25rem;
  font-weight: 900;
  color: #f8fafc;
  margin: 0 0 1.5rem;
  letter-spacing: -0.03em;
}

.branch-detail {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.branch-detail-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: rgba(255,255,255,0.05);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #6366f1;
}

/* =============================================
   CONTACT SECTION
============================================= */
.contact-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

/* The contact card (form + info panel) shares this fullscreen section with
   the heading, leaving far less vertical room than Services/Branches (which
   only stack a heading above cards) — so it needs a smaller title even
   though it uses the same .section-title class. The original site made the
   same distinction (text-4xl here vs text-7xl elsewhere). */
.contact-section .section-title {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.contact-section::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%);
  border-radius: 50%;
  filter: blur(80px);
}

/* Main content grows to fill the section, pushing the footer bar to the
   bottom edge — contact and footer form one screen instead of two. */
.contact-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

.contact-footer-bar {
  flex-shrink: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* The homepage's own footer content is missing a layout attribute on the
   group wrapping [logo column, nav column] — unlike the shared footer
   template part, it renders as plain block flow, so nav drops below the
   logo instead of sitting beside it. Forcing the row here rather than
   editing the stored block content, which has proven fragile to hand-edit. */
.contact-footer-bar > .wp-block-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.contact-card {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 2rem;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.contact-info-panel {
  background: rgba(30, 41, 59, 0.8);
  padding: 3rem;
  position: relative;
  overflow: hidden;
}
.contact-info-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), transparent);
  pointer-events: none;
}

.contact-form-panel {
  padding: 3rem;
}

.contact-form-panel input,
.contact-form-panel select,
.contact-form-panel textarea {
  width: 100%;
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: #f8fafc;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s ease;
  margin-bottom: 1.25rem;
}
.contact-form-panel input:focus,
.contact-form-panel select:focus,
.contact-form-panel textarea:focus {
  border-color: #6366f1;
}
.contact-form-panel input::placeholder,
.contact-form-panel textarea::placeholder {
  color: #475569;
}
.contact-form-panel select option {
  background: #1e293b;
}
.contact-form-panel label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(248,250,252,0.6);
  margin-bottom: 0.5rem;
  font-family: 'Outfit', sans-serif;
}

/* =============================================
   EQUAL CARDS
============================================= */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* =============================================
   FOOTER
============================================= */
.site-footer-wrap {
  background: rgba(15, 23, 42, 0.95);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 3rem 0 2rem;
}

.footer-logo-img img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.08);
}

.footer-tagline {
  color: #64748b;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.footer-nav a {
  color: #64748b;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

/* Stack the footer's page links into a column (like a "Quick Links" list)
   instead of a single wide row. The nav's content here is a Page List
   block, and it's that inner .wp-block-page-list <ul> that actually lays
   out the <li> items in a row — not its .wp-block-navigation__container
   parent, which only ever has this one child either way. */
.footer-nav .wp-block-navigation__container,
.footer-nav .wp-block-page-list {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.65rem !important;
}
.footer-nav a:hover { color: #6366f1; }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
}
.footer-social .wp-block-social-link {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  background-color: transparent !important;
}
.footer-social .wp-block-social-link-anchor {
  width: 100%;
  height: 100%;
  padding: 0;
  justify-content: center;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0.6rem;
  color: #94a3b8 !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.footer-social .wp-block-social-link svg { width: 1.35rem; height: 1.35rem; }
.footer-social .wp-social-link-instagram .wp-block-social-link-anchor:hover {
  color: #ec4899;
  background: rgba(236,72,153,0.1);
  border-color: rgba(236,72,153,0.25);
}
.footer-social .wp-social-link-facebook .wp-block-social-link-anchor:hover,
.footer-social .wp-social-link-linkedin .wp-block-social-link-anchor:hover {
  color: #3b82f6;
  background: rgba(59,130,246,0.1);
  border-color: rgba(59,130,246,0.25);
}
.footer-social .wp-social-link-youtube .wp-block-social-link-anchor:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.25);
}
.footer-social .wp-social-link-whatsapp .wp-block-social-link-anchor:hover {
  color: #22c55e;
  background: rgba(34,197,94,0.1);
  border-color: rgba(34,197,94,0.25);
}

.footer-copy {
  color: #334155;
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

/* =============================================
   BLOG
============================================= */
.blog-post-header { text-align: center; }

.blog-index-header { text-align: center; margin-bottom: 4rem; }

.blog-post-meta {
  color: #6366f1;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'Outfit', sans-serif;
}
.blog-post-category a {
  color: #6366f1;
  text-decoration: none;
}
.blog-post-date {
  color: #64748b;
}
.blog-post-category::after {
  content: '•';
  margin: 0 0.6rem;
  color: #334155;
}
.blog-post-category:empty::after { display: none; }

.blog-post-title { max-width: 900px; margin-left: auto; margin-right: auto; }

.blog-post-featured {
  margin: 3rem auto;
  overflow: hidden;
  border-radius: 1.5rem;
}
.blog-post-featured img { width: 100%; height: auto; display: block; }

.blog-post-body {
  max-width: 780px;
  margin: 0 auto;
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.8;
}
.blog-post-body h2,
.blog-post-body h3,
.blog-post-body h4 {
  font-family: 'Outfit', sans-serif;
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
}
.blog-post-body p { margin: 0 0 1.5rem; }
.blog-post-body a { color: #6366f1; text-decoration: underline; text-underline-offset: 2px; }
.blog-post-body img { border-radius: 1rem; height: auto; max-width: 100%; }
.blog-post-body blockquote {
  border-left: 3px solid #6366f1;
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  color: #f8fafc;
  font-style: italic;
}
.blog-post-body ul,
.blog-post-body ol { padding-left: 1.5rem; margin: 0 0 1.5rem; }
.blog-post-body li { margin-bottom: 0.5rem; }
.blog-post-body code {
  background: rgba(255,255,255,0.06);
  padding: 0.2rem 0.4rem;
  border-radius: 0.35rem;
  font-size: 0.9em;
}

.blog-back-link-wrap { max-width: 780px; margin: 4rem auto 0; }
.blog-back-link {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
.blog-back-link:hover { color: #6366f1; }

/* Blog index (templates/index.html) post-title links inherit .section-title's
   uppercase display styling meant for hero headings — dialed back here so a
   list of post titles reads as a list, not a stack of section headers. */
.wp-block-post-template .section-title.wp-block-post-title {
  text-transform: none;
}
.wp-block-post-template .section-title.wp-block-post-title a {
  color: #f8fafc;
  text-decoration: none;
  transition: color 0.2s ease;
}
.wp-block-post-template .section-title.wp-block-post-title a:hover {
  color: #6366f1;
}

/* =============================================
   VIDEO LIGHTBOX
   Markup is built entirely by vcapz_media_project_video_lightbox() in
   functions.php and appended to <body> on load — nothing here is part of
   the block content, so no RTL mirroring is needed (it's a centered
   overlay, not a direction-sensitive layout).
============================================= */
.vcapz-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.vcapz-video-modal.is-open { display: flex; }

.vcapz-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(6px);
}

.vcapz-video-modal-inner {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  aspect-ratio: 9 / 16;
  max-height: 90vh;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.vcapz-video-modal-frame,
.vcapz-video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vcapz-video-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}
.vcapz-video-modal-close:hover { background: rgba(0, 0, 0, 0.75); }

body.vcapz-modal-open { overflow: hidden; }

/* =============================================
   ANIMATIONS
============================================= */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.7s ease forwards;
}
.fade-in {
  opacity: 0;
  animation: fadeIn 0.7s ease forwards;
}
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideLeft 0.7s ease forwards;
}

@keyframes fadeUp   { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { to { opacity: 1; } }
@keyframes slideLeft { to { opacity: 1; transform: translateX(0); } }

.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.5s ease forwards;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* =============================================
   MOUSE SPOTLIGHT — desktop / precise-pointer only
   Element is only ever created by JS when the device
   reports a fine pointer, but the pointer:coarse rule
   below is a CSS-level backstop in case that ever changes.
============================================= */
.mouse-spotlight {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mouse-spotlight.is-active {
  opacity: 1;
}
@media (pointer: coarse) {
  .mouse-spotlight {
    display: none;
  }
}

/* =============================================
   AMBIENT MOTION — small continuous accents, used
   sparingly to give touch devices some of the life
   the desktop mouse spotlight provides them
============================================= */
.float {
  animation: float 3.2s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.pulse-subtle {
  animation: pulseSubtle 2.4s ease-in-out infinite;
}
@keyframes pulseSubtle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* =============================================
   TOUCH FEEDBACK — devices without hover get a tap
   response standing in for the desktop :hover states
============================================= */
@media (hover: none) {
  .hero-badge {
    animation: pulseSubtle 2.6s ease-in-out infinite;
  }
  .service-icon-wrap,
  .branch-detail-icon {
    animation: float 3.4s ease-in-out infinite;
  }

  .hover-lift,
  .service-card,
  .branch-card,
  .project-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .hover-lift:active,
  .service-card:active,
  .branch-card:active,
  .project-card:active {
    transform: scale(0.97);
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  }
  .service-card:active::before {
    opacity: 1;
  }
  .branch-card:active::after {
    transform: scale(1.8);
  }
  .wp-block-button__link:active {
    transform: scale(0.96);
  }
  .marquee-track .wp-block-post-template > li:active .marquee-logo img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
  }
}

/* =============================================
   REDUCED MOTION
============================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll,
  .fade-up, .fade-in, .slide-in-left,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-orb-1, .hero-orb-2, .hero-orb-3 {
    animation: none;
  }
  .marquee-track { animation: none; }
  .scroll-line { animation: none; }
}

/* =============================================
   EDITOR OVERRIDES (keep content visible in block editor)
============================================= */
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .fade-in,
.editor-styles-wrapper .slide-in-left,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* =============================================
   RESPONSIVE
============================================= */

@media (max-width: 640px) {
  /* Narrower cards on small phones so ~1.2 are visible at once — a
     peek of the next card is what signals "swipeable" to the user. */
  .work-main-content .wp-block-post-template > li {
    flex-basis: 82vw;
  }
}

@media (max-width: 768px) {
  .hero-cta-group { flex-direction: column; align-items: center; width: 100%; }
  .hero-cta-group .wp-block-button { width: 100%; max-width: 320px; }
  .hero-cta-group .wp-block-button__link { width: 100%; justify-content: center; }
  .contact-card { border-radius: 1rem; }
  .contact-info-panel,
  .contact-form-panel { padding: 2rem 1.5rem !important; }

  .services-section,
  .work-section,
  .branches-section,
  .contact-section { padding-top: 4rem !important; padding-bottom: 4rem !important; }

  .service-card,
  .branch-card { padding: 1.75rem !important; }

  .marquee-track { gap: 1rem; }
  .marquee-logo { height: 2rem; max-width: 220px; }

  /* Large blurred orbs are the most GPU-expensive layer on the page —
     shrinking and softening them keeps scroll smooth on low-power phones. */
  .hero-orb-1, .hero-orb-2, .hero-orb-3 { filter: blur(40px); }
  .hero-grid-bg { background-size: 28px 28px; }

  /* Two full-width stacked CTA buttons push hero content taller than on
     desktop; the absolutely-positioned scroll hint (fixed bottom offset)
     would otherwise land on top of the buttons. Mobile users don't need
     a scroll affordance anyway, so drop it instead of chasing heights. */
  .hero-scroll-indicator { display: none; }
  .hero-section { padding-bottom: 3rem; }
}

@media (max-width: 480px) {
  .hero-badge { font-size: 0.65rem; padding: 0.4rem 1rem; }
  .hero-description { font-size: 1rem; }
  .section-title { font-size: clamp(1.8rem, 9vw, 2.75rem); }
}