/* =====================================================================
   SPACE DESIGN — Responsive compositions
   Targets: 1920 · 1440 · 1024 · 768 · 430 · 390 · 375
   Mobile is a dedicated composition, not a squeezed desktop.
   ===================================================================== */

/* ---------- ≥ 1800: large & ultra-wide displays ---------- */
@media (min-width: 1800px) {
  :root { --header-h: 96px; }
  /* keep the hero on the same centred measure as the header and sections */
  
  
  
}
@media (min-width: 2200px) {
  :root { --container: 1920px; }
  html { font-size: 112.5%; }
}

/* ---------- ≤ 1440 ---------- */
@media (max-width: 1180px) {
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand p { max-width: 48ch; }
  .footer-col--office { grid-column: span 5; }
  .footer-col:not(.footer-col--office) { grid-column: span 2; }
}

/* ---------- ≤ 1180: compact desktop / tablet landscape ---------- */
@media (max-width: 1180px) {
  .primary-nav ul { gap: 1.5rem; }
  
  
  
  
  

  
  

  
  

  .section-head-title { grid-column: 1 / span 12; }
  .section-head-aside { grid-column: 1 / span 8; margin-top: 1.5rem; }

}

/* ---------- ≤ 1024: tablet ---------- */
@media (max-width: 1024px) {
  :root { --header-h: 72px; }
  .site-header.is-solid { height: 64px; }
  

  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }

  
  
  
  
  
  
  

  
  
  

  /* Project grid: 2-up with alternating spans */
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  
  
  /* narrow two-up cards: category drops to its own line */
  
  
  
  
  

  
  
  
  
  

  .offices { grid-template-columns: 1fr; }
  .office + .office { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }

  
  
  .page-hero-foot .label { grid-column: 1 / -1; margin-bottom: 1rem; }
  .page-hero-foot .lead { grid-column: 1 / -1; }

  
  

  
  

  
  
  
  
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  
  

  
  
  
  

  /* filter row scrolls sideways: fade the edge so it reads as scrollable */
  .filters { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); padding-right: 2.5rem; }

  .legal-toc { grid-column: 1 / -1; position: static; }
  .legal-body { grid-column: 1 / -1; }

  .footer-col--office { grid-column: span 6; }
  .footer-col:not(.footer-col--office) { grid-column: 1 / -1; }
  .footer-col ul { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 2rem; }
}

/* ---------- Hero: stacked composition on portrait tablets & phones ----------
   Landscape tablets and small laptops (901–1024px wide, landscape) keep the
   split hero, which uses the short, wide screen far better. */

/* Contact: stack on portrait tablets & phones; side by side on landscape */

/* Landscape phones: a wide, short hero image instead of a tall one */

/* ---------- ≤ 768: large phones / small tablets ---------- */
@media (max-width: 768px) {
  .section-head { margin-bottom: 2.5rem; }
  .section-head-aside { grid-column: 1 / -1; }

  
  
  
  

  
  
  
  

  
  .search { flex: 1 1 auto; order: -1; }
  

  
  
  .form-row { grid-template-columns: 1fr; }

  .gallery li, .gallery li:nth-child(3n + 1) { grid-column: 1 / -1; }
  
  .drawings { grid-template-columns: 1fr; }

  
  
  

  
  

  .faq-item summary { grid-template-columns: 2.5rem 1fr auto; font-size: var(--fs-md); }
  .faq-answer { padding-left: 0; }

  .lightbox-foot { flex-wrap: wrap; }
}

/* ---------- ≤ 600: phones — single-column editorial portfolio ---------- */
@media (max-width: 600px) {
  .project-grid { grid-template-columns: 1fr; row-gap: 4rem; }
  
  
  /* mobile rhythm: alternate full-bleed and inset cards */
  
  
  
  
  
}

/* ---------- ≤ 430: phones (430 / 390 / 375) ---------- */
@media (max-width: 430px) {
  :root { --gutter: 1.25rem; }

  .brand-sub { display: none; }
  .brand-name { font-size: 0.875rem; letter-spacing: 0.2em; }
  .menu-toggle-label { display: none; }

  
  
  
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .link-arrow { justify-content: center; }
  
  
  

  
  
  
  
  

  
  

  
  
  
  

  

  

  
  
  
  

  .process { grid-template-columns: 1fr; }
  
  

  
  
  

  .footer-col--office, .footer-col { grid-column: 1 / -1; }
  
  
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .cookie-banner { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 1.25rem; }
  .cookie-actions .btn { flex: 1 1 100%; }

  .form-actions .btn { width: 100%; }
}

/* ---------- Touch devices: no hover-only affordances ---------- */

/* ---------- Landscape phones: keep hero usable ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  
  .mobile-menu-list a { font-size: 1.75rem; padding-block: 0.6rem; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-menu, .scroll-progress, .cookie-banner, .skip-link { display: none !important; }
  .js [data-reveal], .js [data-reveal="image"], .js .line-mask > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  body { color: #000; }
   .site-footer{ background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ---------- Home · Selected work grid ---------- */

@media (max-width: 600px) {
  .work-grid { row-gap: 3rem; }
  
  
  
  
}

/* Portfolio tools: one scrolling row of filters on tablets & phones */

@media (max-width: 1024px) {
  
  .search { order: -1; }
  .filters { display: flex; flex-wrap: nowrap; overflow-x: auto; column-gap: 1.25rem; }
  
  
  
}

@media (max-width: 900px) {
  .record-grid { grid-template-columns: 1fr; }
  .record-grid > :first-child { grid-row: auto; }
}

/* Home · figures, steps, empanelment */

/* About · why, team, consultants, developers */

/* Long single words (e.g. "REDEVELOPMENT?") must fit narrow phones */
@media (max-width: 430px) {
  
  .page-hero-title { font-size: clamp(2rem, 10vw, 3rem); }
  .h-xl { font-size: clamp(1.9rem, 9.4vw, 2.75rem); }
  
}

/* Quick contact on touch screens & phones: icons only, slightly smaller */
@media (hover: none) { .fab-item:hover .fab-text { max-width: 0; opacity: 0; padding: 0; } }
@media (max-width: 600px) {
  .contact-fab { gap: 0.5rem; }
  .fab-menu { gap: 0.5rem; }
  .fab-title { font-size: 0.6875rem; padding: 0.3rem 0.6rem; letter-spacing: 0.12em; }
  .fab-item { height: 3.1rem; padding: 0.3rem; }
  .fab-icon { width: 2.45rem; height: 2.45rem; }
  .site-footer .footer-bottom { padding-right: 4.5rem; }
  .cookie-banner { bottom: calc(12rem + env(safe-area-inset-bottom, 0px)); }
}
@media print { .contact-fab { display: none !important; } }