/* ==========================================================================
   CTA — "Scaling your business starts here"
   Figma: Home Page (1920) — section box y 12943→13615, content 13048→13487.61.
          Mobile Home (402) — section box y 8943→9342, content 8994→9252.
   Every rule is scoped under .section--cta. Shared tokens and components
   (.container, .display, .h1, .body, .btn--outline, .rule) come from
   css/base.css and are only tuned here, never redefined.
   ========================================================================== */

.section--cta {
  /* Top: (13048 − blog bottom 12839) / 2 = 104.5.
     Bottom: (footer top 13744 − pill bottom 13487.61) / 2 = 128.2. */
  --cta-pad-top: 105px;
  --cta-pad-bottom: 128px;
  padding: var(--cta-pad-top) 0 var(--cta-pad-bottom);
  text-align: center;
}

/* Everything is centred on the frame: rule 892→1017, heading 432→1479,
   paragraph 676→1235, pill 679→1233. A flex column keeps each block at its
   own Figma width while centring it. */
.section--cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Line 60: 125 × 2px green, y 13048 */
.section--cta .section--cta__rule {
  width: 125px;
  border-top-width: 2px;
  margin: 0 0 76px;                 /* rule bottom 13050 → heading 13126 */
}

/* Heading: 80px / 1.01, 1047 wide → 2 lines (h 162). The width is in em (1047 / 80) so it shrinks with
   the fluid h1 size and every heading keeps its 1920 line breaks on laptops (at a fixed 1047px the
   3-line SMA heading re-wrapped to "…SCROLL INTO / MEASURABLE / GROWTH" at 1440). */
.section--cta__title {
  max-width: 13.0875em;
  margin: 0 0 38px;                 /* heading bottom 13287.6 → paragraph 13326 */
  line-height: 1.01;
}

/* Paragraph: 20px / 1.24, 559 wide → 1 line (h 25) */
.section--cta__lede {
  max-width: 559px;
  margin: 0 0 61px;                 /* paragraph bottom 13350.8 → pill 13412 */
}

/* variant "service" — Figma "Social Media Advertising" 4506:165 Group 138, y 10118→10678. Same rule,
   heading size, paragraph width and pill; the heading runs to 3 lines (box 1139 wide, but it wraps the
   same way inside 1047) and the paragraph to 2, with slightly looser gaps:
     heading 10196 + 242.4 → paragraph 10483 = 45 · paragraph bottom 10533 → pill 10602 = 69.
   Section spacing: 350 above (comparison last rule 9768 → 10118) and 290 below (pill bottom 10678 →
   FAQ eyebrow 10968), split half each side. */
.section--cta--service {
  --cta-pad-top: min(9.115vw, 175px);
  --cta-pad-bottom: min(7.552vw, 145px);
}
.section--cta--service .section--cta__title { margin-bottom: 45px; }
.section--cta--service .section--cta__lede  { margin-bottom: 69px; }

/* Optional fields (all default off, so the homepage and SMA are unchanged):
   title_lines — each design line on its own row (Paid Search "TURN ACTIVE / SEARCHES INTO REAL /
   OPPORTUNITIES", Organic "BUILD A PROFILE / WORTH FOLLOWING", Graphic "BUILD A BRAND / WORTH REMEMBERING").
   A line still wraps inside the em-based max-width if a narrower laptop ever needs it. */
.section--cta__line { display: block; }
/* intro_wide — the 599px paragraph box of the Media Buying 4684:861, Content Writing 5183:1051, Web 4825:607
   and Graphic 4696:1161 frames (their 2-line wraps need the extra 40px) */
.section--cta--wide-intro .section--cta__lede { max-width: 599px; }
/* hide_rule — Photography gallery 5058:12: the title is the first element (y2903, no Line 58) */

/* Pill (Group 101: 554 × 75.61, 3px inside stroke, r50, 36px text) — height,
   stroke, radius, padding and type come from .btn--outline; the 554px width,
   19px gaps and 41px logomark from the shared .btn--outline-lg (css/base.css),
   which the hero pill uses too, so the two cannot drift apart. */

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .section--cta .btn--outline { min-width: 0; }   /* let the pill shrink to its text on narrow tablets */
}

/* ---- Mobile (Figma "Mobile Home", 402 wide) --------------------------------- */
@media (max-width: 640px) {
  .section--cta {
    --cta-pad-top: 51px;            /* (8994 − blog bottom 8892) / 2 */
    --cta-pad-bottom: 90px;         /* (footer top 9433 − paragraph bottom 9252) / 2 = 90.5 */
  }

  /* Line 60: 81 × 2px, y 8994 */
  .section--cta .section--cta__rule {
    width: 81px;
    margin-bottom: 46px;            /* rule bottom 8996 → heading 9042 */
  }

  /* Heading: 46px / 0.95, 362 wide → 3 lines (h 132) */
  .section--cta__title {
    max-width: 362px;
    margin-bottom: 29px;            /* heading bottom 9173.1 → paragraph 9202 */
    font-size: 46px;
    line-height: 0.95;
  }

  /* Paragraph: 263 wide → 2 lines (h 50); it is the last node on mobile */
  .section--cta__lede {
    max-width: 263px;
    margin-bottom: 0;
  }

  /* Client req #14 + follow-up: the CTA pill was missing on mobile — show it, but size it to the phone
     (its full-desktop text/logo overflowed "Book a Discovery Call" past 375px) and set it clear of the
     paragraph above (the lede's margin-bottom is 0, so without this the pill sat right on the text). */
  .section--cta .btn--outline {
    display: inline-flex;
    margin-top: 40px;
    padding: 0 22px;
    gap: 6px;
    font-size: 20px;
  }
  .section--cta .btn--outline img { width: 27px; height: 27px; }

  /* variant "service" — "Mobile Category" 4148:2776: rule 7461, heading 7509, paragraph 7669 (the same
     rhythm as Mobile Home; that frame still carries the homepage copy), no pill.
     Above: (7461 − comparison last rule 7351) / 2 = 55 · below: (FAQ eyebrow 7925 − paragraph bottom 7719) / 2 = 103 */
  .section--cta--service {
    --cta-pad-top: 55px;
    --cta-pad-bottom: 103px;
  }
  .section--cta--service .section--cta__title { margin-bottom: 29px; }
  .section--cta--service .section--cta__lede  { margin-bottom: 0; }

  /* title_lines flow as one sentence in the 362px mobile heading (no forced desktop breaks) */
  .section--cta__line { display: inline; }
  /* A word longer than the 362px box (Paid Search "OPPORTUNITIES" = 372px at 46px) widens the box instead of
     spilling out of its right side: the heading stays centred, reaching into the gutters (at 375: x1.5→373.5,
     no page overflow). No effect on shorter words (home/SMA ≤ 322px). */
  .section--cta__title { min-width: min-content; }
  /* intro_wide: the mobile paragraph keeps the Mobile Category 263px measure */
  .section--cta--wide-intro .section--cta__lede { max-width: 263px; }
}

/* Below the iPhone-SE width (375), min-content can still push the longest single word past the viewport
   (Paid Search "OPPORTUNITIES" = 372px at 46px > 360). Shrink the heading just enough to fit; never applies
   at 375+, so the mobile baseline (home/SMA at 402) and every iPhone width are untouched. */
@media (max-width: 374px) {
  .section--cta__title { font-size: min(46px, 12.2vw); }
}

/* 29 Sep Figma, pages whose closing CTA has no rule: the gap above it is measured per page —
   About (after Why choose) 148 more, the case study 72 more, Work unchanged. */
.section--comparison + .section--cta--no-rule { --cta-pad-top: min(13.02vw, 253px); }
.section--case-study + .section--cta--no-rule { --cta-pad-top: min(9.22vw, 177px); }
@media (max-width: 640px) {
  .section--comparison + .section--cta--no-rule, .section--case-study + .section--cta--no-rule { --cta-pad-top: 55px; }
}