/* Custom overrides loaded after styles.css */

/* === PMV Cinematic Premium (toned-down) === */
.pmv--cinematic {
  background: linear-gradient(180deg, #0b0b0d 0%, #1a0a0a 45%, #000 100%);
  padding: clamp(44px,6.5vw,88px) 0;
  color:#e5e7eb;
}
.pmv-wrap { width:min(1120px,92%); margin:0 auto; }
.pmv-head { text-align:center; margin-bottom: clamp(18px,3.5vw,28px); }
.pmv-head h2 { margin:0; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  font-size: clamp(22px,2.6vw,30px); color:#f4f4f5; }
.pmv-head p { margin:.6rem auto 1rem; max-width: 720px; color:#cbd5e1; font-size:clamp(15px,1.4vw,17px); }

/* subtle red underline */
.pmv-underline {
  display:block; height:2px; width:min(240px,46%);
  margin: 8px auto 0; background: linear-gradient(90deg, #ff0000, rgba(255,0,0,0));
  opacity:.7;
}

.pmv-stage { position:relative; height: clamp(420px, 52vh, 560px); overflow:hidden; }
.pmv-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;
  animation: pmvUp 35s linear infinite; will-change: transform; }
@keyframes pmvUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }

.pmv-card { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.12); color:#e5e7eb; border-radius:16px; padding:16px 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.22); width:min(720px, 92%); margin-left:auto; margin-right:0;
  transform: translateY(0) scale(1); transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.pmv-card blockquote { margin:0 0 8px; line-height:1.6; font-size:1.02rem; }
.pmv-card cite { display:block; font-style:normal; color:#fca5a5; font-weight:700; }

/* Hover: gentle red tint + soft glow + slight lift */
.pmv-card:hover {
  background: linear-gradient(180deg, rgba(255,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%);
  border-color: rgba(255,0,0,0.35);
  box-shadow: 0 12px 28px rgba(255,0,0,0.22), 0 18px 36px rgba(0,0,0,0.22);
  transform: translateY(-2px) scale(1.01);
}

/* Pause on hover */
.pmv:hover .pmv-list { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .pmv-list { animation: none !important; } }

/* Mobile centering */
@media (max-width: 768px) { .pmv-card { margin: 0 auto; width: 100%; } }

/* === FINAL: Playmates Cinematic (centered, brand glow, fades) === */
/* Center cards + narrower width */
.pmv-card {
  width: min(640px, 92%) !important;
  margin: 0 auto !important;
}

/* Animated brand-red glow behind testimonials */
.pmv-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(255, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0) 70%
  );
  filter: blur(35px);
  z-index: 0;
  animation: pmvGlowPulse 12s ease-in-out infinite;
  opacity: 0.75;
}

@keyframes pmvGlowPulse {
  0%, 100% { opacity: 0.75; filter: blur(35px) brightness(1); }
  50% { opacity: 1; filter: blur(40px) brightness(1.15); }
}

/* Soft fade at top and bottom for smooth scroll reveal */
.pmv-stage::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0) 15%,
    rgba(0, 0, 0, 0) 85%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: 2;
}

/* Ensure list scroll speed is exactly 35s */
.pmv-list {
  animation: pmvUp 35s linear infinite !important;
}

/* === Our Promise (op-*) === */
.op{ background:#fff; padding:clamp(40px,6vw,80px) 0; }
.op-wrap{ width:min(1120px,92%); margin:0 auto; }
.op-title{ text-align:center; font-size:clamp(26px,3vw,36px); margin:0 0 clamp(20px,3vw,32px); color:#111827; }
.op-grid{ display:grid; grid-template-columns:1fr; gap:clamp(14px,2.6vw,18px); }
@media(min-width:900px){ .op-grid{ grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,22px); } }
.op-card{ background:linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%); border:1px solid #eee;
  border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.06); text-align:center; }
.op-ico{ font-size:26px; line-height:1; margin-bottom:8px; }
.op-card h3{ margin:6px 0 6px; font-size:clamp(18px,2vw,22px); color:#111827; }
.op-card p{ margin:0; color:#4b5563; line-height:1.6; }
.op-fade{ opacity:0; transform:translateY(16px); animation:opIn .7s ease forwards; }
.d100{ animation-delay:.1s; } .d200{ animation-delay:.2s; } .d300{ animation-delay:.3s; }
@keyframes opIn{ to{ opacity:1; transform:translateY(0); } }

/* === Gradient CTA Footer (gcta-*) === */
.gcta{ background: radial-gradient(800px 280px at 80% 0, rgba(255,0,0,.12), transparent),
                  linear-gradient(180deg, #0b0b0d 0%, #1a0a0a 40%, #000 100%);
        padding: clamp(44px,6vw,88px) 0; text-align:center; color:#e5e7eb; }
.gcta-wrap{ width:min(900px,92%); margin:0 auto; }
.gcta-title{ margin:0; font-size:clamp(26px,3vw,40px); font-weight:800; letter-spacing:.02em; color:#fff; }
.gcta-sub{ margin:.6rem 0 1rem; color:#cbd5e1; font-size:clamp(15px,1.4vw,18px); }
.gcta-btn{ display:inline-block; margin-top:.4rem; background:#ff0000; color:#fff; font-weight:700;
  padding:14px 22px; border-radius:12px; text-decoration:none; box-shadow:0 12px 26px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease; }
.gcta-btn:hover{ transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.22); }

/* === Agency polish: SVG icons + CTA border glow === */
.op-ico { display:grid; place-items:center; margin-bottom:8px; }
.op-svg { width:40px; height:40px; color:#ff0000; opacity:.95; filter: drop-shadow(0 2px 6px rgba(255,0,0,.15)); }

/* Slight shine on hover */
.op-card:hover .op-svg { transform: translateY(-1px); transition: transform .2s ease; }

/* CTA top border glow */
.gcta--bordered { position: relative; }
.gcta--bordered::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,0,0,.0), rgba(255,0,0,.35), rgba(255,0,0,.0));
  box-shadow: 0 0 18px rgba(255,0,0,.25);
  pointer-events: none;
}

/* CTA button micro-pulse on hover (very subtle) */
@keyframes gctaPulse { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1px) scale(1.01); } }
.gcta-btn:hover { animation: gctaPulse .6s ease; }

/* === PMV hover: stronger brand glow + inner highlight (v2) === */
.pmv-card:hover {
  background: linear-gradient(180deg, rgba(255, 0, 0, 0.26) 0%, rgba(0, 0, 0, 0.60) 100%);
  border-color: rgba(255, 0, 0, 0.45);
  box-shadow:
    0 18px 40px rgba(255, 0, 0, 0.35),
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 8px rgba(255, 255, 255, 0.12);
  transform: translateY(-2px) scale(1.01);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

/* === Mobile hero visibility & spacing fixes (v1) === */
@media (max-width: 640px) {
  .hero {
    min-height: 78vh;
    background-position: 50% 20%;
    background-size: cover;
  }
  .hero::before {
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.65) 100%);
  }
  .hero .container,
  .hero .content,
  .hero .hero-content {
    padding-top: 72px !important;
    padding-bottom: 28px !important;
  }
  .hero h1 { font-size: clamp(24px, 6vw, 32px); line-height: 1.2; }
  .hero .lead,
  .hero p.lead { font-size: 15px; line-height: 1.55; }
}

/* Ensure the section after hero doesn't tuck under it */
@media (max-width: 640px) {
  .hiw, .op, .rv, .pm, .pmv, .tb, .gcta {
    margin-top: 16px !important;
  }
}

/* Sticky header overlap guard */
@supports (position: sticky) {
  @media (max-width: 640px) {
    .site-header.is-sticky + .hero { scroll-margin-top: 64px; }
  }
}

/* === Mobile Hero v2: logo 60%, lighter overlay, better crop, tighter H1 & CTA === */
@media (max-width: 640px) {
  /* Hero sizing and crop */
  body .hero {
    min-height: 78vh !important;
    background-position: 50% 10% !important; /* show more subject */
    background-size: cover !important;
    margin-bottom: 20px !important; /* clear gap before next section */
  }

  /* If hero uses an overlay pseudo-element */
  body .hero::before {
    background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.6) 100%) !important;
  }

  /* Logo: try common selectors (whichever exists will apply) */
  header .logo img,
  .site-header .logo img,
  .site-logo img,
  .brand img,
  .logo img {
    max-width: 60% !important;      /* 60% of desktop size */
    height: auto !important;
  }

  /* Headline and lead text a touch smaller */
  .hero h1 {
    font-size: clamp(22px, 5.4vw, 30px) !important;
    line-height: 1.2 !important;
  }
  .hero .lead, .hero p.lead {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }

  /* Spacing inside hero */
  .hero .container, .hero .content, .hero .hero-content {
    padding-top: 68px !important;
    padding-bottom: 24px !important;
  }

  /* CTA button: keep strong, trim vertical padding slightly */
  .hero .btn, .hero .cta, .hero a.button, .hero .primary-btn {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* === Mobile Hero v3: ensure next section is visible, neutralize bottom mask === */
@media (max-width: 640px) {
  /* Make sure overlays sit behind text and don't spill over */
  .hero { position: relative !important; z-index: 1; }
  .hero::before { z-index: 0 !important; pointer-events: none !important; }
  .hero::after { content: none !important; } /* disable any bottom vignette on phones */

  /* Bring first content section above hero overlays just in case */
  .seo-content, .hiw, .op, .rv, .pm, .pmv, .tb, .gcta {
    position: relative !important;
    z-index: 2 !important;
    margin-top: 16px !important;
  }
}

/* === Mobile Hero v4: logo smaller (45%) and pinned top-left === */
@media (max-width: 640px) {
  /* Anchor common logo containers to top-left */
  header .logo, .site-header .logo, .site-logo, .brand, .logo {
    position: absolute !important;
    top: 12px !important;
    left: 16px !important;
    z-index: 5 !important;
    margin: 0 !important;
  }

  /* Scale the logo image */
  header .logo img, .site-header .logo img, .site-logo img, .brand img, .logo img {
    max-width: 45% !important;  /* 45% of desktop size */
    height: auto !important;
    display: block !important;
  }

  /* Ensure hero has enough padding to clear the pinned logo */
  .hero .container, .hero .content, .hero .hero-content {
    padding-top: 84px !important;  /* was ~68px */
  }
}

/* === Mobile Hero v5: logo 30% width (top-left anchored remains) === */
@media (max-width: 640px) {
  header .logo img, .site-header .logo img, .site-logo img, .brand img, .logo img {
    max-width: 30% !important;  /* 30% of desktop size */
    height: auto !important;
  }
}

/* === Responsive Logo Sizing & Position (v6) === */

/* Desktop: shrink to ~85% for a sleeker look */
@media (min-width: 1025px) {
  header .logo img, .site-header .logo img, .header-logo img, .site-logo img, .brand img, .hero .logo img {
    max-width: 85% !important;
    height: auto !important;
  }
  header .logo svg, .site-header .logo svg, .header-logo svg, .site-logo svg, .brand svg, .hero .logo svg {
    width: 85% !important;
    height: auto !important;
  }
}

/* Tablet: ~60% for balance */
@media (min-width: 641px) and (max-width: 1024px) {
  header .logo img, .site-header .logo img, .header-logo img, .site-logo img, .brand img, .hero .logo img {
    max-width: 60% !important;
    height: auto !important;
  }
  header .logo svg, .site-header .logo svg, .header-logo svg, .site-logo svg, .brand svg, .hero .logo svg {
    width: 60% !important;
    height: auto !important;
  }
}

/* Mobile: 30% and pin top-left with enough hero padding */
@media (max-width: 640px) {
  /* Pin common logo containers */
  header .logo, .site-header .logo, .header-logo, .site-logo, .brand, .hero .logo {
    position: absolute !important;
    top: 10px !important;
    left: 16px !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 6 !important;
  }
  /* Scale logos (IMG + SVG) */
  header .logo img, .site-header .logo img, .header-logo img, .site-logo img, .brand img, .hero .logo img {
    max-width: 30% !important;
    height: auto !important;
    display: block !important;
  }
  header .logo svg, .site-header .logo svg, .header-logo svg, .site-logo svg, .brand svg, .hero .logo svg {
    width: 30% !important;
    height: auto !important;
  }
  /* Ensure hero content clears pinned logo */
  .hero .container, .hero .content, .hero .hero-content {
    padding-top: 88px !important;
  }
  /* If any header container is center-justifying the logo, override */
  .site-header, header, .topbar, .nav, .header-inner {
    justify-content: flex-start !important;
  }
}

/* === Logo resize: 80% of original, pinned top-left === */
header .logo, .site-header .logo, .header-logo, .site-logo, .brand, .hero .logo, [class*="logo"] {
  position: absolute !important;
  top: 10px !important;
  left: 16px !important;
  right: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 9 !important;
}

/* IMG logos */
header .logo img, .site-header .logo img, .header-logo img, .site-logo img, .brand img, .hero .logo img,
[class*="logo"] img, img[src*="logo"], img[alt*="logo"] {
  width: auto !important;
  max-width: 80% !important;   /* 20% smaller than before */
  height: auto !important;
  display: block !important;
}

/* Inline SVG logos */
header .logo svg, .site-header .logo svg, .header-logo svg, .site-logo svg, .brand svg, .hero .logo svg,
[class*="logo"] svg {
  width: 80% !important;
  height: auto !important;
}

/* Ensure hero content clears the pinned logo */
.hero .container, .hero .content, .hero .hero-content {
  padding-top: max(96px, 12vh) !important;
}

/* === Reusable grid cards for locations (UK, England, etc.) === */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.locations-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: #111;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.locations-card strong {
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.locations-card span {
  font-size: 0.95rem;
  opacity: 0.9;
}

.locations-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  background: #c9101a;
}