/* =========================
   Precision Sports – Clean Theme CSS
   ========================= */

/* --- Design tokens --- */
:root{
  --bg:#0b0f14;
  --card:#111827;
  --muted:#9aa4b2;
  --text:#f7f9fc;
  --brand:#37d6b5;
  --brand2:#4e8cff;
  --ring:0 0 0 2px rgba(255,255,255,.08);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;background:var(--bg);color:var(--text);
  font:16px/1.6 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  scroll-behavior:smooth;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.container{width:min(1200px,94vw);margin-inline:auto}
.section{padding:64px 0}
.section-title{font-size:32px;letter-spacing:.3px;margin:0 0 16px}
.lead{color:var(--muted);font-size:18px}
.muted{color:var(--muted)}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:12px 18px;border-radius:14px;border:1px solid #2a3341;
  box-shadow:var(--ring);backdrop-filter:saturate(140%) blur(6px);
  transition:.25s transform,.25s background,.25s border;
}
.btn:hover{transform:translateY(-2px)}
.btn-cta{
  background:linear-gradient(115deg,var(--brand),var(--brand2));
  color:#021014;border:0;font-weight:800;letter-spacing:.3px;
  padding:16px 22px;border-radius:14px;
  box-shadow:0 10px 30px rgba(78,140,255,.25);
}
.btn-ghost{background:rgba(255,255,255,.08);border-color:transparent}

/* --- Header --- */
.ps-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,13,18,.55);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(16,21,28,.6);
}
.ps-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.3px}
.logo-circle{width:28px;height:28px;border-radius:50%;background:conic-gradient(from 120deg,var(--brand),var(--brand2));box-shadow:0 6px 24px rgba(55,214,181,.35)}
.nav{display:flex;align-items:center;gap:24px}
.nav-list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav-toggle{display:none;background:transparent;border:none;color:var(--text)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}

/* Mobile nav */
@media (max-width:860px){
  .nav{position:fixed;inset:64px 12px auto 12px;background:#0e1520;border:1px solid #172132;border-radius:16px;padding:14px;display:none;flex-direction:column}
  .nav.open{display:flex}
  .nav-toggle{display:inline-flex;flex-direction:column;gap:2px}
  /*.btn-cta{display:none}*/
    .ps-header .nav .btn-cta{ display:none; }

}

/* --- Footer --- */
.ps-main{min-height:60vh}
.ps-footer{padding:48px 0;border-top:1px solid #131b26}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footer-nav,.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-bottom{margin-top:18px;border-top:1px solid #131b26;padding-top:12px;color:var(--muted)}
@media (max-width:860px){ .footer-grid{grid-template-columns:1fr} }

/* =========================
   HERO – Full-bleed video
   ========================= */
.hero--video{
  position:relative;min-height:85vh;display:flex;align-items:center;
  overflow:hidden;padding:0;background:#070b11;
}
.hero-bg{position:absolute;inset:0}

/* Force video to cover area (override any theme constraints) */
.hero--video video,
.hero--video .hero-video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  max-width:none!important;max-height:none!important;object-fit:cover!important;display:block!important;
}

/* Scrims/Vignette */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 38%, rgba(5,10,18,.35) 60%, rgba(5,10,18,0) 100%),
    radial-gradient(1200px 600px at 15% -10%, rgba(78,140,255,.12), transparent 60%),
    radial-gradient(1200px 600px at 85% 110%, rgba(55,214,181,.12), transparent 60%);
}
.hero-vignette{position:absolute;inset:0;box-shadow:inset 0 0 220px rgba(0,0,0,.55);pointer-events:none}

/* Content */
.hero--video .hero-inner{position:relative;z-index:2;padding:clamp(64px,8vh,120px) 0}
.hero-copy{max-width:760px}
.hero-title{
  margin:0 0 12px;font-weight:900;text-transform:uppercase;
  letter-spacing:.3px;line-height:1.02;font-size:clamp(40px,6.5vw,82px);
}
.hero-title .accent{color:var(--brand)}
.hero-sub{
  margin:0 0 22px;max-width:62ch;color:#e9eef6;opacity:.92;
  font-size:clamp(16px,1.5vw,20px);
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}

/* Chips */
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0;padding:0;list-style:none}
.chip{background:#0f1723cc;border:1px solid #1a2333;border-radius:999px;padding:8px 12px;color:#cfe3ff}

/* Mobile hero overlay adjustment */
@media (max-width:900px){
  .hero-overlay{
    background:
      linear-gradient(180deg, rgba(5,10,18,.92) 0%, rgba(5,10,18,.75) 45%, rgba(5,10,18,.25) 100%),
      radial-gradient(900px 500px at 10% -10%, rgba(78,140,255,.12), transparent 60%);
  }
  .hero--video .container{width:min(1000px,92vw)}
}



/* =========================
   Accent Squares / Court Lines (theme utilities)
   ========================= */

/* Wrapper that paints two rotated outline squares (TL + BR by default) */
.accent-squares{
  position: relative;
  isolation: isolate; /* keep z-order sane */
}
.accent-squares::before,
.accent-squares::after{
  content:"";
  position:absolute;
  width: var(--sq-size, 140px);
  height: var(--sq-size, 140px);
  border: var(--sq-stroke, 3px) solid var(--sq-color, rgba(255,255,255,.12));
  border-radius: var(--sq-radius, 12px);
  transform: rotate(var(--sq-rotate, 45deg));
  opacity: var(--sq-opacity, 1);
  pointer-events:none;
  z-index: 0; /* sits behind content */
}

/* Default positions: top-left + bottom-right */
.accent-squares::before{
  top: calc(var(--sq-offset, -70px));
  left: calc(var(--sq-offset, -40px));
}
.accent-squares::after{
  bottom: calc(var(--sq-offset, -70px));
  right: calc(var(--sq-offset, -40px));
}

/* Variants if you need different placements */
.accent-squares.tl-only::after{ display:none; }
.accent-squares.br-only::before{ display:none; }
.accent-squares.trbl::before{ left:auto; right:calc(var(--sq-offset,-40px)); }
.accent-squares.trbl::after{ right:auto; left:calc(var(--sq-offset,-40px)); }

/* A glassy card that matches the coming-soon look */
.ps-glass{
  position: relative;
  z-index: 1; /* above the ::before/::after squares */
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
}

/* Grid of “square tiles” (good for highlights/services) */
.ps-tiles{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap: 14px;
}
.ps-tile{
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  padding:14px 16px;
  display:flex; align-items:center; gap:10px;
}
.ps-tile .tile-ic{
  width:22px;height:22px;display:inline-block;border:2px solid var(--brand);border-radius:6px;position:relative;flex:0 0 22px;
}
.ps-tile .tile-ic.court::after{content:"";position:absolute;inset:4px;border:2px solid currentColor;border-top:none;border-bottom:none;opacity:.8;border-radius:2px}
.ps-tile .tile-ic.gear{border-radius:50%}
.ps-tile .tile-ic.gear::after{content:"";position:absolute;inset:2px;border:2px dashed currentColor;border-radius:50%;opacity:.85}

/* Optional: a subtle animated “float” for the squares */
@media (prefers-reduced-motion: no-preference){
  .accent-squares::before,
  .accent-squares::after{ transition: transform .6s ease, opacity .6s ease; }
  .accent-squares:hover::before{ transform: rotate(45deg) translate3d(2px, -2px, 0); }
  .accent-squares:hover::after{ transform: rotate(45deg) translate3d(-2px, 2px, 0); }
}


/* =========================
    Process Timeline
    ========================= */
.process-timeline {
  position: relative;
  max-width: 900px; /* Constrain the timeline width */
  margin-inline: auto;
}

/* The vertical "court line" */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background: linear-gradient(
    var(--brand),
    var(--brand2) 30%,
    var(--brand) 60%,
    var(--brand2) 100%
  );
  background-size: 100% 300px; /* Creates a subtle gradient shift */
  border-radius: 6px;
  opacity: 0.25;
}

.process-step {
  position: relative;
  width: 50%;
  margin: 24px 0;
  padding-right: 48px; /* Space from timeline */

  /* Animation start state */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.process-step.step-right {
  margin-left: 50%; /* Pushes to the right */
  padding-right: 0;
  padding-left: 48px; /* Space from timeline */
}

/* The marker, styled like your accent-squares */
.process-marker {
  position: absolute;
  top: 18px; /* Aligns with content heading */
  right: 0;
  width: 22px;
  height: 22px;
  background: var(--bg);
  border: 3px solid var(--brand);
  border-radius: 6px;
  transform: translate(50%, -50%) rotate(45deg);
  z-index: 10;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.process-step.step-right .process-marker {
  right: auto;
  left: 0;
  border-color: var(--brand2);
    transform: translate(-50%, -50%) rotate(45deg);

}

.process-content {
  padding: 20px 24px;
  /* Re-using your .ps-glass styles */
}

.process-content h3 {
  margin: 0 0 8px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.process-content .step-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand);
  background: rgba(55, 214, 181, 0.1);
  border: 1px solid rgba(55, 214, 181, 0.2);
  border-radius: 8px;
  padding: 4px 8px;
  line-height: 1;
}

.process-step.step-right .step-num {
  color: var(--brand2);
  background: rgba(78, 140, 255, 0.1);
  border-color: rgba(78, 140, 255, 0.2);
}

/* --- The Animation --- */
.process-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the animation */
.process-step.is-visible:nth-child(2) {
  transition-delay: 0.1s;
}
.process-step.is-visible:nth-child(3) {
  transition-delay: 0.2s;
}
.process-step.is-visible:nth-child(4) {
  transition-delay: 0.3s;
}

/* --- Mobile Responsiveness --- */
@media (max-width:860px){
  .process-timeline::before{ left:11px; }      /* your rail */

  .process-step,
  .process-step.step-right{
    width:100%;
    margin-left:0;
    padding-left:72px;    /* space so text clears the marker/rail */
    padding-right:0;
  }

  .process-marker,
  .process-step.step-right .process-marker{
    left:11px;            /* pin to the rail */
    right:auto;
    border-color:var(--brand);
    transform:translate(-50%,-50%) rotate(45deg);
    will-change: transform;    /* avoids sub-pixel jitters */
  }
}


/* ===== Trusted-by strip (drop-in) ===== */
.logo-strip{
  --logo-h: 44px;          /* overall logo box height */
  --gap: 56px;           /* space between items */
  padding: 10px 0;
  min-height: var(--logo-h); /* ensure strip has height */
  /* side fades; comment out if debugging visibility */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-rail{
  position: relative;
  overflow: hidden;      /* clip off-canvas children */
  background: transparent;
}

/* The moving belt */
.logo-track {
  display: inline-flex;       /* width fits content */
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--gap);
  width: max-content;         /* allow full content width */
  will-change: transform;
  animation: scrollLoop 45s linear infinite;
  contain: paint;             /* isolate painting, keep sizing */
}

@keyframes scrollLoop {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(calc(-1 * var(--w)), 0, 0); }
}

.logo-row{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap: var(--gap);
}

/* Uniform clickable box for every logo */
.logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--logo-h);
  padding: 0 clamp(8px, 1.5vw, 16px);
  filter: grayscale(1) opacity(.82);
  text-decoration: none;
  transform: translateZ(0);       /* GPU hint */
  transition: transform .2s ease, filter .2s ease;
}
.logo img{
  max-height: calc(var(--logo-h) * 0.9);
  width: auto;
  flex: 0 0 auto;
}

/* Word-mark styling (Four Seasons text) */
.logo-text{
  font-family: 'Oswald', 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  font-size: calc(var(--logo-h) * 0.48);  /* scales with box */
  color: #e9eef5;
  white-space: nowrap;
}

/* Hover/focus: subtle lift + color-on */
.logo:hover,
.logo:focus-visible{
  filter: none;
  transform: translateY(-2px) scale(1.02);
}

/* Keyboard focus ring */
.logo:focus-visible{
  outline: 2px solid rgba(78,140,255,.6);
  outline-offset: 3px;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .logo-track{ animation: none; transform: none; }
}

/* Make black-on-transparent logos readable */
.logo--dark img{
  filter: invert(1) grayscale(1) contrast(1.05) brightness(1.25) opacity(.9);
}
.logo--dark:hover img{ filter:none; }

/* Page-level guard against accidental horizontal scroll */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}



/* ===== Featured Services ===== */
.featured-services{
  text-align:center;
  position:relative;
}
.fs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin-top:20px;
}
.fs-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  padding:28px 22px;
  color:var(--text);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:.25s transform,.25s border-color,.25s box-shadow;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.fs-card:hover{
  transform:translateY(-4px);
  border-color:rgba(78,140,255,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.fs-icon{
  font-size:38px;
  margin-bottom:14px;
  background:linear-gradient(115deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fs-title{
  margin:0 0 10px;
  font-weight:800;
  font-size:20px;
  letter-spacing:.2px;
}
.fs-desc{
  color:var(--muted);
  font-size:15px;
  line-height:1.5;
}

/* ===== Featured Services Buttons ===== */
.fs-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:18px;
  flex-wrap:wrap;
}
.fs-card .btn{
  font-size:14px;
  padding:10px 14px;
  border-radius:12px;
  transition:.25s all;
}
.fs-card .btn-ghost{
  background:rgba(255,255,255,.08);
  color:#e9eef5;
}
.fs-card .btn-ghost:hover{
  background:rgba(255,255,255,.14);
}
.fs-card .btn-cta{
  background:linear-gradient(115deg,var(--brand),var(--brand2));
  color:#021014;
  font-weight:700;
  letter-spacing:.3px;
  box-shadow:0 10px 25px rgba(78,140,255,.25);
}
.fs-card .btn-cta:hover{
  transform:translateY(-2px);
}

/* ===== Metrics ===== */
.ps-metrics .ps-glass{ padding:20px; }
.ps-metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
}

.metric{
  --ring: 0 0 0 1px rgba(255,255,255,.12);
  position:relative;
  padding:22px 18px;
  border-radius:14px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--ring);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .6s ease, opacity .6s ease, border-color .25s ease, box-shadow .25s ease;
  transition-delay: 0s; /* Default delay */
}
.metric.inview{
  transform: translateY(0);
  opacity: 1;
}
/* Stagger the card fade-in animation */
.metric.inview:nth-child(1) { transition-delay: 0.05s; }
.metric.inview:nth-child(2) { transition-delay: 0.15s; }
.metric.inview:nth-child(3) { transition-delay: 0.25s; }
.metric.inview:nth-child(4) { transition-delay: 0.35s; }

.metric:hover{
  border-color: rgba(78,140,255,.35);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
}

.metric-ic{
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(115deg, rgba(55,214,181,.1), rgba(78,140,255,.10));
  color: var(--brand2);
  margin-bottom:10px;
}

.metric-num{
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.05;
  background: linear-gradient(115deg,var(--brand),var(--brand2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* This prevents the numbers from "jiggling" as they animate */
  font-variant-numeric: tabular-nums;
}
.metric-label{
  margin:6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* tiny underline accent */
.metric::after{
  content:"";
  position:absolute; left:18px; right:18px; bottom:14px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--brand),var(--brand2));
  opacity:.35; transform: scaleX(0); transform-origin:left;
  transition: transform .8s ease .2s, opacity .25s ease;
}
.metric.inview::after{ transform: scaleX(1); opacity:.5; }

/* Responsive */
@media (max-width: 1000px){
  .ps-metrics-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .ps-metrics-grid{ grid-template-columns: 1fr; }
}

/* Smooth paint + stable digits */
.metric{
  will-change: transform, opacity;
  transform: translate3d(0,8px,0); } /* GPU pat
  
  /* Universal center alignment for all section titles */
.section-title {
  text-align: center !important;
  width: 100%;
  display: block;
  margin-inline: auto;
}

/* Optional: also center the paragraph under each title */
.section > .lead {
  text-align: center !important;
  margin-inline: auto;
}
/* =========================
   Header Dropdown
   ========================= */
.menu-item-has-children {
  position: relative;
}
.menu-drop-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .2s ease;
}
.menu-drop-toggle:hover {
  background: rgba(255, 255, 255, .06);
}
.menu-drop-toggle .chev {
  transition: transform .2s ease;
}
.menu-item-has-children[data-open="1"] .chev {
  transform: rotate(180deg);
}

.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin-top: 8px;
  padding: 8px;
  gap: 4px; /* This gap is for the grid items */
  z-index: 100;

  /* Applying .ps-glass styles for visual appeal */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);

  /* Fix visibility: start hidden */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

/* This is the bug fix: Only apply display:grid when NOT hidden */
.sub-menu:not([hidden]) {
  display: grid;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sub-menu .menu-item a,
.sub-menu .menu-item span {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

/* Improved hover state */
.sub-menu .menu-item a:hover {
  background: rgba(78, 140, 255, 0.15); /* --brand2 color */
  color: var(--text);
}

/* Make "View all" stand out */
.sub-menu .view-all {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 4px;
  padding-top: 4px;
}
.sub-menu .view-all a {
  font-weight: 700;
  color: var(--brand); /* --brand color */
  text-align: center;
}
.sub-menu .view-all a:hover {
  background: rgba(55, 214, 181, 0.15); /* --brand color */
  color: var(--brand);
}

/* Mobile overlay: stack and make dropdown expand in-flow */
@media (max-width:860px){
  .nav .nav-list--anchors{ flex-direction:column; align-items:stretch; gap:6px; }
  .menu-item-has-children{ position:static; }
  .sub-menu{
    position:static;
    box-shadow:none;
    margin:6px 0 0 0;
    padding:6px;
    border-radius:10px;
    border-color:#1a2433;
    /* Reset desktop-only styles */
    background: rgba(255,255,255,.05);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Ensure it's still a grid on mobile when open */
  .sub-menu:not([hidden]) {
    display: grid;
  }
}

/* =========================
   Header Fixes & Tweaks
   ========================= */

/* 1. Fix for misaligned "Past Projects" link */
.nav-list--anchors > .menu-item > a {
  display: inline-block; /* Allows padding to work */
  padding: 10px 12px; /* Matches the button's padding */
  border-radius: 12px; /* Matches button for hover */
  transition: background .2s ease;
}

/* Match hover style for consistency */
.nav-list--anchors > .menu-item > a:hover {
  background: rgba(255, 255, 255, .06);
}

/* 2. Fix for "too clear" dropdown (darkens glass effect) */
.sub-menu {
  /* This uses your site's dark background color (#0e1520) 
     with 75% opacity for a darker, blurrier effect */
  background: rgba(14, 21, 32, 0.75);
  
  /* Optional: Make the border a bit brighter */
  border-color: rgba(255, 255, 255, 0.12);
}

/* 3. Fix for header getting cut off by WP Admin Bar */
.admin-bar .ps-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}


/* =========================
   Mobile Header Fixes
   ========================= */

/* 1. Fix for WP Admin Bar gap on mobile */
/* Desktop admin bar offset (existing fix) */
.admin-bar .ps-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}
/* Mobile admin bar offset (WP's breakpoint is 782px) */
@media (max-width: 782px) {
  .admin-bar .ps-header {
    top: 46px;
  }
}

/* 2. Tweak hamburger icon styling */
@media (max-width: 860px) {
  
  /* A) Reset the span margins that are causing extra space */
  .nav-toggle span {
    margin: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  /* B) Re-style the toggle for a cleaner look */
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns "Menu" text right */
    gap: 5px; /* This controls space BETWEEN lines */
    padding: 8px; /* Makes it easier to tap */
    border-radius: 8px;
    transition: background .2s ease;
  }
  .nav-toggle:hover {
    background: rgba(255, 255, 255, .06);
  }
  .nav-toggle em {
    font-size: 12px;
    font-style: normal;
    color: var(--muted);
    margin-top: 2px; /* Small space between icon and text */
  }

  /* 3. Add "X" transform when open (needs JS fix) */
  .nav-toggle.open span:nth-child(1) {
    /* 5px (gap) + 2px (height) = 7px */
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .nav-toggle.open em {
    display: none; /* Hide "Menu" text when open */
  }
}

/* ===== FIXED HEADER + SAFE OFFSETS (override) ===== */
:root{
  --header-h: 64px;                 /* desktop header height */
  --adminbar-h: 0px;                /* default unless admin */
}
@media (max-width:860px){
  :root{ --header-h: 56px; }        /* mobile header height */
}

/* WordPress admin bar height (desktop / mobile breakpoint at 782px) */
.admin-bar{ --adminbar-h: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width:782px){
  .admin-bar{ --adminbar-h: 46px; }
}

/* Lock header to the top (replaces sticky) */
.ps-header{
  position: fixed !important;
  top: var(--adminbar-h);
  left: 0; right: 0;
  height: var(--header-h);
  z-index: 10000; /* above hero/video */
  /* keep your existing glass styles: */
  background: rgba(8,13,18,.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(16,21,28,.6);
  padding-top: env(safe-area-inset-top);
}

/* Prevent content jump under fixed header */
body{ padding-top: calc(var(--header-h) + var(--adminbar-h)); }

/* Re-align header inner */
.ps-header .container{
  min-height: var(--header-h);
  padding: 8px 0; /* small vertical breathing room */
  display:flex; align-items:center; justify-content:space-between;
}

/* Mobile nav: sit directly under the fixed header */
@media (max-width:860px){
  .nav{
    position: fixed !important;
    inset: calc(var(--header-h) + var(--adminbar-h)) 12px auto 12px !important;
    z-index: 9999;
  }
}

/* Optional: prevent background scroll when menu is open (needs JS to toggle .nav-open on <body>) */
body.nav-open{
  overflow: hidden;
  touch-action: none;
}

/* Make sure nothing accidental clips sticky/fixed stacking */
.hero--video, .logo-strip, .section{
  will-change: auto; /* no transform here */
}


/* ===== Mobile hamburger tweaks ===== */
:root{
  --bar-w: 26px;      /* line width */
  --bar-h: 3px;       /* line thickness */
  --bar-gap: 6px;     /* space between lines */
}

@media (max-width: 860px){
  /* Hide the word “Menu” */
  .nav-toggle em{ display: none !important; }

  /* Bigger touch target + nicer hover */
  .nav-toggle{
    display:inline-flex;
    flex-direction:column;
    gap: var(--bar-gap);
    padding: 10px;
    border-radius: 8px;
    transition: background .2s ease;
  }
  .nav-toggle:hover{ background: rgba(255,255,255,.06); }

  /* Thicker, slightly rounded bars */
  .nav-toggle span{
    width: var(--bar-w);
    height: var(--bar-h);
    margin: 0;                          /* reset old margins */
    background: var(--text);
    border-radius: 2px;                  /* soft corners */
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }

  /* X-state math stays correct even if you tweak thickness/gap */
  .nav-toggle.open span:nth-child(1){
    transform: translateY(calc(var(--bar-gap) + var(--bar-h))) rotate(45deg);
  }
  .nav-toggle.open span:nth-child(2){
    opacity: 0; transform: scaleX(0);
  }
  .nav-toggle.open span:nth-child(3){
    transform: translateY(calc(-1 * (var(--bar-gap) + var(--bar-h)))) rotate(-45deg);
  }
}

/* Uniform project card cover images */
.fs-card .ppm-cover{
  display:block;
  position:relative;
  width:100%;
  /* Use your existing --cover-r variable; fallback to 16/9 */
  aspect-ratio: var(--cover-r, 16/9);

  /* Rounded corners & clipping so the image obeys the radius */
  border-radius: 16px;
  overflow:hidden;

  /* Optional: subtle bg while image loads */
  background:#0e1520;
}

/* Make the <img> fill and crop consistently */
.fs-card .ppm-cover-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* keeps uniform size, crops edges if needed */
  object-position:center;
  display:block;
  border-radius:0;       /* image itself doesn't need rounding; wrapper clips */
}

/* Keep your glass overlay inside the rounded frame */
.fs-card .ppm-cover .ppm-cover-glass{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

/* Optional: match card corner radius if your cards use a different value */
.fs-card{
  border-radius: 18px;
}
/* =========================
   ServicePress Leads — hard overrides (keep LAST)
   ========================= */

/* 0) Kill the plugin header/subtitle if it still renders */
.sp-leads-wrap .sp-leads-head{ display:none !important; }

/* 1) Constrain + center the block */
:where(.sp-leads-wrap) .sp-lead-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:clamp(18px,2.6vw,28px) !important;
  max-width:880px !important;
  margin-inline:auto !important;
}

/* 2) Ensure the “card” clips its children so inputs don’t spill past rounded edges */
:where(.sp-leads-wrap) .sp-lead-form{
  border-radius:16px !important;
  overflow:hidden !important;            /* <-- fixes the edges */
}

/* 3) The form panel look (kept tidy and inside the card) */
:where(.sp-leads-wrap) .sp-lead-form__form{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px !important;
  padding: clamp(16px,2.6vw,22px) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  max-width: 100% !important;
}

/* 4) Field rows */
:where(.sp-leads-wrap) .sp-lead-form .row{ display:grid !important; gap:12px !important; margin-bottom:10px !important; }
:where(.sp-leads-wrap) .sp-lead-form .row--2{ grid-template-columns:1fr 1fr !important; }
@media (max-width:720px){
  :where(.sp-leads-wrap) .sp-lead-form .row--2{ grid-template-columns:1fr !important; }
}

/* 5) Inputs stay inside, full-width */
:where(.sp-leads-wrap) .sp-lead-form input[type="text"],
:where(.sp-leads-wrap) .sp-lead-form input[type="email"],
:where(.sp-leads-wrap) .sp-lead-form input[type="tel"],
:where(.sp-leads-wrap) .sp-lead-form textarea{
  width:100% !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
}

/* 6) Actions: stack and center the primary button */
:where(.sp-leads-wrap) .actions{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}

/* 7) Submit button — centered and full-width,
      beats generic .btn/.btn-cta rules above */
:where(.sp-leads-wrap) .sp-lead-submit{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  text-align:center !important;
  border:0 !important;
  background: linear-gradient(115deg,var(--brand),var(--brand2)) !important;
}

/* 8) If you ever enable the map, keep it neat */
:where(.sp-leads-wrap) .sp-lead-map{ border-radius:16px !important; overflow:hidden !important; }
:where(.sp-leads-wrap) .sp-lead-map iframe{ display:block; width:100%; height:360px; border:0; }




/* Nav dropdown should sit above content on all pages */
.ps-header .sub-menu { z-index: 10050; }

/* No-JS fallback on desktop: open on hover */
@media (hover:hover){
  .menu-item-has-children:hover > .sub-menu:not([hidden]) { display: grid; }
  .menu-item-has-children:hover > .sub-menu[hidden] { display: grid; opacity:1; transform:translateY(0); pointer-events:auto; }
  .menu-item-has-children:hover .menu-drop-toggle .chev { transform: rotate(180deg); }
}

/* ===== MOBILE FIX: unified fixed header & offsets (place LAST) ===== */

/* Base heights */
:root{
  --header-h: 56px;         /* mobile */
  --offset-top: 0px;        /* admin bar / safe area added later */
}
@media (min-width: 861px){
  :root{ --header-h: 64px; } /* desktop */
}

/* Admin bar offsets */
.admin-bar{ --offset-top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 782px){
  .admin-bar{ --offset-top: 46px; }  /* WP mobile admin bar */
}

/* Lock header to the viewport (override any earlier sticky rules) */
.ps-header{
  position: fixed !important;
  top: var(--offset-top) !important;
  left: 0; right: 0;
  height: var(--header-h);
  z-index: 10000;
  transform: translateZ(0); /* iOS jitter guard */
  -webkit-transform: translateZ(0);
}

/* Respect iOS notch/address bar (safe-area) */
@supports (top: env(safe-area-inset-top)){
  .ps-header{
    top: calc(var(--offset-top) + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top);
  }
}

/* Prevent content sliding under the fixed header */
body{
  padding-top: calc(var(--header-h) + var(--offset-top));
}
@supports (top: env(safe-area-inset-top)){
  body{
    padding-top: calc(var(--header-h) + var(--offset-top) + env(safe-area-inset-top));
  }
}

/* Make anchor jumps land below the header */
html{ scroll-padding-top: calc(var(--header-h) + 8px); }

/* Mobile nav panel: sit directly under the fixed header */
@media (max-width: 860px){
  .nav{
    position: fixed !important;
    inset: calc(var(--header-h) + var(--offset-top)) 12px auto 12px !important;
    z-index: 9999;
  }
  @supports (top: env(safe-area-inset-top)){
    .nav{
      inset: calc(var(--header-h) + var(--offset-top) + env(safe-area-inset-top)) 12px auto 12px !important;
    }
  }
}

/* Safety: fixed elements hate ancestor transforms on iOS */
html, body{ transform: none !important; perspective: none !important; }

/* Base header stays above the panel */
.ps-header { position: sticky; top: 0; z-index: 1000; }

/* Mobile menu panel */
#primary-nav.nav {
  /* Hidden by default on mobile */
  position: fixed;
  left: 0; right: 0;
  top: var(--hdrh, 72px);
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2%);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  /* Panel look */
  background: rgba(10, 12, 16, .96);
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  overflow: auto;                  /* allow scrolling inside panel */
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 24px;
}

/* When open: make it interactive */
#primary-nav.nav.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

/* Prevent background scroll without iOS "freeze" side-effects */
body.nav-open {
  position: fixed;          /* locks viewport */
  width: 100%;
  overflow: hidden;         /* extra belt & suspenders */
}

/* Ensure the header's fixed bg layer never captures taps */
.ps-header::before { pointer-events: none; }

/* Optional: make the hamburger above the panel */
.nav-toggle { position: relative; z-index: 1001; }

/* Keep desktop behavior intact */
@media (min-width: 1024px){
  #primary-nav.nav {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    padding: 0;
  }
  body.nav-open { position: static; overflow: visible; }
}


/* Keep normal flow by default */
.nav-toggle{ position: relative; z-index:1001; width:44px; height:44px; }
.nav-toggle span{ pointer-events:none; } /* make taps hit the button, not the bars */

/* When menu is open, float the X in the top-right, above the panel */
body.nav-open .nav-toggle{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 1002; /* higher than the menu panel */
}


/* Your panel already starts below the header using top: var(--hdrh,72px) */
#primary-nav.nav{
  padding-top: 12px; /* tiny gap so it never kisses the X */
}