/* ─── Mobile Responsive Overrides ────────────────────────────────────────
   Applied only below 768px. Desktop layout is untouched.
   ─────────────────────────────────────────────────────────────────────── */

/* Disable iOS Safari double-tap-to-zoom on text (pinch-zoom still works) */
html { touch-action: manipulation; }

/* Mobile-only article author line — hidden on desktop, shown via @media below */
.article-author-mobile { display: none; }

/* ─── Narrow desktop (1016–1280px) — shrink sizes so elements stop crowding
   each other. Full desktop layout below 1280px otherwise overlaps. */
@media (min-width: 1016px) and (max-width: 1280px) {
  /* Homepage hero */
  h1.text-\[64px\] { font-size: 52px !important; }
  .w-\[440px\] { width: 360px !important; }

  /* Subpage hero (about / research / creative / digital / etc.):
     match homepage hero scaling so titles + descriptions align the same way. */
  .page-hero__title { font-size: 52px !important; max-width: 820px !important; }
  .page-hero__aside { width: 360px !important; }

  /* People (about) team grid breakpoints handled in dedicated block below. */

  /* Homepage education paragraph — match hero description width */
  .home-education > p { max-width: 480px !important; }

  /* Footer: tighter newsletter column + smaller architects title */
  footer [style*="width:380px"] { width: 320px !important; }
  footer .text-4xl { font-size: 28px !important; }
}

/* ─── Header: switch to mobile menu earlier (at/below 1015px) ────────────
   Pill nav + right nav don't fit comfortably below ~1015px,
   so we collapse to the hamburger menu at ≤1015px. */
@media (max-width: 1015px) {
  #page-switcher { display: none !important; }
  header nav { display: none !important; }
  #mobile-menu-btn { display: block !important; }
  #mobile-menu.open { display: flex !important; }

  /* Mobile pill bar (Research/Creative/Digital) sits just below the header.
     Header on tablet (768–1015) is 75px tall; on mobile (<768) it's 60px.
     The <768 block below overrides top + body padding to match the smaller header. */
  #mobile-pill-bar {
    display: flex !important;
    position: fixed !important;
    top: 75px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 49 !important;
    justify-content: center !important;
    padding: 8px 16px 12px !important;
    background: #FAFAFA !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transition: transform 300ms ease !important;
  }
  #mobile-pill-bar.pill-hidden {
    transform: translateY(-100%) !important;
  }

  /* Push page content below the header + pill bar (75 + 48 = 123px). */
  body.pt-\[107px\] { padding-top: 123px !important; }
}

@media (max-width: 1015px) {

  /* ── Page padding ──────────────────────────────────────────────────── */
  /* Reduce horizontal padding from 48px to 16px */
  .px-12, .pl-12, .pr-12 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-16 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-10 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-8 { padding-left: 16px !important; padding-right: 16px !important; }

  /* Body top padding: header 60px + pill switcher ~48px */
  body.pt-\[107px\] { padding-top: 108px !important; }

  /* ── Admin bar ─────────────────────────────────────────────────────── */
  /* Hide admin bar on mobile */
  [class*="z-\[60\]"][class*="h-\[32px\]"] { display: none !important; }

  /* Move header to top (no admin bar) */
  header[class*="top-\[32px\]"] { top: 0 !important; }

  /* ── Header ────────────────────────────────────────────────────────── */
  header[class*="h-\[75px\]"] {
    height: 60px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* ── Flex stacking ──────────────────────────────────────────────────── */
  .flex.items-end.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }

  /* Hide cursor bubble on touch devices */
  .cursor-bubble { display: none !important; }

  /* Mobile-only: header is 60px tall, so pill bar sits at top:60. */
  #mobile-pill-bar { top: 60px !important; }

  /* ── Grid collapses ────────────────────────────────────────────────── */
  /* 4-column grid → 1 column */
  .grid-cols-4 { grid-template-columns: 1fr !important; }
  .grid-cols-4 .col-span-2 { grid-column: span 1 !important; }
  .grid-cols-4 .col-span-3 { grid-column: span 1 !important; }

  /* 3-column grid → 1 column */
  .grid-cols-3 { grid-template-columns: 1fr !important; }

  /* 2-column grid → 1 column */
  .grid-cols-2 { grid-template-columns: 1fr !important; }

  /* 5-column grid (logos) → 2 columns */
  .grid-cols-5 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Grid gaps on mobile ───────────────────────────────────────────── */
  .gap-6 { gap: 24px !important; }
  .gap-8 { gap: 24px !important; }
  .gap-12 { gap: 24px !important; }
  .gap-x-6 { column-gap: 12px !important; }
  .gap-y-12 { row-gap: 32px !important; }

  /* ── Typography scaling ────────────────────────────────────────────── */
  /* Large display headings */
  .text-\[96px\] { font-size: 48px !important; }
  .text-\[72px\] { font-size: 40px !important; }
  .text-\[64px\] { font-size: 40px !important; }
  .text-\[56px\] { font-size: 32px !important; }
  .text-\[48px\] { font-size: 32px !important; }
  .text-\[40px\] { font-size: 32px !important; }
  .text-\[36px\] { font-size: 24px !important; }
  .text-\[32px\] { font-size: 24px !important; }
  .text-4xl { font-size: 24px !important; }

  /* ── Hero layouts ──────────────────────────────────────────────────── */
  /* Homepage hero: more space above, less below */
  .flex.flex-col.pl-12.pr-12.pt-28.pb-28 {
    padding-top: 64px !important;
    padding-bottom: 32px !important;
  }
  /* Homepage hero: stack vertically */
  .flex.items-start.justify-between.pb-20 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
    padding-bottom: 40px !important;
  }
  .flex.items-start.justify-between.pb-20 > .w-\[440px\] {
    width: 100% !important;
  }

  /* Max-width overrides — constrain wide body containers on tablet
     so text doesn't span full screen. Phone block below resets to 100%. */
  .max-w-\[720px\] { max-width: 540px !important; }
  .max-w-\[760px\] { max-width: 540px !important; }
  .max-w-\[680px\] { max-width: 540px !important; }
  .max-w-\[540px\] { max-width: 100% !important; }

  /* ── Section padding ───────────────────────────────────────────────── */
  .pt-28 { padding-top: 40px !important; }
  .pb-28 { padding-bottom: 40px !important; }
  .py-28 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pt-20 { padding-top: 40px !important; }
  .pb-24 { padding-bottom: 40px !important; }
  .pt-16 { padding-top: 40px !important; }
  .py-16 { padding-top: 40px !important; padding-bottom: 40px !important; }
  .py-20 { padding-top: 40px !important; padding-bottom: 40px !important; }

  /* ── Fixed widths → fluid ──────────────────────────────────────────── */
  [style*="width:380px"] { width: 100% !important; }
  [style*="width:440px"] { width: 100% !important; }
  .w-\[440px\] { width: 100% !important; }

  /* ── Case Study Hero ───────────────────────────────────────────────── */
  .cs-hero-section { padding: 32px 16px 0 !important; }
  .cs-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .cs-hero-grid > [style*="grid-column:span 2"] { grid-column: span 1 !important; }
  .cs-hero-left { gap: 24px !important; }
  .cs-hero-title { font-size: 32px !important; }
  .cs-hero-description { font-size: 14px !important; }
  .cs-hero-meta-row { grid-template-columns: 80px 1fr !important; }
  .cs-hero-services { grid-template-columns: 1fr !important; }
  .cs-hero-team { grid-template-columns: 1fr !important; }

  /* ── Page Hero (about, research, etc.) ──────────────────────────────── */
  .page-hero {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 40px 16px !important;
  }
  .page-hero__title { font-size: 32px !important; max-width: 100% !important; }
  .page-hero__aside { width: 100% !important; max-width: 480px !important; }

  /* ── Work banner ───────────────────────────────────────────────────── */
  .work-banner { margin-left: -16px !important; margin-right: -16px !important; }

  /* ── Flex layouts that need stacking ───────────────────────────────── */
  .flex.gap-8.items-start { flex-wrap: wrap !important; }
  .flex.gap-8.order-1 { order: 1 !important; }
  .flex.gap-8.order-2 { order: 2 !important; }

  /* ── Bento grid → stack ────────────────────────────────────────────── */
  .grid.grid-cols-2.gap-8 > .flex.gap-8 { width: 100% !important; }

  /* ── Fixed-height elements → auto ──────────────────────────────────── */
  .h-\[480px\] { height: auto !important; }
  .h-\[400px\] { height: 200px !important; }
  .h-\[144px\] { height: 100px !important; }

  /* ── Aspect ratios → more compact on mobile ────────────────────────── */
  .aspect-\[4\/5\] { aspect-ratio: 4/3 !important; }
  .aspect-\[16\/7\] { aspect-ratio: 16/9 !important; }

  /* ── Carousel adjustments ──────────────────────────────────────────── */
  .carousel-slide { height: 240px !important; }


  /* ── Testimonial ───────────────────────────────────────────────────── */
  .cs-testimonial { max-width: 100% !important; }

  /* ── Logo grid items ───────────────────────────────────────────────── */
  .logo-item { height: 100px !important; padding: 16px !important; }
  .logo-img { max-height: 36px !important; max-width: 120px !important; }

  /* ── Footer ────────────────────────────────────────────────────────── */
  footer.bg-black { padding: 32px 16px !important; gap: 0 !important; }

  /* Top section — stack with no gap (spacing via padding + borders) */
  footer .flex.items-start.justify-between {
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Title + CTA block */
  footer .flex.items-start.justify-between > :nth-child(1) {
    padding-bottom: 24px !important;
  }
  /* Newsletter block: full-width for the divider border,
     but constrain inner form to desktop width so input doesn't stretch */
  footer .flex.items-start.justify-between > :nth-child(2) {
    padding: 24px 0 !important;
    border-top: 1px solid #272727 !important;
    width: 100% !important;
  }
  footer .flex.items-start.justify-between > :nth-child(2) > p,
  footer .flex.items-start.justify-between > :nth-child(2) > .flex.flex-col.gap-4 {
    max-width: 380px !important;
  }
  /* Tighten form internals: input row → checkbox */
  footer .flex.items-start.justify-between > :nth-child(2) .flex.flex-col.gap-4 {
    gap: 12px !important;
  }
  /* Footer checkbox: full-width label is sufficient touch target */
  footer .check-wrap { min-height: auto !important; }
  /* Office info block — show on mobile as its own section */
  .footer-email-desktop {
    padding: 24px 0 8px !important;
    border-top: 1px solid #272727 !important;
    width: 100% !important;
  }
  .footer-email-desktop a { font-size: 16px !important; }
  .footer-email-desktop .btn-tertiary { font-size: 16px !important; }
  footer .flex.items-end.justify-between > :first-child a { font-size: 16px !important; }

  /* Bottom section — stack */
  footer .flex.items-end.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }
  /* Social links */
  footer .flex.items-end.justify-between > :first-child {
    padding: 24px 0 !important;
    border-top: 1px solid #272727 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  /* Meta row: email left + copyright right */
  .footer-meta {
    width: 100% !important;
    justify-content: space-between !important;
    padding-top: 24px !important;
    border-top: 1px solid #272727 !important;
  }
  /* Email already shown in office block above — hide the duplicate in meta row */
  .footer-email-mobile { display: none !important; }

  /* ── Service columns on homepage ───────────────────────────────────── */
  .service-col { min-height: auto !important; }

  /* ── Filter buttons wrap ───────────────────────────────────────────── */
  .flex.gap-2.flex-wrap { gap: 8px !important; }

  /* ── Project cards grid (.project-cards class from cards.css) ────────── */
  .project-cards {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px 40px !important;
  }

  /* ── Card tags ─────────────────────────────────────────────────────── */
  .card-tags { font-size: 14px !important; }

  /* ── Items stretch → start on mobile (prevents stretching in stacked layout) */
  .items-stretch { align-items: start !important; }

  /* ── Row-span elements need explicit height in stacked grid ────────── */
  .row-span-2 { grid-row: span 1 !important; }

  /* ── Flex baseline stacking ─────────────────────────────────────────── */
  .flex.items-baseline.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* Hide "View all" link next to Selected Work on mobile */
  .flex.items-baseline.justify-between > .btn-tertiary {
    display: none !important;
  }

  /* ── Nav gap (header nav ul) ──────────────────────────────────────── */
  .gap-10 { gap: 16px !important; }
  .gap-16 { gap: 32px !important; }
  .gap-12 { gap: 24px !important; }

  /* ── Shrink-0 overrides → allow wrapping ──────────────────────────── */
  .shrink-0 { flex-shrink: 1 !important; }
  .w-\[440px\].shrink-0 { width: 100% !important; }

  /* ── Work banner negative margins ─────────────────────────────────── */
  .-mx-12 { margin-left: -16px !important; margin-right: -16px !important; }

  /* ── Contact page 2-col layout ────────────────────────────────────── */
  main.grid.grid-cols-2 { grid-template-columns: 1fr !important; }

  /* ── Blog 4-col grid → 2 col, first post full width ─────────────────── */
  .grid-cols-4[id*="posts"], #posts-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #posts-grid > .post-card:first-child { grid-column: 1 / -1 !important; }

  /* ── About page stats ─────────────────────────────────────────────── */
  .max-w-\[320px\] { max-width: 100% !important; }

  /* ── Body padding-top variations ──────────────────────────────────── */
  .pt-\[107px\] { padding-top: 60px !important; }

  /* ── Bento grid flex children ─────────────────────────────────────── */
  .w-2\/5 { width: 40% !important; }
  .w-3\/5 { width: 60% !important; }
  .w-1\/2 { width: 100% !important; }
  .flex-\[2\] { flex: 1 !important; }

  /* ── Stacked images col → full width ──────────────────────────────── */
  .flex.flex-col.gap-8.order-1 { width: 100% !important; }
  .flex.gap-8.order-2 { width: 100% !important; }

  /* ── Video row height sync → auto ─────────────────────────────────── */
  #img-match { height: auto !important; }

  /* ── Auto carousel height → smaller ───────────────────────────────── */
  [style*="height:calc("] { height: 140px !important; }

  /* ── Prevent horizontal overflow (on wrapper, not html/body — preserves sticky) */
  body { max-width: 100vw !important; }
  * { box-sizing: border-box !important; }

  /* ── Scroll stack — smaller panels on mobile, text bottom-left */
  .scroll-stack { height: 210vh !important; }
  .scroll-stack-item { height: 70vh !important; }
  .scroll-stack-title { font-size: 32px !important; }
  .scroll-stack-content {
    right: auto !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    justify-content: flex-end !important;
    padding: 32px 24px !important;
  }
  .scroll-stack-gradient {
    right: auto !important;
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 60% !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) !important;
  }

  /* ── Service pages 3-col grid with gap-x-8 ─────────────────────────── */
  /* Reorder: titles(1-3), dividers(4-6), texts(7-9), faqs(10-12)
     → group each column together via order */
  .grid.grid-cols-3.gap-x-4 { gap: 0 !important; }
  .grid.grid-cols-3.gap-x-4 > :nth-child(1) { order: 1; }  /* title 1 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(4) { order: 2; }  /* divider 1 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(7) { order: 3; }  /* text 1 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(10) { order: 4; } /* faq 1 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(2) { order: 5; }  /* title 2 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(5) { order: 6; }  /* divider 2 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(8) { order: 7; }  /* text 2 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(11) { order: 8; } /* faq 2 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(3) { order: 9; }  /* title 3 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(6) { order: 10; } /* divider 3 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(9) { order: 11; } /* text 3 */
  .grid.grid-cols-3.gap-x-4 > :nth-child(12) { order: 12; }/* faq 3 */

  /* Spacing within reordered service blocks */
  .grid.grid-cols-3.gap-x-4 > h3 { padding-top: 40px !important; }
  .grid.grid-cols-3.gap-x-4 > h3:nth-child(1) { padding-top: 0 !important; }
  .grid.grid-cols-3.gap-x-4 > .h-px { margin: 12px 0 !important; }
  .grid.grid-cols-3.gap-x-4 > p { margin-bottom: 12px !important; }
  .grid.grid-cols-3.gap-x-4 > .faq-list { padding-bottom: 0 !important; border-bottom: none !important; }

  /* Remove double gap: cards already provide bottom spacing */
  .project-cards + section { padding-top: 0 !important; }

  /* Hide original dividers between service blocks (they appear after faq on mobile) */
  .grid.grid-cols-3.gap-x-4 > .h-px { display: block !important; }

  /* FAQ text wrapping */
  .faq-btn span.whitespace-nowrap { white-space: normal !important; }

  .gap-x-8 { column-gap: 0 !important; }
  .gap-x-4 { column-gap: 0 !important; }

  /* About page team grid breakpoints handled in dedicated block below. */

  /* ── About page stats → all full width on mobile (was 82/92/68% on desktop) */
  .bg-\[\#D9D6CE\].w-\[82\%\],
  .bg-\[\#D9D6CE\].w-\[92\%\],
  .bg-\[\#D9D6CE\].w-\[68\%\] { width: 100% !important; }
  /* Reduce the gap between number and text on mobile (was 100px on desktop) */
  .bg-\[\#D9D6CE\].gap-\[100px\] { gap: 24px !important; }
  /* Stat number column: fixed width so text aligns across all blocks
     (default w-24 = 96px is narrower than "12.5" at 72px → text jumps). */
  .bg-\[\#D9D6CE\] .w-24 { width: 140px !important; min-width: 140px !important; }
  /* Smaller number font so column fits comfortably */
  .bg-\[\#D9D6CE\] .text-\[72px\] { font-size: 56px !important; }

  /* ── About page team photos → 2:3 portrait on mobile ─────────────────── */
  .team-photo { aspect-ratio: 2/3 !important; }

  /* "You?" CTA card keeps the same 2/3 aspect ratio as team photos so heights match. */

  /* About page team — tighter title→grid gap on mobile (was 64px) */
  section:has(> .grid.grid-cols-4.gap-x-6.gap-y-12) > h2.mb-16 {
    margin-bottom: 32px !important;
  }

  /* ── About page team text → left align ───────────────────────────────── */
  .grid.grid-cols-4.gap-x-6.gap-y-12 .text-right { text-align: left !important; }

  /* ── Team description + LinkedIn sizes ───────────────────────────────── */
  .grid.grid-cols-4.gap-x-6.gap-y-12 p.text-\[13px\] {
    font-size: 14px !important;
  }
  .team-linkedin {
    display: block !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
  }

  /* ── Learning page CTA bar ─────────────────────────────────────────── */
  .bg-black.flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
    padding: 32px 16px !important;
  }
  .bg-black .max-w-\[520px\] { max-width: 100% !important; }

  /* ── Learning page padding ─────────────────────────────────────────── */
  .px-16 { padding-left: 16px !important; padding-right: 16px !important; }

  /* ── Service columns → full width stacked ──────────────────────────── */
  .service-col { width: 100% !important; }


  /* ── About stats flex row → wrap ───────────────────────────────────── */
  .flex.gap-12 { gap: 24px !important; flex-wrap: wrap !important; }
  .flex.gap-16 { gap: 32px !important; flex-wrap: wrap !important; }

  /* ── FAQ section ───────────────────────────────────────────────────── */
  .faq-item { padding: 0 !important; }

  /* ── Blog filters — sticky under header ──────────────────────────── */
  #blog-filters-wrap {
    position: sticky !important;
    top: 60px !important;
    z-index: 40 !important;
    background: #FAFAFA !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }
  #blog-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 4px 0 !important;
  }
  #blog-filters::-webkit-scrollbar { display: none !important; }
  #blog-filters .filter-btn { flex-shrink: 0 !important; }

  /* ── Blog cards — hide description, title 16px ─────────────────────── */
  .post-card .line-clamp-2 { display: none !important; }
  .post-card h2 { font-size: 18px !important; }

  /* ── Blog article page ─────────────────────────────────────────────── */
  article { padding-left: 16px !important; padding-right: 16px !important; }
  .max-w-\[800px\] { max-width: 100% !important; }
  .max-w-\[640px\] { max-width: 100% !important; }

  /* ── All justify-between flex rows → stack ─────────────────────────── */
  .flex.items-start.justify-between {
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* ── Case study stacked images flex col gap ────────────────────────── */
  .flex.flex-col.gap-8 > .overflow-hidden { width: 100% !important; }

  /* ── Prevent any element from exceeding viewport ───────────────────── */
  img, video { max-width: 100% !important; }

  /* ── Tab content filter (work page) — sticky under header ────────── */
  #service-filters {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 4px 0 !important;
  }
  #service-filters::-webkit-scrollbar { display: none !important; }
  #service-filters .filter-btn { flex-shrink: 0 !important; }
  #service-filters-wrap {
    position: sticky !important;
    top: 60px !important;
    z-index: 40 !important;
    background: #FAFAFA !important;
    padding-top: 8px !important;
    padding-bottom: 16px !important;
  }

  /* ── Article page — 3-col layout → single column ───────────────────── */
  .article-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .article-sidebar-left {
    position: relative !important;
    top: auto !important;
    order: 2 !important;
    width: 100% !important;
    margin-top: 32px !important;
  }
  .article-sidebar-right {
    position: relative !important;
    top: auto !important;
    order: -1 !important;
    width: 100% !important;
    margin-bottom: 24px !important;
  }
  .article-body { order: 1 !important; }

  /* Article TOC — horizontal scrollable */
  .article-toc {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
  }
  .article-toc::-webkit-scrollbar { display: none !important; }
  .article-toc p { display: none !important; }
  .article-toc a {
    flex-shrink: 0 !important;
    padding: 8px 16px !important;
    border: 1px solid #D3D3D3 !important;
    border-radius: 9999px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Hide left sidebar (author + TOC) on mobile — author moves inline into header */
  .article-sidebar-left,
  .article-sidebar-right:empty { display: none !important; margin: 0 !important; }

  /* Show mobile-only inline author under the date line */
  .article-author-mobile { display: block !important; }

  /* Article cover → half the surrounding padding on mobile (aspect set inline) */
  section:has(> .max-w-\[680px\].aspect-\[4\/3\]) {
    padding-top: 20px !important;
    padding-bottom: 32px !important;
  }

  /* Article header typography */
  .article-body h2 { font-size: 24px !important; margin: 32px 0 16px !important; }
  .article-body h3 { font-size: 20px !important; margin: 24px 0 12px !important; }
  .article-body p { margin-bottom: 12px !important; }
  .article-body img { margin: 24px 0 !important; }
  .article-body blockquote { margin: 32px 0 !important; }
  .article-body blockquote p { font-size: 16px !important; }
  .article-body hr { margin: 32px 0 !important; }

  /* Article back link — remove grid wrapper */
  section.article-layout.pb-24 {
    display: block !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Contact page ──────────────────────────────────────────────────── */
  main.flex-1.grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  /* Contact heading */
  .text-\[48px\] { font-size: 32px !important; }
  /* Contact name row → stack */
  form .grid.grid-cols-2.gap-8 {
    grid-template-columns: 1fr !important;
  }
  /* Form right column padding */
  main.flex-1.grid > div:nth-child(2) {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 0 !important;
  }
  /* Contact photo section */
  main.flex-1.grid > div:first-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 32px !important;
  }
  /* Contact photo — don't expand to fill, give fixed height */
  main.flex-1.grid > div:first-child > .flex-1 {
    flex: none !important;
    height: 280px !important;
  }

  /* ── Form inputs touch targets (WCAG) ──────────────────────────────── */
  .field-line {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
  }
  /* Dark variant (footer): keep 14px */
  .field-line.field-line--dark {
    font-size: 14px !important;
  }
  form textarea.field-line {
    min-height: 88px !important;
  }
  /* Checkbox touch target */
  .check-wrap {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .check-wrap input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
  }

  /* ── Section lead (service pages) ──────────────────────────────────── */
  .section-lead {
    padding: 40px 16px !important;
  }
  .section-lead__card {
    width: 100% !important;
    max-width: 280px !important;
  }
  .section-lead__meta {
    text-align: left !important;
  }

  /* ── Homepage logo grid on mobile ──────────────────────────────────── */
  /* Logo tab buttons — horizontal scroll like filter buttons */
  .logo-tab { flex-shrink: 0 !important; }
  .logo-tab:first-child { margin-left: 0 !important; }
  #logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #logo-grid .logo-item {
    height: 96px !important;
    padding: 12px !important;
  }
  #logo-grid .logo-img {
    max-height: 52px !important;
    max-width: 172px !important;
  }

  /* ── Homepage education section ────────────────────────────────────── */
  .flex.flex-col.gap-16.px-12.py-28 > .flex.items-end.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  /* Education service blocks: tighter title→body gap */
  .flex.flex-col.gap-16.px-12.py-28 .grid > .flex.flex-col.gap-6 {
    gap: 12px !important;
  }

  /* ── Homepage hero: disciplines (Research/Creative/Digital) ────────── */
  /* Reorder grid so each title pairs with its divider + paragraph */
  .home-disciplines { gap: 0 !important; }
  .home-disciplines > :nth-child(1) { order: 1; }  /* Research title */
  .home-disciplines > :nth-child(4) { order: 2; }  /* divider 1 */
  .home-disciplines > :nth-child(7) { order: 3; }  /* paragraph 1 */
  .home-disciplines > :nth-child(2) { order: 4; }  /* Creative title */
  .home-disciplines > :nth-child(5) { order: 5; }  /* divider 2 */
  .home-disciplines > :nth-child(8) { order: 6; }  /* paragraph 2 */
  .home-disciplines > :nth-child(3) { order: 7; }  /* Digital title */
  .home-disciplines > :nth-child(6) { order: 8; }  /* divider 3 */
  .home-disciplines > :nth-child(9) { order: 9; }  /* paragraph 3 */
  .home-disciplines > h3 { padding-top: 32px !important; }
  .home-disciplines > h3:nth-child(1) { padding-top: 0 !important; }
  .home-disciplines > .h-px { margin: 12px 0 !important; }
  /* Paragraphs: constrain width so they don't span full screen on tablet */
  .home-disciplines > p { max-width: 480px !important; }

  /* ── Homepage hero: stats bento → stacked equal boxes ──────────────── */
  .home-stats {
    height: auto !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 16px !important;
  }
  .home-stats > div {
    min-height: 160px !important;
    padding: 24px !important;
  }
  .home-stats .text-\[140px\],
  .home-stats .text-\[72px\] { font-size: 48px !important; }
  .home-stats .text-\[20px\],
  .home-stats .text-\[16px\] { font-size: 16px !important; }

  /* ── Homepage education: stack 7+ / title / desc / button ──────────── */
  .home-education-row,
  .home-education-inner { display: contents !important; }
  .home-education > .home-education-row > .btn-primary {
    order: 4 !important;
    align-self: flex-start !important;  /* compact width like the hero CTA */
  }
  /* Description: don't stretch full width on tablet, match hero column width */
  .home-education > p { max-width: 480px !important; }

  /* ── Buttons — touch target (WCAG 2.5.8). Full-width only on phones,
       handled in the <640px block below to keep tablets compact. */
  .btn-primary, .btn-secondary {
    min-height: 44px !important;
    justify-content: center !important;
  }
  .btn-tertiary, .btn-tertiary--left {
    min-height: 44px !important;
  }
  .filter-btn {
    min-height: 44px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

}

/* ── Focus visible for keyboard a11y (all viewports) ──────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #090909;
  outline-offset: 2px;
}

/* ── Burger → X animation ────────────────────────────────────────────── */
.burger-top, .burger-mid, .burger-bot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.burger-open .burger-top {
  transform: translateY(5px) rotate(45deg);
}
.burger-open .burger-mid {
  opacity: 0;
  transform: scaleX(0);
}
.burger-open .burger-bot {
  transform: translateY(-5px) rotate(-45deg);
}

/* ── Menu link stagger ──────────────────────────────────────────────── */
.menu-link {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 300ms ease, transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-menu.open .menu-link {
  opacity: 1;
  transform: translateY(0);
}

/* ── Tablet / medium (768–1015px) — content tweaks ────────────────────── */
@media (min-width: 768px) and (max-width: 1015px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-cols-4 .col-span-2 { grid-column: span 1 !important; }
  /* Service pages: reordered FAQ grid must stay 1-col (override generic 2-col)
     so each service stacks title → divider → text → faq vertically. */
  .grid.grid-cols-3.gap-x-4 { grid-template-columns: 1fr !important; }
  .cs-hero-grid { grid-template-columns: 1fr 1fr !important; }
  .cs-hero-title { font-size: 40px !important; }
  .scroll-stack-content { width: 60% !important; padding: 48px !important; }
  .page-hero { padding: 48px !important; }
  .page-hero__title { font-size: 48px !important; }

  /* Homepage hero title scaled down so it shares the row with the right column */
  .home-hero-title, h1.text-\[64px\] { font-size: 44px !important; }

  /* Homepage disciplines & stats — stay single-column (matches mobile flow,
     so each discipline shows title → divider → paragraph stacked together). */
  .home-disciplines.grid-cols-3 { grid-template-columns: 1fr !important; }
  .home-stats.grid-cols-3 { grid-template-columns: 1fr !important; }

  /* Article layout → center column only, sidebars stacked */
  .article-layout {
    display: flex !important;
    flex-direction: column !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }
  .article-sidebar-left { order: 2 !important; position: relative !important; top: auto !important; margin-top: 32px !important; }
  .article-sidebar-right { order: -1 !important; position: relative !important; top: auto !important; margin-bottom: 24px !important; }
  .article-body { order: 1 !important; }

  /* Contact page */
  .text-\[48px\] { font-size: 40px !important; }

  /* Homepage logo grid — 3 columns on tablet */
  #logo-grid { grid-template-columns: repeat(3, 1fr) !important; }
  #logo-grid .logo-item { height: 120px !important; padding: 20px !important; }
}

/* ── People page team grid: 4 → 3 → 2 → 1 by viewport ─────────────────── */
@media (min-width: 781px) and (max-width: 1280px) {
  .team-grid.grid-cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 376px) and (max-width: 780px) {
  .team-grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 375px) {
  .team-grid.grid-cols-4 { grid-template-columns: 1fr !important; }
  /* "You?" CTA card → square only on the smallest phones (1-col view) */
  .aspect-\[2\/3\].border.border-\[\#090909\] { aspect-ratio: 1/1 !important; }
  /* Stat blocks: stack number above text on tiniest phones */
  .bg-\[\#D9D6CE\].flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 24px !important;
  }
  .bg-\[\#D9D6CE\] .w-24 { width: auto !important; min-width: 0 !important; }
}

/* ── Phone only (below 640px) — buttons stretch full-width ───────────── */
@media (max-width: 639px) {
  .btn-primary, .btn-secondary { width: 100% !important; }
  .w-fit { width: 100% !important; }
  /* Descriptions: full width on phone, like other text */
  .home-education > p,
  .home-disciplines > p { max-width: 100% !important; }
  /* Reset constrained body widths back to full on phone */
  .max-w-\[720px\],
  .max-w-\[760px\],
  .max-w-\[680px\] { max-width: 100% !important; }
  .page-hero__aside { max-width: 100% !important; }
  /* CTA box (Ready to invest…) — stack heading above button on phone */
  .bg-\[\#0C2A44\].flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  /* Team grid 1-col rule is in the dedicated <=375px block above. */
}

/* ── Small phones (below 375px) ──────────────────────────────────────── */
@media (max-width: 374px) {
  .px-12, .pl-12, .pr-12 { padding-left: 16px !important; padding-right: 16px !important; }
  .text-\[64px\] { font-size: 24px !important; }
  .text-\[56px\] { font-size: 24px !important; }
  .cs-hero-title { font-size: 24px !important; }
  #posts-grid { grid-template-columns: 1fr !important; }

  /* Article title even smaller */
  .text-\[40px\] { font-size: 24px !important; }

  /* Contact heading */
  .text-\[48px\] { font-size: 24px !important; }

  /* Logo grid → single column */
  #logo-grid { grid-template-columns: 1fr !important; }
}