/* Reittech main nav — shared across all pages.
   Source of truth: services.html. */

/* ===== Site-wide fluid horizontal padding =====
   Matches the design's 48px gutter on wide screens, scales down to 16px on phones. */
:root { --side-pad: clamp(16px, 3.34vw, 48px); } /* 16px floor → 48px at 1440px viewport */

/* Override per-section inline horizontal padding so all major page chunks
   share the same fluid gutter at every viewport width. */
section,
footer {
  padding-left: var(--side-pad) !important;
  padding-right: var(--side-pad) !important;
}

/* Marquee/full-bleed bands opt out via class="full-bleed" or id="hero" if needed.
   Hero section keeps its inline padding because the rounded hero-shell expects matching gutter. */
#hero {
  padding-left: var(--side-pad) !important;
  padding-right: var(--side-pad) !important;
}

/* Nav width tracks the same gutter so its content edge aligns with the hero-shell. */
#mainNav {
  width: calc(100% - 2 * var(--side-pad)) !important;
}

/* Layout groups */
.nav-left-group,
.nav-center-group,
.nav-right-group { display: flex; align-items: center; gap: 1.5rem; }
.nav-left-group,
.nav-right-group { flex-shrink: 0; }
.nav-desktop-group { display: flex; align-items: center; gap: 1rem; }
.nav-logo-link { display: flex; align-items: center; }

/* Default icon button styling */
.nav-icon-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 0.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-icon-btn:hover { opacity: 0.8; }
.nav-icon-btn:active { transform: scale(0.95); }
.nav-icon-btn svg { width: 20px; height: 20px; }

/* Responsive visibility */
.nav-desktop-only { display: inline-flex !important; }

@media (max-width: 1439px) {
  /* Hide all desktop-only links + CTA */
  .nav-desktop-group,
  .nav-desktop-only,
  .nav-right-group { display: none !important; }
  /* Switch nav grid: [icons] [LOGO] (logo right-aligned) */
  #mainNav > div:first-child {
    grid-template-columns: auto 1fr !important;
  }
  .nav-center-group { justify-self: end !important; }
  /* Bigger icons for finger tapping (44px tap target) */
  .nav-icon-btn { padding: 0.6rem !important; }
  .nav-icon-btn svg { width: 26px !important; height: 26px !important; }
  .nav-left-group { gap: 0.5rem !important; }
}

@media (max-width: 1439px) {
  /* Tighten nav internal horizontal padding under desktop; logo SVG has no
     built-in right whitespace so the right side gets a bigger numeric pad to
     visually match the icon-based left side. */
  #mainNav { padding-left: 20px !important; padding-right: 32px !important; }
}

/* ===== Align unboxed section text with adjacent boxed-card content =====
   Only fires below 1440px so desktop layout is untouched. The padding value
   matches the inner padding used by the dark service / case-studies / HIW
   cards (2.5rem) so the eyebrow + heading + button line up with the boxed
   content directly underneath. */
@media (max-width: 1439px) {
  .section-heading-row {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  /* HIW carousel slides have a smaller inner padding (2rem), so the
     heading row above them tightens to match — keeps the 'Every project…'
     heading flush with each step's column edge. */
  .hiw-heading-row {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ===== Mobile spacing system (≤768px) =====
   Site-wide consistent padding/margin scale. 4px-multiple values.
   Page wrapper / section gutters: 20px sides, 60px top/bottom.
   Inner rounded shells + component cards: 24px padding.
   Buttons: 12px 28px. Side-panel nav: 24px gap, sub-items 16px indent.
   Headings 12px below; body 24px below; content blocks 40px.
   Desktop (>768px) untouched. */
@media (max-width: 768px) {
  /* --- Outer wrappers / sections --- */
  section:not(#hero):not(.marquee-section),
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Marquee strips are full-bleed bands — keep flush, no surrounding gap.
     Also kill top padding on the section directly after the marquee so the
     next content sits tight against the strips. */
  section.marquee-section { padding: 0 !important; }
  section.marquee-section + section { padding-top: 0 !important; }

  /* --- Inner rounded section shells (treat as containers, not cards) --- */
  #introGrid,
  #teamShell,
  .noise-overlay {
    padding: 24px !important;
    border-radius: 24px !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- Unboxed heading/button rows align with boxed content (20+24 = 44 from edge) --- */
  .section-heading-row,
  .hiw-heading-row {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* --- HIW carousel slides match the 24px card padding --- */
  .hiw-slide { padding-left: 24px !important; padding-right: 24px !important; }

  /* --- Inner full-width section wrappers (services page uses
     `<div style="max-width:1440px; padding:0 3rem">` to inset content from
     the section). At mobile sizes the section already provides the 20px
     gutter, so kill the wrapper's 3rem horizontal padding. --- */
  section > div[style*="max-width:1440px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  section > div > div[style*="max-width:1440px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Component cards (excluding image-led cards whose photo is meant
     to be edge-to-edge: .team-card, .img-card) --- */
  .case-card-dark,
  .service-tab,
  .service-panel,
  .stat-cell,
  .testimonial-card,
  .pain-card,
  .pain-item {
    padding: 24px !important;
  }

  /* --- Buttons --- */
  .btn-ghost-dark,
  .btn-gradient,
  .btn-nav-cta,
  .nav-cta-gradient,
  .panel-cta-outline,
  .btn-ghost-light,
  .btn-orange {
    padding: 12px 28px !important;
  }

  /* --- Images: never overflow --- */
  img { max-width: 100% !important; height: auto; }

  /* --- Side-panel nav spacing --- */
  .panel-menu { gap: 24px !important; }
  .panel-link { padding: 0 !important; }
  .panel-sublink { padding-left: 16px !important; }

  /* --- Typography rhythm --- */
  section h1,
  section h2,
  section h3 { margin-bottom: 12px !important; }
  section h1 + p, section h2 + p, section h3 + p { margin-bottom: 24px !important; }
  /* Note: NOT applying margin-bottom to .reveal because that class is used
     site-wide on shells/cards/grids (e.g. .testimonials-shell.reveal) and
     would inject unwanted gaps. Section padding already handles inter-block
     spacing. */

  /* --- Edge safety: never let any direct section child get within 16px of viewport edge --- */
  section > * { margin-left: 0; margin-right: 0; }
}

/* ===== Disable hover animations on small viewports (touch-friendly) =====
   Targets interactive elements only — does NOT use the universal selector,
   because that breaks layout transforms (e.g. nav's translateX(-50%) centering).
   `transform: none !important` here also overrides JS onmouseover handlers
   that set inline `style.transform` on elements. */
@media (max-width: 1439px) {
  a:hover, a:hover::before, a:hover::after,
  button:hover, button:hover::before, button:hover::after,
  [role="button"]:hover, [onmouseover]:hover, [onmouseenter]:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

.nav-link {
  font-family: 'Sora', sans-serif;
  color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 700;
  padding: 0.4rem 1rem; border-radius: 999px;
  letter-spacing: -0.02em; text-transform: none;
  transition: background 0.2s ease, color 0.2s ease;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.nav-link:hover { background: #7D39EB; color: #fff; }
.nav-link.active { background: #fff; color: #FF6B2B; }
.nav-link.active:hover { background: #7D39EB; color: #fff; }

/* Header CTA — gradient-border, orange-heavy, fills on hover */
.btn-nav-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #fff; text-decoration: none;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.7rem 1.5rem; border-radius: 999px;
  background: transparent;
  z-index: 1;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), color 0.2s ease, box-shadow 0.3s ease;
}
.btn-nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, #7D39EB 0%, #FF6B2B 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.btn-nav-cta::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7D39EB 0%, #FF6B2B 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.btn-nav-cta:hover { transform: translateY(-1px) scale(1.03); color: #fff; box-shadow: 0 10px 28px rgba(255,107,43,0.4); }
.btn-nav-cta:hover::before { opacity: 0; }
.btn-nav-cta:hover::after { opacity: 1; }
.btn-nav-cta:active { transform: scale(0.98); }
.btn-nav-cta svg { transition: transform 0.3s ease; }
.btn-nav-cta:hover svg { transform: translateX(3px); }

.nav-scrolled {
  padding-top: 8px !important; padding-bottom: 8px !important;
  background: rgba(22,15,26,0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(125,57,235,0.08);
  border-top: 1px solid rgba(244,242,238,0.06);
}

/* Submenu (Services hover dropdown) */
.has-submenu { position: relative; }
.nav-submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: rgba(22,15,26,0.97);
  border: 1px solid rgba(244,242,238,0.08);
  border-radius: 14px;
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms cubic-bezier(0.22,1,0.36,1), transform 200ms cubic-bezier(0.22,1,0.36,1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  z-index: 101;
}
.nav-submenu::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(22,15,26,0.97);
  border-left: 1px solid rgba(244,242,238,0.08);
  border-top: 1px solid rgba(244,242,238,0.08);
}
.nav-submenu::after {
  content: '';
  position: absolute;
  top: -16px; left: 0; right: 0; height: 16px;
}
.has-submenu:hover .nav-submenu,
.has-submenu:focus-within .nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu a {
  display: block;
  padding: 0.7rem 1rem;
  color: #F4F2EE;
  font-size: 14px; font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: -0.02em;
  text-transform: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-submenu a:hover {
  background: linear-gradient(135deg, rgba(125,57,235,0.25), rgba(255,107,43,0.2));
  color: #FF6B2B;
  transform: translateX(2px);
}

/* ===== Side panel (menu + contacts) ===== */
#contactPanel {
  position: fixed; top: 0; left: 0;
  width: min(420px, 92vw); height: 100vh; height: 100dvh;
  background: transparent; z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
}
#contactPanel.open { pointer-events: auto; }
.panel-menu-box,
.panel-close-box { box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(244,242,238,0.05); }

/* Two-box grid: wide menu box + narrow close box */
.panel-grid {
  display: flex;
  width: 100%; height: 100%;
  box-sizing: border-box;
  padding: 0.85rem;
  gap: 0.6rem;
  align-items: stretch;
}
.panel-menu-box {
  flex: 1;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(125,57,235,0.10) 0%, rgba(125,57,235,0) 50%),
    linear-gradient(180deg, #14101a 0%, #0E0913 100%);
  box-shadow: inset 0 0 0 1px rgba(244,242,238,0.05);
}
.panel-close-box {
  width: 64px;
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(244,242,238,0.06);
}

/* Rotating background images — 6-slot 30s cycle with cross-fade.
   Now lives only inside the close box at full opacity. */
.panel-bg-stack { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.panel-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  animation: panelBgCycle 30s infinite;
  will-change: opacity;
}
.panel-bg-1 { background-image: url('/brand_assets/images/banner_bg1.webp'); animation-delay: 0s; }
.panel-bg-2 { background-image: url('/brand_assets/images/banner_bg2.webp'); animation-delay: -5s; }
.panel-bg-3 { background-image: url('/brand_assets/images/banner_bg3.webp'); animation-delay: -10s; }
.panel-bg-4 { background-image: url('/brand_assets/images/banner_bg4.webp'); animation-delay: -15s; }
.panel-bg-5 { background-image: url('/brand_assets/images/banner_bg5.webp'); animation-delay: -20s; }
.panel-bg-6 { background-image: url('/brand_assets/images/banner_bg6.webp'); animation-delay: -25s; }
@keyframes panelBgCycle {
  0%   { opacity: 0; }
  3.3% { opacity: 1; }
  16.7%{ opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-bg { animation: none; }
  .panel-bg-1 { opacity: 1; }
}

/* Warm glow bottom-right inside menu box */
.panel-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 100% 100%,
              rgba(255,107,43,0.28) 0%,
              rgba(255,107,43,0.09) 25%,
              rgba(255,107,43,0) 55%);
  pointer-events: none; z-index: 2;
}
#contactPanel.open { transform: translateX(0); }
#contactBackdrop {
  position: fixed; inset: 0; z-index: 199;
  background: rgba(0,0,0,0.6);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
#contactBackdrop.open { opacity: 1; pointer-events: auto; }

/* Decorative wave lines (bottom-left) */
.panel-waves {
  position: absolute;
  left: -30px; bottom: -30px;
  width: 320px; height: 280px;
  pointer-events: none; z-index: 3;
  opacity: 0.45;
}

/* Vertical close button — sits inside .panel-close-box */
.panel-close {
  position: absolute; inset: 0;
  background: none; border: none; cursor: pointer;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0.7rem;
  padding: 1.5rem 0;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  transition: color 0.25s ease;
}
.panel-close::before {
  /* readability scrim over the image bg */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.55) 100%);
  z-index: -1;
}
.panel-close:hover { color: #FF6B2B; }
.panel-close svg { width: 20px; height: 20px; transition: transform 0.3s ease; }
.panel-close:hover svg { transform: rotate(90deg); }
.panel-close span {
  writing-mode: vertical-rl;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}

.panel-scroll {
  position: relative; z-index: 4;
  height: 100%; overflow-y: auto;
  padding: 2rem 2rem 2rem 2rem;
  display: flex; flex-direction: column;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.panel-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } /* WebKit */

.panel-logo { display: inline-flex; align-self: flex-start; }
.panel-logo img { height: 32px; width: auto; }

.panel-spacer { height: 4rem; flex-shrink: 0; }

/* Eyebrow labels */
.panel-eyebrow {
  color: rgba(244,242,238,0.5);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Menu links — large, airy, editorial */
.panel-menu { display: flex; flex-direction: column; margin-bottom: 3rem; }
.panel-link, .panel-sublink {
  font-family: 'Sora', sans-serif;
  color: #F4F2EE; text-decoration: none;
  letter-spacing: -0.025em;
  display: inline-block;
  position: relative;
  width: max-content;
  transition: color 0.25s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.panel-link {
  font-size: 1.6rem; font-weight: 700;
  padding: 0.45rem 0;
}
.panel-sublink {
  font-size: 0.95rem; font-weight: 500;
  color: rgba(244,242,238,0.55);
  padding: 0.25rem 0 0.25rem 1.25rem;
  letter-spacing: -0.01em;
  position: relative;
}
.panel-sublink::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 1px;
  background: rgba(244,242,238,0.3);
  transform: translateY(-50%);
}
.panel-link:hover, .panel-sublink:hover { color: #FF6B2B; transform: translateX(6px); }
.panel-sublink:hover::before { background: #FF6B2B; }
.panel-link.is-active { color: #FF6B2B; }

/* Contacts block */
.panel-contacts { margin-bottom: 2.5rem; }
.panel-info-value {
  color: #F4F2EE;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; line-height: 1.55;
  margin: 0 0 0.25rem;
}
.panel-info-sub { color: rgba(244,242,238,0.5); font-size: 0.92rem; }
.panel-info-link {
  color: #F4F2EE;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(244,242,238,0.4);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.panel-info-link:hover { color: #FF6B2B; border-color: #FF6B2B; }

/* Outline-gradient CTA */
.panel-cta-outline {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  font-family: 'Sora', sans-serif;
  color: #fff; text-decoration: none;
  font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
  padding: 1rem 2.25rem; border-radius: 999px;
  background: transparent;
  margin-bottom: 2.5rem;
  white-space: nowrap;
  z-index: 1;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), color 0.25s ease;
}
.panel-cta-outline::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(135deg, #7D39EB 0%, #FF6B2B 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  z-index: -1;
  transition: opacity 0.3s ease;
}
.panel-cta-outline::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #7D39EB 0%, #FF6B2B 100%);
  opacity: 0; z-index: -1;
  transition: opacity 0.3s ease;
}
.panel-cta-outline:hover { transform: translateY(-2px); color: #fff; }
.panel-cta-outline:hover::after { opacity: 1; }

/* Social — minimal, no background, evenly spaced row */
.panel-social { display: flex; gap: 1.5rem; margin-top: auto; padding-top: 1rem; }
.panel-social a {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(244,242,238,0.7);
  transition: color 0.25s ease, transform 0.25s ease;
}
.panel-social a:hover { color: #FF6B2B; transform: translateY(-2px); }
.panel-social svg { width: 18px; height: 18px; }

/* Contact panel CTA (gradient pill, used inside the side panel) */
.nav-cta-gradient {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem; font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #7D39EB 0%, #FF6B2B 100%);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.nav-cta-gradient:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 10px 28px rgba(255,107,43,0.4); }

/* ----------------------------------------------------------------------- *
 * Hover utilities (Phase 4.1 of the May 26 review fixes).
 * These replace inline onmouseover/onmouseout handlers throughout the
 * site. The base colour stays on the element via its inline style; these
 * classes only control the :hover state. !important is required to win
 * against inline style on `color`.
 * ----------------------------------------------------------------------- */
.hover-white { transition: color 0.2s ease; }
.hover-white:hover { color: #fff !important; }

.hover-faint-white { transition: color 0.2s ease; }
.hover-faint-white:hover { color: rgba(255,255,255,0.6) !important; }

.hover-orange { transition: color 0.2s ease; }
.hover-orange:hover { color: #FF6B2B !important; }

.hover-chip-gradient { transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.2s ease; }
.hover-chip-gradient:hover {
  color: #fff !important;
  background: linear-gradient(135deg, #7D39EB, #FF6B2B) !important;
  border-color: transparent !important;
  transform: translateY(-1px);
}

.hover-orange-border { transition: color 0.2s ease, border-color 0.2s ease; }
.hover-orange-border:hover { color: #FF6B2B !important; border-color: #FF6B2B !important; }

.hover-orange-bg { transition: border-color 0.2s ease, background 0.2s ease; }
.hover-orange-bg:hover { border-color: #FF6B2B !important; background: rgba(255,107,43,0.08) !important; }

.hover-tap-target a, a.hover-tap-target { min-width: 44px; min-height: 44px; }

/* Mobile tap-target boost for the side-panel social row (Phase 4.2). Visual
 * icon stays at 18px, but the click area becomes 44x44 on phones. */
@media (max-width: 700px) {
  .panel-social a { width: 44px; height: 44px; }
}