/* ==========================================================================
   BGV CREATIVE — DESIGN TOKENS
   ========================================================================== */

:root {
  color-scheme: only light;

  /* Brand colors */
  --charcoal: #111315;
  --charcoal-2: #0e161f;
  --steel: #4f6d8a;
  --steel-light: #7a9dbc;
  --offwhite: #f3f1ec;
  --copper: #c97842;

  /* Derived tones */
  --charcoal-border: rgba(243, 241, 236, 0.1);
  --charcoal-border-soft: rgba(243, 241, 236, 0.06);
  --offwhite-muted: rgba(17, 19, 21, 0.62);
  --card-light-bg: #ffffff;
  --card-light-border: rgba(17, 19, 21, 0.08);
  --divider-rgb: 122, 157, 188; /* steel-light, shared by every faded divider on the site */

  /* Fonts */
  --font-heading: "General Sans", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Canvas system (rounded central page) */
  --canvas-max: 1760px;
  --canvas-margin: 16px;
  --canvas-radius: 24px;
  --canvas-shadow-blur: 28px;
  --canvas-shadow-spread: 10px;

  /* Layout */
  --container-max: 1560px;
  --container-pad: 24px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-hover: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-dur: 250ms;
}

@media (min-width: 480px) {
  :root {
    --canvas-margin: 20px;
    --canvas-radius: 28px;
    --container-pad: 28px;
  }
}

@media (min-width: 768px) {
  :root {
    --canvas-margin: 24px;
    --canvas-radius: 32px;
    --canvas-shadow-blur: 40px;
    --canvas-shadow-spread: 16px;
    --container-pad: 40px;
  }
}

@media (min-width: 1024px) {
  :root {
    --canvas-margin: 40px;
    --canvas-radius: 44px;
    --canvas-shadow-blur: 50px;
    --canvas-shadow-spread: 20px;
  }
}

@media (min-width: 1440px) {
  :root {
    --canvas-margin: 64px;
    --canvas-radius: 56px;
    --canvas-shadow-blur: 60px;
    --canvas-shadow-spread: 26px;
    --container-pad: 56px;
  }
}

@media (min-width: 1920px) {
  :root {
    --canvas-margin: 72px;
    --canvas-radius: 64px;
    --canvas-shadow-blur: 70px;
    --canvas-shadow-spread: 30px;
  }
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, video, iframe { max-width: 100%; display: block; }
h1, h2, h3, p, blockquote, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { fill: currentColor; }

body {
  font-family: var(--font-body);
  background: var(--charcoal);
  color: var(--offwhite);
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--steel-light);
  outline-offset: 2px;
}

/* ==========================================================================
   BACKDROP + CENTRAL CANVAS
   ========================================================================== */

.site-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--charcoal);
  background-image: url("../assets/pattern-hex.svg");
  background-repeat: repeat;
  background-size: 220px;
}

.canvas {
  position: relative;
  z-index: 1;
  width: calc(100% - (var(--canvas-margin) * 2));
  max-width: var(--canvas-max);
  margin: var(--canvas-margin) auto;
  border-radius: var(--canvas-radius);
  overflow: hidden;
  box-shadow: 0 0 var(--canvas-shadow-blur) var(--canvas-shadow-spread) rgba(0, 0, 0, 0.6);
  background: var(--charcoal);
}

.canvas-inner {
  display: flex;
  flex-direction: column;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Section background variants */
.section-dark {
  background-color: var(--charcoal);
  background-image: url("../assets/pattern-hex.svg");
  background-repeat: repeat;
  background-size: 220px;
}

.section-light {
  background-color: var(--offwhite);
  color: var(--charcoal);
}

.section-accent {
  background-color: var(--steel);
  background-image: url("../assets/pattern-hex.svg");
  background-repeat: repeat;
  background-size: 220px;
  color: var(--offwhite);
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 16px;
}

.section-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(40px, 5vw, 60px);
}

/* Problem heading's second sentence alone needs ~970px at the largest
   heading size — wider than the shared 860px section-head cap allows. */
.section-head--wide {
  max-width: min(94vw, 1060px);
}

.section-heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: min(92vw, 960px);
  margin-inline: auto;
}

/* Forces a deliberate line break between two sentences (each span still
   wraps naturally on its own if a viewport is narrow enough to need it).
   Wider than the base heading's max-width: the second sentence alone needs
   ~970px at the heading's max font-size, so the shared 960px cap was
   causing it to wrap internally into two lines — three lines total. */
.section-heading--split {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(94vw, 1060px);
}

.section-subtext {
  font-size: 18px;
  color: var(--offwhite-muted);
  margin-top: 16px;
}

.section-light .section-subtext { color: var(--offwhite-muted); }
.section-dark .section-subtext,
.section-accent .section-subtext { color: rgba(243, 241, 236, 0.7); }

/* Tighter measure for longer supporting sentences (vs. short subtext like
   "How it works.", which doesn't need a cap). */
.section-subtext--narrow {
  max-width: 640px;
  margin-inline: auto;
}

.section-label-center {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: clamp(36px, 5vw, 52px);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 60px;
  padding-inline: 34px;
  border-radius: 13px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform var(--hover-dur) var(--ease-hover),
    background-color var(--hover-dur) var(--ease-hover),
    border-color var(--hover-dur) var(--ease-hover),
    color var(--hover-dur) var(--ease-hover),
    box-shadow var(--hover-dur) var(--ease-hover);
}

.btn:active { transform: translateY(-1px) scale(1); }

.btn-primary {
  background: var(--steel);
  color: var(--offwhite);
}

.btn-secondary {
  background: rgba(17, 19, 21, 0.9);
  color: var(--offwhite);
  border-color: var(--charcoal-border);
}

.section-light .btn-secondary {
  background: var(--charcoal);
  border-color: transparent;
}

/* Lift/glow hover effects only for devices with real hover (mouse/trackpad).
   Touch has no true "unhover", so these were getting stuck after a tap
   instead of clearing — this scopes them out on touch instead of trying to
   re-cancel them per breakpoint. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-3px) scale(1.025); }
  .btn-primary:hover {
    background: var(--copper);
    box-shadow: 0 12px 26px rgba(201, 120, 66, 0.35);
  }
  .btn-secondary:hover {
    border-color: var(--copper);
    color: var(--copper);
    box-shadow: 0 12px 26px rgba(201, 120, 66, 0.2);
  }
  .section-light .btn-secondary:hover {
    border-color: var(--copper);
  }
}

/* Touch has no hover, so the copper hover/glow block above never fires
   there — without an equivalent, pressing a button gave no feedback at all.
   This is the first of four matching touch-only press blocks in this file
   (see also .play-btn, .social-btn, .testimonial-arrow) — one per component,
   placed right after that component's own rules, same pattern the hover
   blocks above already use. Kept separate per component (rather than one
   shared block elsewhere in the file) so each stays later in source order
   than its own resting-state transition and reliably wins the cascade,
   instead of being silently overridden by a same-specificity rule further
   down. Transform/opacity only — no glow, color, or shadow. touch-action:
   manipulation drops the browser's tap-response delay so it doesn't feel
   laggy. Press-in uses its own (faster) transition declared on :active
   itself; release falls back to the slightly slower one on the resting
   selector, so pressing feels snappier than letting go. */
@media (hover: none) and (pointer: coarse) {
  .btn {
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    touch-action: manipulation;
  }
  .btn:active {
    transition: transform 70ms ease-out, opacity 70ms ease-out;
    transform: scale(0.93);
    opacity: 0.85;
  }
}

.btn-icon { width: 19px; height: 19px; flex-shrink: 0; }

/* Small, subtle variant — same colors/hover/radius language as .btn, just
   scaled to ~75% for a lower-emphasis, left-aligned placement (About CTA). */
.btn--small {
  height: 46px;
  padding-inline: 26px;
  border-radius: 10px;
  font-size: 13px;
}

.hero-cta,
.testimonial-cta,
.process-cta,
.results-cta,
.final-cta__dm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero { padding-block: clamp(18px, 2.4vw, 28px) clamp(56px, 7vw, 88px); }

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-logo {
  height: clamp(64px, 8vw, 108px);
  width: auto;
  margin-bottom: clamp(24px, 3vw, 38px);
}

.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2px, 0.5vw, 6px);
  max-width: min(95vw, 1580px);
}

.hero-headline__primary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.15vw, 42px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--offwhite);
}

.hero-headline__accent {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(20px, 1.75vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.035em;
  color: var(--steel);
}

.hero-positioning {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--copper);
  margin-top: 24px;
}

.hero-video {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin-top: clamp(32px, 5vw, 52px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  background: #000;
}

.hero-video__el {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

.hero-cta { margin-top: clamp(28px, 4vw, 40px); }

/* Centered play button overlay, shared by every video on the site.
   One definition, used everywhere — never position an instance manually. */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(17, 19, 21, 0.45);
  border: 1.5px solid rgba(243, 241, 236, 0.75);
  backdrop-filter: blur(3px);
  color: var(--offwhite);
  transition:
    transform var(--hover-dur) var(--ease-hover),
    background-color var(--hover-dur) var(--ease-hover),
    border-color var(--hover-dur) var(--ease-hover),
    box-shadow var(--hover-dur) var(--ease-hover),
    opacity 0.2s var(--ease);
}

.play-btn svg {
  width: 26px;
  height: 26px;
  /* the triangle's own visual mass sits left of its geometric box —
     a hair-line nudge is enough to read as dead-center */
  transform: translateX(1.5px);
}

@media (hover: hover) and (pointer: fine) {
  .play-btn:hover {
    background: var(--copper);
    border-color: var(--copper);
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 8px 22px rgba(201, 120, 66, 0.4);
  }
}

/* Touch press feedback (see .btn) — composes the scale into the existing
   centering translate. Opacity is deliberately left out here (unlike .btn)
   so it doesn't fight the is-playing fade-out below; only transform's
   duration is shortened for touch, its other transitions (background/
   border/box-shadow/opacity) are carried over unchanged from .play-btn. */
@media (hover: none) and (pointer: coarse) {
  .play-btn {
    transition:
      transform 120ms ease-out,
      background-color var(--hover-dur) var(--ease-hover),
      border-color var(--hover-dur) var(--ease-hover),
      box-shadow var(--hover-dur) var(--ease-hover),
      opacity 0.2s var(--ease);
    touch-action: manipulation;
  }
  .play-btn:active {
    transition: transform 70ms ease-out;
    transform: translate(-50%, -50%) scale(0.93);
  }
}

.is-playing .play-btn {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 560px) {
  .play-btn { width: 60px; height: 60px; }
  .play-btn svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */

.trusted { padding-block: clamp(28px, 4vw, 44px); }

.trusted-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: clamp(24px, 3vw, 32px);
}

/* fade → solid → TRUSTED BY → solid → fade: each line is solid nearest the
   label and fades to transparent at its outer end. */
.trusted-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--divider-rgb), 0.5));
}

.trusted-line:last-of-type {
  background: linear-gradient(to left, transparent, rgba(var(--divider-rgb), 0.5));
}

.trusted-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-light);
  white-space: nowrap;
}

.trusted-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
}

.trusted-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--charcoal-border);
  background: rgba(243, 241, 236, 0.04);
}

.trusted-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* translate listed before scale so --logo-shift-y stays a true pixel
     offset regardless of --logo-scale (scale would otherwise multiply it) */
  transform: translateY(var(--logo-shift-y, 0px)) scale(var(--logo-scale, 1));
}

/* Some source logos have built-in padding around the mark — zoom in slightly
   so the mark fills the circle instead of floating with a visible margin. */
.trusted-logo--zoom-130 { --logo-scale: 1.3; }
.trusted-logo--zoom-140 { --logo-scale: 1.4; }

/* Optical nudge for one logo that sits slightly high inside its circle —
   composes with the zoom modifiers above rather than overriding them. */
.trusted-logo--shift-down { --logo-shift-y: 4px; }

/* ==========================================================================
   FEATURED TESTIMONIALS
   ========================================================================== */

.featured-testimonials { padding-block: clamp(48px, 7vw, 88px); }

.feature-testimonial {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 64px);
}

/* Same faded steel-blue divider language as the rest of the site, but at
   lower opacity — this separates two testimonials within one section
   ("next testimonial"), not two different sections. */
.feature-testimonial + .feature-testimonial {
  background-image: linear-gradient(
    to right,
    transparent,
    rgba(var(--divider-rgb), 0.22) 15%,
    rgba(var(--divider-rgb), 0.22) 85%,
    transparent
  );
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top;
}

.feature-testimonial--reverse { direction: rtl; }
.feature-testimonial--reverse > * { direction: ltr; }

.feature-testimonial__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 2.8vw, 32px);
}

.feature-testimonial__role {
  font-size: 16px;
  color: rgba(243, 241, 236, 0.55);
  margin-top: 4px;
}

.feature-testimonial__quote {
  margin-top: 24px;
}

.feature-testimonial__quote p {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.42;
  font-style: italic;
}

.social-row {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.social-row--center { justify-content: center; }

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(122, 157, 188, 0.45);
  color: var(--steel-light);
  transition:
    background-color var(--hover-dur) var(--ease-hover),
    color var(--hover-dur) var(--ease-hover),
    border-color var(--hover-dur) var(--ease-hover),
    transform var(--hover-dur) var(--ease-hover),
    margin var(--hover-dur) var(--ease-hover),
    box-shadow var(--hover-dur) var(--ease-hover);
}

.social-btn svg { width: 20px; height: 20px; }

/* Dock-style hover: the hovered icon grows and gains a copper glow; the extra
   margin it claims pushes neighbours apart via normal flex reflow — no
   transforms are applied to siblings. Real-hover devices only (see .btn). */
@media (hover: hover) and (pointer: fine) {
  .social-btn:hover {
    border-color: var(--copper);
    color: var(--copper);
    transform: scale(1.14) translateY(-2px);
    margin-inline: 5px;
    box-shadow: 0 0 0 6px rgba(201, 120, 66, 0.14), 0 8px 18px rgba(201, 120, 66, 0.3);
  }
}

/* Touch press feedback (see .btn). */
@media (hover: none) and (pointer: coarse) {
  .social-btn {
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    touch-action: manipulation;
  }
  .social-btn:active {
    transition: transform 70ms ease-out, opacity 70ms ease-out;
    transform: scale(0.93);
    opacity: 0.85;
  }
}

.feature-testimonial__media { position: relative; }

.feature-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
}

.feature-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-video--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #171a1d, var(--charcoal-2));
  color: rgba(243, 241, 236, 0.4);
  font-size: 14px;
  text-align: center;
  padding: 24px;
  border: 1px dashed rgba(243, 241, 236, 0.18);
}

/* ==========================================================================
   PROBLEM SECTION
   ========================================================================== */

.problem { padding-block: clamp(56px, 8vw, 104px); }

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.problem-card {
  background: var(--card-light-bg);
  border: 1px solid var(--card-light-border);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 1px 0 rgba(17, 19, 21, 0.02);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.problem-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 109, 138, 0.35);
  box-shadow: 0 16px 34px rgba(17, 19, 21, 0.09), 0 0 0 1px rgba(79, 109, 138, 0.12);
}

.problem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 13px;
  background: rgba(79, 109, 138, 0.1);
  color: var(--steel);
  margin-bottom: 20px;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.problem-card:hover .problem-icon {
  background: rgba(79, 109, 138, 0.18);
  transform: scale(1.06);
}

.problem-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.problem-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.problem-card p {
  font-size: 15.5px;
  line-height: 1.58;
  color: var(--offwhite-muted);
}

/* ==========================================================================
   SUPPORTING TESTIMONIALS
   ========================================================================== */

.supporting-testimonials { padding-block: clamp(48px, 7vw, 88px); }

/* Carousel shell: [prev arrow] [viewport] [next arrow] on desktop;
   viewport on top, arrows in a row below on mobile/tablet. */
.testimonial-carousel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.testimonial-viewport {
  position: relative;
  overflow: hidden;
  padding-inline: clamp(10px, 4vw, 24px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.testimonial-track {
  display: flex;
  gap: 24px;
  cursor: grab;
  touch-action: pan-y;
  will-change: transform;
}

.testimonial-track.is-dragging { cursor: grabbing; }
.testimonial-track.is-animating { transition: transform 420ms var(--ease-hover); }

.testimonial-card {
  /* 100% (not a peek-revealing 86%) so exactly one card fills the viewport
     on mobile — see the max-width:900px block below for why. */
  flex: 0 0 100%;
  background: rgba(243, 241, 236, 0.04);
  border: 1px solid var(--charcoal-border-soft);
  border-radius: 22px;
  padding: 34px;
  text-align: center;
}

@media (min-width: 900px) {
  .testimonial-viewport { padding-inline: clamp(24px, 3vw, 40px); }
  .testimonial-card { flex-basis: calc((100% - 24px) / 2); }
}

.testimonial-card__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 26px;
  background: #000;
}

.testimonial-card__media video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.testimonial-card__quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
}

.testimonial-card__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  margin-top: 22px;
}

.testimonial-card__role {
  font-size: 15px;
  color: rgba(243, 241, 236, 0.55);
  margin-top: 2px;
}

.testimonial-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--charcoal-border);
  background: rgba(17, 19, 21, 0.6);
  color: var(--offwhite);
  transition:
    background-color var(--hover-dur) var(--ease-hover),
    border-color var(--hover-dur) var(--ease-hover),
    color var(--hover-dur) var(--ease-hover),
    transform var(--hover-dur) var(--ease-hover),
    box-shadow var(--hover-dur) var(--ease-hover);
  flex-shrink: 0;
}

.testimonial-arrow svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .testimonial-arrow:hover {
    border-color: var(--copper);
    color: var(--copper);
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 8px 18px rgba(201, 120, 66, 0.3);
  }
}

/* Touch press feedback (see .btn). */
@media (hover: none) and (pointer: coarse) {
  .testimonial-arrow {
    transition: transform 120ms ease-out, opacity 120ms ease-out;
    touch-action: manipulation;
  }
  .testimonial-arrow:active {
    transition: transform 70ms ease-out, opacity 70ms ease-out;
    transform: scale(0.93);
    opacity: 0.85;
  }
}

/* Mobile/tablet default: arrows sit centered in a row below the viewport */
.testimonial-arrows {
  display: flex;
  justify-content: center;
  gap: 14px;
}

@media (min-width: 900px) {
  /* Desktop: arrows become real flex siblings of the viewport, sitting
     outside it — never overlapping card content — via `order`, unwrapped
     from their mobile row with display:contents. */
  .testimonial-carousel { flex-direction: row; align-items: center; gap: 16px; }
  .testimonial-arrows { display: contents; }
  .testimonial-viewport { order: 0; flex: 1 1 auto; min-width: 0; }
  .testimonial-arrow--prev { order: -1; }
  .testimonial-arrow--next { order: 1; }
}

.testimonial-cta { margin-top: clamp(36px, 5vw, 56px); }

/* ==========================================================================
   PERCEPTION SYSTEM
   ========================================================================== */

.perception { padding-block: clamp(56px, 8vw, 104px); }

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: clamp(40px, 5vw, 60px);
}

@media (max-width: 720px) {
  .process-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .process-grid { grid-template-columns: repeat(4, 1fr); }
}

.process-card {
  position: relative;
  background: var(--card-light-bg);
  border: 1px solid var(--card-light-border);
  border-radius: 18px;
  padding: 32px 28px;
  box-shadow: 0 12px 30px rgba(17, 19, 21, 0.05);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.process-card:hover {
  transform: translateY(-4px);
  border-color: rgba(79, 109, 138, 0.35);
  box-shadow: 0 18px 38px rgba(17, 19, 21, 0.1), 0 0 0 1px rgba(79, 109, 138, 0.12);
}

/* Step 01 is a genuine differentiator (setup happens before the edit even
   starts) — a clearly-visible copper accent sets it apart without breaking
   the row. Border width/opacity are stronger than the other cards' hover
   accent, and a warm glow sits underneath and slightly wraps the lower
   corners rather than surrounding the card evenly. */
.process-card--featured {
  border-width: 2px;
  border-color: rgba(201, 120, 66, 0.55);
  box-shadow:
    0 14px 30px rgba(17, 19, 21, 0.06),
    0 36px 74px -8px rgba(201, 120, 66, 0.42);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}

.process-card--featured:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(201, 120, 66, 0.8);
  box-shadow:
    0 22px 42px rgba(17, 19, 21, 0.1),
    0 46px 90px -6px rgba(201, 120, 66, 0.55);
}

/* Number + badge sit on one row at the top of Step 01. */
.process-card__top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.process-card__top-row .process-number { margin-bottom: 0; }

/* Compact pill, inline beside the step number — part of the card's own
   metadata row rather than an element floating outside it. */
.process-feature-badge {
  display: inline-block;
  background: rgba(201, 120, 66, 0.08);
  border: 1px solid rgba(201, 120, 66, 0.5);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}

.process-number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  color: var(--copper);
  letter-spacing: 0.05em;
  margin-bottom: 18px;
}

.process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: rgba(79, 109, 138, 0.1);
  color: var(--steel);
  margin-bottom: 20px;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.process-card:hover .process-icon {
  background: rgba(79, 109, 138, 0.18);
  transform: scale(1.06);
}

.process-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.process-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--offwhite-muted);
}

.process-closing {
  text-align: center;
  max-width: 640px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--offwhite-muted);
}

.process-closing__accent { color: var(--copper); }

.process-cta { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }

/* ==========================================================================
   RESULTS
   ========================================================================== */

.results { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(20px, 2.5vw, 28px); }

/* Heading needs more room than the shared 860px section-head cap allows —
   "Proof that the content holds attention." must stay on one line desktop. */
.results .section-heading { max-width: min(94vw, 1100px); }

.results-list {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(40px, 5vw, 56px);
}

/* As wide as the featured-testimonial content, not a narrow centered card —
   spans the same content boundary as .container itself. */
.result-row { width: 100%; }

/* One shared container per result — a graph + its matching video/post live
   inside the same bordered box so the pairing reads as obvious, never as
   two separate cards. Charcoal, only a touch lighter than the page
   background (same tone as .testimonial-card), with a restrained
   steel-blue-gray outline doing the grouping work instead of a fill color.
   Tight left/right padding (~6px) + space-between: the graph anchors the
   left edge, the thumbnail anchors the right edge, and all the flexible
   breathing room sits between them — not centered, not piled up on one side. */
.result-media {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 6px;
  border-radius: 16px;
  background: rgba(243, 241, 236, 0.04);
  border: 1px solid rgba(79, 109, 138, 0.35);
  height: clamp(320px, 28vw, 460px);
}

.result-media img {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  border-radius: 9px;
  display: block;
}

/* All three graphs share one fixed display frame (same width, same height,
   same radius) regardless of each source screenshot's native dimensions —
   object-fit: contain guarantees nothing is ever cropped (no lost axes or
   metrics), just letterboxed by a couple of px where a source's native
   ratio doesn't exactly match the shared frame. */
.result-graph {
  aspect-ratio: 1.4;
  object-fit: contain;
}

/* Below 900px (same breakpoint feature-testimonial/testimonial-card already
   use) the graph gets too narrow to stay readable — stack graph over post
   inside the same container instead of shrinking both. */
@media (max-width: 900px) {
  .result-media {
    flex-direction: column;
    padding: 13px;
    height: auto;
  }
  .result-media img {
    width: 100%;
    height: auto;
  }
}

.results-cta { margin-top: clamp(36px, 5vw, 56px); }

/* Chapter-separator line between Results and About — same faded steel-blue
   divider language as the rest of the site, at the standard (more visible)
   opacity since it separates two different sections, not two testimonials. */
.section-divider {
  height: 1px;
  width: min(90%, 420px);
  margin: clamp(40px, 5vw, 56px) auto 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--divider-rgb), 0.5) 15%,
    rgba(var(--divider-rgb), 0.5) 85%,
    transparent
  );
}

/* ==========================================================================
   MEET BOGDAN
   ========================================================================== */

.about { padding-top: clamp(20px, 2.5vw, 28px); padding-bottom: clamp(56px, 8vw, 104px); }

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.about-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 26px;
}

.about-heading__small {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(21px, 2.5vw, 28px);
  color: var(--copper);
}

.about-heading__large {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(29px, 3.6vw, 41px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: min(90%, 430px);
}

.about-text p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(243, 241, 236, 0.75);
}

.about-text p + p { margin-top: 18px; }

/* Closing line reads as a natural conclusion, not a CTA block — just a
   touch heavier and brighter than the rest of the copy. (Ancestor-qualified
   selector so this actually outranks .about-text p's color declaration.) */
.about-text .about-text__closing {
  font-weight: 500;
  color: var(--offwhite);
}

.about-cta { margin-top: clamp(24px, 3vw, 32px); }

.about-media { position: relative; max-width: 460px; margin-inline: auto; }

.about-photo-frame {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 0 0 1px var(--charcoal-border), 0 30px 70px rgba(0, 0, 0, 0.5);
  position: relative;
}

.about-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 -60px 80px -20px rgba(79, 109, 138, 0.35);
  pointer-events: none;
}

.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }

.about-plate {
  position: absolute;
  left: -16px;
  bottom: -22px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--steel), #3d5670);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  max-width: 240px;
}

.about-plate__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--offwhite);
}

.about-plate__role {
  font-size: 12px;
  color: rgba(243, 241, 236, 0.8);
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding-block: clamp(56px, 8vw, 104px); }

.accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 900px;
  margin-inline: auto;
}

.accordion-item {
  background: var(--card-light-bg);
  border: 1px solid var(--card-light-border);
  border-radius: 16px;
  overflow: hidden;
}

.accordion-item h3 { margin: 0; }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  color: var(--charcoal);
}

.accordion-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform 0.3s var(--ease);
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  background: var(--steel);
  border-radius: 2px;
}

.accordion-icon::before {
  left: 0; top: 50%;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}

.accordion-icon::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(45deg);
}

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s var(--ease);
}

.accordion-panel.is-open { grid-template-rows: 1fr; }

.accordion-panel__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.accordion-panel.is-open .accordion-panel__inner {
  opacity: 1;
  transition: opacity 0.35s var(--ease) 0.05s;
}

.accordion-panel__inner p {
  padding: 0 28px 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--offwhite-muted);
}

/* ==========================================================================
   FINAL CTA + CALENDLY
   ========================================================================== */

.final-cta {
  padding-block: clamp(56px, 8vw, 104px);
  text-align: center;
}

.final-cta__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: min(92vw, 940px);
  margin-inline: auto;
}

.final-cta__sub {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: rgba(243, 241, 236, 0.85);
  max-width: 68ch;
  margin: 20px auto 0;
}

.calendly-frame {
  max-width: 1080px;
  margin: clamp(36px, 5vw, 48px) auto 0;
  background: var(--offwhite);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

.calendly-frame iframe {
  width: 100%;
  height: 700px;
  border: 0;
}

.final-cta__or {
  margin-top: 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 241, 236, 0.45);
}

.final-cta__dm { margin-top: 16px; }

.copyright {
  margin-top: clamp(48px, 6vw, 72px);
  font-size: 13px;
  color: rgba(243, 241, 236, 0.45);
}

/* ==========================================================================
   MEDIA PROTECTION
   ========================================================================== */

.protected-media,
.protected-media img,
.protected-media video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

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

@media (max-width: 900px) {
  .feature-testimonial {
    grid-template-columns: 1fr;
  }
  .feature-testimonial--reverse { direction: ltr; }
  .feature-testimonial__media { order: -1; }

  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; margin-bottom: 32px; }

  .problem-grid { grid-template-columns: repeat(2, 1fr); }

  /* Carousel: exactly one full-width, centered card, no peeking neighbour.
     The mask-fade above exists to soften a partially-visible neighbour card
     — with .testimonial-card now filling the whole viewport width (see the
     base rule above) there is no neighbour left to soften, so the mask is
     turned off rather than fading the active card's own edges. This also
     removes a real perf cost: masking a moving descendant is one of the
     more expensive things to composite on mobile Safari. */
  .testimonial-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .testimonial-track.is-animating { transition: transform 260ms var(--ease-hover); }

  /* Video-as-header: the media block bleeds to the card's own edges
     (padding moved off the card and onto the text/social elements below
     it instead) and picks up the card's rounded top corners for free via
     the card's own overflow:hidden clip, rather than rounding the video
     itself — its bottom edge is the natural separator, no divider needed. */
  .testimonial-card {
    padding: 0 0 26px;
    overflow: hidden;
  }
  .testimonial-card__media { margin: 0 0 18px; border-radius: 0; }
  .testimonial-card__quote,
  .testimonial-card__name,
  .testimonial-card__role,
  .testimonial-card .social-row {
    padding-inline: 24px;
  }
  .testimonial-card .social-row { margin-top: 20px; }
  .testimonial-card__name { margin-top: 18px; }

  /* backdrop-filter is one of the more expensive properties to composite on
     mobile Safari, particularly while an ancestor (e.g. a card mid-slide)
     is moving. The button's own translucent fill still gives it enough
     contrast against the video without the blur. */
  .play-btn { backdrop-filter: none; }

  /* FAQ: grid-template-rows 0fr->1fr (see .accordion-panel above) re-runs
     grid track sizing on every animation frame, which is layout work, not a
     cheap composited one — costly enough on slower mobile Safari to read as
     dropped frames. A fixed max-height avoids the grid algorithm entirely
     (plain box-constraint interpolation instead) while still reading as the
     same expand/collapse, with no JS height measurement needed. Sized to
     current answer lengths with modest headroom rather than something huge:
     a cap much taller than the actual content would make the box finish
     revealing well before the transition's declared duration is up (height
     can't exceed content height, however high the cap goes), which reads as
     a snap instead of a smooth expansion. If an answer is edited to run
     noticeably longer than today's, this cap should grow to match. */
  .accordion-panel {
    display: block;
    max-height: 0;
    transition: max-height 0.3s var(--ease);
  }
  .accordion-panel.is-open { max-height: 220px; }
}

@media (max-width: 560px) {
  .problem-grid { grid-template-columns: 1fr; }
  .trusted-divider { gap: 12px; }
  .about-plate {
    left: 0;
    bottom: -18px;
    max-width: calc(100% - 32px);
  }
  .calendly-frame iframe { height: 640px; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}