/* ==========================================================================
   Balzar Arquitectos — main.css
   Extracted from approved frontend predesigns. Single source of truth for
   all shared and page-specific styles. Loaded on every page.
   ========================================================================== */

/* ── Neue Haas Grotesk Display Pro — archivos locales ───────────────────── */
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayRoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayRomanItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayMediu.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayMediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Grotesk Display Pro';
  src: url('../fonts/NeueHaasDisplayBoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


/* ══════════════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS + RESET
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --cream:    #edebe4;
  --black:    #0e0e0d;
  --warm:     #161513;
  --mid:      #787670;
  --light:    #b4b1a9;
  --rule:     #d0cdc6;
  --nav-link: #4f4d4a;
  --label:    #9a9690;
  --font-sans: 'Neue Haas Grotesk Display Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --nav-h:    52px;
  --ease:     cubic-bezier(.25, .1, .25, 1);
  --ease-o:   cubic-bezier(.16, 1, .3, 1);
  --px:       40px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; font-size: 14px; }
body  { background: var(--cream); color: var(--black); font-family: var(--font-sans); font-weight: 500; -webkit-font-smoothing: antialiased; overflow-x: hidden; cursor: none; }
img   { display: block; width: 100%; height: 100%; object-fit: cover; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }


/* ══════════════════════════════════════════════════════════════════════════
   2. CURSOR
   ══════════════════════════════════════════════════════════════════════ */

#cdot  { position: fixed; z-index: 9999; width: 5px; height: 5px; background: var(--black); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .2s, height .2s, background .3s; }
#cring { position: fixed; z-index: 9998; width: 32px; height: 32px; border: 1px solid var(--black); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .45s var(--ease), height .45s var(--ease), opacity .3s, border-color .3s; opacity: .28; }
body.hov #cdot  { width: 7px; height: 7px; }
body.hov #cring { width: 52px; height: 52px; opacity: .14; }
body.dark-zone #cdot  { background: #e8e5de; }
body.dark-zone #cring { border-color: #e8e5de; }
@media (hover: none) { #cdot, #cring { display: none; } body { cursor: auto; } }


/* ══════════════════════════════════════════════════════════════════════════
   3. NAV
   ══════════════════════════════════════════════════════════════════════ */

#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s, border-color .3s;
}
#nav.scrolled   { background: var(--cream); border-color: var(--rule); }
#nav.hero-phase { background: transparent; border-color: transparent; }

/* Hero-phase: light tints on dark background */
#nav.hero-phase .nav-links a,
#nav.hero-phase .lang-btn    { color: rgba(232, 229, 222, .55); }
#nav.hero-phase .nav-links a:hover,
#nav.hero-phase .lang-btn:hover,
#nav.hero-phase .lang-btn.active { color: #e8e5de; }
#nav.hero-phase .nav-burger span { background: #e8e5de; }

/* Logo */
.nav-logo {
  display: flex; align-items: center;
  color: #1d1d1b;
  transition: color .25s;
}
.nav-logo svg {
  height: 18px; width: auto;
  fill: currentColor;
  display: block;
}
#nav.hero-phase .nav-logo       { color: rgba(232, 229, 222, .55); }
#nav.hero-phase .nav-logo:hover { color: #e8e5de; }

/* Desktop nav links */
.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 30px;
}
.nav-links a {
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nav-link); transition: color .2s;
}
.nav-links a:hover,
.nav-links a.active,
.nav-links .current-menu-item > a,
.nav-links .current-page-ancestor > a { color: var(--black); }

/* Right cluster: lang + burger */
.nav-right { display: flex; align-items: center; gap: 4px; }

.lang-btn {
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--light);
  padding: 5px 7px; border: none; background: none;
  font-family: var(--font-sans); transition: color .2s; cursor: pointer;
}
.lang-btn.active, .lang-btn:hover { color: var(--black); }

/* Burger — hidden on desktop, revealed at ≤1024 */
.nav-burger {
  display: flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 20px; height: 20px;
  cursor: pointer; padding: 0; border: none; background: none;
  visibility: hidden; pointer-events: none;
}
.nav-burger span {
  display: block; height: 1px; width: 100%;
  background: var(--black); transition: transform .3s, opacity .3s;
}
/* When mobile menu is open, always show the X in dark regardless of nav phase */
#mmenu.open ~ #nav .nav-burger span { background: var(--black); }

/* Project-page back link (single-project template) */
.nav-back {
  font-size: 10px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mid);
  display: inline-flex; align-items: center; gap: 10px; transition: color .2s;
}
.nav-back::before { content: ''; display: block; width: 20px; height: 1px; background: currentColor; transition: width .3s; }
.nav-back:hover                { color: var(--black); }
.nav-back:hover::before        { width: 36px; }


/* ══════════════════════════════════════════════════════════════════════════
   4. MOBILE MENU
   ══════════════════════════════════════════════════════════════════════ */

#mmenu {
  position: fixed; inset: 0; z-index: 400;
  background: var(--cream);
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--px) 48px;
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
#mmenu.open { transform: translateY(0); }

.mm-links li    { border-bottom: 1px solid var(--rule); }
.mm-links a     { display: block; padding: 16px 0; font-size: clamp(22px, 5vw, 28px); font-weight: 500; letter-spacing: -.015em; transition: color .2s; }
.mm-links a:hover { color: var(--black); }

.mm-lang {
  margin-top: 32px; display: flex; flex-direction: row; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  align-self: flex-start;
}
.mm-lang .lang-btn, .mm-lang a, .mm-lang span { padding: 4px 0; }
.mm-lang span, .mm-lang a { color: var(--light); cursor: pointer; transition: color .2s; text-decoration: none; }
.mm-lang span.active, .mm-lang a.active { color: var(--black); }


/* ══════════════════════════════════════════════════════════════════════════
   5. HERO  (home page)
   ══════════════════════════════════════════════════════════════════════ */

#hero {
  position: relative; height: 100svh; min-height: 600px;
  background: var(--warm); overflow: hidden; display: flex; align-items: flex-end;
}
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; }

.hero-bg       { position: absolute; inset: 0; background: var(--warm); will-change: transform; }
.hero-bg img   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transform: scale(1.12); transition: opacity 1.8s ease; }
.hero-bg img.loaded { opacity: .72; }
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-grain    { position: absolute; inset: 0; z-index: 2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); pointer-events: none; }
.hero-vignette { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to bottom, rgba(14,14,13,.18) 0%, transparent 35%, transparent 55%, rgba(14,14,13,.88) 100%); }

.hero-content { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 120px 1fr; width: 100%; padding: 0 var(--px) 64px; align-items: flex-end; }
.hero-left  { grid-column: 1; display: flex; flex-direction: column; justify-content: flex-end; }

.hero-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 18px; }

.hero-title { font-family: var(--font-sans); font-size: clamp(48px, 6.5vw, 96px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: #e8e5de; }
.hero-title-line { display: block; transform: translateY(110%); opacity: 0; transition: transform .9s var(--ease-o), opacity .4s ease; }
.hero-title-line.in { transform: translateY(0); opacity: 1; }
.hero-title-line:nth-child(2) { transition-delay: .12s; }
.hero-title-line:nth-child(3) { transition-delay: .22s; }

.hero-right { grid-column: 3; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; }
.lang-en .hero-right { padding-bottom: 8px; } /* EN descenders need extra optical lift */
.hero-desc  { font-size: 17px; font-weight: 500; line-height: 1.44; color: rgba(232,229,222,.92); max-width: 420px; margin-bottom: 0; letter-spacing: 0; }
.hero-cta   { display: inline-flex; align-items: center; gap: 12px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,229,222,.65); transition: color .25s, gap .3s; margin-bottom: 36px; }
.hero-cta::after { content: ''; display: block; width: 28px; height: 1px; background: currentColor; transition: width .35s; }
.hero-cta:hover  { color: #e8e5de; gap: 18px; }
.hero-cta:hover::after { width: 48px; }

.hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .5s; }
.hero-scroll.in { opacity: .35; }
.scroll-line { width: 1px; height: 36px; background: rgba(232,229,222,.4); position: relative; overflow: hidden; }
.scroll-line::after { content: ''; position: absolute; top: -100%; left: 0; width: 1px; height: 100%; background: #e8e5de; animation: scrollDrop 2s ease-in-out infinite 1.5s; }
.scroll-label { font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,229,222,.3); }
@keyframes scrollDrop { 0% { top: -100%; } 50% { top: 100%; } 100% { top: 100%; } }


/* ══════════════════════════════════════════════════════════════════════════
   6. MARQUEE  (home page)
   ══════════════════════════════════════════════════════════════════════ */

.marquee-band  { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; overflow: hidden; white-space: nowrap; background: var(--cream); }
.marquee-track { display: inline-flex; animation: marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-item  { display: inline-flex; align-items: center; gap: 32px; padding: 0 32px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.marquee-dot   { width: 3px; height: 3px; border-radius: 50%; background: var(--light); flex-shrink: 0; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }


/* ══════════════════════════════════════════════════════════════════════════
   7. SHARED SECTION CHROME
   ══════════════════════════════════════════════════════════════════════ */

.sec      { padding: 80px 0 64px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--px); margin-bottom: 28px; }
.sec-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.sec-more  { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); display: inline-flex; align-items: center; gap: 10px; transition: color .2s; }
.sec-more::after { content: ''; display: block; width: 20px; height: 1px; background: currentColor; transition: width .3s; }
.sec-more:hover         { color: var(--black); }
.sec-more:hover::after  { width: 38px; }

.cta-link  { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--black); transition: gap .3s; }
.cta-link::after { content: ''; display: block; width: 26px; height: 1px; background: currentColor; transition: width .3s; }
.cta-link:hover         { gap: 18px; }
.cta-link:hover::after  { width: 46px; }


/* ══════════════════════════════════════════════════════════════════════════
   8. WORK GRID  (home — featured grid)
   ══════════════════════════════════════════════════════════════════════ */

.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 0; }
.wi { display: block; position: relative; overflow: hidden; background: var(--warm); cursor: pointer; }
.wi.c7 { grid-column: span 7; } .wi.c5 { grid-column: span 5; }
.wi.c6 { grid-column: span 6; } .wi.c8 { grid-column: span 8; }
.wi.c4 { grid-column: span 4; } .wi.c3 { grid-column: span 3; }
.wi.c12 { grid-column: span 12; }
.wi.r-tall { aspect-ratio: 3/4; } .wi.r-mid { aspect-ratio: 4/5; }
.wi.r-sq   { aspect-ratio: 1; }  .wi.r-wide { aspect-ratio: 16/9; }
.wi-bg { width: 100%; height: 100%; transition: transform .8s var(--ease); }
.wi:hover .wi-bg { transform: scale(1.04); }
.wi-idx { position: absolute; top: 14px; left: 16px; font-size: 9px; font-weight: 500; letter-spacing: .1em; color: rgba(232,229,222,.25); }
.wi-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(14,14,13,.76)); transform: translateY(6px); opacity: 0; transition: opacity .32s, transform .32s; }
.wi:hover .wi-cap { opacity: 1; transform: translateY(0); }
.wi-cap-name { font-size: 15px; font-weight: 500; color: #e8e5de; letter-spacing: 0; line-height: 1.3; margin-bottom: 4px; }
.wi-cap-meta { font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--label); }


/* ══════════════════════════════════════════════════════════════════════════
   9. STUDIO BLOCK  (home — studio teaser section)
   ══════════════════════════════════════════════════════════════════════ */

#studio { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; border-top: 1px solid var(--rule); }
.studio-text { padding: 88px 60px 88px var(--px); display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--rule); }
.studio-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 24px; }
.studio-title { font-family: var(--font-sans); font-size: clamp(28px, 3.2vw, 46px); font-weight: 500; line-height: 1.0; letter-spacing: -.025em; color: var(--black); margin-bottom: 24px; }
.studio-body { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 380px; margin-bottom: 32px; letter-spacing: 0; }
.studio-img       { overflow: hidden; background: var(--warm); }
.studio-img-inner { width: 100%; height: 100%; background: linear-gradient(150deg, #1e1b18 0%, #2a2620 100%); transition: transform .85s ease; }
.studio-img:hover .studio-img-inner { transform: scale(1.03); }


/* ══════════════════════════════════════════════════════════════════════════
   10. PEOPLE GRID  (home)
   ══════════════════════════════════════════════════════════════════════ */

#people { border-top: 1px solid var(--rule); }
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 0 2px; margin-top: 2px; }
.person-card { display: block; background: var(--warm); position: relative; overflow: hidden; aspect-ratio: 3/4; }
.person-bg   { width: 100%; height: 100%; background: linear-gradient(145deg, #1c1a17 0%, #2a2622 100%); transition: transform .75s var(--ease); }
.person-card:hover .person-bg { transform: scale(1.04); }
.person-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(transparent, rgba(14,14,13,.84)); }
.person-name { font-size: 15px; font-weight: 500; color: #e8e5de; margin-bottom: 5px; letter-spacing: 0; line-height: 1.3; }
.person-role { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }


/* ══════════════════════════════════════════════════════════════════════════
   11. ARCHIVE LIST  (home — preview list)
   ══════════════════════════════════════════════════════════════════════ */

#archive { border-top: 1px solid var(--rule); }
.arch-list { padding: 0 var(--px); }
.arch-item { display: grid; grid-template-columns: 40px 1fr 180px 90px 110px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; text-decoration: none; color: inherit; }
.arch-item:first-child { border-top: 1px solid var(--rule); }
.arch-item:hover { background: rgba(128,128,128,.05); }
.arch-n    { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.arch-name { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.arch-loc  { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; white-space: nowrap; }
.arch-yr   { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.arch-type { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; text-align: right; }


/* ══════════════════════════════════════════════════════════════════════════
   12. THINKING GRID  (home)
   ══════════════════════════════════════════════════════════════════════ */

#thinking { border-top: 1px solid var(--rule); }
.thinking-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.tcard { display: block; padding: 40px var(--px); border-left: 1px solid var(--rule); cursor: pointer; transition: background .2s; }
.tcard:first-child { border-left: none; }
.tcard:hover { background: rgba(128,128,128,.04); }
.tcard-cat   { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.tcard-title { font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--black); margin-bottom: 10px; }
.tcard-body  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }


/* ══════════════════════════════════════════════════════════════════════════
   13. MARKETS BAND  (home)
   ══════════════════════════════════════════════════════════════════════ */

#markets { border-top: 1px solid var(--rule); }
.markets-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 0 2px; margin-top: 28px; }
.mcard { display: flex; background: var(--warm); padding: 40px 36px; flex-direction: column; justify-content: flex-end; min-height: 240px; }
.mcard-region { font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,229,222,.45); margin-bottom: 5px; }
.mcard-name   { font-size: 18px; font-weight: 500; color: #e8e5de; letter-spacing: -.01em; margin-bottom: 5px; }
.mcard-cities { font-size: 15px; font-weight: 500; color: rgba(232,229,222,.7); line-height: 1.3; letter-spacing: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   14. NEWSLETTER  (home)
   ══════════════════════════════════════════════════════════════════════ */

#newsletter { border-top: 1px solid var(--rule); padding-bottom: 0; }
.nl-inner { display: grid; grid-template-columns: 1fr 1fr; }
.nl-text  { padding: 52px 60px 52px var(--px); display: flex; flex-direction: column; justify-content: flex-start; border-right: 1px solid var(--rule); }
.nl-text h2 { font-family: var(--font-sans); font-size: 30px; font-weight: 500; line-height: 1.0; letter-spacing: -.025em; margin-bottom: 14px; }
.nl-text p  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 380px; letter-spacing: 0; }
.nl-form  { padding: 0 60px; display: flex; flex-direction: column; justify-content: center; }
.nl-row   { display: flex; gap: 2px; margin-bottom: 10px; }
.nl-input { flex: 1; background: rgba(14,14,13,.05); border: none; outline: none; padding: 13px 15px; font-size: 15px; font-weight: 500; font-family: var(--font-sans); color: var(--black); letter-spacing: 0; transition: background .2s; }
.nl-input::placeholder { color: var(--light); }
.nl-input:focus        { background: rgba(14,14,13,.09); }
.nl-btn   { background: var(--black); color: var(--cream); border: none; padding: 13px 22px; font-size: 10px; font-weight: 500; font-family: var(--font-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background .2s; }
.nl-btn:hover  { background: #2a2824; }
.nl-legal { font-size: 10px; font-weight: 500; color: var(--label); line-height: 1.6; }


/* ══════════════════════════════════════════════════════════════════════════
   15. CONTACT SECTION  (home)
   ══════════════════════════════════════════════════════════════════════ */

#contact-sec { border-top: 1px solid var(--rule); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; padding: 0 var(--px); }
.contact-block h3 { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 16px; }
.contact-block p, .contact-block a { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }
.contact-block a { transition: opacity .18s; }
.contact-block a:hover { opacity: .5; }
.contact-block .big { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; line-height: 1.5; margin-bottom: 12px; }


/* ══════════════════════════════════════════════════════════════════════════
   16. FOOTER
   ══════════════════════════════════════════════════════════════════════ */

footer {
  border-top: 1px solid var(--rule);
  padding: 44px var(--px);
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 30px; align-items: start;
}
.fc h4 { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 16px; }
.fc p, .fc a { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }
.fc a { transition: opacity .18s; }
.fc a:hover { opacity: .5; }
.footer-bottom { border-top: 1px solid var(--rule); padding: 16px var(--px); display: flex; justify-content: space-between; align-items: center; }
.footer-bottom span { font-size: 10px; font-weight: 500; color: var(--label); letter-spacing: .2em; text-transform: uppercase; }


/* ══════════════════════════════════════════════════════════════════════════
   17. REVEAL ANIMATION
   ══════════════════════════════════════════════════════════════════════ */

.rev { opacity: 0; transform: translateY(18px); transition: opacity .68s var(--ease), transform .68s var(--ease); }
.rev.in { opacity: 1; transform: translateY(0); }


/* ══════════════════════════════════════════════════════════════════════════
   18. PAGE HEADER  (shared — archive, studio, markets)
   ══════════════════════════════════════════════════════════════════════ */

.page-header {
  margin-top: var(--nav-h);
  padding: 64px var(--px) 48px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.page-header h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: var(--black); }
.proj-count { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--light); padding-bottom: 8px; }


/* ══════════════════════════════════════════════════════════════════════════
   19. FILTER BAR + VIEW TOGGLE  (archive page)
   ══════════════════════════════════════════════════════════════════════ */

.filter-bar { padding: 20px var(--px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 12px; }
.filter-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.filter-group-label { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--light); margin-right: 8px; white-space: nowrap; flex-shrink: 0; }
.filter-btn { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); padding: 5px 10px; border: 1px solid transparent; background: none; font-family: var(--font-sans); cursor: pointer; transition: color .15s, border-color .15s; white-space: nowrap; }
.filter-btn:hover  { color: var(--black); border-color: var(--rule); }
.filter-btn.active { color: var(--black); border-color: var(--black); }
.filter-divider { width: 1px; height: 14px; background: var(--rule); flex-shrink: 0; align-self: center; }

.view-toggle { margin-left: auto; display: flex; gap: 2px; flex-shrink: 0; }
.view-btn { padding: 5px 11px; border: 1px solid var(--rule); background: none; cursor: pointer; font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); transition: all .15s; }
.view-btn.active { background: var(--black); color: var(--cream); border-color: var(--black); }


/* ══════════════════════════════════════════════════════════════════════════
   20. GRID VIEW  (archive page)
   ══════════════════════════════════════════════════════════════════════ */

#grid-view { padding: 2px; }
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.proj-card { position: relative; overflow: hidden; background: var(--warm); cursor: pointer; aspect-ratio: 4/5; display: block; }
.proj-card.hidden { display: none; }
.proj-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); background: linear-gradient(145deg, #1c1a17, #2e2b26); }
.proj-card:hover .proj-card-img { transform: scale(1.04); }
.proj-card-cap { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(14,14,13,.78)); transform: translateY(4px); opacity: 0; transition: opacity .28s, transform .28s; }
.proj-card:hover .proj-card-cap { opacity: 1; transform: translateY(0); }
.proj-card-name { font-size: 15px; font-weight: 500; color: #e8e5de; letter-spacing: .004em; line-height: 1.3; margin-bottom: 4px; }
.proj-card-meta { font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgba(232,229,222,.45); }


/* ══════════════════════════════════════════════════════════════════════════
   21. LIST VIEW  (archive page)
   ══════════════════════════════════════════════════════════════════════ */

#list-view { display: none; }
.list-header, .list-item { display: grid; grid-template-columns: 40px 1fr 160px 80px 100px 110px; }
.list-header { padding: 10px var(--px); border-bottom: 1px solid var(--rule); }
.list-header span { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--light); }
.list-header span:last-child { text-align: right; }
.list-item { align-items: center; padding: 13px var(--px); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .12s; text-decoration: none; color: inherit; }
.list-item.hidden  { display: none; }
.list-item:hover   { background: rgba(128,128,128,.05); }
.list-n    { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.list-name { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.list-loc  { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.list-yr   { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.list-type { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }
.list-status { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; text-align: right; }

.empty-state { padding: 80px var(--px); text-align: center; display: none; }
.empty-state p { font-size: 13px; font-weight: 500; color: var(--light); }


/* ══════════════════════════════════════════════════════════════════════════
   22. STUDIO PAGE
   ══════════════════════════════════════════════════════════════════════ */

.studio-hero { width: 100%; aspect-ratio: 21/9; overflow: hidden; background: var(--warm); }
.studio-hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.studio-hero:hover img { transform: scale(1.02); }

/* Studio page header */
.studio-page-header { margin-top: var(--nav-h); padding: 64px var(--px) 48px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-end; }
.studio-page-header h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: var(--black); }
.studio-page-header-right { padding-bottom: 4px; }
.studio-page-header-right p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }

/* Section layout */
.section       { border-top: 1px solid var(--rule); }
.section-inner { display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.section-label-col { padding: 52px var(--px) 52px var(--px); border-right: 1px solid var(--rule); }
.section-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); position: sticky; top: calc(var(--nav-h) + 24px); }
.section-content { padding: 52px var(--px) 52px 52px; }

/* Practice text */
.practice-body p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; margin-bottom: 16px; }
.practice-body p:last-child { margin-bottom: 0; }
.practice-body p strong { color: var(--black); font-weight: 500; }

/* Numbers row */
.numbers-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
.number-item  { padding: 36px var(--px); border-right: 1px solid var(--rule); }
.number-item:last-child { border-right: none; }
.number-val   { font-size: clamp(28px, 3.5vw, 48px); font-weight: 500; letter-spacing: -.03em; color: var(--black); line-height: 1; margin-bottom: 8px; }
.number-label { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--light); }

/* Team grid */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.team-card  { position: relative; overflow: hidden; background: var(--warm); aspect-ratio: 3/4; }
.team-card-img { width: 100%; height: 100%; background: linear-gradient(145deg, #1c1a17, #2a2622); transition: transform .8s var(--ease); }
.team-card:hover .team-card-img { transform: scale(1.04); }
.team-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(transparent, rgba(14,14,13,.84)); }
.team-name { font-size: 15px; font-weight: 500; color: #e8e5de; margin-bottom: 4px; }
.team-role { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(232,229,222,.42); }

.team-list { margin-top: 2px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.team-list-item { padding: 18px 20px; border: 1px solid var(--rule); background: var(--cream); }
.team-list-name { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; margin-bottom: 3px; }
.team-list-role { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--light); }

/* Services list */
.services-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); }
.service-item  { padding: 11px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 48px 1fr; align-items: baseline; }
.service-item:nth-child(odd) { padding-right: 40px; }
.service-n    { font-size: 10px; font-weight: 500; color: var(--light); letter-spacing: .06em; }
.service-name { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }

/* Approach */
.section-content--approach { padding: 0; }
.approach-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; border-bottom: 1px solid var(--rule); }
.approach-row:last-child { border-bottom: none; }
.approach-img  { overflow: hidden; background: var(--warm); }
.approach-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.approach-img:hover img { transform: scale(1.03); }
.approach-text { padding: 52px; display: flex; flex-direction: column; justify-content: center; }
.approach-text h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--black); margin-bottom: 16px; }
.approach-text p  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; text-align: left; }

/* Recognition */
.recog-list { border-top: 1px solid var(--rule); }
.recog-item { display: grid; grid-template-columns: 48px 1fr; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; }
.recog-item--link { cursor: pointer; transition: opacity .18s; }
.recog-item--link:hover { opacity: .5; }
.recog-yr   { font-size: 10px; font-weight: 500; color: var(--light); letter-spacing: .06em; }
.recog-name { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   23. MARKETS PAGE
   ══════════════════════════════════════════════════════════════════════ */

.markets-header { margin-top: var(--nav-h); padding: 64px var(--px) 48px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-end; }
.markets-page-title { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: var(--black); }
.markets-page-desc  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 400px; letter-spacing: 0; align-self: end; }
.globe-wrap { display: flex; align-items: center; justify-content: flex-end; padding-right: var(--px); }
#globe-canvas { display: block; }

.markets-jump { border-bottom: 1px solid var(--rule); padding: 0 var(--px); display: flex; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.markets-jump::-webkit-scrollbar { display: none; }
.jump-btn { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); padding: 14px 0; margin-right: 32px; border: none; background: none; font-family: var(--font-sans); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .15s; text-decoration: none; display: inline-block; }
.jump-btn:last-child { margin-right: 0; }
.jump-btn:hover, .jump-btn.active { color: var(--black); }

.market-band { display: grid; grid-template-columns: 240px 1fr; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 44px); }
.market-band:last-child { border-bottom: none; }
.market-info { padding: 52px var(--px); border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.market-region-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.market-name   { font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; color: var(--black); margin-bottom: 22px; }
.market-cities { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); line-height: 2.2; margin-top: auto; }

.market-projects { padding: 48px 0 48px 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; align-content: start; }
.mproj-card { position: relative; overflow: hidden; background: var(--warm); aspect-ratio: 3/4; display: block; cursor: pointer; }
.mproj-img  { width: 100%; height: 100%; transition: transform .8s var(--ease); }
.mproj-card:hover .mproj-img { transform: scale(1.04); }
.mproj-cap  { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(transparent, rgba(14,14,13,.78)); transform: translateY(4px); opacity: 0; transition: opacity .28s, transform .28s; }
.mproj-card:hover .mproj-cap { opacity: 1; transform: translateY(0); }
.mproj-name { font-size: 15px; font-weight: 500; color: #e8e5de; letter-spacing: .004em; margin-bottom: 3px; }
.mproj-meta { font-size: 10px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: rgba(232,229,222,.45); }


/* ══════════════════════════════════════════════════════════════════════════
   24. PROJECT PAGE  (single-project)
   ══════════════════════════════════════════════════════════════════════ */

.proj-hero { position: relative; height: 72svh; min-height: 480px; background: var(--warm); overflow: hidden; margin-top: var(--nav-h); }
.proj-hero-img      { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.proj-hero-vignette { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(14,14,13,.72) 100%); }
.proj-hero-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px var(--px); display: grid; grid-template-columns: 1fr auto; align-items: flex-end; gap: 40px; }
.proj-title { font-size: clamp(36px, 5vw, 72px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: #e8e5de; }
.proj-tags  { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.proj-tag   { font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(232,229,222,.5); }

.proj-meta-strip         { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--rule); }
.proj-meta-strip.has-six { grid-template-columns: repeat(6, 1fr); }
.proj-meta-item  { padding: 24px var(--px) 22px; border-right: 1px solid var(--rule); }
.proj-meta-item:last-child { border-right: none; }
.proj-meta-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 8px; }
.proj-meta-val   { font-size: 14px; font-weight: 500; color: var(--black); letter-spacing: .004em; }

.proj-body { padding: 0; }
.proj-text { padding: 64px var(--px); max-width: 680px; }
.proj-text h2 { font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--black); margin-bottom: 20px; }
.proj-text p  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; margin-bottom: 14px; }
.proj-text p:last-child { margin-bottom: 0; }

/* Image modules */
.mod-full { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--warm); margin-top: 2px; }
.mod-full img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mod-full:hover img { transform: scale(1.02); }

.mod-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 2px; }
.mod-2col-item { aspect-ratio: 4/5; overflow: hidden; background: var(--warm); }
.mod-2col-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mod-2col-item:hover img { transform: scale(1.03); }

.mod-asym { display: grid; grid-template-columns: 7fr 5fr; gap: 2px; margin-top: 2px; }
.mod-asym-main { aspect-ratio: 3/2; overflow: hidden; background: var(--warm); }
.mod-asym-side { aspect-ratio: 3/4; overflow: hidden; background: var(--warm); }
.mod-asym-main img, .mod-asym-side img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mod-asym-main:hover img, .mod-asym-side:hover img { transform: scale(1.03); }

.mod-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 2px; }
.mod-3col-item { aspect-ratio: 2/3; overflow: hidden; background: var(--warm); }
.mod-3col-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mod-3col-item:hover img { transform: scale(1.03); }

.img-caption { padding: 10px var(--px) 48px; font-size: 10px; font-weight: 500; color: var(--light); letter-spacing: .04em; line-height: 1.5; }

.proj-quote { padding: 64px var(--px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.proj-quote blockquote { font-size: clamp(18px, 2.2vw, 26px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: var(--black); max-width: 720px; }
.proj-quote cite { display: block; margin-top: 16px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); font-style: normal; }

.proj-plan { padding: 64px var(--px); border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.proj-plan-img { background: var(--cream); border: 1px solid var(--rule); padding: 32px; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.proj-plan-img-inner { width: 100%; height: 100%; background: linear-gradient(145deg, var(--rule) 0%, transparent 100%); opacity: .45; }
.proj-plan-text h3 { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--light); margin-bottom: 20px; }
.proj-plan-text p  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }

.mod-video { position: relative; width: 100%; overflow: hidden; background: var(--warm); margin-top: 2px; }
.mod-video--16-9 { aspect-ratio: 16/9; }
.mod-video--4-3  { aspect-ratio: 4/3; }
.mod-video--1-1  { aspect-ratio: 1/1; }
.mod-video--9-16 { aspect-ratio: 9/16; max-width: 480px; margin-inline: auto; }
.mod-video--4-5  { aspect-ratio: 4/5;  max-width: 480px; margin-inline: auto; }
.mod-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.proj-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.proj-nav-item { padding: 40px var(--px); cursor: pointer; transition: background .2s; display: flex; flex-direction: column; gap: 12px; }
.proj-nav-item:first-child { border-right: 1px solid var(--rule); }
.proj-nav-item:hover   { background: rgba(128,128,128,.04); }
.proj-nav-dir  { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.proj-nav-name { font-size: 18px; font-weight: 500; letter-spacing: -.015em; color: var(--black); line-height: 1.2; }
.proj-nav-meta { font-size: 11px; font-weight: 500; color: var(--mid); }
.proj-nav-item:last-child { text-align: right; }


/* ══════════════════════════════════════════════════════════════════════════
   25. RESPONSIVE — ≤1200px  (markets grid)
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .market-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ══════════════════════════════════════════════════════════════════════════
   26. RESPONSIVE — ≤1024px
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  :root { --px: 24px; }

  /* Nav */
  .nav-links { display: none; }
  .nav-right .lang-btn { display: none; }
  .nav-burger { visibility: visible; pointer-events: auto; }

  /* Hero (home) */
  .hero-content { grid-template-columns: 1fr; padding-bottom: 52px; }
  .hero-left  { grid-column: auto; }
  .hero-right { grid-column: auto; display: none; }
  .hero-title   { font-size: clamp(44px, 9vw, 72px); }
  .hero-scroll  { display: none; }

  /* Work grid (home) */
  .arch-item { grid-template-columns: 28px 1fr 120px 72px; }
  .arch-type { display: none; }

  /* Studio block (home) */
  #studio { grid-template-columns: 1fr; }
  .studio-img  { height: 380px; }
  .studio-text { padding: 64px var(--px); border-right: none; border-bottom: 1px solid var(--rule); }

  /* People (home) */
  .people-grid { grid-template-columns: 1fr 1fr; }

  /* Thinking (home) */
  .thinking-grid { grid-template-columns: 1fr 1fr; }
  .tcard:nth-child(2) { border-left: 1px solid var(--rule); }
  .tcard:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--rule); border-left: none; }

  /* Markets band (home) */
  .markets-band { grid-template-columns: 1fr 1fr; }

  /* Newsletter (home) */
  .nl-inner { grid-template-columns: 1fr; }
  .nl-text  { border-right: none; border-bottom: 1px solid var(--rule); padding: 52px var(--px) 40px; }
  .nl-form  { padding: 40px var(--px) 52px; }

  /* Contact (home) */
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-block + .contact-block { margin-top: 36px; }

  /* Footer */
  footer { grid-template-columns: 1fr 1fr; }

  /* Archive page */
  .page-header { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 48px; }
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .list-header, .list-item { grid-template-columns: 32px 1fr 120px 64px; }
  .list-type, .list-status, .hdr-type, .hdr-status { display: none; }
  .filter-divider { display: none; }

  /* Studio page */
  .studio-page-header { grid-template-columns: 1fr; }
  .studio-hero { aspect-ratio: 16/9; }
  .section-inner { grid-template-columns: 1fr; }
  .section-label-col { border-right: none; padding: 40px var(--px) 0; }
  .section-label { position: static; }
  .section-content { padding: 24px var(--px) 48px; }
  .numbers-row { grid-template-columns: 1fr 1fr; }
  .number-item:nth-child(2) { border-right: none; }
  .number-item:nth-child(3), .number-item:nth-child(4) { border-top: 1px solid var(--rule); }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .team-list { grid-template-columns: 1fr 1fr; }
  .section-content--approach { padding-top: 24px; }
  .approach-row { grid-template-columns: 1fr; }
  .approach-img { aspect-ratio: 16/9; }
  .approach-row:nth-child(even) .approach-img { order: -1; }


  /* Markets page */
  .markets-header { grid-template-columns: 1fr; padding-bottom: 48px; }
  .globe-wrap { display: none; }
  .market-band { grid-template-columns: 1fr; }
  .market-info { border-right: none; border-bottom: 1px solid var(--rule); padding: 40px var(--px) 32px; }
  .market-cities { margin-top: 16px; }
  .market-projects { padding: 0; grid-template-columns: repeat(2, 1fr); }

  /* Project page */
  .proj-meta-strip         { grid-template-columns: repeat(3, 1fr); }
  .proj-meta-strip.has-six { grid-template-columns: repeat(3, 1fr); }
  .proj-meta-item:nth-child(3) { border-right: none; }
  .proj-meta-item:nth-child(4), .proj-meta-item:nth-child(5) { border-top: 1px solid var(--rule); }
  /* 6-item strip: 2 rows of 3; item 6 also gets a top border */
  .proj-meta-strip.has-six .proj-meta-item:nth-child(3) { border-right: none; }
  .proj-meta-strip.has-six .proj-meta-item:nth-child(6) { border-top: 1px solid var(--rule); border-right: none; }
  .proj-plan { grid-template-columns: 1fr; }
  .proj-plan-img { aspect-ratio: 16/9; }
}


/* ══════════════════════════════════════════════════════════════════════════
   27. RESPONSIVE — ≤640px
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root { --nav-h: 48px; --px: 20px; }

  /* Hero (home) */
  .hero-title { font-size: clamp(34px, 10vw, 52px); }
  .hero-content { padding: 0 var(--px) 40px; padding-bottom: max(40px, env(safe-area-inset-bottom, 0px) + 20px); }

  /* Shared */
  .sec { padding: 60px 0 48px; }

  /* Work grid (home) */
  .wi.c7, .wi.c5, .wi.c8, .wi.c6, .wi.c4, .wi.c3 { grid-column: span 12; }
  .wi.r-tall, .wi.r-mid, .wi.r-sq { aspect-ratio: 4/5; }
  .wi.r-wide { aspect-ratio: 4/3; }
  .work-grid .wi:nth-child(n+5) { display: none; }

  /* People (home) */
  .people-grid { grid-template-columns: 1fr; }

  /* Thinking (home) */
  .thinking-grid { grid-template-columns: 1fr; }
  .tcard { border-left: none; border-top: 1px solid var(--rule); padding: 32px var(--px); }
  .tcard:first-child { border-top: none; }
  .tcard:nth-child(3) { grid-column: span 1; }

  /* Markets band (home) */
  .markets-band { grid-template-columns: 1fr 1fr; gap: 2px; }
  .mcard { padding: 22px 16px; min-height: 160px; }
  .mcard-name { font-size: 15px; }

  /* Newsletter (home) */
  .nl-row { flex-direction: column; }
  .nl-btn { width: 100%; padding: 14px; }

  /* Archive list (home) */
  .arch-item { grid-template-columns: 24px 1fr 110px; }
  .arch-yr   { display: none; }

  /* Mobile menu */
  #mmenu { padding: 70px var(--px) 40px; }
  .mm-links a { padding: 14px 0; }

  /* Footer */
  footer { grid-template-columns: 1fr 1fr; padding: 36px var(--px); gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; padding: 14px var(--px); }

  /* Archive page */
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  .proj-card { aspect-ratio: 3/4; }
  .filter-bar { flex-direction: column; gap: 0; padding: 0; flex-wrap: nowrap; }
  .filter-group { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; padding: 0 var(--px); border-bottom: 1px solid var(--rule); gap: 0; align-items: stretch; }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-group:nth-child(5) { display: flex; }
  .filter-group-label { display: none; }
  .filter-btn { flex-shrink: 0; padding: 13px 9px; border: none; border-radius: 0; border-bottom: 2px solid transparent; }
  .filter-btn.active { color: var(--black); border-bottom: 2px solid var(--black); }
  .filter-divider { display: none; }
  .view-toggle { margin-left: 0; padding: 10px var(--px); border-bottom: 1px solid var(--rule); width: 100%; }
  .list-header, .list-item { grid-template-columns: 28px 1fr; }
  .list-loc, .list-yr, .list-type, .list-status, .hdr-loc, .hdr-yr, .hdr-type, .hdr-status { display: none; }

  /* Studio page */
  .studio-page-header { padding-top: 48px; padding-bottom: 36px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-list { grid-template-columns: 1fr 1fr; }
  .services-list { grid-template-columns: 1fr; }
  .service-item:nth-child(even) { border-left: none; padding-left: 0; }
  .approach-text { padding: 36px var(--px); }

  /* Markets page */
  .markets-header { padding: 40px var(--px) 36px; }
  .market-info { padding: 36px var(--px) 28px; }
  .market-projects { grid-template-columns: repeat(2, 1fr); }

  /* Project page */
  .proj-hero-meta { grid-template-columns: 1fr; padding: 36px var(--px); gap: 10px; }
  .proj-tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .proj-title { font-size: clamp(32px, 9vw, 52px); }
  .proj-meta-strip,
  .proj-meta-strip.has-six { grid-template-columns: 1fr 1fr; }
  .proj-meta-item:nth-child(2) { border-right: none; }
  .proj-meta-item:nth-child(3),
  .proj-meta-item:nth-child(4),
  .proj-meta-item:nth-child(5) { border-top: 1px solid var(--rule); }
  /* 6-item strip at mobile: items 3/4/5/6 get top border; items 2/4/6 have no right border */
  .proj-meta-strip.has-six .proj-meta-item:nth-child(2),
  .proj-meta-strip.has-six .proj-meta-item:nth-child(4),
  .proj-meta-strip.has-six .proj-meta-item:nth-child(6) { border-right: none; }
  .proj-meta-strip.has-six .proj-meta-item:nth-child(3),
  .proj-meta-strip.has-six .proj-meta-item:nth-child(5) { border-right: 1px solid var(--rule); }
  .proj-meta-strip.has-six .proj-meta-item:nth-child(6) { border-top: 1px solid var(--rule); }
  .mod-2col, .mod-asym { grid-template-columns: 1fr; }
  .mod-3col { grid-template-columns: 1fr 1fr; }
  .mod-full,
  .mod-2col-item,
  .mod-asym-main, .mod-asym-side,
  .mod-3col-item { aspect-ratio: auto; }
  .mod-full img,
  .mod-2col-item img,
  .mod-asym-main img, .mod-asym-side img,
  .mod-3col-item img { height: auto; object-fit: initial; }
  .proj-nav { grid-template-columns: 1fr; }
  .proj-nav-item:first-child { border-right: none; border-bottom: 1px solid var(--rule); }
  .proj-nav-item:last-child { text-align: left; }
  footer { grid-template-columns: 1fr 1fr; padding: 36px var(--px); gap: 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   28. PAGE HEADER — TWO-COL  (contact, thinking, and other pages)
   Matches the visual language of .studio-page-header but with a neutral name
   for re-use across pages that are not the studio page.
   ══════════════════════════════════════════════════════════════════════ */

.page-header-two-col {
  margin-top: var(--nav-h);
  padding: 64px var(--px) 48px;
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-end;
}
.page-header-two-col h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: var(--black); }
.page-header-left h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.0; letter-spacing: -.03em; color: var(--black); }
.page-header-right { padding-bottom: 4px; align-self: end; }
.page-header-right p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; max-width: 440px; }


/* ══════════════════════════════════════════════════════════════════════════
   29. THINKING INDEX PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* Filter bar — single group, no dividers, reuses .filter-btn from §19 */
.think-filter { padding: 14px var(--px); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

/* Reading list */
.think-list { }
.think-row {
  display: grid; grid-template-columns: 140px 1fr 120px;
  align-items: baseline; padding: 16px var(--px);
  border-bottom: 1px solid var(--rule);
  transition: background .12s; text-decoration: none; color: inherit; cursor: pointer;
}
.think-row:first-child { border-top: 1px solid var(--rule); }
.think-row:hover       { background: rgba(128,128,128,.04); }
.think-row.hidden      { display: none; }
.think-row-cat   { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); overflow: hidden; white-space: nowrap; }
.think-row-title { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: -.006em; line-height: 1.35; }
.think-row-date  { font-size: 15px; font-weight: 500; color: var(--black); letter-spacing: -.006em; text-align: right; white-space: nowrap; }

.think-empty { padding: 60px var(--px); }
.think-empty p { font-size: 13px; font-weight: 500; color: var(--light); }


/* ══════════════════════════════════════════════════════════════════════════
   30. THINKING SINGLE PAGE  (single-thinking.php)
   ══════════════════════════════════════════════════════════════════════ */

/* Entry header */
.think-entry-header { margin-top: var(--nav-h); padding: 64px var(--px) 52px; border-bottom: 1px solid var(--rule); max-width: 860px; }
.think-entry-header-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.think-entry-cat  { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.think-entry-date { font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--label); }
.think-entry-title { font-size: clamp(28px, 4vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; color: var(--black); margin-bottom: 20px; }
.think-entry-deck  { font-size: 15px; font-weight: 500; line-height: 1.62; color: var(--mid); letter-spacing: .003em; max-width: 620px; }

/* Hero image (optional) */
.think-entry-hero { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--warm); }
.think-entry-hero img { width: 100%; height: 100%; object-fit: cover; }

/* Reading body — constrained line length for comfortable reading */
.think-body { padding: 60px var(--px) 80px; max-width: calc(680px + 2 * var(--px)); }
.think-body p  { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; margin-bottom: 18px; }
.think-body p:last-child { margin-bottom: 0; }
.think-body h2 { font-size: 20px; font-weight: 500; letter-spacing: -.018em; color: var(--black); margin: 40px 0 14px; line-height: 1.2; }
.think-body h3 { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--light); margin: 32px 0 12px; }
.think-body blockquote { border-left: 2px solid var(--rule); padding-left: 24px; margin: 32px 0; font-size: 15px; line-height: 1.6; color: var(--black); letter-spacing: -.008em; }
.think-body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--rule); transition: text-decoration-color .2s; }
.think-body a:hover { text-decoration-color: var(--black); }
.think-body ul, .think-body ol { padding-left: 20px; margin-bottom: 18px; }
.think-body ul { list-style: disc; }
.think-body ol { list-style: decimal; }
.think-body li { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }
.think-body img { width: 100%; height: auto; object-fit: initial; margin: 24px 0; }

/* Prev / Next navigation */
.think-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.think-nav-item { padding: 40px var(--px); display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: background .2s; }
.think-nav-item:first-child { border-right: 1px solid var(--rule); }
.think-nav-item:not(.think-nav-edge):hover { background: rgba(128,128,128,.04); cursor: pointer; }
.think-nav-right { text-align: right; }
.think-nav-edge  { opacity: .3; cursor: default; }
.think-nav-dir   { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.think-nav-cat   { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.think-nav-title { font-size: 16px; font-weight: 500; letter-spacing: -.012em; color: var(--black); line-height: 1.3; }


/* ══════════════════════════════════════════════════════════════════════════
   31. CONTACT PAGE  (templates/page-contact.php)
   ══════════════════════════════════════════════════════════════════════ */

/* Info grid */
.contact-main { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); }
.contact-main .contact-block { padding: 52px var(--px); border-right: 1px solid var(--rule); display: flex; flex-direction: column; }
.contact-main .contact-block:last-child { border-right: none; }

.contact-block-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 18px; }
.contact-email-primary { font-size: clamp(16px, 2vw, 22px); font-weight: 500; color: var(--black); letter-spacing: -.01em; display: block; transition: opacity .18s; margin-bottom: 10px; line-height: 1.3; }
.contact-email-primary:hover { opacity: .5; }
.contact-link { font-size: 15px; font-weight: 500; color: var(--black); display: block; transition: opacity .18s; letter-spacing: 0; line-height: 1.5; }
.contact-link:hover { opacity: .5; }
.contact-scope { font-size: 10px; font-weight: 500; color: var(--label); letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; }
.contact-address { font-size: 15px; font-weight: 500; color: var(--black); line-height: 1.5; letter-spacing: 0; margin-bottom: 10px; }
.contact-careers { margin-top: 6px; }

/* Form layout — label-column + form-column (matches .section-inner pattern) */
.contact-form-section { padding: 52px var(--px) 80px; display: grid; grid-template-columns: 240px 1fr; gap: 0; }
.contact-form-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); padding-top: 4px; }

/* Fields */
.cf-field { margin-bottom: 28px; }
.cf-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--light); margin-bottom: 10px; }
.cf-input { width: 100%; max-width: 560px; background: transparent; border: none; border-bottom: 1px solid var(--rule); outline: none; padding: 12px 0; font-size: 13px; font-weight: 500; font-family: var(--font-sans); color: var(--black); letter-spacing: .01em; transition: border-color .2s; -webkit-appearance: none; border-radius: 0; }
.cf-input:focus { border-color: var(--black); }
.cf-input::placeholder { color: var(--light); }
.cf-textarea { resize: vertical; min-height: 120px; padding: 12px 0; }

/* Subject radios — styled as text toggles */
.cf-subjects { display: flex; gap: 2px; flex-wrap: wrap; }
.subj-btn { cursor: pointer; }
.subj-btn input[type="radio"] { position: absolute; opacity: 0; width: 0; pointer-events: none; }
.subj-btn span { display: inline-block; padding: 5px 12px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); border: 1px solid var(--rule); transition: color .15s, border-color .15s; cursor: pointer; }
.subj-btn:hover span { color: var(--black); }
.subj-btn input[type="radio"]:checked + span { color: var(--black); border-color: var(--black); }

/* Honeypot */
.cf-hp { display: none; visibility: hidden; }

/* Submit */
.cf-submit-row { display: flex; align-items: center; gap: 24px; margin-top: 8px; }
.cf-submit { background: var(--black); color: var(--cream); border: none; padding: 13px 28px; font-size: 10px; font-weight: 500; font-family: var(--font-sans); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.cf-submit:hover    { background: #2a2824; }
.cf-submit:disabled { opacity: .5; cursor: default; }
.cf-feedback { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.cf-ok  { color: var(--mid); }
.cf-err { color: #a05040; }


/* ══════════════════════════════════════════════════════════════════════════
   32. NEWSLETTER POPUP
   Anchored bottom-right on desktop. Full-screen overlay on mobile.
   ══════════════════════════════════════════════════════════════════════ */

#nl-popup { position: fixed; inset: 0; z-index: 600; background: rgba(14,14,13,.48); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--px); }
.nl-popup-inner { background: var(--cream); border: 1px solid var(--rule); padding: 44px 44px 36px; max-width: 400px; width: 100%; position: relative; }
.nl-popup-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.nl-popup-close span { position: absolute; width: 16px; height: 1px; background: var(--black); transition: background .2s; }
.nl-popup-close span:first-child  { transform: rotate(45deg); }
.nl-popup-close span:last-child   { transform: rotate(-45deg); }
.nl-popup-close:hover span        { background: var(--mid); }
.nl-popup-heading { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--black); margin-bottom: 12px; }
.nl-popup-body    { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); margin-bottom: 20px; letter-spacing: 0; }
.nl-popup-msg     { margin-top: 10px; font-size: 11px; font-weight: 500; color: var(--mid); min-height: 16px; letter-spacing: .02em; }
#nl-msg           { margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--mid); letter-spacing: .02em; }
#nl-msg:empty     { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   33. WECHAT MODAL
   Centred overlay. Same visual language as the newsletter popup.
   ══════════════════════════════════════════════════════════════════════ */

/* Trigger button — inherits .fc a appearance exactly */
.wc-trigger {
  display: block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--black);
  letter-spacing: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: opacity .18s;
}
.wc-trigger:hover { opacity: .5; }
.fc-noscript { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--label); letter-spacing: 0; }

/* Overlay */
#wc-popup {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(14,14,13,.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--px);
}

/* Card */
.wc-popup-inner {
  background: var(--cream);
  border: 1px solid var(--rule);
  padding: 48px 44px 40px;
  max-width: 320px;
  width: 100%;
  position: relative;
  text-align: center;
}

/* Close button — identical to newsletter */
.wc-popup-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.wc-popup-close span { position: absolute; width: 16px; height: 1px; background: var(--black); transition: background .2s; }
.wc-popup-close span:first-child  { transform: rotate(45deg); }
.wc-popup-close span:last-child   { transform: rotate(-45deg); }
.wc-popup-close:hover span        { background: var(--mid); }

/* Content */
.wc-popup-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 24px; }
.wc-qr { display: block; width: 180px; height: 180px; object-fit: contain; margin: 0 auto; }
.wc-id { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--black); line-height: 1.5; margin-top: 20px; }
.wc-instruction { font-size: 14px; font-weight: 500; color: var(--label); letter-spacing: 0; line-height: 1.5; margin-top: 8px; max-width: 220px; margin-left: auto; margin-right: auto; }


/* ══════════════════════════════════════════════════════════════════════════
   34. RESPONSIVE — §28–33 additions
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Page header two-col */
  .page-header-two-col { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 36px; }

  /* Thinking index */
  .think-row { grid-template-columns: 100px 1fr 120px; }

  /* Thinking single */
  .think-nav { grid-template-columns: 1fr; }
  .think-nav-item:first-child { border-right: none; border-bottom: 1px solid var(--rule); }
  .think-nav-right { text-align: left; }

  /* Contact page */
  .contact-main { grid-template-columns: 1fr; }
  .contact-main .contact-block { border-right: none; border-bottom: 1px solid var(--rule); padding: 40px var(--px) 36px; }
  .contact-main .contact-block:last-child { border-bottom: none; }
  .contact-form-section { grid-template-columns: 1fr; gap: 32px; }

  /* Popups */
  .nl-popup-inner { max-width: 100%; padding: 40px 32px 32px; }
  .wc-popup-inner { padding: 48px 32px 40px; }
}

@media (max-width: 640px) {
  /* Thinking index */
  .think-filter { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; gap: 0; }
  .think-filter::-webkit-scrollbar { display: none; }
  .think-filter .filter-btn { flex-shrink: 0; padding: 13px 9px; border: none; border-bottom: 2px solid transparent; }
  .think-filter .filter-btn.active { border-bottom: 2px solid var(--black); }
  .think-row { grid-template-columns: 1fr; }
  .think-row-cat { display: none; }
  .think-row-date { display: none; }

  /* Thinking single */
  .think-entry-header { padding-top: 48px; padding-bottom: 40px; }
  .think-body { padding-bottom: 60px; }

  /* Contact page */
  .cf-input { max-width: 100%; }
  .cf-submit-row { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Newsletter popup — slides up from bottom */
  #nl-popup { padding: 0; align-items: flex-end; }
  .nl-popup-inner { border-left: none; border-right: none; border-bottom: none; padding: 36px var(--px) calc(var(--px) + env(safe-area-inset-bottom, 0px)); max-width: 100%; }
  /* WeChat popup — stays centred, full-width card */
  #wc-popup { padding: var(--px); }
  .wc-popup-inner { max-width: 100%; padding: 48px 28px 36px; }
  .wc-qr { width: 160px; height: 160px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   34. THINKING ENTRY — redesigned layout  (single-thinking.php)
   ══════════════════════════════════════════════════════════════════════ */

.page-wrap { padding-top: var(--nav-h); }

.entry-header { padding: 64px var(--px) 48px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.entry-back { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 40px; transition: color .2s; }
.entry-back::before { content: ""; display: block; width: 20px; height: 1px; background: currentColor; transition: width .3s; }
.entry-back:hover { color: var(--black); }
.entry-back:hover::before { width: 32px; }
.entry-category { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 20px; }
.entry-title { font-size: clamp(28px, 3.8vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -.03em; color: var(--black); max-width: 640px; }
.entry-meta-right { display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
.entry-byline { font-size: 11px; font-weight: 500; color: var(--label); letter-spacing: .06em; }
.entry-byline strong { color: var(--label); font-weight: 500; }
.entry-summary { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 480px; letter-spacing: 0; }

.entry-hero { width: 100%; aspect-ratio: 16/7; overflow: hidden; background: var(--warm); position: relative; }
.entry-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity 1.2s ease; }
.entry-hero img.loaded { opacity: 1; }

.entry-body { display: grid; grid-template-columns: 2fr 1fr; gap: 80px; padding: 72px var(--px); border-bottom: 1px solid var(--rule); }
.entry-text p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; margin-bottom: 1.5em; max-width: 640px; }
.entry-text p:last-child { margin-bottom: 0; }
.entry-text blockquote { border-left: 1px solid var(--rule); padding: 4px 0 4px 24px; margin: 2.5em 0 2.5em 16px; max-width: 560px; }
.entry-text blockquote p { font-size: 18px; font-weight: 500; line-height: 1.36; letter-spacing: -.015em; color: var(--black); margin-bottom: 0; }
.entry-text h2 { font-size: clamp(18px, 2vw, 24px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--black); margin-top: 3em; margin-bottom: 1em; max-width: 640px; }
.entry-text .entry-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; background: var(--warm); margin: 2.5em 0; }
.entry-text .entry-img img { width: 100%; height: 100%; object-fit: cover; }
.entry-text .entry-img figcaption { margin-top: 10px; font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--label); }

.sidebar-block { padding-top: 0; margin-bottom: 44px; }
.sidebar-block:not(:first-child) { padding-top: 32px; border-top: 1px solid var(--rule); }
.sidebar-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.sidebar-value { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }
.sidebar-value a { color: var(--black); transition: opacity .18s; }
.sidebar-value a:hover { opacity: .5; }

.entry-spread { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--warm); }
.entry-spread-item { aspect-ratio: 4/3; overflow: hidden; background: var(--warm); }
.entry-spread-item img { width: 100%; height: 100%; object-fit: cover; }

.entry-related { padding: 72px var(--px); border-top: 1px solid var(--rule); }
.related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.related-label { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); }
.related-more { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--label); display: inline-flex; align-items: center; gap: 10px; transition: color .2s; }
.related-more::after { content: ""; display: block; width: 20px; height: 1px; background: currentColor; transition: width .3s; }
.related-more:hover { color: var(--black); }
.related-more:hover::after { width: 36px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.rcard { display: block; padding: 40px var(--px); border-left: 1px solid var(--rule); cursor: pointer; transition: background .2s; text-decoration: none; color: inherit; }
.rcard:first-child { border-left: none; }
.rcard:hover { background: rgba(128,128,128,.03); }
.rcard-cat { font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.rcard-title { font-family: var(--font-sans); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--black); margin-bottom: 10px; }
.rcard-body { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1024px) {
  .entry-header { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  .entry-hero { aspect-ratio: 16/9; }
  .entry-body { grid-template-columns: 1fr; gap: 52px; }
  .entry-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .sidebar-block:nth-child(odd) { padding-right: 24px; border-right: 1px solid var(--rule); }
  .sidebar-block:nth-child(even) { padding-left: 24px; }
  .sidebar-block:not(:first-child) { border-top: none; padding-top: 0; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .rcard:nth-child(3) { grid-column: span 2; border-left: none; border-top: 1px solid var(--rule); padding: 40px var(--px) 0; }
}
@media (max-width: 640px) {
  .entry-header { padding-top: 48px; }
  .entry-body { padding: 48px var(--px); gap: 40px; }
  .entry-related { padding: 48px var(--px); }
  .entry-spread { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .rcard { border-left: none; border-top: 1px solid var(--rule); padding: 32px var(--px) 0; }
  .rcard:first-child { border-top: none; }
  .rcard:nth-child(3) { grid-column: span 1; }
}


/* ══════════════════════════════════════════════════════════════════════════
   35. CONTACT PAGE — redesigned layout  (templates/page-contact.php)
   ══════════════════════════════════════════════════════════════════════ */

.contact-page-header { padding: 72px var(--px) 52px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.page-eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--label); margin-bottom: 20px; }
.page-title { font-size: clamp(32px, 4vw, 56px); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: var(--black); }
.page-intro { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); max-width: 440px; letter-spacing: 0; align-self: end; }

/* ── Contact main — two columns, aligned tops ───────────────────────────
   align-items: start keeps each column only as tall as its content.
   Both columns open with 52 px of top padding so the first visible line
   lands on the same horizontal base. No min-height — content sets height.
   --cs-gap-section : vertical space between info groups ≈ height of a
                      short paragraph — keeps the sequence readable without
                      feeling like isolated blocks.
   --cs-gap-label   : label → first content line (tight — labels are secondary)
   ───────────────────────────────────────────────────────────────────── */
.contact-main-new {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  --cs-gap-section: 24px;
  --cs-gap-label: 10px;
}

.contact-left {
  padding: 52px var(--px) 60px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: var(--cs-gap-section);
}

.contact-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--label);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 4px;
  display: block;
}

.contact-big { font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.018em; color: var(--black); margin-bottom: 4px; }

.contact-section p,
.contact-section a { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; max-width: 360px; }
.contact-section a { transition: opacity .18s; }
.contact-section a:hover { opacity: .5; }
.contact-section-address { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; }
.contact-scope { font-size: 10px; font-weight: 500; color: var(--label); letter-spacing: .2em; display: block; }

/* Right column — map, stretches to match left column height */
.contact-right { display: flex; flex-direction: column; }
.contact-right .contact-map-block { min-height: 0; height: 100%; }
/* Careers — now lives inside .contact-left, no outer padding needed */
.contact-join-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  color: var(--label);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-bottom: 4px;
}
.contact-join p { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; max-width: 360px; margin-bottom: 0; }
.contact-join a { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--black); letter-spacing: 0; transition: opacity .18s; }
.contact-join a:hover { opacity: .5; }

/* ── Map + Newsletter — mirrored two-column grid ────────────────────────
   Left cell:  studio location — dark editorial block linking to Google Maps.
               If ACF contact_map_image is set, a static map image is shown;
               otherwise the warm-dark background with coordinates reads as
               an intentional architectural element, not a missing state.
   Right cell: newsletter form, aligned with the right column above.
   Same 1fr 1fr proportion as contact-main-new for visual continuity.
   ───────────────────────────────────────────────────────────────────── */
.contact-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
}

/* The map block is an <a> element — block display, no underline */
.contact-map-block {
  border-right: 1px solid var(--rule);
  overflow: hidden;
  min-height: 320px;
  position: relative;
  background: var(--warm);
  display: block;
  text-decoration: none;
  transition: background .4s;
}
.contact-map-block:hover { background: #1e1b18; }

/* Optional static map image — uploaded via ACF contact_map_image */
.contact-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  filter: grayscale(1) contrast(.88) brightness(.96);
  transition: opacity .5s;
  display: block;
}
.contact-map-block:hover .contact-map-img { opacity: .84; }

/* Location label — centred, very faint, readable only on hover or dark BG */
.contact-map-location {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(237, 235, 228, .22);
  white-space: nowrap;
  pointer-events: none;
}

/* Coordinates — bottom-left, very faint */
.contact-map-coords-label {
  position: absolute;
  bottom: 24px;
  left: var(--px);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(237, 235, 228, .3);
  pointer-events: none;
}


/* ── Image band — always rendered ───────────────────────────────────────
   3-column editorial strip. Empty .cib-item cells fall back to the warm
   dark background when no ACF images are uploaded — no blank placeholder
   tiles, just silent dark rectangles that frame the footer correctly.
   ───────────────────────────────────────────────────────────────────── */
.contact-image-band { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2px; height: 360px; background: var(--bg); }
.cib-item { overflow: hidden; background: var(--warm); }
.cib-item img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: opacity .6s, transform .8s; }
.cib-item:hover img { opacity: .92; transform: scale(1.03); }

@media (max-width: 1024px) {
  .contact-page-header { grid-template-columns: 1fr; gap: 24px; padding-bottom: 40px; }
  .contact-main-new { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--rule); gap: 28px; padding: 40px var(--px); }
  .contact-right .contact-map-block { min-height: 260px; height: auto; border-right: none; border-bottom: 1px solid var(--rule); }
  .contact-image-band { grid-template-columns: 1fr 1fr; height: 280px; }
  .cib-item:first-child { grid-column: span 2; }
}
@media (max-width: 640px) {
  .contact-page-header { padding-top: 48px; }
  .contact-left { padding: 36px var(--px); }
  .contact-right .contact-map-block { min-height: 200px; }
  .contact-image-band { grid-template-columns: 1fr; height: auto; }
  .cib-item { height: 240px; }
  .cib-item:first-child { grid-column: span 1; }
}