/* ==========================================================================
   Responsive — mobile-first overrides.
   Base styles target the smallest viewport (320px); each query adds capability.
   ========================================================================== */

/* ---------- 480px+ : large phones ---------- */
@media (min-width: 30em) {
  .hero__chips { gap: clamp(1.5rem, 6vw, 3rem); }
  .belief { grid-template-columns: 4rem 1fr; gap: var(--sp-6); }
  .role { grid-template-columns: 1fr auto; }
}

/* ---------- 640px+ : phablet ---------- */
@media (min-width: 40em) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .collage__inset { width: 42%; }
  .lightbox__media { aspect-ratio: 16 / 9; }
}

/* ---------- 768px+ : tablet ---------- */
@media (min-width: 48em) {
  .hero__inner { grid-template-columns: 1.1fr .9fr; }
  .split { grid-template-columns: 1fr 1fr; }
  .svc-block { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .process::before { display: block; }
  .quote { padding-inline: clamp(1rem, 4vw, 3rem); }
  .hero__foot { flex-wrap: nowrap; }
}

/* ---------- 900px+ : small laptop — reveal the desktop nav ---------- */
@media (min-width: 56.25em) {
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.4fr; }
  .svc-block { gap: clamp(2.5rem, 4vw, 4.5rem); }
}

/* ---------- 1024px+ : laptop ---------- */
@media (min-width: 64em) {
  .hero__inner { grid-template-columns: 1.02fr .98fr; }
  .split { gap: clamp(3rem, 6vw, 6rem); }
  .split--wide { grid-template-columns: 1.05fr .95fr; }
  .metrics__grid { grid-template-columns: repeat(4, 1fr); }
  .process { grid-template-columns: repeat(5, 1fr); }
  .hero__title { max-width: 13ch; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .proj-grid { grid-template-columns: repeat(3, 1fr); }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .perks { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 1280px+ : desktop ---------- */
@media (min-width: 80em) {
  .hero__lead { font-size: var(--fs-lg); }
  .collage__inset { width: 38%; }
}

/* ---------- 1536px+ : wide ---------- */
@media (min-width: 96em) {
  :root { --container: 1360px; }
}

/* ==========================================================================
   Device / capability adjustments
   ========================================================================== */

/* Short landscape phones: don't force a full-height hero */
@media (max-height: 34em) and (orientation: landscape) {
  .hero { min-height: auto; padding-top: 7rem; padding-bottom: 3rem; }
  .page-hero { min-height: auto; padding-top: 7rem; }
  .notfound { min-height: auto; padding-top: 7rem; }
}

/* Touch: hover-only reveals must not hide content */
@media (hover: none) {
  .tile p { max-height: none; opacity: 1; margin-top: .55rem; }
  .tile__rule { transform: scaleX(1); }
  .card:hover { transform: none; }
  .proj:hover { transform: none; }
}

/* Coarse pointers get larger hit areas */
@media (pointer: coarse) {
  .nav__link { padding: .75rem .5rem; }
  .filter { padding: .7rem 1.2rem; }
  .footer__links a { padding-block: .2rem; }
}

/* Backdrop-filter fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: rgb(251 247 241); }
  .drawer__scrim { background: rgba(46 21 48 / .72); }
  .anchor-rail { background: rgb(251 247 241); }
  .lightbox { background: rgba(46 21 48 / .94); }
}

/* Users who ask for more contrast */
@media (prefers-contrast: more) {
  :root { --text-2: #433841; --text-3: #564954; --border: rgba(42 30 40 / .30); }
  .ground-dark { --text-2: #F2ECE4; --text-3: #DCD3CA; --border: rgba(251 247 241 / .34); }
  .btn { box-shadow: none; outline: 1px solid rgba(42 30 40 / .35); }
}

/* Wide-gamut displays get a slightly richer gold */
@media (color-gamut: p3) {
  :root { --gold: color(display-p3 .78 .64 .17); }
}