/* ============================================================
   Responsive — all @media queries, in original source order.
   Order is preserved so the cascade matches the original file.

   Breakpoints used:
     1280  / 1100 / 1080 / 980 / 860 / 760 / 720 / 640 / 480 / 420 / 380
     plus (hover:none) and (min-width: 1081px)
   prefers-reduced-motion lives in reset.css alongside scroll-behavior.
   ============================================================ */

/* ─── Services page (originally inline at 1100/980/760) ─── */

@media (max-width: 1100px) {
  .svc-block-grid { grid-template-columns: 1fr; gap: 32px; }
  .svc-block-head { position: static; }
}
@media (max-width: 980px) {
  .svc-jump-wrap {
    position: fixed;
    top: auto;
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    left: 16px;
    right: 16px;
    padding: 0;
    z-index: 90;
    pointer-events: auto;
    display: block;
  }
  .svc-jump {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: visible;
    flex-wrap: nowrap;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    isolation: isolate;
    scroll-padding-inline: 24px;
    box-shadow:
      0 1px 0 0 color-mix(in srgb, var(--fg) 6%, transparent) inset,
      0 18px 40px -16px color-mix(in srgb, var(--fg) 35%, transparent);
  }
  .svc-jump-pill {
    padding: 12px 18px;
    font-size: 13px;
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  .svc-stack { padding-bottom: 160px; }
  .svc-block { scroll-margin-top: 96px; }

  /* Tweaks FAB collides with the fixed services bar — lift it above */
  body:has(.svc-jump-wrap) .tweaks-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 760px) {
  .svc-stack { padding: 48px 16px 140px; gap: 64px; }
  .svc-block + .svc-block::before { top: -32px; }
  .svc-block-title { font-size: clamp(28px, 7vw, 40px); }
  .svc-deliv-grid { grid-template-columns: 1fr; gap: 10px; }
  .svc-deliv-card { padding: 16px; gap: 14px; grid-template-columns: 32px 1fr; }
  .svc-deliv-icon svg { width: 28px; height: 28px; }
  .svc-block-meta { padding-top: 14px; gap: 12px; }
}

/* ─── Work / case / contact collapse (originally line 1222) ─── */

@media (max-width: 980px) {
  .work-grid, .work-page-grid { grid-template-columns: 1fr; }
  .case-section .grid { grid-template-columns: 1fr; gap: 24px; }
  .case-stats { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; gap: 48px; }
  .expertise-grid { grid-template-columns: 1fr; }

  /* Hero placeholder image was 60vh / min-height 480 — on phones that
     dominates the viewport before the case copy starts. Cap it. */
  .case-hero-image {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ─── Home process flow (originally line 1472) ─── */

@media (max-width: 1100px) {
  /* proc-flow — collapse zigzag to 3-col stacked grid */
  .proc-flow-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    column-gap: 16px;
    row-gap: 16px;
  }
  .proc-flow-card { grid-column: auto !important; grid-row: auto !important; align-self: stretch !important; }
  .proc-flow-card.up, .proc-flow-card.down { transform: none; }
  .proc-flow-card.up:hover, .proc-flow-card.down:hover { transform: translateY(-4px); }
  .proc-flow-card::after { display: none; }
  .proc-flow-dot { display: none; }
  .proc-flow-track { display: none; }
}

/* ─── End CTA card phone tweak (originally line 1563) ─── */

@media (max-width: 720px) {
  .end-cta-wrap { padding: 40px 16px 56px; }
  .end-cta-card { min-height: 420px; border-radius: 22px; }
  .end-cta-card-inner { padding: 64px 24px; min-height: 420px; }
}

/* ─── Carousel nav + svc-graphic (originally line 1782+) ─── */

@media (max-width: 1080px) {
  .carousel-nav { display: flex; }
}
@media (min-width: 1081px) {
  .svc-graphic { cursor: default; }
}
@media (max-width: 1080px) {
  .svc-graphic { grid-template-columns: repeat(2, 1fr); }
  .svc-graphic-card,
  .svc-graphic-card:nth-child(n) { grid-column: span 1; }
}
@media (max-width: 760px) {
  /* On phones, swap the grid for a horizontal scroll-snap carousel.
     Feels native, lets users swipe through cards, takes much less vertical space. */
  .svc-graphic {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    /* Bleed to viewport edges so first card aligns with section text,
       last card has matching trailing space */
    margin-left: -16px;
    margin-right: -16px;
    padding: 8px 16px 24px;
    -webkit-overflow-scrolling: touch;
  }
  .svc-graphic::-webkit-scrollbar { display: none; }
  .svc-graphic { scrollbar-width: none; }

  .svc-graphic-card,
  .svc-graphic-card:nth-child(n) {
    grid-column: auto;
    flex: 0 0 78%;
    max-width: 320px;
    min-width: 260px;
    scroll-snap-align: start;
    padding: 22px 22px 20px;
    min-height: 280px;
    gap: 12px;
    border-radius: 18px;
  }
  .svc-graphic-icon svg { width: 36px; height: 36px; }
  .svc-graphic-num { font-size: 10px; }
  .svc-graphic-title {
    font-size: 22px;
    letter-spacing: -0.02em;
    margin-top: 2px;
  }
  .svc-graphic-lede {
    font-size: 14px;
    line-height: 1.5;
    max-width: none;
  }
  .svc-graphic-tags { gap: 4px; }
  .svc-graphic-tags li {
    font-size: 10px;
    padding: 4px 8px;
  }
  .svc-graphic-foot { padding-top: 14px; }
  .svc-graphic-cta { font-size: 10px; }
  .svc-graphic-arr { width: 28px; height: 28px; }
}

/* ─── Page hero secondary (originally line 1944) ─── */

@media (max-width: 980px) {
  .page-hero { min-height: 44vh; padding: 110px 20px 48px; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 16px; }
  .page-hero-title { font-size: clamp(30px, 5.4vw, 48px); }
  .page-hero-sub { margin-top: 14px; }
}

/* ─── Show burger / hide desktop nav (originally line 2167) ─── */

@media (max-width: 980px) {
  .nav--desktop { display: none; }
  .brand-status--desktop { display: none; }
  .cta-pill--desktop { display: none; }
  .burger { display: inline-flex; }
  .chrome-top { padding-left: 18px !important; padding-right: 18px !important; }
}


/* ============================================================
   CONSOLIDATED RESPONSIVE SYSTEM
   Breakpoints:
     1100px  wide tablet / small desktop
      980px  tablet (burger nav kicks in here)
      860px  small tablet
      640px  mobile
      480px  small mobile
      420px  tiny
   ============================================================ */

/* ─── 1100px ─── */
@media (max-width: 1100px) {
  /* proc-flow — handled inline already, but tighten padding */
  .proc-flow { padding: 40px 0 20px; }
  .proc-flow-card { padding: 18px 14px; gap: 8px; }
  .proc-flow-name { font-size: 18px; }
}

/* ─── 980px — Tablet landscape ─── */
@media (max-width: 980px) {
  /* Global section */
  .section { padding: 56px 20px; }
  .shell { padding-left: 20px; padding-right: 20px; }

  /* section-head collapses from 12-col grid → single column stack */
  .section-head {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 32px;
  }
  .section-num, .section-eye { margin-bottom: 2px; }
  .section-title { font-size: clamp(26px, 5vw, 42px); margin-top: 4px; }

  /* work grids */
  .work-grid, .work-page-grid { grid-template-columns: 1fr; gap: 40px; }
  .work-card[style*="grid-column"] { grid-column: span 1 !important; }

  /* contact & about */
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .expertise-grid { grid-template-columns: 1fr; }
  .about-bio-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-body-wrap { grid-template-columns: 1fr; gap: 40px; }
  .about-expertise { grid-template-columns: 1fr; }
  .about-pull { padding: 56px 0; }
  .about-pull-mark { font-size: clamp(72px, 16vw, 120px); }

  /* case */
  .case-section .grid { grid-template-columns: 1fr; gap: 24px; }
  .case-stats { grid-template-columns: 1fr 1fr; }

  /* footer */
  .foot { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 20px; }
  .foot-bottom { margin: 24px 20px 0; }

  /* page hero */
  .page-hero { min-height: 44vh; padding: 110px 20px 48px; }
  .page-hero-inner { grid-template-columns: 1fr; gap: 16px; }
  .page-hero-title { font-size: clamp(30px, 5.4vw, 48px); }
  .page-hero-body { max-width: 100%; }

  /* end-cta card */
  .end-cta-wrap { padding: 40px 20px 64px; }
  .end-cta-card-inner { padding: 72px 32px; min-height: 440px; }

  /* field-row stacks — keep gap so the inputs read as separate fields */
  .field-row { grid-template-columns: 1fr; gap: 20px; }
}

/* ─── 860px — small tablet refinements (nav already burger from 980px) ─── */
@media (max-width: 860px) {
  :root { --chrome-h: 64px; }

  /* proc-flow → 2-col (zigzag already killed at 1100px) */
  .proc-flow-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 12px;
    row-gap: 12px;
  }
}

/* ─── 640px — Mobile ─── */
@media (max-width: 640px) {
  /* Global section */
  .section { padding: 40px 16px; }
  .shell { padding-left: 16px; padding-right: 16px; }

  /* section-head */
  .section-title { font-size: clamp(22px, 6.5vw, 36px); }

  /* work cards */
  .work-thumb { border-radius: 14px; }
  .work-name { font-size: clamp(24px, 6vw, 34px); }

  /* svc-graphic — already handled by dedicated 760px breakpoint above */
  .svc-graphic-card { padding: 20px 18px 16px; }

  /* proc-flow → 1-col stack */
  .proc-flow-grid { grid-template-columns: 1fr; gap: 10px; }
  .proc-flow-card { min-height: 0; padding: 16px 12px 14px; }

  /* footer → single col */
  .foot { grid-template-columns: 1fr; gap: 36px; padding: 40px 16px; }
  .foot-bottom {
    margin: 20px 16px 0;
    flex-direction: column; gap: 6px;
    text-align: left;
    align-items: flex-start;
  }

  /* page hero */
  .page-hero { min-height: 38vh; padding: 96px 16px 40px; }
  .page-hero-title { font-size: clamp(26px, 6.5vw, 38px); }
  .page-hero-sub { font-size: 14px; margin-top: 12px; }

  /* end-cta */
  .end-cta-wrap { padding: 24px 12px 48px; }
  .end-cta-card { border-radius: 18px; min-height: 380px; }
  .end-cta-card-inner { padding: 48px 20px; min-height: 380px; gap: 14px; }
  .end-cta-title { font-size: clamp(26px, 7vw, 44px); }

  /* hero shader cta buttons → stack */
  .hero-shader-ctas {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* case stats */
  .case-stats { grid-template-columns: 1fr; }

  /* about bio grid */
  .about-bio-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-body-wrap { gap: 32px; }
  .about-portrait { aspect-ratio: 3/2; }
  .about-portrait .work-thumb { aspect-ratio: 3/2; }
  .about-meta { gap: 8px 14px; margin-bottom: 24px; }
  .about-meta span:not(:last-child)::after { margin-left: 14px; }

  /* contact form */
  .contact-form { gap: 20px; }
  .field label { font-size: 10px; }
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 14px; }

  /* chrome */
  .chrome-top { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ─── 420px — Small mobile ─── */
@media (max-width: 420px) {
  .section { padding: 32px 14px; }
  .proc-flow-grid { grid-template-columns: 1fr; }
  .proc-flow-card { min-height: 0; }
  .end-cta-card-inner { padding: 40px 16px; }
  .page-hero { padding: 84px 14px 36px; }
  .page-hero-title { font-size: clamp(24px, 7.2vw, 34px); }
  .foot { padding: 32px 14px; }
  .foot-bottom { margin: 16px 14px 0; }
  .work-name { font-size: clamp(22px, 7vw, 30px); }
}

/* ============================================================
   HERO SHADER + SECONDARY RESPONSIVE PASS
   Below-desktop overrides for inline-styled h1 and tightening
   of section padding across the cascade:
   1280 / 1100 / 980 / 860 / 640 / 480 / 380
   ============================================================ */

/* ─── 1280px and below — slightly tighter shell ─── */
@media (max-width: 1280px) {
  .end-cta-card-inner { padding: 88px 56px; }
}

/* ─── 1100px and below ─── */
@media (max-width: 1100px) {
  .end-cta-card-inner { padding: 80px 48px; }
  .section { padding: 72px 24px; }
}

/* ─── 980px (tablet landscape) — refinements ─── */
@media (max-width: 980px) {
  /* Override the hardcoded inline fontSize on the hero h1 below desktop */
  .hero-shader-h1 { font-size: clamp(54px, 8vw, 80px) !important; letter-spacing: -2px !important; }
  .hero-shader-h1 .hero-shader-line--lead { letter-spacing: -2.4px !important; }
  .hero-shader-h1 .hero-shader-line--sub { font-size: clamp(22px, 3.2vw, 32px) !important; line-height: 1.4 !important; }
  .end-cta-card-inner { padding: 72px 40px; min-height: 440px; }

  /* svc-graphic on tablet */
  .svc-graphic { grid-template-columns: 1fr 1fr; gap: 14px; }

  /* case study */
  .case-stats { grid-template-columns: 1fr 1fr; }
  .case-shots { grid-template-columns: 1fr 1fr; }
  .case-shot.wide { grid-column: span 2; }
}

/* ─── 860px — small tablet refinements (nav already burger from 980px) ─── */
@media (max-width: 860px) {
  .hero-shader-h1 { font-size: clamp(44px, 8.6vw, 64px) !important; }
  .hero-shader-h1 .hero-shader-line--lead { letter-spacing: -2px !important; }
  .hero-shader-h1 .hero-shader-line--sub { font-size: clamp(20px, 3.4vw, 26px) !important; }
  .end-cta-card-inner { padding: 64px 32px; min-height: 400px; }
  .end-cta-card-inner .end-cta-title { font-size: clamp(28px, 5.4vw, 48px); }

  /* Case study tweaks */
  .case-shots { grid-template-columns: 1fr; gap: 16px; }
  .case-shot.wide, .case-shot.tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; }
  .case-hero { padding: 120px 20px 60px; }
  .case-meta-strip { grid-template-columns: 1fr 1fr; gap: 24px; }
  .case-quote { padding: 80px 20px; }
}

/* ─── 640px — Mobile ─── */
@media (max-width: 640px) {
  /* Hero shader — tighter font sizes */
  .hero-shader-h1 { font-size: clamp(36px, 9.5vw, 52px) !important; line-height: 1.0 !important; }
  .hero-shader-h1 .hero-shader-line--lead { letter-spacing: -1.6px !important; }
  .hero-shader-h1 .hero-shader-line--sub { font-size: clamp(17px, 4vw, 22px) !important; line-height: 1.3 !important; margin-top: 0.5em !important; letter-spacing: -0.6px !important; }
  /* Stack the hero CTA buttons full-width on phones */
  .hero-shader-ctas { width: 100%; flex-direction: column !important; align-items: stretch !important; gap: 10px !important; flex-wrap: nowrap !important; }
  .hero-shader-ctas .cta-pill,
  .hero-shader-ctas .btn-ghost { justify-content: center; width: 100%; }

  /* Primary action tap target — 44px floor on phones (was ~38px) */
  .cta-pill { padding: 14px 20px 14px 22px; min-height: 44px; }
  .btn-ghost { padding: 12px 20px; min-height: 44px; }

  /* end CTA card — left aligned, mobile-tuned */
  .end-cta-wrap { padding: 24px 12px 48px; }
  .end-cta-card { border-radius: 18px; min-height: 360px; }
  .end-cta-card-inner { padding: 48px 20px; min-height: 360px; gap: 16px; }
  .end-cta-card-inner .end-cta-title { font-size: clamp(30px, 8vw, 48px); }
  .end-cta-card-inner .end-cta-sub { font-size: 16px; }
  .end-cta-card-inner .end-cta-btn .cta-pill { width: auto; }
  .end-cta-title { font-size: clamp(24px, 7vw, 38px); }

  /* Case nespresso hero */
  .case-hero { padding: 100px 16px 40px; }
  .case-hero .hero-display { font-size: clamp(44px, 14vw, 88px) !important; }
  .case-meta-strip { grid-template-columns: 1fr; gap: 16px; }
  .case-section { padding: 56px 16px; }
  .case-stats .case-stat { padding: 40px 20px; }
  .case-stat .n { font-size: clamp(40px, 9vw, 64px); }
  .case-quote { padding: 64px 16px; text-align: left; }
  .case-quote blockquote { font-size: clamp(22px, 5.5vw, 32px); }

  /* Process flow — alternating cards already neutralised at 860; ensure single col here */
  .proc-flow-grid { grid-template-columns: 1fr; gap: 8px; }
  .proc-flow-card { padding: 20px 16px; min-height: 0; }

  /* About bio */
  .about-text { font-size: 17px; }
}

/* ─── 480px — small mobile ─── */
@media (max-width: 480px) {
  .section { padding: 36px 14px; }
  .shell { padding-left: 14px; padding-right: 14px; }
  .hero-shader-h1 { font-size: clamp(32px, 10vw, 42px) !important; }
  .end-cta-card-inner { padding: 40px 20px; min-height: 320px; }
  .end-cta-title { font-size: clamp(22px, 7.5vw, 32px); }

  /* Tighten section spacing */
  .section-head { margin-bottom: 24px; }
  .section-title { font-size: clamp(22px, 7vw, 32px); }

  /* Mobile menu sizing */
  .mobile-menu-inner { padding: 100px 20px 24px; gap: 28px; }
  .mobile-menu-nav button {
    padding: 18px 4px;
    font-size: clamp(28px, 8vw, 40px);
    /* allow wrap on tiny screens so long labels like "AI-assisted Workflows"
       don't clip the trailing arrow off-screen */
    text-wrap: pretty;
    line-height: 1.05;
  }

  /* Footer */
  .foot { padding: 32px 14px; }
  .foot-bottom { margin: 16px 14px 0; }
}

/* ─── 380px — tiniest screens ─── */
@media (max-width: 380px) {
  .hero-shader-h1 { font-size: clamp(28px, 11vw, 36px) !important; letter-spacing: -1.2px !important; }
  .hero-shader-h1 .hero-shader-line--sub { font-size: 15px !important; }
  .end-cta-title { font-size: clamp(20px, 8vw, 28px); }
  .section-title { font-size: clamp(20px, 7.5vw, 28px); }
  .work-name { font-size: clamp(20px, 7vw, 26px); }
  .brand-mark { font-size: 18px; line-height: 18px; }
  .chrome-top { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ─── Touch device — disable crosshair cursor on heroes ─── */
@media (hover: none) and (pointer: coarse) {
  [data-section-hero], section[data-hero-mood] { cursor: default !important; }
}

/* ─── Tweaks panel on small screens (originally inside JS-injected CSS) ─── */
@media (max-width: 640px) {
  .tweaks-panel { right: 12px; left: 12px; width: auto; }
  .tweaks-fab { right: 16px; bottom: 16px; }
}

/* ─── Reduced motion — pause kinetic strip / marquee ───
   The marquee mounts 32 logo spans even when motion is reduced.
   Stop the animation entirely so there's no infinite scroll. */
@media (prefers-reduced-motion: reduce) {
  .refs-marquee-track { animation: none !important; transform: none !important; }
}

/* ─── Chrome scrolled background fallback ───
   The .scrolled state relies on backdrop-filter on ::before/::after.
   Browsers without backdrop-filter (older Android, Firefox without
   gfx.webrender.compositor) get a solid fallback so the burger and
   brand mark stay legible over hero content. */
@supports not (backdrop-filter: blur(1px)) {
  .chrome-top.scrolled {
    background-color: color-mix(in srgb, var(--bg) 88%, transparent);
    border-bottom-color: var(--line);
  }
}