/* ============================================================
   LINKNBIT / responsive layer
   ------------------------------------------------------------
   The Webflow export authors every custom rule at the small-laptop
   tier and then scales UP inside `@media (min-width: 1280px)`.
   Nothing scaled DOWN, so every layout below 1280px kept desktop
   widths. This file is the missing downward half.

   Breakpoints mirror the Figma frames:
     Desktop 1920 | Small laptop 1280 | Tablet 1024 | Mobile 360

     <= 1279px   tablet + small-laptop tier, nav collapses
     <=  991px   two-column layouts stack
     <=  767px   mobile: single column, nav CTA moves into menu
     <=  479px   360-wide tightening

   Loaded AFTER linknbit.webflow.shared.css so it wins on equal
   specificity; nothing here uses !important except the two nav
   visibility switches, which have to beat an inline style.
   ============================================================ */

/* ============================================================
   1. MOBILE NAV  (hamburger + panel)
   Markup is inert above 1279px — the button is display:none and
   the panel stays hidden, so the desktop pill nav is untouched.
   ============================================================ */

.nav__burger {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  flex-direction: column;
  /* The frames right-align the three bars and make the middle one
     shorter, so the stack is pinned to the end rather than centred. */
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.nav__burger span {
  display: block;
  width: 32px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transform-origin: 50% 50%;
  transition:
    transform 0.36s cubic-bezier(0.65, 0.05, 0.36, 1),
    width 0.28s cubic-bezier(0.65, 0.05, 0.36, 1),
    opacity 0.18s linear;
}

/* Middle bar is ~25 against the outer 32 in both frames. */
.nav__burger span:nth-child(2) {
  width: 25px;
  /* Closing: the bars uncross first, then the middle grows back in.
     The delay lives on the CLOSED state so it only applies on the way
     back; the open state below zeroes it. */
  transition-delay: 0.2s;
}

/* Hamburger -> X, sequenced rather than everything at once:
   the middle bar collapses to nothing (width, not just opacity, so it
   retracts toward its right edge), then the outer two travel to the
   centre line and cross. Offset is gap (7) + bar height (2.5). */
.nav__burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9.5px) rotate(45deg);
  transition-delay: 0.08s;
}

.nav__burger[aria-expanded="true"] span:nth-child(2) {
  width: 0;
  opacity: 0;
  transition-delay: 0s;
}

.nav__burger[aria-expanded="true"] span:nth-child(3) {
  /* matches bar 1 so the two arms of the X are the same length */
  width: 32px;
  transform: translateY(-9.5px) rotate(-45deg);
  transition-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
  .nav__burger span {
    transition-duration: 0.001s;
    transition-delay: 0s !important;
  }
}

.nav__burger:focus-visible {
  outline: 2px solid var(--_color---brand-red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   1b. ACCORDION BODY MEASURE

   Every other body block in the design is capped, and the caps are
   authored in `ch` so the measure holds as the container grows:

     .hero__sub    70.8ch      .about__copy   57.7ch
     .faqitem__a   66.2ch      .cs__lede      53.0ch
     .svc__copy    38.6ch      .ccard__desc   51.4ch

   .acc__body was the one exception — no max-width at all, so it
   just filled the panel: 73.3ch at 1280 and 80.9ch from 1440 up.
   That is both past a comfortable measure and inconsistent between
   screen sizes.

   66ch matches .faqitem__a, which is the same kind of element (the
   expanded answer body of a disclosure row). No media query needed:
   a max-width only binds once there is room for it, so this changes
   nothing below ~1100px and holds the line length steady above.
   ============================================================ */

.acc__body {
  max-width: 66ch;
}

/* ============================================================
   1c. ACCORDION ROW — CONTAINER QUERY

   The accordion's width has little to do with the viewport. Above
   991px it shares .svc__inner with the sticky .svc__aside, so at a
   1024 viewport the row is only ~520px; below 991px the aside
   stacks and the row jumps to nearly the full width. A viewport
   media query would have to guess at that; a container query reads
   the space the row actually has.

   .acc__main is the container. Under 625px of inline size there is
   not enough room for name + meta + icon without the meta wrapping
   to four or five lines, so the meta drops out and the row keeps
   name + icon. The copy is not lost — the same text is in the
   panel body underneath.
   ============================================================ */

.acc__main {
  container-type: inline-size;
  container-name: accrow;
}

@container accrow (max-width: 625px) {
  .acc__meta {
    display: none;
  }
  /* With the meta gone the name should reclaim the freed column
     instead of staying on its 42% basis and wrapping to three
     lines against an empty gap. */
  .acc__name {
    flex: 1 1 auto;
  }
}

/* ============================================================
   1d. FAQ HELP ROWS — CONTAINER QUERY

   The two .helprow boxes ("hello@linknbit.com" and "M. Asfandyar")
   are stacked while the FAQ aside is a 457px sidebar, and there is
   room to put them side by side once the aside goes full width at
   1024. But the aside's width does not track the viewport neatly:
   it is 457px at 1280+, full width from 1024 down, and full width
   of a much smaller page on a phone. The right question is not
   "how wide is the screen" but "does this card have room for two
   boxes", which is what a container query asks.

   The container is .helpcard, not .helpcard__rows — a container
   query styles a container's DESCENDANTS, never the container
   itself, so the element whose flex-direction flips has to sit
   inside the thing being measured.

   780px is content-derived, not picked by eye. A .helprow has an
   intrinsic width of 379px (the name and the "Book a Call" CTA are
   both nowrap, so min-content == max-content), and the row gap is
   12px: 379 x 2 + 12 = 770px, plus a little slack so the pair is
   never sitting exactly on its floor.
   ============================================================ */

.helpcard {
  container-type: inline-size;
  container-name: helpcard;
}

@container helpcard (min-width: 780px) {
  .helpcard__rows {
    flex-direction: row;
  }
  .helprow {
    flex: 1 1 0;
    width: auto;
  }
}

/* ============================================================
   2. <= 1279px — TABLET / SMALL LAPTOP
   Figma tablet frame: logo left, CTA + hamburger right, pill
   links gone. Hero centred, two columns still side by side.
   ============================================================ */

@media screen and (max-width: 1279px) {
  :root {
    --_typography---size-display: 5rem;
    --_typography---size-display-sm: 4rem;
    --_typography---size-h2: 3.8rem;
    --_typography---size-h3: 3rem;
    --_typography---size-metric: 3.4rem;
    --_spacing---section-padding-y: 9rem;
    --_spacing---responsive-section-padding-x: 32px;
  }

  /* --- nav -------------------------------------------------
     With .nav__links out, space-between would strand the CTA in
     the middle of the bar. Figma groups CTA + burger hard right,
     so the CTA takes the auto margin instead. */
  .nav__links {
    display: none !important;
  }
  .nav__burger {
    display: flex;
  }
  /* position is owned by the sticky-header block in the page embed —
     the bar is fixed at every breakpoint. */
  .nav__inner {
    gap: 14px;
  }
  .nav__inner > .btn.btn-primary {
    margin-left: auto;
  }

  /* --- hero ------------------------------------------------- */
  .hero {
    min-height: 0;
  }

  .hero__body {
    padding-top: 132px;
    padding-bottom: 72px;
  }

  /* `width: 37ch` is what pushed the h1 past the viewport.
     Size is fluid across this band rather than a single step, so
     the headline keeps the Figma tablet frame's two-line break at
     1024 and grows back toward the 1280 design at the top end. */
  .hero__title {
    width: auto;
    max-width: 34ch;
    margin-inline: auto;
    font-size: clamp(3.2rem, 5.9vw - 0.2rem, 4.8rem);
  }

  .hero__sub {
    max-width: 66ch;
  }

  .logo-strip {
    padding-top: 96px;
  }

  /* --- section rhythm --------------------------------------- */
  .testimonial {
    padding-top: 96px;
    padding-bottom: 110px;
  }
  .cs {
    padding-top: 96px;
    padding-bottom: 40px;
  }
  .about,
  .svc,
  .growth,
  .faq {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .tst {
    padding-top: 100px;
    padding-bottom: 78px;
  }
  .team {
    padding-bottom: 78px;
  }

  .about__inner,
  .svc__inner,
  .cta__inner,
  .growth__inner,
  .team__inner,
  .tst__head {
    max-width: 100%;
  }

  .about__inner {
    gap: 48px;
  }
  .svc__inner {
    gap: 32px;
  }

  /* The closing CTA is title + copy + button on one nowrap row;
     at 1024 the button runs off the edge. Let the row wrap.
     The title takes a full-width line of its own, then copy and
     button share the line below it. Without the wrap + bases the
     three stay on one line and the button lands ~216px past the
     right edge, where .page-wrap's overflow-x: clip hides it. */
  .cta__inner {
    gap: 24px 32px;
  }
  .cta__copy {
    min-width: 0;
  }

  /* --- case-study stack ------------------------------------- */
  .stack__inner {
    max-width: 100%;
  }
  .ccard__body {
    width: 53%;
    padding: 36px 30px;
  }

  /* --- growth ------------------------------------------------
     The export pins .growth__left to 456px and .growth__right to
     634px. Percentages plus the row gap still overshoot, so let
     flex divide the track and reset the fixed child widths. */
  .growth__top {
    align-items: flex-start;
  }
  .growth__left {
    flex: 0 1 38%;
    width: auto;
    min-width: 0;
  }
  .growth__right {
    flex: 1 1 58%;
    width: auto;
    min-width: 0;
  }
  .growth__lede,
  .growth__claim {
    width: 100%;
    max-width: 55ch;
  }

  /* --- testimonial marquee ---------------------------------- */
  .tcard {
    width: 420px;
    height: auto;
    min-height: 268px;
  }

  /* --- faq --------------------------------------------------- */
  .faq__title {
    max-width: 100%;
  }

  /* --- footer ------------------------------------------------
     .ftr__news is a hard 360px and .ftr__cols/.ftr__stats are
     nowrap rows of fixed-width children — all three overflow long
     before mobile, so they get flexible from the first step down. */
  /* .ftr__right is a hard `width: 66rem` with `flex-shrink: 0`, so
     it keeps all 660px right down to 992 and starves .ftr__cta —
     248px at 1025, which breaks the heading over three lines. The
     split is flexed across this whole band so the band degrades
     smoothly; the tablet-specific type sizes live at <= 1024. */
  .ftr__top {
    gap: 48px;
    align-items: flex-start;
  }
  .ftr__cta,
  .ftr__right {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .ftr__mid {
    padding-top: 120px;
    padding-bottom: 150px;
    gap: 40px;
    flex-wrap: wrap;
  }

  .ftr__news {
    width: 100%;
    max-width: 360px;
  }
  .ftr__news > *,
  .ftr__consent,
  .lnb-news {
    width: 100%;
    max-width: 100%;
  }

  .ftr__cols {
    flex: 1 1 420px;
    flex-wrap: wrap;
    gap: 32px 24px;
    min-width: 0;
  }
  .ftr__col {
    flex: 1 1 140px;
    width: auto;
    min-width: 0;
  }

  .ftr__stats {
    gap: 20px 28px;
    width: 100%;
  }
  .ftr__stat {
    width: auto;
    min-width: 0;
  }
  .ftr__brag {
    width: 100%;
    max-width: 100%;
  }

  .ccard__rule {
    display: none;
  }

  .helpcard {
    width: 100%;
    max-width: 100%;
    /* min-width must stay 0. A 457px floor (the old .faq__aside width)
       pushes the card 97px past a 360 viewport, and as a flex item it
       also refuses to shrink below it. */
    min-width: 0;
  }

  /* The decorative glows are wider than the viewport and drag the
     paint area around; cap them so they stay a backdrop. */
  .about__glow-a,
  .about__glow-b,
  .cta__glow-a,
  .cta__glow-b,
  .ftr__glow-a,
  .ftr__glow-b {
    width: 90vw;
  }
}

/* ============================================================
   2b. <= 1024px — SERVICES SECTION STACKS

   The services section breaks one step earlier than the rest of
   the page. .svc__inner goes to a column, so the aside is no
   longer a narrow sidebar beside the accordion — it spans the
   full width above it, and its own two children (.svc__head and
   .stats) sit side by side instead of stacked.

   The aside also stops being sticky here: sticky only makes sense
   while it is a column running alongside a much taller accordion.
   Once it is a full-width band above that accordion there is
   nothing for it to stick against.

   .svc__aside stays a row down to 767px; below that it returns to
   a column in section 4.
   ============================================================ */

@media screen and (max-width: 1024px) {
  .svc__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .svc__aside {
    position: static;
    top: auto;
    flex-direction: row;
    width: 100%;
    align-items: flex-start;
    gap: 32px;
  }

  /* Head takes the slack, stat cards keep their intrinsic size. */
  .svc__head {
    flex: 1 1 auto;
    min-width: 0;
  }
  .stats {
    flex: 0 0 auto;
    width: auto;
  }

  .steps {
    flex-wrap: wrap;
    gap: 16px;
  }
  .step {
    flex: 0 0 calc(50% - 8px);
  }

  /* --- faq: vertical -----------------------------------------
     Same move as the services section. The aside stops being a
     457px sidebar next to the list and becomes a full-width band
     above it, and it unsticks for the same reason — there is no
     longer a tall neighbour to stick alongside.

     How the two .helprow boxes inside it then arrange themselves
     is NOT decided here; see the container query in section 1d. */
  .faq__inner {
    flex-direction: column;
    gap: 30px;
  }
  .helpcard {
    order: 1;
  }

  .faq__aside {
    display: contents;
  }

  .faqlist {
    max-width: 100%;
  }
  .faq__title {
    max-width: 100%;
  }
  .faqitem__a {
    max-width: 100%;
  }

  /* --- footer top band: the Figma tablet frame ---------------
     The export gives .ftr__right a hard `width: 66rem` plus
     `flex-shrink: 0`, so at 1024 it keeps all 660px and leaves
     .ftr__cta only 248px — the heading breaks over three lines
     and the copy over four. The frame has the heading on one
     line, the copy on two, and the divider near the centre.

     Letting both sides flex from a 0 basis puts the divider at
     ~512px, which is where the frame draws it. */
  .ftr__top {
    gap: 48px;
    align-items: flex-start;
  }

  .ftr__cta,
  .ftr__right {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .ftr__ctatitle {
    font-size: 3.7rem;
  }
  .ftr__ctacopy {
    max-width: 100%;
  }

  .ftr__lockup {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Three stats on one row, each sized to its own label the way
     the frame has them (95 / 168 / 77px), not forced equal.

     The export runs .ftr__statnum at 72px and the labels at 16px,
     which makes the row 499px wide inside a 427px column — the
     third stat ("Global Impact") gets clipped off the edge. The
     frame is nearer 40px / 12px, which brings the row to ~387px
     and fits with room to spare. */
  .ftr__stats {
    flex-wrap: nowrap;
    gap: 24px;
    width: auto;
  }
  .ftr__stat {
    flex: 0 1 auto;
    min-width: 0;
  }
  .ftr__statnum {
    font-size: 4rem;
  }
  .ftr__statlabel {
    font-size: 1.2rem;
  }

  /* One line in the frame; 18px wrapped it onto two. */
  .ftr__brag {
    font-size: 1.6rem;
  }

  .faqitem__q {
    font-size: 18px;
  }
  .faqitem__row {
    padding-block: 15px;
  }
}

/* ============================================================
   3. <= 991px — STACK THE TWO-COLUMN LAYOUTS
   ============================================================ */

@media screen and (max-width: 991px) {
  :root {
    --_typography---size-display: 4.2rem;
    --_typography---size-h2: 3.2rem;
    --_typography---size-h3: 2.8rem;
    --_typography---size-h4: 2.4rem;
    --_typography---size-metric: 3rem;
    --_spacing---section-padding-y: 7rem;
    --_spacing---responsive-section-padding-x: 24px;
  }

  /* --- about: media over copy ------------------------------- */
  .about__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 36px;
    max-width: 700px;
  }
  .about__media {
    width: 100%;
    max-width: 520px;
    margin-inline: auto;
  }
  .about__img {
    width: 100%;
    height: auto;
  }
  .about__body {
    width: 100%;
  }
  .about__copy {
    max-width: 100%;
  }

  /* --- growth: copy stacks, steps go 2-up ------------------- */
  .growth__top {
    flex-direction: column;
    gap: 28px;
  }
  .growth__left,
  .growth__right {
    width: 100%;
  }

  .step {
    /* two per row: half the track minus the gap */
    padding: 30px 24px 36px;
  }

  /* --- closing CTA ------------------------------------------
     Stacked now, so the wrap allowance from the 1279 step has to
     be undone — `wrap` on a column container wraps into extra
     COLUMNS, which is horizontal overflow, not stacking. */
  .cta__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
  }

  .cta__inner .btn {
    flex: 0 0 auto;
  }

  /* --- testimonials ----------------------------------------- */
  .tst__sub {
    max-width: 100%;
  }
  .tcard {
    width: 360px;
    min-height: 250px;
    padding: 20px 20px 16px;
  }

  /* --- faq: the stacking itself moved up to the 1024 block --- */
  .faqitem__a {
    max-width: 100%;
  }

  /* --- booking: Calendly needs more height as it narrows ----- */
  .book__frame,
  .calendly-inline-widget {
    min-height: 820px;
  }

  /* --- footer ----------------------------------------------- */
  .ftr__top {
    flex-direction: column;
    gap: 32px;
  }
  .ftr__cta,
  .ftr__right {
    width: 100%;
  }
  .ftr__ctacopy {
    max-width: 100%;
  }
}

/* ============================================================
   4. <= 767px — MOBILE
   Figma mobile frame (360): logo + hamburger only, everything
   centred in the hero, single-column body, stacked CTAs.
   ============================================================ */

@media screen and (max-width: 767px) {
  :root {
    --_typography---size-display: 3.4rem;
    --_typography---size-display-sm: 3.4rem;
    --_typography---size-h2: 2.8rem;
    --_typography---size-h3: 2.4rem;
    --_typography---size-h4: 2.2rem;
    --_typography---size-h5: 2rem;
    --_typography---size-h6: 1.8rem;
    --_typography---size-body-lg: 1.6rem;
    --_typography---size-body-xl: 1.8rem;
    --_typography---size-body-2xl: 1.9rem;
    --_typography---size-metric: 2.8rem;
    --_spacing---section-padding-y: 5.6rem;
    --_spacing---container-gutter: 1.6rem;
    --_spacing---responsive-section-padding-x: 16px;
  }

  /* --- nav: CTA moves into the panel ------------------------ */
  .nav__inner > .btn.btn-primary {
    display: none !important;
  }

  /* --- hero -------------------------------------------------- */
  .hero__body {
    padding-top: 104px;
    padding-bottom: 56px;
  }
  .hero__title {
    letter-spacing: -0.2px;
  }
  /* Figma sets the mobile quote well below the h2 step. */
  .testimonial__quote {
    font-size: 2.4rem;
  }
  .hero__sub {
    max-width: 46ch;
  }

  .proof-badge {
    padding: 8px 16px;
    gap: 8px;
  }
  .proof-badge__mark {
    width: 28px;
  }
  .proof-badge__label {
    font-size: 1.3rem;
  }

  /* Figma stacks the two hero buttons with the ghost on top.
     column-reverse gets that order without touching the DOM, so
     the primary action stays first for screen readers. */
  .hero__actions {
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
    max-width: 240px;
    justify-content: center;
  }

  .logo-strip {
    padding-top: 64px;
  }
  .logo-item__img {
    max-width: 118px;
  }

  /* --- testimonial ------------------------------------------- */
  .testimonial {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .playbtn {
    width: 42px;
    height: 42px;
  }
  .playbtn__core {
    width: 30px;
    height: 30px;
  }
  .author {
    margin-top: 28px;
  }

  /* --- case cards -------------------------------------------- */
  .cs {
    padding-top: 60px;
  }

  /* Figma puts the case-card image on top and the copy beneath. */
  .ccard {
    flex-direction: column;
  }
  .ccard__media,
  .ccard__body {
    width: 100%;
  }
  .ccard__body {
    padding: 24px 20px 28px;
  }
  .metrics {
    gap: 8px;
  }
  .metric {
    padding: 12px 10px;
  }
  .chips {
    gap: 8px;
    margin-top: 14px;
  }

  .fcta {
    padding-bottom: 56px;
  }
  .fcta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 20px;
  }
  .fcta__inner .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- about -------------------------------------------------- */
  .about {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  /* --- services -----------------------------------------------
     End of the row band opened at 1024: below 767 the head and the
     stat cards no longer fit side by side, so the aside goes back
     to a column and the stat cards share a row of their own. */
  .svc {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .svc__aside {
    flex-direction: column;
    gap: 28px;
  }
  .svc__head {
    flex: 0 0 auto;
  }
  .stats {
    flex: 0 0 auto;
    width: 100%;
    flex-wrap: wrap;
    gap: 12px;
  }
  .stats > * {
    flex: 1 1 calc(50% - 6px);
    min-width: 140px;
  }

  /* Accordion row. Three fixed sizes fight a 360 screen:
     .acc__row is locked to height:108px, .acc__name to 231px and
     .acc__iconwrap to 118px. The row's fixed height is the one
     that actually clips — .acc__item is overflow:hidden, so the
     wrapped meta text gets cut off mid-line. */
  .acc__row {
    height: auto;
    min-height: 84px;
    gap: 12px;
    padding: 18px 12px 18px 0;
  }
  .acc__name {
    width: auto;
    font-size: 2rem;
  }
  .acc__meta {
    flex: 1 1 50%;
    min-width: 0;
  }
  .acc__iconwrap {
    width: 72px;
    padding-top: 18px;
  }
  .acc__main,
  .acc__panelin {
    padding-left: 20px;
  }
  .acc__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
  }
  .faqitem__q {
    font-size: 16px;
  }
  .faqitem__a {
    font-size: 14px;
    padding-bottom: 20px;
  }

  /* --- growth -------------------------------------------------- */
  .step {
    padding: 24px 18px 28px;
  }

  /* --- testimonial marquee ------------------------------------- */
  .tcard {
    aspect-ratio: 219/210;
    width: 219px;
    min-height: 0;
    padding: 18px 18px 14px;
  }
  .tcard__avatar {
    width: 42px;
  }

  .pcard {
    aspect-ratio: 204/210;
    width: 204px;
  }

  /* --- faq ------------------------------------------------------ */
  .faqitem__row {
    gap: 12px;
  }
  .helpcard {
    width: 100%;
  }

  /* --- booking --------------------------------------------------- */
  .book__frame,
  .calendly-inline-widget {
    min-height: 1000px;
  }

  .tcard__text {
    font-size: 10px;
  }

  .tcard__lead {
    font-size: 12px;
  }

  .tcard__logo {
    height: 20px;
    width: auto;
  }

  .tcard__mark {
    width: 15px;
  }

  .tcard__stars {
    width: auto;
    height: 13px;
  }

  .tcard__in {
    gap: 10px;
  }

  .pcard__meta {
    left: 10px;
    bottom: 10px;
  }

  .pcard__name {
    font-size: 12px;
  }

  .pcard__role {
    font-size: 10px;
  }

  /* --- team ------------------------------------------------------
     Design is unchanged from desktop — same circular avatars, same
     edge fade. Only the track width and the fade stops move, so a
     360-wide screen shows ~4 avatars instead of being cropped to a
     fixed 482px box. */
  .team__inner {
    gap: 20px;
  }
  /* The row is capped at 482px in the export, which crops the
     marquee into a narrow box. Everything else about the section
     — 72px circles, the mask fade — is what the design already
     specifies, so only the cap and the gap move. */
  .team__row {
    max-width: 100%;
  }
  .team__track {
    gap: 16px;
  }

  /* --- footer ----------------------------------------------------- */
  .ftr__stats {
    gap: 18px 20px;
  }
  .ftr__stat {
    flex: 1 1 calc(50% - 10px);
  }
  /* "Projects delivered successfully" is nowrap in the export and
     is wider than a 360 screen on its own. */
  .ftr__statlabel {
    white-space: normal;
  }
  .helprow {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ftr__markmark {
    width: 100%;
    max-width: 213px;
  }

  .about,
  .svc,
  .growth,
  .faq,
  .tst,
  .team {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .author__avatar {
    width: 70px;
    height: 70px;
  }

  .author {
    gap: 12px;
  }

  .author__name {
    font-size: 18px;
  }

  .author_data {
    font-size: 12px;
  }

  .author__meta {
    margin-bottom: 3.5px;
  }
}

/* ============================================================
   5. <= 479px — 360-WIDE TIGHTENING
   ============================================================ */

@media screen and (max-width: 479px) {
  :root {
    --_typography---size-display: 3rem;
    --_typography---size-display-sm: 3rem;
    --_typography---size-h2: 2.5rem;
    --_typography---size-h3: 2.2rem;
    --_typography---size-metric: 2.4rem;
    --_spacing---section-padding-y: 4.8rem;
  }

  .metric__label {
    font-size: 12px;
  }

  .acc__tag {
    font-size: 12px;
  }

  .acc__tags {
    gap: 8px;
  }

  .step__copy {
    font-size: 12px;
  }

  .step.is-in {
    padding: 20px 10px;
  }

  .step__num {
    font-size: 14px;
  }

  .hero__title {
    max-width: 100%;
  }

  .helpcard {
    padding: 15px;
  }

  .helpcard__rows {
    margin-top: 20px;
  }

  .helprow {
    padding-inline: 11px;
  }

  .helprow__avatar {
    width: 43px;
    height: 43px;
  }

  .helprow__who {
    gap: 12px;
  }

  .helprow__name {
    font-size: 14px;
  }

  .helprow__meta {
    font-size: 12px;
  }

  /* Three metric tiles have to share 360 minus the gutters. */
  .metrics {
    gap: 6px;
  }
  .metric {
    padding: 10px 6px;
  }
  .metric__num {
    font-size: var(--_typography---size-metric);
  }

  /* Figma keeps the growth steps two-up even at 360 — narrow
     cards with a lot of wrapping — so only the padding tightens. */
  .step {
    padding: 20px 14px 24px;
  }
  .steps {
    gap: 12px;
  }

  .team__avatar {
    width: 64px;
    height: 64px;
  }
  .team__track {
    gap: 12px;
  }

  .acc__name {
    font-size: 1.8rem;
  }

  .book__frame,
  .calendly-inline-widget {
    min-height: 1060px;
  }

  .author__avatar {
    width: 70px;
    height: 70px;
  }

  .author {
    gap: 12px;
  }

  .author__name {
    font-size: 18px;
  }

  .author_data {
    font-size: 12px;
  }

  .author__meta {
    margin-bottom: 3.5px;
  }

  .proof-badge__mark {
    width: 25px;
    height: 20px;
  }

  .proof-badge__rating {
    height: 12px;
    object-fit: scale-down;
    animation-name: lnbBadgeStarsResp;
  }

  .proof-badge__label {
    font-size: 12px;
    animation-name: lnbBadgeLabelResp;
  }

  @keyframes lnbBadgeStarsResp {
    from {
      width: 0px;
    }
    to {
      width: 69px;
    }
  }
  @keyframes lnbBadgeLabelResp {
    from {
      width: 0px;
    }
    to {
      width: 100px;
    }
  }

  .hero__sub {
    font-size: 14px;
  }

  .playbtn__tri {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 13px;
  }

  .playbtn__core {
    width: 40px;
    height: 40px;
  }

  .playbtn {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
  }

  .testimonial__quote {
    line-height: 1.2;
    font-size: 32px;
  }

  .metric__label {
    font-size: 12px;
  }
}

/* ============================================================
   5b. <= 359px — below the design's narrowest frame
   Figma stops at 360. This is just so an iPhone SE (320) doesn't
   scroll sideways.
   ============================================================ */

@media screen and (max-width: 359px) {
  /* Calendly's own embed carries an inline min-width:320px, so the
     section gutter is what has to give. */
  .book__inner,
  .book__frame {
    padding-left: 0;
    padding-right: 0;
  }
  .calendly-inline-widget {
    min-width: 0;
  }

  .ftr__col {
    flex: 1 1 100%;
  }
  .ftr__stat {
    flex: 1 1 100%;
  }
  .step {
    flex: 0 0 100%;
  }
}

/* ============================================================
   6. CROSS-CUTTING SAFETY
   ============================================================ */

/* Sideways containment is already handled by `.page-wrap`, which the
   export sets to `overflow-x: clip`.

   Do NOT add `overflow-x: hidden` to html/body here. Per CSS overflow,
   a non-visible value on one axis computes the other axis to `auto`,
   which makes html/body scroll containers — and a sticky element then
   sticks to THAT scrollport instead of the viewport. That silently
   kills the pinned case-study stack at every width the rule covers.
   `clip` is the export's choice precisely because it clips without
   creating a scroll container. */
@media screen and (max-width: 1279px) {
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }
  .hero__shader {
    max-width: none;
  } /* full-bleed background */
}

/* Coarse pointers get no hover cursor chrome — the custom case
   cursor is a mouse affordance and just sits in the corner on a
   touch screen. */
@media (hover: none) {
  .case__cursor {
    display: none;
  }
}

/* ============================================================
   7. TYPE SCALE + TITLE MEASURES — ANCHORED TO THE FIGMA FRAMES

   Verified against the three frames with get_design_context:

                        1024      1280      1920
     hero h1             40        48        60     (confirmed 40/48)
     section titles      40        42        50     (confirmed 50 @1920)
     testimonial quote   38        42        48
     footer CTA title    40        42        42     (confirmed 40/42)

   Two problems this fixes.

   1. The export steps the desktop scale in at `min-width: 1280px`,
      but 1280 IS the small-laptop frame. So the whole 1280 frame
      rendered at desktop sizes — hero 60 instead of 48, every
      section title 50 instead of 42. That was the inconsistency.

   2. .ftr__ctatitle was hard-coded to 5.2rem, which is not a token
      and not in the design at any width (52px vs 42/40).

   The scale is now fluid between the frame widths rather than
   stepped, and each clamp is solved so it lands EXACTLY on the
   frame value at 1024, 1280 and 1920:

     display    1024->1280  3.125vw + 0.8rem   = 40 -> 48
                1280->1920  1.875vw + 2.4rem   = 48 -> 60
     display-sm 1024->1280  0.781vw + 3.2rem   = 40 -> 42
                1280->1920  1.25vw  + 2.6rem   = 42 -> 50
     h2         1024->1280  1.5625vw + 2.2rem  = 38 -> 42
                1280->1920  0.9375vw + 3rem    = 42 -> 48

   (1rem = 10px here — the page sets html { font-size: 62.5% }.)
   ============================================================ */

@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  :root {
    --_typography---size-display: clamp(4rem, 3.125vw + 0.8rem, 4.8rem);
    --_typography---size-display-sm: clamp(4rem, 0.781vw + 3.2rem, 4.2rem);
    --_typography---size-h2: clamp(3.8rem, 1.5625vw + 2.2rem, 4.2rem);
  }
}

@media screen and (min-width: 1280px) {
  :root {
    --_typography---size-display: clamp(4.8rem, 1.875vw + 2.4rem, 6rem);
    --_typography---size-display-sm: clamp(4.2rem, 1.25vw + 2.6rem, 5rem);
    --_typography---size-h2: clamp(4.2rem, 0.9375vw + 3rem, 4.8rem);
  }
}

/* Every title reads from the tokens from the tablet frame up. The
   export hard-codes several of these at the base tier (.hero__title
   4.8rem, .svc__title 4.2rem, .ftr__ctatitle 5.2rem) and only
   switches to tokens above 1280, which is what let 1024–1279 drift. */
@media screen and (min-width: 1024px) {
  .hero__title {
    font-size: var(--_typography---size-display);
  }

  .testimonial__quote {
    font-size: var(--_typography---size-h2);
  }

  /* Flat 42 from the laptop frame up, 40 at tablet. */
  .ftr__ctatitle {
    font-size: clamp(4rem, 0.781vw + 3.2rem, 4.2rem);
  }
}

/* Section titles follow the display-sm token at EVERY width, not just
   from the tablet frame up. The export hard-codes .svc__title to
   4.2rem at the base tier, so scoping this to >= 1024 left svc and
   about stuck at 42px all the way down to 360 while the rest of the
   section titles stepped 40 -> 34 -> 30. */
.cs__title,
.ccard__name,
.about__title,
.svc__title,
.growth__title,
.cta__title,
.tst__title,
.faq__title {
  font-size: var(--_typography---size-display-sm);
}

/* ---- Title measures -----------------------------------------
   Bebas Neue is exactly 1ch = 0.40em, and the frames hold each
   title at a CONSTANT ch measure across all three widths — the
   hero is 820/60, 654/48 and 540/40, which is 34.2ch, 34.1ch and
   33.8ch. So a ch cap reproduces the design at every width, while
   the px caps the export ships only happen to be right at one.

   Replaced: .hero__title 820px, .faq__title 481px, .tst__sub
   900px, .acc__name 231px. (.testimonial__quote and .svc__title
   were already authored in ch and are left alone.) */

.hero__title {
  width: auto;
  max-width: 34ch;
}

.faq__title {
  width: auto;
  max-width: 24ch;
}

.tst__sub {
  width: auto;
  max-width: 45ch;
}

.about__title {
  max-width: 28ch;
}

.growth__title {
  max-width: 23ch;
}

.acc__name {
  width: 22ch;
}

/* Both of these caps are inert at every width the design covers —
   the titles wrap before reaching them — but they are still static
   px, so they are converted for consistency with the rest.
   791px / 50px / 0.4 = 40ch;  900px / 50px / 0.4 = 45ch. */
.cs__title {
  max-width: 40ch;
}

.tst__title {
  max-width: 45ch;
}

/* ============================================================
   8. HERO SPACING — ANCHORED TO THE FIGMA FRAMES

   Design hero band height (dark area, nav through logo strip):

       1024 -> 648      1280 -> 800      1920 -> 980

   Measured before this fix: 819 / 980 / 990. The 1280 frame was
   180px too tall for exactly the same reason as the type — the
   export's `min-width: 1280px` block pins `.hero { min-height:
   980px }`, `.hero__body { padding-top: 194px }` and
   `.logo-strip { padding-top: 235px }`, which are the 1920
   values, and 1280 inherits them.

   The band is nav (102) + body (pad + content) + logo strip
   (pad + 84). Content measures 375 / 365 / 333 and the logo strip
   content is a flat 84, so the two paddings carry the difference
   and are interpolated to hit each frame exactly.
   ============================================================ */

@media screen and (min-width: 1024px) and (max-width: 1279.98px) {
  .hero {
    min-height: clamp(648px, 59.375vw + 4rem, 800px);
  }
  .hero__body {
    padding-top: clamp(60px, 21.48vw - 16rem, 115px);
    padding-bottom: 0;
  }
  .logo-strip {
    padding-top: clamp(69px, 25.39vw - 19.1rem, 134px);
  }
}

@media screen and (min-width: 1280px) {
  .hero {
    min-height: clamp(800px, 28.125vw + 44rem, 980px);
  }
  .hero__body {
    padding-top: clamp(115px, 12.34vw - 4.3rem, 194px);
    padding-bottom: 0;
  }
  .logo-strip {
    padding-top: clamp(134px, 14.22vw - 4.8rem, 225px);
  }
}

/* ============================================================
   9. CASE CARD — DIVIDER + CTA UNDERLINE

   Both of these are in the desktop frame but not in the export.
   ============================================================ */

/* ---- The rule between the metrics and "Services Offered" -----
   The export ships `.ccard__rule { display: none }`, so the line
   never renders. The 1920 frame draws it; the 1280 and 1024
   frames do not (checked all three), so it comes back on the
   desktop tier only. */
@media screen and (min-width: 1440px) {
  .ccard__rule {
    display: block;
  }
}

/* ---- "View Case Study" underline ----------------------------
   The export puts a permanent full-width `border-bottom: 2px` on
   the link. Replaced with a pseudo-element that grows from 0 to
   half the link's width on hover/focus.

   The underline is on ::after rather than the border so it can be
   animated — `border-bottom` has no width of its own to tween,
   and animating the element's width would move the text. */
.ccard__cta {
  position: relative;
  border-bottom: 0;
}

.ccard__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: var(--_color---brand-red);
  transition: width 0.38s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ccard__cta:hover::after,
.ccard__cta:focus-visible::after {
  width: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .ccard__cta::after {
    transition: none;
  }
}

/* The CTA arrow is now an inline SVG rather than a "→" glyph. As an
   inline element the svg would sit on the text baseline and carry
   descender space, so it gets display:block inside the span and the
   span centres it against the label. Sized explicitly rather than
   left to the svg's own attributes so it scales with nothing else. */
.ccard__cta-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ccard__cta-arrow svg {
  display: block;
  width: 14px;
  height: 10px;
}

/* ============================================================
   10. FULL-SCREEN MENU

   Frames: tablet 1310-2738 (1024), mobile 1310-2783 (360).

   The panel holds ONLY the link list (plus the CTA on mobile).
   The logo, the CTA and the burger are the real ones in <header
   class="nav"> — the header is lifted above the panel while the
   menu is open so they overlay it rather than being duplicated.
   That is why .navmenu has no header of its own and why the list
   is pushed down by padding instead of sitting under a row.

   Padding-top is the frame's own distance to the active pill:
   117px at tablet, 76px at mobile.
   ============================================================ */

/* Stacking: the page's own layers top out at z-index 10 (.logo-strip);
   .nav sits at 20. Putting the panel at 15 slots it above every piece
   of page content but below the header, so the real logo, CTA and
   burger overlay the menu with no change to .nav at all. */

.navmenu {
  position: fixed;
  inset: 0;
  z-index: 15;
  overflow-y: auto;
  background-color: #010101;
  -webkit-overflow-scrolling: touch;

  /* Animated in and out, so no display toggle — visibility is what
     takes it out of the a11y tree and off the hit-test, and it is
     delayed on the way out so the fade can finish first. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0.34s;
}

.navmenu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition:
    opacity 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1),
    visibility 0s linear 0s;
}

/* The frames put two large rotated red ellipses behind the panel —
   bottom-left and top-right. Two radial gradients give the same
   read for none of the weight. */
.navmenu::before,
.navmenu::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    closest-side,
    rgba(206, 10, 11, 0.55),
    rgba(206, 10, 11, 0.13) 55%,
    rgba(206, 10, 11, 0) 100%
  );
}

.navmenu::before {
  left: -34%;
  bottom: -46%;
  width: 92%;
  height: 92%;
}

.navmenu::after {
  right: -30%;
  top: -52%;
  width: 96%;
  height: 96%;
}

.navmenu__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* 117px = the frame's distance from the top of the viewport to the
     active pill, i.e. the space the overlaid header occupies. */
  padding: 150px 24px 40px;
}

/* ---- link list ----
   A rule between each pair of rows and none at the ends is a
   border-top on every row after the first; the active pill sits
   where two of those would land, so it clears its own and the next. */
.navmenu__list {
  display: flex;
  flex-direction: column;
}

.navmenu__link {
  display: flex;
  align-items: center;
  min-height: 51px;
  padding: 10px 15px;
  border-radius: 6px;
  font-family: var(--_typography---font-body);
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;

  /* Staggered entrance. Transform + opacity only, so it composites. */
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.001s linear,
    transform 0.001s linear,
    background-color 0.22s linear,
    color 0.22s linear;
}

.navmenu.is-open .navmenu__link {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.22s linear,
    color 0.22s linear;
}

.navmenu.is-open .navmenu__link:nth-child(1) {
  transition-delay: 0.1s;
}
.navmenu.is-open .navmenu__link:nth-child(2) {
  transition-delay: 0.16s;
}
.navmenu.is-open .navmenu__link:nth-child(3) {
  transition-delay: 0.22s;
}
.navmenu.is-open .navmenu__link:nth-child(4) {
  transition-delay: 0.28s;
}
.navmenu.is-open .navmenu__link:nth-child(5) {
  transition-delay: 0.34s;
}

.navmenu__link + .navmenu__link {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
}

.navmenu__link.is-current {
  background-color: #fff;
  color: var(--_color---text-heading);
  font-weight: 600;
  border-top-color: transparent;
}

.navmenu__link.is-current + .navmenu__link {
  border-top-color: transparent;
}

.navmenu__link:hover:not(.is-current),
.navmenu__link:focus-visible:not(.is-current) {
  background-color: #ffffff14;
}

/* Mobile only — on tablet the CTA is the real one in the header. */
.navmenu__footcta {
  display: none;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.001s linear,
    transform 0.001s linear;
}

.navmenu.is-open .navmenu__footcta {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0.4s;
}

/* ============================================================
   10b. MOBILE MENU  (<= 767)
   The header CTA is already hidden at this width, so the menu
   carries it, pinned to the bottom per frame 1310-2783.
   ============================================================ */

@media screen and (max-width: 767px) {
  .navmenu__inner {
    /* The frame starts the list at 76px, but that assumes its own short
       "Menu" header row. We overlay the real site header instead, whose
       bottom edge is at 94px here (98px at tablet), so the list clears
       that and keeps the same ~20px gap the tablet step uses. */
    padding: 150px 12px 30px;
  }

  .navmenu__link {
    min-height: 46px;
    padding: 10px;
    font-size: 1.4rem;
  }

  .navmenu__footcta {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navmenu,
  .navmenu__link,
  .navmenu__footcta,
  .navmenu.is-open,
  .navmenu.is-open .navmenu__link,
  .navmenu.is-open .navmenu__footcta {
    transition-duration: 0.001s !important;
    transition-delay: 0s !important;
    transform: none !important;
  }
}

/* ---- why .hero loses its backdrop-filter -----------------------
   The export sets `backdrop-filter: blur(2.2px)` on .hero, which
   also carries an OPAQUE `background-color: #110f10`. A backdrop
   filter blurs what is behind the element, and here that backdrop
   is then covered by the element's own opaque background — so the
   blur has no visible effect at all.

   What it does do is make .hero a stacking context. .nav lives
   inside .hero at z-index 20, so that z-index was being resolved
   against .hero's context rather than the page, and .hero itself
   is z-index: auto. The result: nothing inside .hero could ever
   paint above the fixed menu, at any z-index — verified by setting
   .nav to z-index 9999 inline and watching it still render behind.

   Dropping the dead filter lets .nav's z-index 20 compete at the
   page level, which is what puts the real header over the menu. */
.hero {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   11. MOBILE DESIGN TREATMENT FROM 991 DOWN

   The frame is drawn at 360, but the same structure is wanted from
   991 downward with the sizing scaled up toward the wide end of the
   band. Anything that only makes sense at true phone widths stays
   in the <= 767 / <= 479 steps below.
   ============================================================ */

@media screen and (max-width: 991px) {
  /* ---- hero actions -------------------------------------------
     The frame stacks the two buttons, but that is a consequence of
     360px, not the intent. `wrap` keeps them side by side wherever
     they fit and drops the second onto its own centred line only
     when they genuinely do not — which lands around 470px. */
  .hero__actions {
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .hero__actions .btn {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
  }

  /* ---- case slider (second section) ---------------------------
     .case is a hard 773px. The frame shows roughly 78vw with the
     next card peeking, and the tile keeps its 0.72 aspect. */
  .case {
    width: clamp(240px, 78vw, 560px);
  }

  .case__link {
    height: auto;
    aspect-ratio: 39 / 28;
  }

  .cases__track {
    gap: 16px;
  }

  /* ---- case study cards: no sticky, image inside the copy ------
     The frame drops the two-column card and runs one column with
     the image sitting between the description and the metrics.
     display:contents on .ccard__body flattens its eight children so
     they join .ccard__media as siblings inside .ccard — the only way
     the image can be ordered between two of them.

     The card chrome stays on .ccard and must NOT be keyed to
     .stack__item, because the third card shares its item with the
     founder CTA:

       .stack__item         -> .ccard  (Macaw Host)
       .stack__item         -> .ccard  (Flozi AI)
       .stack__item--last   -> .ccard  (Ahya) + .fcta

     Keying it to the item either skips the third card or wraps the
     CTA in card chrome. .ccard is exactly one per card. */
  .stack__item {
    position: static;
    top: auto;
    margin-bottom: 20px;
    will-change: auto;
    max-width: 700px;
    margin-inline: auto;
  }

  .ccard {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
    background-color: var(--_color---surface-grey);
    border-radius: var(--_radius---radius-card);
    padding: 28px 20px 32px;
    overflow: hidden;
  }

  .ccard__body {
    display: contents;
  }

  .tag,
  .ccard__name,
  .ccard__desc {
    order: 1;
  }

  .ccard__media {
    order: 2;
    width: 100%;
    margin: 18px 0 6px;
    border-radius: 12px;
    aspect-ratio: 39 / 28;
    /* Keeps the frame's proportion at phone width without letting the
       image dominate the card at the top of the band (652px tall at
       991 otherwise). .ccard__img already covers. */
    max-height: 420px;
    background-color: #0d0d0d;
    overflow: hidden;
  }

  .metrics,
  .ccard__rule,
  .ccard__subhead,
  .chips,
  .ccard__cta {
    order: 3;
  }

  /* ---- about: image between the title and the copy -------------
     The frame puts the portrait under the heading, not above the
     eyebrow. Reaching that needs BOTH wrappers flattened —
     .about__body (which holds the stack and the button) and
     .about__stack (which holds eyebrow / title / copy / lockup /
     copy). With both on display:contents, .about__inner's flex
     children are:

       media, eyebrow, title, copy, lockup, copy, button

     and order alone can slot the media into third place. Equal
     order values keep document order, so the trailing copy/lockup/
     copy group needs only one shared value. */
  .about__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .about__body,
  .about__stack {
    display: contents;
  }

  /* NOTE the descendant combinators. `display: contents` removes a
     box but NOT the DOM relationship, so `.about__inner > .btn`
     matches nothing — the button is still a DOM child of
     .about__body. The elements become flex ITEMS of .about__inner,
     which is what makes `order` apply, but selectors still have to
     reach them through their real parents. */
  .about__inner .eyebrow {
    order: 1;
  }

  .about__inner .about__title {
    order: 2;
  }

  .about__media {
    order: 3;
    width: 100%;
    max-width: 100%;
    /* The Ready-for-Dev frame crops this square, not landscape:
       ~332 x 345 inside a 336 content column. It stays square while
       the column is narrow (358x358 at 390) and letterboxes once the
       column is wider than the cap. .about__img already covers. */
    aspect-ratio: 1 / 1;
    max-height: 420px;
    border-radius: 12px;
  }

  .about__inner .about__copy,
  .about__inner .lockup {
    order: 4;
  }

  /* Intrinsic width — `align-items: stretch` on the column was
     pulling it to the full 951px at 991 and 358px at 390. The frame
     has it at 208px. */
  .about__inner .btn {
    order: 5;
    align-self: flex-start;
    width: auto;
  }

  /* ---- eyebrows -----------------------------------------------
     The export centres every .eyebrow. In the frame that is only
     right for the sections whose whole block is centred (case
     studies, the featured testimonial, the "recognized by" wall).
     About / services / growth / faq are left-aligned blocks and
     their eyebrow sits on the same left edge as the heading. */
  .about .eyebrow,
  .svc .eyebrow,
  .growth .eyebrow,
  .faq .eyebrow {
    justify-content: flex-start;
  }

  /* ---- featured services --------------------------------------
     The accordion cards were flush against each other; the frame
     spaces them. The open card's red edge is a 15px bar in the
     export, which reads as a slab at this width — the frame has a
     ~6px rule matching the card's own corner radius. */
  .svc__aside {
    flex-direction: column;
    gap: 26px;
  }

  .svc__head {
    flex: 0 0 auto;
  }

  .stats {
    flex: 0 0 auto;
    width: 100%;
    gap: 12px;
  }

  .stats > * {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .acc {
    gap: 12px;
  }

  .acc__item {
    border-radius: 10px;
  }

  .acc__bar {
    width: 6px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
  }

  /* ---- growth system ------------------------------------------- */
  .steps {
    flex-wrap: wrap;
    gap: 14px;
  }

  .step {
    flex: 0 0 calc(50% - 7px);
    min-width: 0;
    padding: 22px 18px 26px;
    border-radius: 12px;
  }

  /* ---- founder CTA under the stack ----------------------------
     .fcta__inner is a row of person + copy + button. That fitted
     while the stack was full width, but the stack is now capped at
     700px and the row cannot: person 270 + copy + button 223 leaves
     the copy 98px wide and 168px tall — a shredded column of text.

     It stacks from here down, matching the frame, and .div-block
     (which is `flex: 1` in the export) has to be released from that
     or it keeps trying to absorb the leftover inline space. */
  .fcta {
    padding-bottom: 72px;
  }

  .fcta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 24px 28px;
  }

  .fcta__person {
    flex-shrink: 1;
    min-width: 0;
  }

  .div-block {
    flex: 0 0 auto;
    width: 100%;
  }

  /* The export centres this with `margin-inline: auto`, which only
     shows once a max-width is in play — it then sat 47px in from the
     avatar and the button. The frame left-aligns all three. */
  .fcta__copy {
    max-width: 52ch;
    margin-inline: 0;
  }

  /* The frame's founder-card pill is 201x42 — intrinsic, not full
     width. It was stretching to the card (314px at 390, 420 above). */
  .fcta__inner .btn {
    width: auto;
    max-width: none;
  }

  /* ---- closing CTA --------------------------------------------
     .cta__copy is a hard 340px in the export, which is wider than
     the content box below ~380. The column here needs both children
     full width, not a fixed basis. */
  .cta__title,
  .cta__copy {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }

  /* ---- footer -------------------------------------------------
     .ftr__right carries a border-left and an 80px indent to divide
     it from the CTA column. Stacked, that reads as a stray vertical
     rule down the left of the stats, so both go. */
  .ftr__right {
    border-left: 0;
    padding-left: 0;
  }

  .ftr__top {
    padding-bottom: 72px;
  }
}

/* ============================================================
   11b. TRUE MOBILE  (<= 767)
   ============================================================ */

@media screen and (max-width: 767px) {
  /* The review wall is two counter-scrolling rows; at phone width
     one row is enough and the second only repeats the same cards. */
  .tst-row.tst-row-b {
    display: none;
  }

  .ccard {
    padding: 22px 16px 26px;
  }

  .ccard__media {
    margin: 14px 0 4px;
  }

  .acc__bar {
    width: 5px;
  }

  /* The <=1024 step sets the stats row to nowrap so the three fit
     one line beside the CTA column. Stacked and at phone width they
     have to be allowed to wrap again or the labels shred. */
  .fcta {
    padding-bottom: 56px;
  }

  .fcta__inner {
    gap: 18px;
    padding: 22px 18px 24px;
  }

  .fcta__avatar {
    width: 64px;
    height: 64px;
  }

  .ftr__stats {
    gap: 20px 18px;
  }

  .ftr__stat {
    flex: 1 1 calc(50% - 9px);
  }
}

/* ============================================================
   12. BUTTON SIZE — THE FRAME'S MOBILE PILL

   Measured off the mobile frame (754-39), where every pill is the
   same size:

     "Learn more about us"   text 160x18   button 208x42
     "free discovery call"   text 153x18   button 201x42

   That is padding 12px 24px around a 14px label. The export ships
   16px 32px, which renders 52px tall — the reason the about and
   founder-card buttons read as oversized.

   Two buttons are deliberately their own size in the frame and are
   held back out of this: the menu's bottom CTA (14/36, 46px tall)
   and the footer's "Start your project", which is a full-width
   336x52 bar and is not a .btn at all.
   ============================================================ */

@media screen and (max-width: 991px) {
  .btn {
    padding: 12px 24px;
  }

  .navmenu__footcta {
    padding: 14px 36px;
  }
}

/* ============================================================
   13. FOOTER — RESPONSIVE

   Mobile values read off frame 754-39's footer (node 1310:1605,
   which sits below the visible frame edge so it does not appear in
   a render of the frame):

     section top padding   60px
     "Setup a Discovery call"   Bebas 32px, 12px gap to the copy
     copy                       DM Sans 14px, #f8f8f8, full width
     "Start your project"       full width, bg rgba(255,255,255,.08),
                                1px rgba(255,255,255,.2), radius 100,
                                padding 5px 6px 5px 24px, label 16px
     red arrow capsule          65 x 42
   ============================================================ */

p.ftr__ctacopy {
  max-width: 45ch;
}

@media screen and (max-width: 991px) {
  /* ---- CTA block ---------------------------------------------- */
  .ftr__top {
    padding-top: 60px;
    padding-bottom: 56px;
    gap: 28px;
  }

  .ftr__cta {
    padding-top: 0;
  }

  /* 32px at 360 up to the 40px the 1024 frame uses. */
  .ftr__ctatitle {
    font-size: clamp(3.2rem, 1.268vw + 2.744rem, 4rem);
  }

  .ftr__ctacopy {
    font-size: 1.4rem;
  }

  /* ---- mid band: menus on one row, newsletter beneath ----------
     The export runs newsletter | menus as a row. Stacked, the three
     menus stay a single row of their own and the newsletter (which
     contains the social icons) drops below them. */
  .ftr__mid {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 44px;
    padding-top: 56px;
    padding-bottom: 72px;
  }

  .ftr__socials {
    margin-top: 30px;
  }

  .lnb-news {
    margin-top: 5px;
  }

  .ftr {
    padding-top: 0;
  }

  .ftr__cols {
    order: 1;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: 100%;
    gap: 16px;
    min-width: 0;
  }

  .ftr__col {
    flex: unset;
    min-width: 0;
  }

  /* The export sets these nowrap, which is fine beside a 144px gap
     on desktop but makes the three columns run into each other once
     they are thirds of a phone — "Brand Identity Design" straight
     over "Healthcare". */
  .ftr__link,
  .ftr__coltitle {
    white-space: normal;
  }

  .ftr__news {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .ftr__top {
    padding-bottom: 20px;
  }

  .ftr__mid {
    gap: 36px;
    padding-top: 40px;
    padding-bottom: 56px;
  }

  /* Three columns inside ~328px, so the headings and links come
     down a step and the gap tightens rather than the row breaking. */
  .ftr__cols {
    gap: 10px;
  }

  .ftr__coltitle {
    margin-bottom: 16px;
    font-size: 1.6rem;
  }

  .ftr__link {
    font-size: 1.4rem;
  }
}

/* ============================================================
   Testimonial portrait slides
   Two clients have not sent a picture yet. A stock face under a real
   person's name reads as that person, so those slides show a
   monogram in the card's own palette instead — swap in a real photo
   and the <img> goes straight back.
   ============================================================ */
.pcard__mono {
  background-image: radial-gradient(circle at 50% 38%, #2c2629 0%, #1a1618 68%);
  font-family: var(--_typography---font-display);
  color: #ffffff2e;
  letter-spacing: 0.06em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 9rem;
  line-height: 1;
  display: flex;
}

/* The slide now carries the client's real role, and some of those run
   long ("Owner, Builder Trade Depot / Neowall / Greta Grove"). The
   shared sheet only pins .pcard__meta to the left, so the line ran
   off the card; give it the opposite edge to wrap against. */
.pcard__meta {
  right: 20px;
}

.pcard__role {
  white-space: normal;
}

@media screen and (max-width: 767px) {
  .pcard__meta {
    right: 10px;
  }
}

/* The real reviews run longer than the placeholder copy the card was
   measured against, and the shared sheet pins .tcard to height:301px,
   which clipped the last line. Every breakpoint below 1280 already
   releases that height; this does the same on desktop and lets the
   paired portrait slide stretch with it. */
@media screen and (min-width: 1280px) {
  .tcard {
    height: auto;
    min-height: 301px;
  }

  .pcard {
    aspect-ratio: auto;
    min-height: 301px;
  }
}

@media screen and (max-width: 767px) {
  .pcard__mono {
    font-size: 5.4rem;
  }
}

/* Belt and braces on the "Made in Webflow" badge: the markup is gone
   and webflow.js no longer has the attributes it needs to re-inject
   it, but a future re-export of the page would bring both back. */
.w-webflow-badge {
  display: none !important;
}

/* ============================================================
   Video testimonial modal
   The featured testimonial plays a YouTube Short, so the panel is
   portrait (9:16) rather than the 16:9 default it inherits.
   ============================================================ */
.vmodal__panel {
  max-width: 420px;
}

.vmodal__frame {
  padding-bottom: 177.78%;
}

@media screen and (max-height: 820px) {
  /* Keep the whole frame on screen on short viewports: cap it by
     height and let the width follow the 9:16 ratio. */
  .vmodal__panel {
    max-width: min(420px, calc((100vh - 120px) * 0.5625));
  }
}