/* ============================================
   hero-services — Figma mobile 4:187 (DRAWN @390, bg = wrapper 4:176 fill); desktop INVENTED
   (mobile-only-mode.md). Slice: brief/hero-services.md.
   Pattern B-edge: .container.container--bleed on the section, padding on __content.
   Bg layer = header + hero (extended up by var(--header-h)); the header paints none (D-HS1).
   NO stacking context on the section (no isolation / z-index): the stuck CTA is position:fixed
   and must compete in the ROOT stacking context with var(--z-sticky-cta), not be trapped under
   later positioned sections. The bg therefore sits at z-index -1 in the root context.
============================================ */

.hero-services {
  /* Fluid spacing — slice §2 (mobile DRAWN; 768–1023 pseudo-tablet; 1024+ INVENTED) */
  --hs-pt:  clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 40px);
  --hs-pb:  clamp(41px, calc(50px + (var(--max-vw) - 390px) * 0.015), 100px);
  --hs-gap: clamp(26px, calc(32px + (var(--max-vw) - 390px) * 0.015), 48px);   /* back link → column */
  --hs-col-gap: clamp(16px, calc(20px + (var(--max-vw) - 390px) * 0.015), 30px); /* title · lead · CTA */
  --hs-min-h: clamp(620px, calc(756px + (var(--max-vw) - 390px) * 0.015), 820px); /* 756 @390 (820 − 64) */

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--hs-min-h);
  color: var(--color-white);
}

/* ---------- Background (4:176 fill 1d6b92fd — the only visible fill, D-HS2/D-HS3) ---------- */
.hero-services__bg {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--header-h));
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: var(--color-black);
  pointer-events: none;
}

.hero-services__stage {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(100%, 1015px);          /* 1015 = 883 × 1.15 — never upscaled past 1.15x (D4) */
}

.hero-services__photo {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;                        /* natural aspect, height-driven (D-HS3) */
  /* QA BUG-001: on wide phones keep filling the width while the source allows it — up to 484 = 421 × 1.15
     (the slice's own upscale cap); cover crops the top/bottom a little, anchored right-bottom like the drawn crop */
  min-width: min(100%, 484px);
  max-width: none;
  object-fit: cover;
  object-position: 100% 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 clamp(0px, calc((100vw - 484px) * 0.4), 35%));
          mask-image: linear-gradient(to right, transparent 0, #000 clamp(0px, calc((100vw - 484px) * 0.4), 35%));
}

/* ---------- Content (4:187: padding 20/20/50/20, gap 32, top-aligned) ---------- */
.hero-services__content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hs-gap);
  padding-top: var(--hs-pt);
  padding-bottom: var(--hs-pb);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Back link (4:188 / 4:189 / 4:190) ---------- */
.hero-services__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: 10px;
  padding: 7px 0 5px;                 /* Figma 7/0/7/0 with the 2px stroke INSIDE (D-HS10) */
  border-bottom: 2px solid var(--color-white);
  color: var(--color-white);
  cursor: pointer;
  transition: opacity 0.2s;
}

.hero-services__back:hover { opacity: 0.7; }
.hero-services__back:active { opacity: 0.55; }
.hero-services__back:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.hero-services__back-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transform: scaleX(-1);              /* exported ↗ → drawn ↖ (D-HS8, icon_check TRANSFORM) */
}

.hero-services__back-icon img {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -0.2px;
  left: -0.69px;
  width: auto;                        /* the SVG's own 15.69 x 15.20 (stroke overhang) */
  height: auto;
  max-width: none;
}

.hero-services__back-label {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-link-label);
  line-height: var(--lh-link-label);
  letter-spacing: var(--ls-body);
  color: var(--color-white);
  white-space: nowrap;
}

/* ---------- Column (4:191: vertical, gap 20, children fill) ---------- */
.hero-services__col {
  display: flex;
  flex-direction: column;
  gap: var(--hs-col-gap);
  width: 100%;
}

.hero-services__title {               /* 4:192 — display-serif */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-display-serif);
  line-height: var(--lh-display-serif);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-white);
}

.hero-services__lead {                /* 4:194 — Mobile/Text/lead */
  font-family: var(--font-body);
  font-weight: 200;
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  color: var(--color-white);
  /* No balance below 768: the mobile frames break the lead greedily, as plain
     text does — balance moved "your budget" / "it and share" to line two. */
}

/* ---------- CTA "message us" (4:195) + sticky slot (BA-STICKY-1 / BA-HS2) ---------- */
.hero-services__cta-slot {
  display: block;
  width: 100%;
  height: 48px;                       /* holds the CTA's place while it is stuck — no layout shift */
}

.hero-services__cta {
  display: flex;
  justify-content: center;
  align-items: flex-end;              /* Figma alignItems MAX — label bottom-aligned */
  gap: 4px;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  background: var(--color-white);
  color: var(--color-ink);
  overflow: visible;                  /* the 49.28 label pokes 1.3px above the 48 bar, as drawn */
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s, visibility 0s;
}

.hero-services__cta:hover { background: #EDEDED; }
.hero-services__cta:active { background: #DADADA; }
.hero-services__cta:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

.hero-services__cta-label {           /* I4:195;1860:5452 — cta-display (56, held) */
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-cta-display);
  line-height: var(--lh-cta-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Stuck: the slot has scrolled above the viewport → fixed to the viewport bottom, ink variant (master 4:4) */
.hero-services__cta.is-stuck {
  position: fixed;
  z-index: var(--z-sticky-cta);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  left: var(--gutter);
  right: var(--gutter);
  width: auto;
  background: var(--color-ink);
  color: var(--color-white);
  animation: hero-services-cta-in 0.2s ease-out;
}

.hero-services__cta.is-stuck:hover,
.hero-services__cta.is-stuck:active { background: var(--color-black); }
.hero-services__cta.is-stuck:focus-visible { outline-color: var(--color-ink); }

/* Hidden while #contact (the real buttons) or anything after it is on screen */
.hero-services__cta.is-stuck.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s, visibility 0s 0.2s;
}

@keyframes hero-services-cta-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- PSEUDO-TABLET 768–1023 (no tablet layer; desktop-compressed) ---------- */
@media (min-width: 768px) {
  .hero-services {
    --hs-pt:  clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 40px);
    --hs-pb:  clamp(55.66px, calc(55.66px + (var(--max-vw) - 768px) * 0.025), 100px);
    --hs-gap: clamp(37.66px, calc(37.66px + (var(--max-vw) - 768px) * 0.025), 48px);
    --hs-col-gap: clamp(25.66px, calc(25.66px + (var(--max-vw) - 768px) * 0.025), 30px);
    --hs-min-h: clamp(761.66px, calc(761.66px + (var(--max-vw) - 768px) * 0.025), 820px);
  }

  .hero-services__title { max-width: 7.3em; }   /* always two lines: CONVERT MORE. / RETAIN LONGER. (D-HS4) */
  .hero-services__lead  { max-width: 30em; text-wrap: balance; }

  /* The slot stays a full-width 48 row (a non-zero box for the observer while the CTA is out of flow);
     the CTA inside is fit-content, left — 305x48, never the 350 bar stretched (D-HS6, D2/M2). */
  .hero-services__cta { width: fit-content; }

  .hero-services__cta.is-stuck {
    left: auto;
    right: max(var(--gutter), calc((100vw - 1920px) / 2 + var(--gutter)));
    width: fit-content;               /* bottom-RIGHT of the content frame (BA-HS2) */
  }
}

/* ---------- DESKTOP 1024+ (INVENTED, --vw-base 1440) ---------- */
@media (min-width: 1024px) {
  .hero-services {
    --hs-pt:  clamp(28px, calc(40px * (var(--max-vw) / var(--vw-base))), 53px);
    --hs-pb:  clamp(71px, calc(100px * (var(--max-vw) / var(--vw-base))), 133px);
    --hs-gap: clamp(34px, calc(48px * (var(--max-vw) / var(--vw-base))), 64px);
    --hs-col-gap: clamp(21px, calc(30px * (var(--max-vw) / var(--vw-base))), 40px);
    --hs-min-h: clamp(768px, calc(820px * (var(--max-vw) / var(--vw-base))), 1093px);  /* floor 768 = T-1023 (D-HS5) */
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-services__back,
  .hero-services__cta,
  .hero-services__cta.is-stuck.is-hidden { transition: none; }
  .hero-services__cta.is-stuck { animation: none; }
}

/* ---------- LIGHT variant — Performance Marketing (4:411), DTC Brand Launch (4:570) ----------
   Same section, light photo: ink text, ink back link, ink CTA (like the stuck one).
   Where the photo ends on wide screens the stage shows the photo's own left-edge
   colour instead of black: set per page as --hs-stage-bg on the section.
   Used with .header--light on the header. */
.hero-services--light { color: var(--color-ink); }

.hero-services--light .hero-services__bg { background: var(--hs-stage-bg, #E8E8E8); }

/* --veil: the Performance 4:412 overlay — white 20% at the top fading out by
   63.335% of the frame. */
.hero-services--veil .hero-services__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 63.335%);
}

.hero-services--light .hero-services__title,
.hero-services--light .hero-services__lead,
.hero-services--light .hero-services__back,
.hero-services--light .hero-services__back-label { color: var(--color-ink); }

.hero-services--light .hero-services__back { border-bottom-color: var(--color-ink); }

.hero-services--light .hero-services__back:focus-visible,
.hero-services--light .hero-services__cta:focus-visible { outline-color: var(--color-ink); }

.hero-services--light .hero-services__cta {
  background: var(--color-ink);
  color: var(--color-white);
}
.hero-services--light .hero-services__cta:hover,
.hero-services--light .hero-services__cta:active { background: var(--color-black); }