/* ============================================================
   SERVICES PAGE
   Depends on css/styles.css for tokens, nav, buttons, footer.
============================================================ */

/* Nav sits on a dark hero from the first pixel */
.nav-solid {
  background: rgba(13, 24, 32, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── HERO ──────────────────────────────────────────────────── */
#svc-hero {
  background: var(--navy);
  padding: 11rem 0 6.5rem;
  position: relative;
  overflow: hidden;
}
.svc-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246,246,227,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,246,227,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
#svc-hero::after {
  content: '';
  position: absolute;
  width: 620px;
  height: 620px;
  top: -180px;
  right: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(207,57,23,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.svc-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

/* Decorative target — background only, never competes with the text */
.svc-hero-target {
  position: absolute;
  top: 49%;
  right: 4.5%;
  transform: translateY(-50%);
  width: clamp(300px, 34vw, 480px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
  opacity: 0.13;
}
.svc-hero-target svg {
  width: 100%;
  height: 100%;
  display: block;
}
.svc-hero-title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.18;
  color: var(--cream);
  margin-bottom: 1.75rem;
}
.svc-hero-title .accent { color: var(--red); }
/* extra line break used only on tablet portrait (see media query below) */
.br-tablet { display: none; }

.svc-hero-actions {
  display: flex;
  gap: 0.875rem;
  flex-wrap: wrap;
}

/* Narrow desktop: text column and target compete for width, so drop it lower */
@media (min-width: 901px) and (max-width: 1150px) {
  .svc-hero-target {
    top: auto;
    bottom: -22%;
    right: 2%;
    transform: none;
    width: clamp(260px, 30vw, 340px);
    opacity: 0.11;
  }
}

/* ── SHARED SECTION HEADER ─────────────────────────────────── */
#process .section-header,
#svc-fit .section-header,
#svc-proof .section-header {
  max-width: 760px;
  margin-bottom: 3.5rem;
}
.section-intro {
  font-size: 0.98rem;
  line-height: 1.9;
  color: rgba(21,35,47,0.62);
  margin-top: 1.5rem;
  max-width: 660px;
}
.section-title .accent { color: var(--red); }

/* ── THE THREE BLOCKS ──────────────────────────────────────── */
#process {
  background: var(--mint);
  padding: 7rem 0;
  border-top: 2px solid var(--teal);
}

/* Intro copy beside the quill animation */
.framework-intro {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 3rem;
  align-items: stretch;
}
#process .framework-intro .section-header { margin-bottom: 0; }
.framework-visual {
  display: flex;
  /* bottom-aligned so the quill's target sits level with the last line of copy */
  align-items: flex-end;
  justify-content: center;
  min-height: 100%;
}
.quill-video {
  width: 100%;
  max-width: 230px;
  height: auto;
  display: block;
  background: transparent;
}

.blocks {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}
.block {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 3.5rem;
  padding: 3.25rem 0;
  border-top: 1px solid rgba(21,35,47,0.1);
  scroll-margin-top: 6rem;
}
.block:last-child { border-bottom: 1px solid rgba(21,35,47,0.1); }

.block-head { position: relative; }

/* Bird icon above the label. Same 68px bottom-aligned box as the homepage
   cards, so the three shapes sit on one baseline at a matching optical size.
   Colour follows each block's top border (icons are drawn in currentColor). */
.block-icon {
  height: 68px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  color: var(--red);
}
.block-icon svg { display: block; overflow: visible; }
.block:nth-child(2) .block-icon { color: #1D443D; }
.block:nth-child(3) .block-icon { color: #483B0E; }
.block-label {
  display: block;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
}
.block:nth-child(2) .block-label { color: var(--teal); }
.block:nth-child(3) .block-label { color: #C9A21B; }

.block-title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy);
}

.block-body { max-width: 660px; }
.block-body p {
  font-size: 0.98rem;
  line-height: 1.9;
  color: rgba(21,35,47,0.68);
  margin-bottom: 1.25rem;
}

.block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 1.75rem 0 0;
  list-style: none;
  padding: 0;
}
.block-list li {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(21,35,47,0.18);
  border-radius: 100px;
  color: var(--navy);
  transition: background var(--t), color var(--t), border-color var(--t);
  cursor: default;
}
.block-list li:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.block-outcome {
  font-size: 0.95rem !important;
  line-height: 1.85 !important;
  color: rgba(21,35,47,0.72) !important;
  padding-left: 1.25rem;
  border-left: 3px solid var(--teal);
  margin-bottom: 0 !important;
}
.block-outcome-label {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 0.5rem;
}

/* ── Desktop: the three blocks behave like stacked pages ──────────
   Each block is a sticky panel pinned to the same offset. As you scroll,
   the next one rises from the bottom and covers the one before it. After
   the third, the page continues normally. Touch devices and short
   viewports keep the plain stacked layout.                              */
@media (min-width: 901px) and (min-height: 560px) and (hover: hover) {
  .blocks {
    margin-top: 4rem;
    /* room for three scroll "pages" plus the pinned panel itself */
    padding-bottom: 2rem;
  }
  .block {
    position: sticky;
    top: 7.5rem;
    min-height: 21rem;
    align-content: start;
    padding: 3rem 3rem 3.25rem;
    background: var(--mint);
    border: 1px solid rgba(21,35,47,0.12);
    border-top: 3px solid var(--red);
    box-shadow: 0 -18px 44px rgba(21,35,47,0.10);
    /* Panels sit directly on top of one another — no gap, no negative pull.
       A negative margin here makes the last panel unpin early and lift to
       reveal the ones underneath, by exactly the amount of the margin. */
    margin-bottom: 0;
  }
  /* explicit paint order so each panel fully hides the one before it */
  .block:nth-child(1) { z-index: 1; }
  .block:nth-child(2) { z-index: 2; }
  .block:nth-child(3) { z-index: 3; }
  .block:nth-child(2) { border-top-color: var(--teal); }
  .block:nth-child(3) { border-top-color: #C9A21B; }
  .block:last-child {
    border-bottom: 1px solid rgba(21,35,47,0.12);
    margin-bottom: 0;
  }
  /* Trailing space inside the container. Without it the container ends the
     moment panel 3 arrives, so all three unpin at once instead of panel 3
     sliding over the others. */
  /* A short beat after panel 3 lands, before the section releases. */
  .blocks::after {
    content: '';
    display: block;
    height: 6rem;
    flex: none;
  }
}

/* ── ONGOING SUPPORT / RETAINER ────────────────────────────── */
#svc-retainer {
  background: var(--navy);
  padding: 5.5rem 0;
}
.retainer-inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 4rem;
  align-items: center;
}
.retainer-title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--cream);
  margin-bottom: 1.25rem;
}
.retainer-title .accent { color: var(--red); }
.retainer-body {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--on-dark-dim);
  margin-bottom: 1.25rem;
}
.retainer-lists {
  padding-left: 2.5rem;
  border-left: 1px solid rgba(246,246,227,0.12);
  display: flex;
  flex-direction: column;
  /* the empty line between the two groups of three */
  gap: 2.25rem;
}
.retainer-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
}
.retainer-list li {
  position: relative;
  padding-left: 1.25rem;
  font-family: 'Unbounded', sans-serif;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(246,246,227,0.75);
}
.retainer-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 9px;
  height: 1px;
  background: var(--teal);
}

/* ── WHO IT'S FOR ──────────────────────────────────────────── */
#svc-fit {
  background: var(--cream);
  padding: 6.5rem 0;
}
#svc-fit .section-header { margin-bottom: 3rem; }
.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}
.fit-card {
  background: #fff;
  border: 1px solid rgba(21,35,47,0.08);
  border-top: 3px solid var(--yellow);
  padding: 2.25rem 1.75rem;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.fit-card:nth-child(2) { border-top-color: var(--teal); }
.fit-card:nth-child(3) { border-top-color: var(--red); }
.fit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(21,35,47,0.08);
}
/* Small drawn icon above each title, sitting on a shared baseline */
.fit-icon {
  display: block;
  height: 64px;
  width: auto;
  margin-bottom: 1.25rem;
}
.fit-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--navy);
  margin-bottom: 0.875rem;
}
.fit-body {
  font-size: 0.92rem;
  line-height: 1.85;
  color: rgba(21,35,47,0.65);
}
/* ── TESTIMONIALS ──────────────────────────────────────────── */
#svc-proof {
  background: var(--mint);
  padding: 6.5rem 0;
  border-top: 1px solid rgba(21,35,47,0.08);
}
/* no heading in this section — the cards speak for themselves */
#svc-proof .proof-grid { margin-top: 0; }
.proof-grid {
  display: grid;
  /* Rob narrower, Ashley wider: at this ratio the two quotes wrap to
     almost the same height, so neither card has an empty gap */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 1.75rem;
  /* stretch: cards in the same row share one height */
  align-items: stretch;
}
.proof-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(21,35,47,0.08);
  border-top: 3px solid var(--teal);
  padding: 3.25rem 2.25rem 2.25rem;
  margin: 0;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.proof-card--lead { border-top-color: var(--red); }
.proof-card--teal { border-top-color: var(--teal); }
.proof-card--yellow { border-top-color: var(--yellow); }

/* Row 1: Rob (narrow) and Ashley (wide) side by side, names level.
   Row 2: DJ runs the full width under both. */
.proof-card--wide { grid-column: 1 / -1; }
.proof-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(21,35,47,0.09);
}
/* oversized quote mark */
.proof-card::before {
  content: '\201C';
  position: absolute;
  top: 0.45rem;
  left: 1.75rem;
  font-family: 'Unbounded', sans-serif;
  font-size: 3.75rem;
  line-height: 1;
  color: rgba(207,57,23,0.18);
  pointer-events: none;
}

.proof-quote {
  margin: 0 0 2rem;
  flex: 1;
}
.proof-quote p {
  font-size: 0.98rem;
  line-height: 1.9;
  color: rgba(21,35,47,0.75);
  margin-bottom: 1rem;
}
.proof-quote p:last-child { margin-bottom: 0; }
.proof-card--lead .proof-quote p { font-size: 1.02rem; }

.proof-author {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(21,35,47,0.09);
}
.proof-avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--navy);
}
.proof-meta { display: flex; flex-direction: column; gap: 0.15rem; }
.proof-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
}
.proof-role {
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(21,35,47,0.6);
}
/* ── CTA ───────────────────────────────────────────────────── */
#svc-cta {
  background: var(--red);
  padding: 7rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#svc-cta::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
  pointer-events: none;
}
#svc-cta .cta-inner { position: relative; z-index: 2; }
#svc-cta .cta-headline {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 1.25rem;
}
#svc-cta .cta-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
  max-width: 480px;
  margin: 0 auto 2.5rem;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .fit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #svc-hero { padding: 9rem 0 5rem; }
  .svc-hero-target {
    top: auto;
    bottom: -24%;
    right: -22%;
    transform: none;
    width: clamp(260px, 44vw, 340px);
    opacity: 0.09;
  }
  #process,
  #svc-retainer,
  #svc-fit,
  #svc-proof,
  #svc-cta { padding: 4.5rem 0; }
  #process .section-header,
  #svc-fit .section-header,
  #svc-proof .section-header { margin-bottom: 2.5rem; }
  .proof-grid { grid-template-columns: 1fr; }
  .block {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2.75rem 0;
  }
  .block-icon { height: 60px; margin-bottom: 1.25rem; }
  .framework-intro {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .framework-visual { justify-content: flex-start; }
  .quill-video { max-width: 240px; }
  .blocks { margin-top: 3rem; }
  .retainer-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* stacked: no divider lines, just space between the copy and the two groups */
  .retainer-lists {
    padding-left: 0;
    border-left: none;
    gap: 2.5rem;
  }
}

/* Tablet portrait: keep the quill small and beside the intro text,
   level with its last line, instead of stacked below it */
@media (min-width: 601px) and (max-width: 900px) {
  .framework-intro {
    grid-template-columns: 1fr 140px;
    gap: 2rem;
  }
  .framework-visual { justify-content: flex-end; }
  .quill-video { max-width: 140px; }
  /* hero title reads: Land your message / with the people / who need to say yes. */
  .br-tablet { display: inline; }
}

@media (max-width: 600px) {
  #svc-hero { padding: 8rem 0 4rem; }
  .svc-hero-target {
    top: auto;
    bottom: -12%;
    right: -30%;
    transform: none;
    width: 300px;
    opacity: 0.07;
  }
  .svc-hero-title { font-size: 1.65rem; line-height: 1.3; }
  /* phones: no quill animation, the intro text stands on its own */
  .framework-visual { display: none; }
  .svc-hero-actions .btn { width: 100%; text-align: center; }
  .block-body p,
  .block-outcome { font-size: 0.92rem !important; }
  .proof-card { padding: 3rem 1.5rem 2rem; }
  .proof-quote p,
  .proof-card--lead .proof-quote p { font-size: 0.92rem; }
  .proof-card::before { left: 1.25rem; font-size: 3rem; }
}