/* ============================================================
   PTM V8.6 — Webflow / Framer craft layer
   Display type · spacing rhythm · micro-polish · composition air
   Loaded AFTER v8-brand-experience.css
   ============================================================ */

:root {
  --v86-display: "Syne", Inter, system-ui, sans-serif;
  --v86-body: Inter, system-ui, sans-serif;
  --v86-space-xs: 8px;
  --v86-space-sm: 16px;
  --v86-space-md: 28px;
  --v86-space-lg: 48px;
  --v86-space-xl: clamp(72px, 10vw, 128px);
  --v86-space-2xl: clamp(96px, 12vw, 160px);
  --v86-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --v86-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --v86-radius: 24px;
  --v86-radius-sm: 16px;
  --v86-max: 1180px;
  --v86-hair: rgba(255,255,255,0.09);
}

html.v86-lenis,
html.lenis { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }

body.v8-craft {
  font-family: var(--v86-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

body.v8-craft ::selection {
  background: rgba(228, 0, 20, 0.28);
  color: #fff;
}

/* ---------- Display typography ---------- */
body.v8-craft .v2-h1,
body.v8-craft .v2-card h2,
body.v8-craft .v8-proof-copy h2,
body.v8-craft .v8-serve-copy h2,
body.v8-craft .v8-after-intro-copy h2,
body.v8-craft .v8-why-sig-copy h2,
body.v8-craft .v8-net-head h2,
body.v8-craft .ptm-brands-section .section-head h2,
body.v8-craft .v8-cta-dark h2,
body.v8-craft .v8-cta-accent h2,
body.v8-craft .final-cta-band h2,
body.v8-craft .ptm-faq-head h2 {
  font-family: var(--v86-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}

body.v8-craft .v2-h1 {
  font-size: clamp(48px, 7.2vw, 88px) !important;
  line-height: 0.94 !important;
  font-weight: 800 !important;
  max-width: 11ch !important;
}
body.v8-craft .v2-h1 .v86-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}
body.v8-craft .v2-h1 .v86-line > em,
body.v8-craft .v2-h1 em {
  font-style: normal !important;
  color: var(--v8-red) !important;
}
body.v8-craft .v2-desc {
  font-size: clamp(16px, 1.35vw, 18px) !important;
  line-height: 1.55 !important;
  max-width: 40ch !important;
  color: rgba(255,255,255,0.62) !important;
  letter-spacing: -0.01em;
}

/* ---------- Hero craft ---------- */
body.v8-craft .ptm-hero-v2 .v2-hero,
body.v8-craft .ptm-hero-v2 .v2-hero[data-v8-hero] {
  min-height: 100svh !important;
  padding: clamp(100px, 14vh, 140px) clamp(24px, 5vw, 72px) clamp(56px, 8vh, 88px) !important;
}
/* Scrim over hero video — full strength (base sheet had opacity:.35 which washed out type) */
body.v8-craft .ptm-hero-v2 .v2-hero::before,
body.v8-craft .ptm-hero-v2 .v2-hero[data-v8-hero]::before {
  z-index: 1;
  opacity: 1 !important;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.72) 38%, rgba(5,5,5,0.42) 68%, rgba(5,5,5,0.35) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(5,5,5,0.28) 40%, rgba(5,5,5,0.88) 100%) !important;
  transform: none;
  transform-origin: center;
  pointer-events: none;
}

/* Keep headline readable on bright yard footage */
body.v8-craft .ptm-hero-v2 .v2-hero-video {
  filter: brightness(0.55) contrast(1.05);
}
body.v8-craft .ptm-hero-v2 .v2-copy {
  position: relative;
  z-index: 5 !important;
}
body.v8-craft .ptm-hero-v2 .v2-eyebrow,
body.v8-craft .ptm-hero-v2 .v2-h1,
body.v8-craft .ptm-hero-v2 .v2-h1 .v86-line,
body.v8-craft .ptm-hero-v2 .v2-desc {
  position: relative;
  z-index: 5;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.65);
}
body.v8-craft .ptm-hero-v2 .v2-desc {
  color: rgba(255, 255, 255, 0.88) !important;
}
body.v8-craft .ptm-hero-v2 .v2-h1 .v86-line {
  overflow: visible !important; /* avoid clip if motion stalls */
}
body.v8-craft .ptm-hero-v2 .v2-cta-row {
  gap: 14px !important;
  margin-bottom: 44px !important;
}
body.v8-craft .ptm-hero-v2 .v2-btn {
  padding: 16px 26px !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  transition: transform 0.45s var(--v86-ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
body.v8-craft .ptm-hero-v2 .v2-btn:hover {
  transform: translateY(-2px) scale(1.02);
}
body.v8-craft .ptm-hero-v2 .v2-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------- Path cards — composition, not flat SaaS ---------- */
body.v8-craft .ptm-hero-v2 .v2-split {
  gap: 18px !important;
  padding: 8px clamp(24px, 4vw, 56px) 20px !important;
  max-width: 1320px !important;
}
body.v8-craft .ptm-hero-v2 .v2-card {
  min-height: 380px !important;
  border-radius: var(--v86-radius) !important;
  border: 1px solid var(--v86-hair) !important;
  transition: transform 0.55s var(--v86-ease), border-color 0.35s ease !important;
}
body.v8-craft .ptm-hero-v2 .v2-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255,255,255,0.22) !important;
}
body.v8-craft .ptm-hero-v2 .v2-card h2 {
  font-size: clamp(40px, 4.8vw, 58px) !important;
  line-height: 0.95 !important;
}
body.v8-craft .ptm-hero-v2 .v2-card-content {
  padding: 40px 36px !important;
}

/* ---------- Proof + 4S stack — editorial air ---------- */
body.v8-craft .v8-proof {
  padding: 12px clamp(24px, 4vw, 56px) 8px !important;
  max-width: 1320px !important;
}
body.v8-craft .v8-proof-card {
  border-radius: 28px !important;
  border: 1px solid var(--v86-hair) !important;
  padding: clamp(36px, 4.5vw, 56px) !important;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(228,0,20,0.08), transparent 55%),
    #12151a !important;
}
body.v8-craft .v8-proof-copy h2 {
  font-size: clamp(40px, 5vw, 60px) !important;
  line-height: 0.98 !important;
  max-width: 10ch !important;
}
body.v8-craft .v8-4s {
  padding: 28px clamp(24px, 4vw, 56px) 12px !important;
}
body.v8-craft .v8-4s-row > div {
  border-radius: var(--v86-radius-sm) !important;
  transition: transform 0.45s var(--v86-ease), border-color 0.3s ease, background 0.3s ease;
}
body.v8-craft .v8-4s-row > div:hover {
  transform: translateY(-3px);
  border-color: rgba(228,0,20,0.35) !important;
  background: rgba(255,255,255,0.04) !important;
}
body.v8-craft .v8-clients {
  padding: 28px 0 72px !important;
}

/* ---------- Brands stage — product gallery air ---------- */
body.v8-craft .ptm-brands-section {
  padding: var(--v86-space-2xl) 0 var(--v86-space-xl) !important;
}
body.v8-craft .ptm-brands-section .section-head {
  max-width: var(--v86-max);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--v86-space-lg) !important;
  padding: 0 24px;
}
body.v8-craft .ptm-brands-section .section-head h2 {
  font-size: clamp(40px, 5vw, 64px) !important;
  line-height: 1.02 !important;
}

/* ---------- Serve / After / Why / Net — section cadence ---------- */
body.v8-craft .v8-serve {
  min-height: min(85vh, 780px) !important;
}
body.v8-craft .v8-serve-copy {
  padding: clamp(56px, 8vw, 96px) clamp(32px, 5vw, 72px) !important;
}
body.v8-craft .v8-serve-copy h2 {
  font-size: clamp(42px, 5vw, 64px) !important;
}
body.v8-craft .v8-serve-list li {
  padding: 20px 0 !important;
  transition: padding-left 0.35s var(--v86-ease);
}
body.v8-craft .v8-serve-list li:hover {
  padding-left: 10px !important;
}
body.v8-craft .v8-after {
  padding: var(--v86-space-xl) clamp(24px, 4vw, 56px) !important;
}
body.v8-craft .v8-svc-card {
  border-radius: var(--v86-radius-sm) !important;
  transition: transform 0.5s var(--v86-ease), box-shadow 0.5s var(--v86-ease) !important;
}
body.v8-craft .v8-svc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(0,0,0,0.12) !important;
}
body.v8-craft .v8-why-sig {
  padding: var(--v86-space-2xl) clamp(24px, 4vw, 56px) !important;
}
body.v8-craft .v8-why-year {
  font-family: var(--v86-display) !important;
}
body.v8-craft .v8-net {
  padding: var(--v86-space-xl) clamp(24px, 4vw, 56px) !important;
}
body.v8-craft .v8-net-head h2 {
  font-size: clamp(42px, 5vw, 64px) !important;
}
body.v8-craft .v8-net-card {
  border-radius: var(--v86-radius) !important;
  transition: transform 0.5s var(--v86-ease) !important;
}
body.v8-craft .v8-net-card:hover {
  transform: translateY(-4px);
}

/* ---------- Buttons / links craft ---------- */
body.v8-craft a,
body.v8-craft button {
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.4s var(--v86-ease), opacity 0.25s ease;
}
body.v8-craft .btn,
body.v8-craft .v8-after-cta,
body.v8-craft .v8-net-actions a,
body.v8-craft .v8-centre-actions a {
  border-radius: 999px !important;
}

/* ---------- FAQ calm editorial ---------- */
body.v8-craft .ptm-faq {
  padding: var(--v86-space-xl) 0 !important;
}
body.v8-craft .ptm-faq-head h2 {
  font-size: clamp(36px, 4.5vw, 52px) !important;
}

/* ---------- Soft section reveals (craft, not trap) ---------- */
body.v8-craft .v86-inview {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--v86-ease), transform 0.9s var(--v86-ease);
}
body.v8-craft .v86-inview.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.v8-craft .v86-inview,
  body.v8-craft .ptm-hero-v2 .v2-card,
  body.v8-craft .v8-4s-row > div,
  body.v8-craft .v8-svc-card,
  body.v8-craft .v8-net-card,
  body.v8-craft .ptm-hero-v2 .v2-btn {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  body.v8-craft .ptm-hero-v2 .v2-hero::before,
  body.v8-craft .ptm-hero-v2 .v2-hero[data-v8-hero]::before {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  body.v8-craft .v2-h1 { font-size: clamp(40px, 11vw, 56px) !important; }
  body.v8-craft .ptm-hero-v2 .v2-card { min-height: 300px !important; }
}