/* =========================================================
   RESPONSIVE — START
   All breakpoint overrides live here, grouped by component/
   section, so the whole responsive behavior of the site can
   be audited from one file. Section files hold layout that is
   true at every size; this file holds what changes and why.
   ========================================================= */


/* =========================================================
   CONTAINER — TABLET & MOBILE PADDING — START
   ========================================================= */
@media (max-width: 1024px) {
  .container {
    padding-inline: var(--page-padding-tablet);
  }
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--page-padding-mobile);
  }
}
/* =========================================================
   CONTAINER — TABLET & MOBILE PADDING — END
   ========================================================= */


/* =========================================================
   HEADER / NAVIGATION — RESPONSIVE — START
   Below 1024px there isn't reliably enough room for six nav
   items plus a CTA on one line, so navigation collapses into
   the hamburger-triggered mobile menu.
   ========================================================= */
@media (max-width: 1024px) {
  .navbar__links,
  .navbar__cta .btn {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }
}

@media (min-width: 1025px) {
  .mobile-menu {
    display: none !important; /* Never show the mobile panel on desktop, even mid-animation */
  }
}
/* =========================================================
   HEADER / NAVIGATION — RESPONSIVE — END
   ========================================================= */


/* =========================================================
   HERO — TABLET RESPONSIVE — START
   The background photo already covers the section at every
   size, so tablet only needs to relax the text column width —
   no image repositioning required.
   ========================================================= */
@media (max-width: 1024px) {
  .hero__content {
    max-width: 100%;
  }

  /* Keep the hero headline identical to desktop below 1024px:
     root black, with no responsive color shift. */
  .hero__content .hero-heading,
  .hero__content .hero-heading__w {
    color: var(--color-black);
    -webkit-text-stroke-color: var(--color-black);
    filter: none;
    opacity: 1;
  }
}
/* =========================================================
   HERO — TABLET RESPONSIVE — END
   ========================================================= */


/* =========================================================
   HERO — TABLET / MOBILE SHARPNESS — START
   Keep hero text and review imagery crisp below desktop widths.
   No blur, opacity, filters, or GPU transforms are applied to the
   actual content; only the decorative background video remains faded.
   ========================================================= */
@media (max-width: 1024px) {
  .hero__content,
  .hero__content *,
  .hero__what-we-do,
  .hero__what-we-do *,
  .hero__proof,
  .hero__proof *,
  .hero__proof .avatar-stack__item,
  .hero__proof .avatar-stack__more {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
  }

  .hero__content,
  .hero__what-we-do,
  .hero__proof {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .hero__proof .avatar-stack__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .hero__scrim {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* =========================================================
   HERO — TABLET / MOBILE SHARPNESS — END
   ========================================================= */

/* =========================================================
   HERO — MOBILE RESPONSIVE — START
   Tightens the heading, paragraph and vertical rhythm so the
   full hero — nav, headline, copy, CTAs and social proof — fits
   within one screen with no scrolling, per the brand's own
   38–48px mobile hero-size guidance. The background photo stays
   exactly where it is; only the content on top gets more compact.
   ========================================================= */
@media (max-width: 767px) {
  .hero__content .hero-heading {
    font-size: clamp(40px, 12vw, 54px);
    line-height: 1.04;
    font-weight: var(--font-extrabold);
    color: var(--color-black);
    -webkit-text-stroke: 0.5px var(--color-black);
    text-rendering: auto;
    -webkit-font-smoothing: auto;
    opacity: 1;
  }

  /* On small phones, start the second line flush with the left edge
     of the hero heading, then move it only a small amount rightward.
     This keeps the editorial transition while preventing overflow. */
  .hero__content .hero-heading__line2 {
    transform: translateX(0);
    animation: hero-heading-slide-mobile-fixed 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
  }

  .hero__content .hero-heading__w {
    color: var(--color-black);
    -webkit-text-stroke: 0.5px var(--color-black);
  }

  @keyframes hero-heading-slide-mobile-fixed {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(clamp(0px, 3vw, 18px));
    }
  }

  .hero__content .hero-paragraph {
    font-size: 16px;
    color: var(--color-primary-text);
    -webkit-font-smoothing: auto;
  }

  .hero__content .hero-eyebrow {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .hero__content .hero-heading {
    margin-bottom: 18px;
  }

  .hero__content .hero-paragraph {
    margin-bottom: 26px;
  }

  .hero__proof .avatar-stack__item,
  .hero__proof .avatar-stack__more {
    width: 44px;
    height: 44px;
  }

  .hero__proof .avatar-stack__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Preserve a clear visual separation between the hero heading/copy
     and the editorial What We Do block on narrow screens. */
  .hero__what-we-do {
    margin-top: 34px;
  }

  /* Keep the compact hero copy and reviews visually crisp on phones
     without altering the desktop composition. */
  .hero__content,
  .hero__what-we-do,
  .hero__proof {
    opacity: 1;
    filter: none;
  }

  .hero__content,
  .hero__what-we-do,
  .hero__proof,
  .hero__content *,
  .hero__what-we-do * {
    filter: none;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: geometricPrecision;
  }

  .hero__proof .avatar-stack__item img {
    image-rendering: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* Keep the mobile hero as clear as desktop. Do not add a responsive
     white veil that washes out the background or makes content appear hazy. */
  .hero__scrim {
    background: transparent;
  }

  .hero__proof {
    padding-top: 24px;
  }
}

/* =========================================================
   HERO — MOBILE RESPONSIVE — END
   ========================================================= */

/* =========================================================
   VISUAL SHOWCASE — RESPONSIVE — START
   Shorter panel height at smaller widths, matching a reference
   marquee's own breakpoint values, so photos stay proportionate
   rather than dominating a small screen edge-to-edge.
   ========================================================= */
@media (max-width: 1024px) {
  .showcase__slide {
    height: 440px;
  }
}

@media (max-width: 767px) {
  .showcase {
    padding-block: var(--space-xl);
  }

  .showcase__slide {
    height: 400px;
  }
}

@media (max-width: 479px) {
  .showcase__slide {
    height: 330px;
  }
}
/* =========================================================
   VISUAL SHOWCASE — RESPONSIVE — END
   ========================================================= */

/* =========================================================
   GROWTH — RESPONSIVE — START
   Same full-bleed-background pattern as the hero at every size —
   no side panel to fall back to a contained block anymore. Only
   the text sizing/spacing and the scrim's strength change.
   ========================================================= */
@media (max-width: 1024px) {
  .growth__content {
    max-width: 100%;
  }

  /* Once the text column goes full-width, it can land over the
     photo's darker wall/glass areas — same contrast fix as the
     hero, just triggered at the same breakpoint where the column
     actually widens rather than waiting for the phone tier. */
  .growth__scrim {
    background: rgba(255, 255, 255, 0.60);
  }

  /* The third feature's copy also reaches far enough right at
     this width to collide with this corner label — hidden rather
     than fought over space. */
  .growth__label {
    display: none;
  }
}

@media (max-width: 767px) {
  .growth {
    padding-block: var(--space-lg);
  }

  /* Mobile Section 3 uses the portrait artwork as a dedicated block
     in normal document flow. The desktop background remains hidden
     so the portrait can occupy the full mobile width without being
     shrunk into the section or sitting behind the feature cards. */
  .growth__bg-picture {
    display: none;
  }

  .growth__mobile-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0 0 var(--space-lg);
    object-fit: cover;
    object-position: center top;
  }

  /* The feature cards now follow the complete portrait image naturally. */
  .growth__features {
    margin-top: 0;
  }

  /* No overlay is needed because the portrait artwork itself provides
     a clean white upper area for the text. */
  .growth__scrim {
    display: none;
  }

  /* Matches the hero's mobile heading size exactly — same "one
     consistent scale everywhere" rule as desktop. */
  .growth-heading {
    font-size: clamp(40px, 12vw, 54px);
    line-height: 1.04;
  }

  .growth__paragraph {
    max-width: 100%;
  }

  .growth__actions {
    gap: var(--space-sm);
  }

  .growth__actions .btn {
    justify-content: center;
  }

  /* Three columns with dividers would be too cramped on a phone —
     stacks to one column, dividers become horizontal rules instead. */
  .growth__features {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .growth__feature {
    padding-left: 0;
    padding-top: var(--space-sm);
    border-left: none;
    border-top: 1px solid var(--color-light-gray);
  }

  .growth__feature:first-child {
    padding-top: 0;
    border-top: none;
  }
}

@media (max-width: 480px) {
  .growth__actions {
    flex-direction: column;
    align-items: stretch;
  }
}
/* =========================================================
   GROWTH — RESPONSIVE — END
   ========================================================= */

/* =========================================================
   RESPONSIVE — END
   ========================================================= */

@media (max-width: 767px) {
  /* Mobile artwork sits below the complete paragraph + CTA block,
     matching the earlier mobile flow instead of beginning at the paragraph. */
  .growth__mobile-visual {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-top: 0;
    overflow: visible;
  }

  .growth__mobile-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
  }

  .growth__mobile-image {
    position: relative;
    display: block;
    width: calc(100% + (var(--page-padding-mobile) * 2));
    height: auto;
    max-width: none;
    margin: var(--space-md) calc(var(--page-padding-mobile) * -1) 0;
    object-fit: contain;
    object-position: center top;
    z-index: 0;
  }

  .growth__mobile-copy .growth__paragraph {
    max-width: 100%;
    margin-bottom: var(--space-md);
  }

  .growth__mobile-copy .growth__actions {
    margin-bottom: 0;
  }

  .growth__features {
    margin-top: 0;
  }
}


/* Mobile-only editorial label: hidden on tablet/desktop. */
.growth-mobile-label {
  display: none;
}

/* =========================================================
   GROWTH — MOBILE IMAGE LABEL
   Small editorial label placed in the clean upper-left area
   of the portrait Section 3 artwork. Mobile only.
   ========================================================= */
@media (max-width: 767px) {
  .growth__mobile-image-wrap {
    position: relative;
    width: calc(100% + (var(--page-padding-mobile) * 2));
    margin: var(--space-md) calc(var(--page-padding-mobile) * -1) 0;
    overflow: hidden;
  }

  .growth__mobile-image-wrap .growth__mobile-image {
    width: 100%;
    margin: 0;
  }

  .growth-mobile-label {
    display: block !important;
    position: absolute;
    top: 32px;
    left: 20px;
    z-index: 10;
    width: 145px;
    pointer-events: none;
  }

  .growth-mobile-dash {
    display: block;
    width: 22px;
    height: 3px;
    margin-bottom: 10px;
    background: var(--color-primary-purple);
  }

  .growth-mobile-stack {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-text);
  }

  .growth-mobile-stack span {
    color: var(--color-primary-purple);
  }

  .growth-mobile-caption {
    margin: 9px 0 0;
    font-family: var(--font-primary);
    font-size: 7px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--color-muted-text);
  }
}


@keyframes hero-heading-slide-mobile {
  0%, 26% {
    transform: translateX(0);
  }
  68% {
    transform: translateX(5vw);
  }
  100% {
    transform: translateX(3vw);
  }
}

/* The growth section no longer displays its CTA buttons. */
.growth__actions--hidden {
  display: none !important;
}

/* =========================================================
   HERO — TABLET / PHONE CONTENT ORDER — START
   Keep the responsive reading order consistent below desktop:
   heading/transition → What We Do editorial copy → reviews.
   The proof block stays at the bottom of the hero rather than
   jumping upward when the CTA buttons are absent.
   ========================================================= */
@media (max-width: 1024px) {
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-inline: var(--page-padding-tablet);
  }

  .hero::before,
  .hero::after {
    display: none;
  }

  .hero > .container,
  .hero__content {
    display: contents;
  }

  .hero__content > .hero-eyebrow {
    order: 1;
  }

  .hero__content > .hero-heading {
    order: 2;
  }

  .hero__content > .hero-paragraph {
    order: 3;
  }

  .hero__what-we-do {
    order: 4;
    position: static;
    top: auto;
    right: auto;
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0 0 20px;
    text-align: left;
  }

  .hero__what-we-do-button {
    margin-top: 18px;
  }

  .hero__actions--spacer {
    order: 5;
    min-height: 0;
    margin: 0;
  }

  .hero__proof {
    order: 6;
    margin-top: auto;
    padding-top: 18px;
    align-items: flex-start;
  }

  .hero__proof .avatar-stack,
  .hero__proof .rating {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-inline: var(--page-padding-mobile);
  }

  .hero__what-we-do {
    width: 100%;
    max-width: 560px;
  }

  .hero__what-we-do-dash {
    width: 34px;
    height: 4px;
    margin-bottom: 16px;
  }

  .hero__what-we-do h2 {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1.25;
  }

  .hero__what-we-do p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.5;
  }

  .hero__what-we-do-button {
    margin-top: 16px;
    font-size: 13px;
  }

  .hero__proof {
    padding-top: 18px;
  }
}
/* =========================================================
   HERO — TABLET / PHONE CONTENT ORDER — END
   ========================================================= */

/* Taller mobile phones (e.g. 16 Pro Max / Galaxy Z Fold / S Ultra):
   add a little more breathing room between the hero heading area and
   the editorial What We Do block without changing shorter phones. */
@media (max-width: 767px) and (min-height: 850px) {
  /* Taller phones: add a little more breathing room around the
     two-line Innovation / We Architect heading. */
  .hero__content .hero-eyebrow {
    margin-bottom: 18px;
  }

  .hero__content .hero-heading {
    margin-top: 2px;
    margin-bottom: 30px;
  }

  /* Keep the exact same copy, but give it a five-line editorial wrap
     on taller phone layouts without changing the desktop/tablet copy. */
  .hero__what-we-do p {
    max-width: 310px;
  }

  .hero__what-we-do {
    margin-top: 64px;
  }
}

/* Taller mobile phones only: add a small visual gap between the two
   hero heading lines without changing desktop, tablet, or shorter-phone layouts. */
@media (max-width: 767px) and (min-height: 850px) {
  .hero__content .hero-heading__line2 {
    position: relative;
    top: 3px;
  }
}

/* Short-height mobile phones (e.g. iPhone SE): slightly reduce the
   top inset of the hero so the opening content sits a little higher.
   Taller phones keep their existing spacing unchanged. */
@media (max-width: 767px) and (max-height: 849px) {
  .hero {
    padding-top: calc(var(--space-2xl) - 12px);
  }
}

/* Short-height phones (e.g. iPhone SE): tighten the top inset a little
   further and use a compact version of the What We Do copy so the opening
   section stays breathable without changing taller-phone layouts. */
@media (max-width: 767px) and (max-height: 849px) {
  .hero {
    padding-top: calc(var(--space-2xl) - 32px);
  }

  .hero__what-we-do-copy-full {
    display: none;
  }

  .hero__what-we-do-copy-short {
    display: inline;
  }

  .hero__what-we-do p {
    max-width: 320px;
    font-size: 13px;
    line-height: 1.45;
  }
}

@media (min-width: 768px), (min-height: 850px) {
  .hero__what-we-do-copy-short {
    display: none;
  }
}

/* Copy variants: the full editorial text is the default; the compact copy is
   only used by short-height phones below 767px. */
.hero__what-we-do-copy-full {
  display: inline;
}

.hero__what-we-do-copy-short {
  display: none;
}

@media (max-width: 767px) and (max-height: 849px) {
  .hero__what-we-do-copy-full {
    display: none;
  }

  .hero__what-we-do-copy-short {
    display: inline;
  }
}

/* Short-height mobile phones: slightly reduce the review avatar circles
   so the social-proof row stays compact without affecting taller phones. */
@media (max-width: 767px) and (max-height: 849px) {
  .hero__proof .avatar-stack__item,
  .hero__proof .avatar-stack__more {
    width: 40px;
    height: 40px;
  }

  .hero__proof .avatar-stack__item img {
    width: 100%;
    height: 100%;
  }
}

/* =========================================================
   HERO — FINAL MOBILE/TABLET RENDERING OVERRIDE
   Keep the same visual rendering as desktop below 1024px.
   This removes responsive-only haze/compositing from real content.
   ========================================================= */
@media (max-width: 1024px) {
  .hero__content,
  .hero__what-we-do,
  .hero__proof,
  .hero__content > *,
  .hero__what-we-do > *,
  .hero__proof > * {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
  }

  .hero__content,
  .hero__what-we-do,
  .hero__proof {
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
    text-rendering: auto !important;
  }

  .hero__content .hero-heading,
  .hero__content .hero-heading__w {
    color: var(--color-black) !important;
    -webkit-text-stroke-color: var(--color-black) !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
  }

  .hero__content .hero-heading .accent {
    color: var(--color-primary-purple) !important;
    -webkit-text-stroke-color: var(--color-primary-purple) !important;
  }

  .hero__proof .avatar-stack__item,
  .hero__proof .avatar-stack__more,
  .hero__proof .avatar-stack__item img {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    image-rendering: auto !important;
    will-change: auto !important;
  }

  .hero__scrim {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 767px) {
  .hero__content .hero-heading {
    color: var(--color-black) !important;
    -webkit-text-stroke-color: var(--color-black) !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: auto !important;
    -moz-osx-font-smoothing: auto !important;
  }

  .hero__content .hero-heading .accent {
    color: var(--color-primary-purple) !important;
    -webkit-text-stroke-color: var(--color-primary-purple) !important;
  }
}