/* Mobile overrides. Everything sits inside a media query, so desktop rendering is
   byte-identical. React inline styles need !important to be overridden. */
@media (max-width: 820px) {
  .hero-headline { margin-top: 0 !important; }
  /* overflow-x:hidden on the root kills position:sticky in Safari/Chrome — clip keeps it */
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
  nav { position: sticky !important; top: 0 !important; z-index: 100 !important; }
  /* floating pill: truly detached, page content visible above and around it */
  nav[style*="border-radius: 999px"] { top: calc(var(--sat, env(safe-area-inset-top, 0px)) + 4px) !important; padding-top: 0 !important; }

  /* --- page gutters: any vertical value + 48px sides -> 20px sides (value-agnostic) --- */
  [style*="px 48px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="padding: 0px 48px"], [style*="padding: 0 48px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="px 48px 64px"], [style*="px 48px 56px"], [style*="px 48px 40px"], [style*="px 48px 96px"],
  [style*="padding: 0px 48px 96px"] { padding-left: 24px !important; padding-right: 24px !important; }
  /* vertical rhythm, scaled per band */
  [style*="padding: 128px 48px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 96px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  /* --- case-study hero: connect banner directly to the gallery carousel below --- */
  div[style*="margin-top: 48px"] { margin-top: 0px !important; }
  [style*="padding: 72px 48px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
  [style*="padding: 56px 48px"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  [style*="padding: 48px"] { padding: 28px 24px !important; }
  [style*="padding: 64px 0px"] { padding: 36px 0 !important; }
  [style*="padding: 54px 0px"] { padding: 38px 0 !important; }

  /* --- section eyebrows +2px --- */
  span[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"] { font-size: 13px !important; }
  p[style*="margin-top: 6px"] > span[style*="text-transform: uppercase"] { font-size: 14px !important; }

  /* --- nav: logo + burger only --- */
  nav .nav-desktop { display: none !important; }
  nav .nav-burger { display: inline-flex !important; min-height: 44px !important; }
  nav .nav-panel a { font-size: 26px !important; padding: 12px 0 !important; }
  nav .nav-panel button { min-height: 32px !important; }
  /* --- nav: stays one row, never wraps --- */
  nav { padding-left: 26px !important; padding-right: 26px !important; }
  nav[style*="border-radius: 999px"] { margin-left: 22px !important; margin-right: 22px !important; padding-left: 18px !important; padding-right: 18px !important; }
  nav > div[style*="gap: 32px"] { gap: 14px !important; flex-wrap: nowrap !important; }
  nav a { font-size: 12px !important; white-space: nowrap; padding: 15px 0 !important; }

  /* --- all buttons get a 44px touch target (filter chips, mail options) --- */
  button { min-height: 44px !important; }
  button[style*="border-radius: 999px"] { padding-top: 0 !important; padding-bottom: 0 !important; display: inline-flex; align-items: center; }

  /* --- selected work: roomier spacing between cards --- */
  div[style*="grid-template-columns: 1.4fr 1fr"] { gap: 34px !important; row-gap: 34px !important; }
  section[style*="padding: 128px 48px"] > div[style*="margin-bottom: 56px"] { margin-bottom: 88px !important; }
  /* --- work page header: stack and left-align the meta --- */
  div[style*="padding: 80px 48px 64px"] > div[style*="justify-content: space-between"] { flex-direction: column !important; align-items: flex-start !important; gap: 14px; }
  div[style*="padding: 80px 48px 64px"] div[style*="text-align: right"] { text-align: left !important; padding-bottom: 0 !important; }
  div[style*="padding: 80px 48px 64px"] h1 { font-size: 56px !important; }
  /* --- filter bar: single scrollable row --- */
  div[style*="height: 48px"] > div[style*="gap: 4px"] { overflow-x: auto !important; flex-wrap: nowrap !important; justify-content: space-between !important; }
  div[style*="height: 48px"] > div[style*="gap: 4px"] > button:last-child { margin-right: 0 !important; }
  /* --- project rows: tighter column rhythm --- */
  a[style*="grid-template-columns: 64px 1fr 360px"] { gap: 16px !important; }
  .contact-side { padding-top: 0 !important; }
  /* --- 2-up and sidebar grids collapse --- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 200px 1fr"],
  [style*="grid-template-columns: 64px 1fr 360px"],
  [style*="grid-template-columns: repeat("] { grid-template-columns: 1fr !important; }
  [style*="grid-row: span 2"] { grid-row: auto !important; }

  /* --- oversized gaps become vertical rhythm --- */
  [style*="gap: 96px"] { gap: 40px !important; }
  [style*="gap: 80px"] { gap: 28px !important; }
  [style*="gap: 64px"] { gap: 20px !important; }
  [style*="gap: 40px"] { gap: 20px !important; }

  /* --- display type --- */
  h1[style*="clamp(64px, 9vw"], h1[style*="clamp(64px,9vw"] { font-size: clamp(44px, 13vw, 72px) !important; }
  h1[style*="clamp(64px, 8vw"], h1[style*="clamp(64px,8vw"] { font-size: clamp(40px, 12vw, 64px) !important; }
  h1[style*="font-size: 56px"], h2[style*="font-size: 56px"] { font-size: 38px !important; }
  h2[style*="font-size: 44px"] { font-size: 32px !important; }
  h2[style*="font-size: 40px"] { font-size: 30px !important; }
  h2[style*="font-size: 36px"] { font-size: 27px !important; }
  [style*="font-size: 28px"] { font-size: 23px !important; }
  [style*="font-size: 26px"] { font-size: 20px !important; }

  /* --- hero: footer row stacks, buttons full width --- */
  .hero-section > div[style*="justify-content: space-between"] {
    flex-direction: column !important; align-items: stretch !important; gap: 24px;
  }
  .hero-section > div[style*="padding-top: 120px"] { padding-top: 50px !important; padding-bottom: 44px !important; }
  .hero-section p[style*="max-width: 400px"] { max-width: none !important; font-size: 17px !important; }

  /* --- hero: fill the viewport exactly (nav is 52px), no peek from the next section --- */
  .hero-section { min-height: calc(100vh - 52px) !important; }

  /* --- pills elsewhere: 44px targets, wrap as a row of two --- */
  a[style*="border-radius: 999px"][style*="height: 40px"] { height: 44px !important; flex: 1 1 140px; justify-content: center; }
  div[style*="display: flex"][style*="gap: 12px"] { flex-wrap: wrap !important; }

  /* --- timeline / process steps: label above content --- */
  [style*="grid-template-columns: 80px 1fr"] { grid-template-columns: 1fr !important; gap: 4px !important; }
  [style*="grid-template-columns: 32px 1fr"] { gap: 12px !important; }

  /* --- project rows (work page): drop the empty number column, left-align CTA --- */
  a[style*="grid-template-columns: 64px 1fr 360px"] > div:first-child { font-size: 24px !important; padding-top: 0 !important; }
  a[style*="grid-template-columns: 64px 1fr 360px"] > div:last-child { align-items: flex-start !important; padding-top: 0 !important; }

  /* --- sticky labels have no room in one column --- */
  [style*="position: sticky"][style*="top: 72px"] { position: static !important; }
  p[style*="position: sticky"][style*="top: 72px"] > span[style*="text-transform: uppercase"] { font-size: 11px !important; }

  /* --- dark bands (resume, project nav) stack and left-align --- */
  div[style*="background: var(--brown)"][style*="justify-content: space-between"],
  div[style*="background: var(--brown)"] > div[style*="justify-content: space-between"] {
    flex-direction: column !important; align-items: flex-start !important; gap: 24px;
  }
  div[style*="background: var(--brown)"][style*="grid-template-columns"] > a { align-items: flex-start !important; text-align: left !important; }

  /* --- project nav: stay one row, next-project becomes a CTA button on the right --- */
  div[style*="background: var(--brown)"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: auto auto !important; justify-content: space-between !important;
    align-items: center !important; padding: 28px 20px !important; column-gap: 16px !important;
  }
  div[style*="background: var(--brown)"][style*="grid-template-columns: 1fr 1fr"] > a span[style*="font-size: 28px"] { display: none !important; }
  div[style*="background: var(--brown)"][style*="grid-template-columns: 1fr 1fr"] > a { flex-direction: row !important; align-items: center !important; white-space: nowrap !important; }

  /* --- gallery arrows keep a usable target --- */
  div[style*="border-radius: 50%"][style*="width: 40px"] { width: 40px !important; height: 40px !important; }

  footer { padding: 32px 24px !important; flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; }

  /* room below the footer line so the Netlify badge never covers it */
  body footer { padding-bottom: 104px !important; }

  img, video { max-width: 100%; }}

/* --- hero CTAs: stack full-width so labels never wrap (mobile + tablet) --- */
@media (max-width: 1180px) {
  .hero-section div[style*="display: flex"][style*="gap: 12px"] {
    flex-direction: column !important; flex-wrap: nowrap !important; width: 100%; gap: 12px !important;
  }
  .hero-section a[style*="border-radius: 999px"][style*="height: 40px"] {
    height: 52px !important; width: 100% !important; flex: none !important; white-space: nowrap;
  }
}

/* --- half-screen / tablet (561–1180): tagline on top, two equal CTAs side by side --- */
@media (min-width: 561px) and (max-width: 1180px) {
  .hero-section > div:last-child { flex-direction: column !important; align-items: stretch !important; gap: 24px !important; }
  .hero-section > div:last-child p { max-width: 460px !important; }
  .hero-section div[style*="display: flex"][style*="gap: 12px"] { flex-direction: row !important; }
  .hero-section a[style*="border-radius: 999px"][style*="height: 40px"] { flex: 1 1 0 !important; width: auto !important; min-width: 0; justify-content: center; }
}

/* --- phones only: leave brown space below the CTA for the "Powered by Netlify" badge --- */
@media (max-width: 767px) {
  .hero-section { padding-bottom: 64px !important; }
}

/* --- iPad / tablet: 28px gutters (wins over the mobile block in the 768-820 overlap) --- */
@media (min-width: 768px) and (max-width: 1180px) {
  .hero-headline { margin-top: 0 !important; padding-top: 180px !important; }
  .hero-section { min-height: calc(100vh - 52px) !important; }
  .hero-section > div[style*="padding-top: 120px"] { padding-top: 100px !important; }
  [style*="px 48px"] { padding-left: 28px !important; padding-right: 28px !important; }
  [style*="padding: 0px 48px"], [style*="padding: 0 48px"] { padding-left: 28px !important; padding-right: 28px !important; }
  /* three-value paddings (page headers, case-study bands) */
  [style*="px 48px 64px"], [style*="px 48px 56px"], [style*="px 48px 40px"], [style*="px 48px 96px"],
  [style*="padding: 0px 48px 96px"] { padding-left: 28px !important; padding-right: 28px !important; }
  nav { padding-left: 28px !important; padding-right: 28px !important; }
  nav[style*="border-radius: 999px"] { margin-left: 28px !important; margin-right: 28px !important; }
  footer { padding-left: 28px !important; padding-right: 28px !important; }
  /* --- selected work: roomier spacing between cards --- */
  div[style*="grid-template-columns: 1.4fr 1fr"] { gap: 34px !important; row-gap: 34px !important; }
  section[style*="padding: 128px 48px"] > div[style*="margin-bottom: 56px"] { margin-bottom: 88px !important; }
  /* vertical rhythm normalised to the Work page (64 top / 48 bottom headers, 80 sections) */
  [style*="padding: 80px 48px 64px"], [style*="padding: 80px 48px 56px"] { padding-top: 64px !important; padding-bottom: 48px !important; border-bottom: 1px solid rgba(244,239,230,0.15) !important; }
  [style*="padding: 56px 48px 40px"] { padding-top: 48px !important; padding-bottom: 32px !important; }
  [style*="padding: 0px 48px 96px"] { padding-bottom: 80px !important; }
  [style*="padding: 128px 48px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 96px 48px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 72px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  [style*="padding: 48px;"] { padding: 40px 28px !important; }
  [style*="padding: 54px 0px"] { padding: 46px 0 !important; }
  [style*="padding: 64px 0px"] { padding: 52px 0 !important; }
  footer { padding-top: 32px !important; padding-bottom: 32px !important; }
  /* tighten nav-to-headline gap on the landing hero */
  .hero-section > div[style*="padding-top: 120px"] { padding-top: 50px !important; padding-bottom: 56px !important; justify-content: flex-start !important; }
  .hero-section { min-height: 0 !important; }
  /* footer stays a single row, split left/right */
  footer { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; }
}

/* --- iPhone 14 / Android only (≤400px): match the Pro Max hero rhythm, tighten "In short" --- */
@media (max-width: 400px) {
  p[style*="font-size: 24px"] { font-size: 20px !important; }
  div[style*="grid-template-columns: 1fr 2fr"] { gap: 12px !important; }
  div[style*="background: var(--border)"][style*="padding: 72px 48px"] { padding-top: 28px !important; }
  span[style*="letter-spacing: 0.12em"][style*="text-transform: uppercase"] { font-size: 11px !important; }
  p[style*="margin-top: 6px"] > span[style*="text-transform: uppercase"] { font-size: 11px !important; }
  /* Labels / small caps eyebrows elsewhere */
  span[style*="letter-spacing: 0.1em"][style*="text-transform: uppercase"] { font-size: 9px !important; }
  span[style*="letter-spacing: 0.14em"][style*="text-transform: uppercase"],
  span[style*="letter-spacing: 0.16em"][style*="text-transform: uppercase"] { font-size: 9px !important; }
}

/* --- Android (≤370px): slightly smaller "In short" paragraph --- */
@media (max-width: 370px) {
  p[style*="font-size: 24px"] { font-size: 16px !important; }
}

@media (max-width: 480px) {
  .hero-section { min-height: calc(100vh - 52px) !important; }
  .hero-section > div[style*="padding-top: 120px"] { padding-top: 50px !important; padding-bottom: 32px !important; }
  .hero-section > div[style*="justify-content: space-between"] { padding-bottom: 28px !important; padding-top: 24px !important; }
  a[style*="border-radius: 999px"][style*="height: 40px"] { flex: 1 1 100%; }
  nav > div[style*="gap: 32px"] { gap: 12px !important; }
  nav a { font-size: 11px !important; }
  [style*="padding: 128px 48px"] { padding-top: 52px !important; padding-bottom: 52px !important; }
  [style*="padding: 96px 48px"] { padding-top: 44px !important; padding-bottom: 44px !important; }
}

/* --- seamless scrollbar: transparent track, subtle thumb --- */
html { scrollbar-width: thin; scrollbar-color: rgba(58,40,32,0.28) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(58,40,32,0.28); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(58,40,32,0.45); }
::-webkit-scrollbar-corner { background: transparent; }

@media (max-width: 820px) {
  .cs-intro { grid-template-columns: 1fr !important; gap: 32px !important; }
  .cs-gal-slots { grid-template-columns: 1fr !important; }
  #cs-gallery { padding-left: 24px !important; padding-right: 24px !important; padding-bottom: 64px !important; }
  section[style*="padding: 96px 48px 200px"] { padding: 64px 24px 120px !important; }
  section[style*="padding: 144px 48px"] { padding: 96px 24px !important; }
}