/* The Marketing Cartel · hero · PHONE base (E04, mobile-first) + page chrome shared by every width. The desktop hero
   (storyboard stage, navbar lockup, proof strip) is hero.desktop.css (≥1024px). */

/* ---------- page chrome ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-nav) + 10);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  font: var(--w-ui) var(--text-sm) / 1 var(--font-sans);
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }
.anchor-top { position: absolute; top: 0; }


/* ---------- phone (<1024px): the hero designed for the thumb (E04, SPEC §4 Hero · Proof) ----------
   First screen: badge · H1 · lead · the CTA (full column) · "See the results" as a link — all above the fold on a
   360×640 Galaxy and a 414×715 iPhone 11 after the browser's bars. The phone peeks at the fold edge; scrolling
   straightens it and brings its three tags in (scroll-driven where supported, an observer class otherwise, static
   under reduced motion). No pin, no laptop, no marquee (the proof strip lists the same clients two screens later). */
@media (max-width: 1023.98px) {
  .hero { position: relative; isolation: isolate; }
  .hero__stage { position: relative; display: flex; flex-direction: column; align-items: center; overflow: clip; isolation: isolate; }
  .hero__blinds { position: absolute; inset: 0 0 auto 0; height: 100svh; z-index: -1; }
  .hero__marquee, .hero__laptop { display: none; }

  .hero__copy {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%;
    /* the copy block fills the screen minus the phone's peek, so the phone always starts at the fold edge */
    min-height: calc(100svh - var(--peek));
    padding: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + var(--space-5)) var(--gutter) var(--space-7);
    text-align: center;
    --peek: clamp(84px, 13svh, 120px);
  }
  .hero__badge { margin-bottom: var(--space-5); font-size: var(--text-xs); }
  .hero__title {
    max-width: 22ch;
    font-size: var(--text-display);
    font-weight: var(--w-display);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
    text-wrap: balance;
  }
  .hero__title em.acc { letter-spacing: -.02em; }
  .hero__lead { max-width: 34rem; margin-top: var(--space-4); font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); text-wrap: pretty; }
  .hero__ctas { display: grid; justify-items: center; gap: var(--space-1); width: 100%; max-width: 26rem; margin-top: var(--space-6); }
  .hero__ctas .btn--primary { width: 100%; justify-content: center; }
  /* "See the results": a quiet text link with the arrow, 44px tall */
  .hero__ctas .btn--ghost { --btn-h: 44px; background: none; box-shadow: none; padding-inline: var(--space-3); color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--fg) 30%, transparent); text-underline-offset: 5px; }
  .hero__ctas .btn--ghost::before, .hero__ctas .btn--ghost::after { display: none; }

  /* the device moment */
  .hero__devices { position: relative; width: 100%; padding: 0 var(--gutter) var(--space-9); }
  .hero__device-wrap {
    position: relative;
    width: min(58vw, 250px);
    margin-inline: auto;
    perspective: 900px;
    view-timeline: --phone block;
  }
  .hero__tilt { position: relative; transform-origin: 50% 0; }
  /* the phone is the shared CSS frame (components.css §8); here it keeps the phone hero's own proportions (E04: every
     section below sits where it did) and gets the deep device shadow */
  .hero__devices .device--phone { aspect-ratio: 71.5 / 147; box-shadow: var(--device-rim), var(--shadow-device); }

  .hero__tags { position: absolute; inset: 0; z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  /* solid on the phone: frost over the screen's own text read as clutter (and a solid layer is cheaper to paint) */
  .hero__tags .tag { position: absolute; padding: 6px 12px 6px 6px; gap: 8px; background: var(--bg-raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3); }
  .hero__tags .tag__icon { width: 28px; height: 28px; border-radius: 9px; }
  .hero__tags .tag__value { font-size: 1rem; }
  .hero__tags .tag__label { font-size: .75rem; }
  /* around the phone: the laptop's promises (Responsive · SEO ready · Converts), not the performance figures
     (Arthur 29/09). The performance tags stay on the desktop's storyboard. */
  .hero__tags--phone { display: none; }

  /* each tag may use the room between the phone and the screen edge, and wraps inside it (text at 200%) */
  .hero__device-wrap { --w: min(58vw, 250px); --side: calc((100vw - var(--w)) / 2); }
  .hero__tags--laptop .tag { white-space: normal; width: max-content; }   /* its own width, capped below — not the 36% of the phone left of it */
  .hero__tags--laptop .tag:nth-child(1) { max-width: calc(var(--side) + var(--w) * .38 - 10px); }
  .hero__tags--laptop .tag:nth-child(2) { max-width: calc(var(--side) + var(--w) * .36 - 10px); }
  .hero__tags--laptop .tag:nth-child(3) { max-width: calc(var(--side) + var(--w) * .42 - 10px); }
  .hero__tags--laptop .tag:nth-child(1) { top: 16%; right: 62%; }
  .hero__tags--laptop .tag:nth-child(2) { top: 44%; left: 64%; }
  .hero__tags--laptop .tag:nth-child(3) { top: 72%; right: 58%; }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .hero__tilt { animation: phone-rise linear both; animation-timeline: --phone; animation-range: entry 0% cover 42%; }
      .hero__tags .tag { animation: tag-in linear both; animation-timeline: --phone; animation-range: cover calc(18% + var(--i) * 7%) cover calc(34% + var(--i) * 7%); }
    }
    @supports not (animation-timeline: view()) {
      .hero__device-wrap:not(.is-in) .hero__tilt { transform: rotateX(30deg) translateY(28px); }
      .hero__device-wrap:not(.is-in) .tag { opacity: 0; transform: translateY(12px); }
      .hero__tilt, .hero__tags .tag { transition: transform var(--d-reveal) var(--e-out), opacity var(--d-reveal) var(--e-out); }
      .hero__tags .tag { transition-delay: calc(200ms + var(--i) * 110ms); }
    }
  }

  /* 02 · proof: normal flow under the phone */
  .proof { position: relative; padding: var(--section-y) var(--gutter); background: var(--bg); text-align: center; }
  .proof__inner { display: grid; justify-items: center; gap: var(--space-8); width: 100%; max-width: 40rem; margin-inline: auto; }
  .proof__title { justify-self: stretch; font-size: var(--text-h2); letter-spacing: var(--track-heading); }
  /* three across while they fit; large text (200%) wraps them instead of overlapping */
  .proof__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.75em), 1fr)); width: 100%; margin: 0; border-block: 1px solid var(--line); }
  .metric { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 8px; padding: var(--space-6) 6px; }
  .metric + .metric { border-left: 1px solid var(--line); }
  .metric__value { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; font: 800 clamp(1.75rem, 1rem + 3.4vw, 2.5rem) / .95 var(--font-sans); letter-spacing: -.04em; color: var(--fg); font-variant-numeric: tabular-nums; }
  .metric__value > span { font-size: .55em; letter-spacing: 0; color: var(--brand); margin-top: .06em; }
  .metric__star svg { width: .9em; height: .9em; }
  .metric__label { font: var(--w-ui) var(--text-xs) / 1.3 var(--font-sans); color: var(--fg-muted); text-wrap: balance; }
  .proof__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); width: 100%; margin: 0; padding: 0; list-style: none; }
  .proof__logos .logo-standin { justify-self: center; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(.9375rem, .8rem + .8vw, 1.0625rem); white-space: normal; text-align: center; text-wrap: balance; }
  @media (max-width: 359.98px) {
    .proof__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .metric:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (min-width: 640px) { .proof__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@keyframes phone-rise { from { transform: rotateX(30deg) translateY(28px); } to { transform: none; } }
@keyframes tag-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- performance on phones (kept in this render-blocking sheet so the FIRST layout already skips them;
   sections.css itself loads without blocking the first paint): the sections below the fold skip layout and paint until they near the viewport.
   Without it the first layout of the ~20,000px phone page was one 380 ms task at 4× CPU. Estimates = content-box heights
   measured at 390px (`auto` remembers the real height once rendered). Not on Services (its cards' shrink is driven
   by view timelines, which a skipped subtree leaves at their end state) nor the Statement (it measures its lines). ---------- */
@media (max-width: 1023.98px) {
  #cases, #how, #about, #team, #testimonials, #blog, #faq, #contact, .site-footer { content-visibility: auto; }
  #cases { contain-intrinsic-size: auto 1445px; }
  #how { contain-intrinsic-size: auto 737px; }
  #about { contain-intrinsic-size: auto 1078px; }
  #team { contain-intrinsic-size: auto 617px; }
  #testimonials { contain-intrinsic-size: auto 1177px; }
  #blog { contain-intrinsic-size: auto 799px; }
  #faq { contain-intrinsic-size: auto 816px; }
  #contact { contain-intrinsic-size: auto 1206px; }
  .site-footer { contain-intrinsic-size: auto 1277px; }
}