/*
Theme Name: quietlab
Theme URI: https://thequietlab.com
Author: thequietlab
Description: Cinematic monochrome theme for thequietlab — a visual effects studio in Singapore and Bangkok. Built to match the v3 design prototype exactly.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: quietlab
*/

:root{
  --bg:#0a0a0a;            /* near-black */
  --bg-2:#141414;          /* panel */
  --bg-3:#1c1c1c;          /* subtle card */
  --ink:#ffffff;           /* pure white */
  --ink-dim:#6a6a6a;       /* muted grey */
  --ink-mid:#a0a0a0;       /* body grey */
  --line:rgba(255,255,255,0.08);
  --line-strong:rgba(255,255,255,0.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Archivo', sans-serif;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:#fff;color:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;
  padding:20px 32px;
  display:flex;justify-content:space-between;align-items:center;
  z-index:50;
  mix-blend-mode:difference;color:#fff;
}
.nav-logo{
  display:flex;align-items:center;
}
.nav-logo-lockup{
  height:36px;
  width:auto;
  display:block;
}
.nav-menu{display:flex;align-items:center;gap:32px}
.nav-menu a{
  font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  transition:opacity .3s;
}
.nav-menu a:hover{opacity:0.55}
.nav-menu a.contact{color:#fff;border:1px solid rgba(255,255,255,0.3);padding:8px 14px;border-radius:100px}
.nav-menu a.contact:hover{background:#fff;color:#000;opacity:1}

/* ============ HERO ============ */
.hero{
  height:100vh;min-height:700px;
  width:100%;position:relative;overflow:hidden;
  background:var(--bg);
  display:flex;align-items:flex-end;
}
.hero-video{
  position:absolute;inset:0;z-index:0;
}
/* Placeholder: looping abstract motion using layered gradients + animation */
.hero-video::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(255,255,255,0.04), transparent 55%),
    linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  animation:drift 20s ease-in-out infinite;
}
.hero-video::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0.5;mix-blend-mode:overlay;pointer-events:none;
}
@keyframes drift{
  0%,100%{background-position:0% 0%, 100% 100%, 0 0}
  50%{background-position:10% 20%, 90% 80%, 0 0}
}
.hero-gradient{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,10,10,0.3) 0%, transparent 25%, transparent 60%, rgba(10,10,10,0.9) 100%);
}

.hero-content{
  position:relative;z-index:2;
  padding:0 32px 80px;
  width:100%;
}
.hero-eyebrow{
  font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-mid);margin-bottom:32px;
  display:flex;align-items:center;gap:14px;
}
.hero-eyebrow::before{
  content:'';width:40px;height:1px;background:#fff;
}
.hero h1{
  font-size:clamp(52px, 9vw, 160px);
  font-weight:600;
  line-height:0.92;
  letter-spacing:-0.04em;
  max-width:1400px;
  margin-bottom:60px;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{
  display:block;transform:translateY(100%);
  animation:riseUp 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1 .line:nth-child(1) span{animation-delay:.15s}
.hero h1 .line:nth-child(2) span{animation-delay:.3s}
.hero h1 .line:nth-child(3) span{animation-delay:.45s}
@keyframes riseUp{to{transform:translateY(0)}}

.hero-foot{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding-top:32px;border-top:1px solid var(--line);
  opacity:0;animation:fadeIn 1.2s 1s forwards;
}
.hero-foot-left{
  display:flex;gap:48px;
  font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mid);line-height:1.8;
}
.hero-foot-left strong{display:block;color:#fff;font-weight:600;margin-bottom:4px}
@keyframes fadeIn{to{opacity:1}}

/* ============ INTRO / COPY STRIP ============ */
.intro{
  padding:140px 32px;
  border-bottom:1px solid var(--line);
  max-width:1600px;margin:0 auto;
}
.intro-grid{
  display:grid;grid-template-columns:1fr 2fr;gap:80px;
  align-items:start;
}
.intro-label{
  font-size:11px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-dim);
  padding-top:16px;
}
.intro-label::before{
  content:'';display:inline-block;
  width:30px;height:1px;background:#fff;
  margin-right:16px;vertical-align:middle;
}
.intro p{
  font-size:clamp(24px, 2.8vw, 40px);
  line-height:1.3;
  letter-spacing:-0.015em;
  font-weight:300;
  color:var(--ink);
  max-width:1100px;
}
.intro p .dim{color:var(--ink-mid)}
.intro p em{font-style:normal;border-bottom:1px solid rgba(255,255,255,0.3);padding-bottom:2px}

/* ============ WORK HEADER ============ */
.work-header{
  padding:100px 32px 40px;
  max-width:1600px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:flex-end;
  border-bottom:1px solid var(--line);
}
.work-header-label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:24px;
}
.work-header-label::before{
  content:'';display:inline-block;width:30px;height:1px;
  background:#fff;margin-right:16px;vertical-align:middle;
}
.work-header h2{
  font-size:clamp(48px, 7vw, 96px);
  font-weight:600;letter-spacing:-0.035em;line-height:1;
}
.work-header-meta{
  font-size:10px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-dim);text-align:right;line-height:2;
}
.work-header-meta strong{color:#fff;font-weight:600}

/* ============ WORK GRID ============ */
.work-grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:2px;
  background:var(--line);border-bottom:1px solid var(--line);
}
.tile{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;background:var(--bg-2);
  cursor:pointer;grid-column:span 6;
  display:block;
}
.tile.wide{grid-column:span 8}
/* Narrow tiles use 8/9 aspect ratio so they match wide tile height when paired */
.tile.narrow{grid-column:span 4;aspect-ratio:8/9}
.tile.full{grid-column:span 12;aspect-ratio:21/9}
.tile-bg{
  position:absolute;inset:0;
  transition:transform 1s cubic-bezier(.2,.8,.2,1);
  filter:grayscale(100%) contrast(0.9);
}
.tile:hover .tile-bg{transform:scale(1.04);filter:grayscale(0%) contrast(1)}
.tile-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%);
}
.tile-overlay{
  position:absolute;bottom:24px;left:28px;right:28px;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;
  transform:translateY(8px);opacity:0.9;
  transition:all .5s cubic-bezier(.2,.8,.2,1);
}
.tile:hover .tile-overlay{transform:translateY(0);opacity:1}
.tile-client{
  font-size:10px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:rgba(255,255,255,0.6);margin-bottom:6px;
}
.tile-title{
  font-size:22px;font-weight:600;
  letter-spacing:-0.02em;color:#fff;line-height:1.15;
}
.tile-tag{
  font-size:10px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#fff;padding:6px 12px;
  border:1px solid rgba(255,255,255,0.3);border-radius:100px;white-space:nowrap;
}
.tile.full .tile-title{font-size:32px}
/* Placeholder tile backgrounds — monochrome gradients with different compositions */
.bg-1{background:radial-gradient(circle at 30% 40%, #4a4a4a, #1a1a1a 70%, #0a0a0a)}
.bg-2{background:linear-gradient(135deg, #2a2a2a, #1a1a1a 60%, #0a0a0a)}
.bg-3{background:radial-gradient(ellipse at 60% 50%, #3a3a3a, #1a1a1a 60%, #0a0a0a)}
.bg-4{background:linear-gradient(160deg, #2a2a2a, #3a3a3a 50%, #1a1a1a)}
.bg-5{background:radial-gradient(circle at 50% 60%, #3a3a3a, #1a1a1a 70%, #0a0a0a)}
.bg-6{background:linear-gradient(120deg, #1a1a1a, #2a2a2a 60%, #3a3a3a)}
.bg-7{background:radial-gradient(ellipse at 40% 40%, #4a4a4a, #1a1a1a 70%, #0a0a0a)}
.bg-8{background:linear-gradient(135deg, #1a1a1a, #2a2a2a 50%, #3a3a3a)}
.bg-9{background:radial-gradient(circle at 70% 30%, #3a3a3a, #1a1a1a 70%, #0a0a0a)}

/* ============ CLIENT LOGO WALL ============ */
.clients{
  padding:140px 32px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.clients-inner{max-width:1400px;margin:0 auto}
.clients-header{
  text-align:center;margin-bottom:80px;
}
.clients-header .label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:24px;
}
.clients-header .label::before,.clients-header .label::after{
  content:'';display:inline-block;width:40px;height:1px;
  background:var(--line-strong);margin:0 20px;vertical-align:middle;
}
.clients-header h2{
  font-size:clamp(36px, 5vw, 64px);
  font-weight:600;letter-spacing:-0.03em;line-height:1.1;
  max-width:900px;margin:0 auto;
}
.logo-wall{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.logo-cell{
  aspect-ratio:3/2;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  padding:32px;
  transition:background .4s;
  position:relative;
}
.logo-cell:hover{background:var(--bg-2)}
/* Logo text treatment (since we can't embed real logos in a single HTML) */
.logo-cell span{
  font-family:'Archivo', sans-serif;
  font-weight:700;
  font-size:clamp(14px, 1.6vw, 22px);
  letter-spacing:-0.02em;
  color:var(--ink-mid);
  text-transform:uppercase;
  transition:color .4s;
  text-align:center;
  line-height:1.1;
}
.logo-cell:hover span{color:#fff}
.logo-cell.wordmark span{text-transform:none;letter-spacing:-0.03em}

/* ============ JOURNAL ============ */
.journal{
  padding:140px 32px;
  border-bottom:1px solid var(--line);
}
.journal-inner{max-width:1600px;margin:0 auto}
.journal-header{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:60px;padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.journal-header h2{
  font-size:clamp(40px, 5vw, 72px);
  font-weight:600;letter-spacing:-0.03em;line-height:1;
}
.journal-header a{
  font-size:11px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mid);transition:color .3s;
}
.journal-header a:hover{color:#fff}
.journal-header a::after{content:' →'}
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.journal-card{
  cursor:pointer;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.journal-card:hover{transform:translateY(-4px)}
.journal-card:hover .journal-img{transform:scale(1.03);filter:grayscale(0%)}
.journal-card:hover h3{color:var(--ink-mid)}
.journal-img-wrap{
  aspect-ratio:16/10;overflow:hidden;
  margin-bottom:20px;background:var(--bg-2);
}
.journal-img{
  width:100%;height:100%;
  transition:all .8s cubic-bezier(.2,.8,.2,1);
  filter:grayscale(100%);
}
.journal-tag{
  font-size:10px;font-weight:500;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:12px;
}
.journal-card h3{
  font-size:22px;font-weight:600;
  letter-spacing:-0.02em;line-height:1.3;
  transition:color .3s;margin-bottom:10px;color:#fff;
}
.journal-card p{font-size:14px;line-height:1.6;color:var(--ink-mid)}
.journal-date{
  font-size:11px;font-weight:500;
  letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:12px;
}

/* ============ CTA ============ */
.cta{
  padding:180px 32px;text-align:center;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.04), transparent 60%);
}
.cta-inner{position:relative;max-width:1200px;margin:0 auto}
.cta-label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:32px;
}
.cta-label::before{
  content:'';display:inline-block;width:40px;height:1px;
  background:#fff;margin-right:16px;vertical-align:middle;
}
.cta h2{
  font-size:clamp(44px, 7vw, 100px);
  font-weight:600;letter-spacing:-0.035em;
  line-height:1.05;margin-bottom:56px;
}
.cta-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:22px 44px;
  font-size:12px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#000;background:#fff;border-radius:100px;
  transition:all .4s;
}
.cta-btn:hover{background:#ccc;transform:translateY(-2px)}
.cta-btn svg{transition:transform .3s}
.cta-btn:hover svg{transform:translateX(4px)}

/* ============ AWARDS FOOTER STRIP ============ */
.awards-strip{
  padding:48px 32px;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.awards-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:60px;flex-wrap:wrap;
}
.awards-label{
  font-size:10px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);
}
.awards-list{
  display:flex;align-items:center;gap:48px;flex-wrap:wrap;
  justify-content:center;
}
.award-item{
  font-family:'Archivo',sans-serif;
  font-weight:600;font-size:13px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-mid);
  opacity:0.7;transition:opacity .3s;
}
.award-item:hover{opacity:1;color:#fff}
.award-sep{color:var(--ink-dim);font-size:8px}

/* ============ FOOTER ============ */
.site-footer{padding:80px 32px 32px}
.footer-grid{
  max-width:1600px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px;padding-bottom:60px;border-bottom:1px solid var(--line);
}
.footer-brand{display:flex;align-items:center;margin-bottom:24px}
.footer-brand-lockup{
  height:60px;
  width:auto;
  display:block;
}
.footer-col h4{
  font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:20px;
}
.footer-col ul{list-style:none}
.footer-col li{font-size:14px;line-height:2;color:var(--ink-mid)}
.footer-col a{color:inherit;transition:color .3s}
.footer-col a:hover{color:#fff}
.footer-col .city{color:#fff;font-weight:500}
.footer-bottom{
  max-width:1600px;margin:0 auto;padding-top:24px;
  display:flex;justify-content:space-between;
  font-size:10px;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-dim);
}

/* ============ PAGE HERO & CONTENT ============
   Used by The Lab page, Journal listing page, and individual Journal posts.
   Mirrors the rhythm of .work-header and .intro on the homepage so static
   pages feel like part of the same site, not orphan templates. */
.page-hero{
  padding:180px 32px 80px;
  max-width:1600px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.page-hero-inner{max-width:1200px}
.page-hero .label,
.page-hero-label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:28px;
  display:inline-block;
}
.page-hero h1{
  font-size:clamp(56px,9vw,140px);
  font-weight:600;letter-spacing:-0.04em;
  line-height:0.95;
  color:#fff;
}
.page-hero h1 em{
  font-style:italic;font-weight:500;
  color:var(--ink-mid);
}

/* Page hero with background image (single journal post) */
.page-hero.has-bg{
  min-height:70vh;
  background-size:cover;background-position:center;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:80px;
}
.page-hero-meta{
  margin-top:28px;
  font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-mid);
}

/* Generic page content (The Lab body, About page, etc.) */
.page-content{
  padding:100px 32px 160px;
  max-width:1600px;margin:0 auto;
}
.page-content-inner{
  max-width:880px;
}
.page-content h2{
  font-size:clamp(32px,4vw,52px);
  font-weight:500;letter-spacing:-0.02em;
  line-height:1.2;
  color:#fff;
  margin-bottom:32px;
}
.page-content h2 em{font-style:italic;font-weight:400;color:var(--ink-mid)}
.page-content h3{
  font-size:clamp(22px,2.5vw,28px);
  font-weight:600;letter-spacing:-0.01em;
  color:#fff;margin:64px 0 20px;
}
.page-content p{
  font-size:18px;line-height:1.7;
  color:var(--ink-mid);
  margin-bottom:24px;
  max-width:720px;
}
.page-content p:first-child{
  font-size:clamp(20px,2vw,24px);
  color:#fff;
}
.page-content a{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.3);
  transition:border-color .3s;
}
.page-content a:hover{border-bottom-color:#fff}
.page-content ul, .page-content ol{
  margin:0 0 24px 24px;
  color:var(--ink-mid);
}
.page-content li{font-size:18px;line-height:1.7;margin-bottom:8px}
.page-content blockquote{
  border-left:2px solid #fff;
  padding:8px 0 8px 32px;
  margin:48px 0;
  font-size:clamp(22px,2.2vw,28px);
  font-weight:500;
  color:#fff;
  font-style:italic;
}
.page-content img{max-width:100%;height:auto;margin:48px 0;display:block}

/* The .dim modifier should work anywhere, not just inside .intro p */
.dim{color:var(--ink-mid)}

/* Archive pagination — used by both work archive and journal archive */
.archive-pagination{
  padding:60px 0 0;
  display:flex;justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:60px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-mid);
}
.archive-pagination a{
  color:var(--ink-mid);
  transition:color .3s;
}
.archive-pagination a:hover{color:#fff}

/* Next/Previous post nav under single journal posts */
.post-nav{
  padding:60px 32px;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  max-width:1200px;margin:0 auto;
  border-top:1px solid var(--line);
}
.post-nav a{
  text-decoration:none;color:inherit;
  transition:color .3s;
}
.post-nav .post-nav-label{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:8px;
}
.post-nav .post-nav-title{
  font-size:20px;font-weight:500;color:#fff;
  transition:color .3s;
}
.post-nav a:hover .post-nav-title{color:var(--ink-mid)}
.post-nav .post-nav-next{text-align:right}

/* ============ SINGLE PROJECT PAGE ============
   Hero with optional video/image background, title block,
   metadata strip, content body, gallery grid, credits, next link. */

.project-hero{
  position:relative;
  height:80vh;min-height:600px;
  overflow:hidden;
  display:flex;align-items:flex-end;
}
.project-hero iframe,
.project-hero video,
.project-hero-fallback{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
  background-size:cover;background-position:center;
  border:none;
}
.project-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0.2) 0%,transparent 40%,rgba(10,10,10,0.85) 100%);
  z-index:2;pointer-events:none;
}
.project-title-block{
  position:relative;z-index:3;
  padding:0 32px 80px;max-width:1600px;margin:0 auto;width:100%;
}
.project-title-block .client{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-mid);margin-bottom:20px;
}
.project-title-block h1{
  font-size:clamp(48px,7vw,108px);
  font-weight:600;letter-spacing:-0.035em;
  line-height:1;
  color:#fff;
  max-width:1200px;
}

/* Project metadata strip — below the hero */
.project-meta{
  padding:80px 32px;
  max-width:1600px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:48px;
  border-bottom:1px solid var(--line);
}
.project-meta-block h5{
  font-size:11px;font-weight:500;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:10px;
}
.project-meta-block p{
  font-size:18px;font-weight:500;
  color:#fff;line-height:1.4;
}

/* Project content body */
.project-content{
  padding:100px 32px;
  max-width:880px;margin:0 auto;
}
.project-content p{
  font-size:18px;line-height:1.7;
  color:var(--ink-mid);
  margin-bottom:24px;
}
.project-content p:first-child{
  font-size:clamp(20px,2vw,24px);
  color:#fff;
}
.project-content h2{
  font-size:clamp(32px,4vw,48px);
  font-weight:500;letter-spacing:-0.02em;
  color:#fff;margin:64px 0 24px;
}
.project-content h3{
  font-size:clamp(22px,2.5vw,28px);
  font-weight:600;letter-spacing:-0.01em;
  color:#fff;margin:48px 0 16px;
}
.project-content blockquote{
  border-left:2px solid #fff;
  padding:8px 0 8px 32px;
  margin:48px 0;
  font-size:clamp(24px,2.4vw,32px);
  font-weight:500;
  color:#fff;
  font-style:italic;
  line-height:1.4;
}

/* Gallery grid */
.project-gallery{
  padding:60px 32px;
  max-width:1600px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--line);
}
.project-gallery-item{background:var(--bg-2);aspect-ratio:16/9;overflow:hidden}
.project-gallery-item img{width:100%;height:100%;object-fit:cover;display:block}

/* Credits */
.project-credits{
  padding:100px 32px;
  max-width:880px;margin:0 auto;
  border-top:1px solid var(--line);
}
.project-credits h3{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:32px;
}
.project-credits-grid{display:flex;flex-direction:column;gap:14px}
.credit-row{
  display:grid;grid-template-columns:200px 1fr;gap:32px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.credit-row:last-child{border-bottom:none}
.credit-role{
  font-size:13px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-mid);
}
.credit-name{
  font-size:17px;font-weight:500;
  color:#fff;
}

/* Next project link */
.project-next{
  padding:100px 32px;
  max-width:1600px;margin:0 auto;
  border-top:1px solid var(--line);
  text-align:center;
}
.project-next .label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:24px;
}
.project-next a{
  font-size:clamp(36px,5vw,72px);
  font-weight:500;letter-spacing:-0.025em;
  color:#fff;
  display:inline-block;
  transition:color .3s;
}
.project-next a em{font-style:italic;font-weight:500;color:#fff}
.project-next a:hover{color:var(--ink-mid)}

/* ============ THE LAB PAGE ============
   Built to brief: COMO Hotels and Resorts voice — restrained, elevated.
   Section labels as small typographic markers. Generous whitespace.
   Text-led, no images. Typography does the visual work. */

/* Hero — H1 alone */
.lab-hero{
  padding:220px 32px 0;
  max-width:1600px;margin:0 auto;
}
.lab-hero-inner{max-width:1200px}
.lab-hero h1{
  font-size:clamp(72px,11vw,180px);
  font-weight:500;letter-spacing:-0.04em;
  line-height:0.95;
  color:#fff;
}

/* Body — two short paragraphs, continuous prose */
.lab-body{
  padding:120px 32px 160px;
  max-width:1600px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.lab-body-inner{max-width:760px}
.lab-body p{
  font-size:clamp(20px,1.8vw,26px);
  line-height:1.55;
  color:var(--ink-mid);
  margin-bottom:24px;
}
.lab-body p:last-child{margin-bottom:0}
.lab-body p:first-child{color:#fff}

/* Generic section wrapper (Services, Studios) */
.lab-section{
  padding:120px 32px;
  max-width:1600px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.lab-section-inner{
  display:grid;grid-template-columns:200px 1fr;gap:80px;
  align-items:start;
  max-width:1200px;
}
.lab-section-label{
  font-size:11px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-dim);
  padding-top:12px;
}

/* Services — typographic stack, names alone are the content */
.lab-services{
  list-style:none;padding:0;margin:0;
}
.lab-services li{
  font-size:clamp(28px,3.5vw,44px);
  font-weight:500;letter-spacing:-0.015em;
  line-height:1.3;
  color:#fff;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.lab-services li:last-child{border-bottom:none}

/* Studios — two addresses, equal weight */
.lab-studios{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  max-width:720px;
}
.lab-studio h3{
  font-size:clamp(20px,1.6vw,22px);
  font-weight:600;letter-spacing:-0.01em;
  color:#fff;
  margin-bottom:14px;
}
.lab-studio address{
  font-style:normal;
  font-size:16px;line-height:1.7;
  color:var(--ink-mid);
}

/* Contact line styling — applies to The Lab page's contact section */
.lab-contact-line{
  font-size:clamp(20px,2vw,28px);
  font-weight:500;letter-spacing:-0.01em;
  color:#fff;
  margin-top:16px;
}
.lab-contact-line a{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.3);
  transition:border-color .3s;
}
.lab-contact-line a:hover{border-bottom-color:#fff}

/* Contact section on The Lab page — its own block, NOT a .cta override */
.lab-contact{
  padding:120px 32px;
  max-width:1600px;margin:0 auto;
  border-bottom:1px solid var(--line);
}
.lab-contact-inner{
  display:grid;grid-template-columns:200px 1fr;gap:80px;
  align-items:start;
  max-width:1200px;
}

/* ============ RESPONSIVE ============
   Breakpoints:
   - >1200px: Full desktop layout (broken-grid work, 6-col logo wall, 3-col journal)
   - 901-1200px: Smaller desktop / large tablet (slightly tighter)
   - 601-900px: Tablet (2-col work grid, 4-col logo wall, single-col journal)
   - 481-600px: Large phone (single-col most things, 3-col logo wall)
   - <=480px: Phone (everything single-column, simplified)
*/

/* Smaller desktops / large tablets */
@media (max-width:1200px){
  .hero-content{padding:0 28px 60px}
  .work-grid{gap:2px}
  .clients-inner, .journal-inner{padding:0 16px}
}

/* Tablet */
@media (max-width:900px){
  .nav{padding:18px 24px}
  .hero-content{padding:0 24px 50px}
  .hero h1{font-size:clamp(44px,8vw,80px)}
  .hero-foot-left{gap:32px}
  .intro{padding:100px 24px}
  .intro-grid{grid-template-columns:1fr;gap:32px}
  .work-header{padding:80px 24px 32px}
  .work-header h2{font-size:clamp(40px,8vw,72px)}

  /* Work grid: 2 columns on tablet, both same height */
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .tile{grid-column:span 1;aspect-ratio:16/10}
  .tile.wide{grid-column:span 1;aspect-ratio:16/10}
  .tile.narrow{grid-column:span 1;aspect-ratio:16/10}
  .tile.full{grid-column:span 2;aspect-ratio:21/9}

  .clients{padding:100px 24px}
  .clients-header h2{font-size:clamp(28px,5vw,48px)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}

  .journal{padding:100px 24px}
  .journal-grid{grid-template-columns:1fr;gap:32px}
  .journal-header h2{font-size:clamp(36px,6vw,56px)}

  .cta{padding:120px 24px}
  .cta h2{font-size:clamp(36px,7vw,72px)}

  .awards-strip{padding:36px 24px}
  .awards-inner{flex-direction:column;gap:24px}
  .awards-list{gap:20px 32px}

  .site-footer{padding:60px 24px 24px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-bottom{font-size:9px}

  /* Page hero / content tablet adjustments */
  .page-hero{padding:140px 24px 60px}
  .page-content{padding:80px 24px 120px}
  .post-nav{padding:48px 24px}

  /* The Lab tablet */
  .lab-hero{padding:160px 24px 0}
  .lab-body{padding:80px 24px 100px}
  .lab-section{padding:80px 24px}
  .lab-section-inner{grid-template-columns:1fr;gap:32px}
  .lab-section-label{padding-top:0}
  .lab-studios{grid-template-columns:1fr 1fr;gap:48px}
  .lab-contact{padding:80px 24px}
  .lab-contact-inner{grid-template-columns:1fr;gap:32px}

  /* Single project tablet */
  .project-title-block{padding:0 24px 60px}
  .project-meta{padding:60px 24px;grid-template-columns:repeat(2,1fr);gap:32px}
  .project-content{padding:80px 24px}
  .project-credits{padding:80px 24px}
  .project-credits-grid .credit-row{grid-template-columns:160px 1fr;gap:24px}
  .project-next{padding:80px 24px}
}

/* Large phone / small tablet */
@media (max-width:600px){
  .nav{padding:14px 20px}
  .nav-menu{gap:12px}
  .nav-menu a:not(.contact){display:none}
  .nav-logo-lockup{height:28px}

  .hero{min-height:600px}
  .hero-content{padding:0 20px 40px;padding-top:120px}
  .hero-eyebrow{font-size:10px;margin-bottom:24px}
  .hero h1{font-size:clamp(38px,9vw,56px);margin-bottom:40px}
  .hero-foot{flex-direction:column;gap:24px;align-items:flex-start;padding-top:24px}
  .hero-foot-left{flex-direction:column;gap:18px;align-items:flex-start}

  .intro{padding:80px 20px}
  .intro p{font-size:clamp(20px,5vw,28px)}

  .work-header{padding:60px 20px 24px;flex-direction:column;align-items:flex-start;gap:18px}
  .work-header h2{font-size:clamp(36px,9vw,52px)}
  .work-header-meta{text-align:left}

  /* Work grid: single column on phones */
  .work-grid{grid-template-columns:1fr}
  .tile, .tile.wide, .tile.narrow{grid-column:span 1;aspect-ratio:16/10}
  .tile.full{grid-column:span 1;aspect-ratio:16/10}
  .tile-overlay{bottom:16px;left:18px;right:18px}
  .tile-title{font-size:18px}
  .tile.full .tile-title{font-size:22px}

  .clients{padding:80px 20px}
  .clients-header{margin-bottom:48px}
  .clients-header h2{font-size:clamp(24px,6vw,36px)}
  .logo-wall{grid-template-columns:repeat(3,1fr)}
  .logo-cell{padding:20px;aspect-ratio:1/1}
  .logo-cell span{font-size:clamp(11px,3vw,14px)}

  .journal{padding:80px 20px}
  .journal-header{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:40px}
  .journal-header h2{font-size:clamp(32px,8vw,48px)}

  .cta{padding:80px 20px}
  .cta h2{font-size:clamp(32px,8vw,52px);margin-bottom:36px}
  .cta-btn{padding:18px 32px;font-size:11px}

  .awards-strip{padding:28px 20px}
  .awards-list{gap:14px 24px;justify-content:flex-start}
  .award-item{font-size:10px}
  .award-sep{font-size:7px}

  .site-footer{padding:48px 20px 24px}
  .footer-brand-lockup{height:42px}
  .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:36px}
  .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start;padding-top:20px}

  /* Page hero / content phone */
  .page-hero{padding:100px 20px 48px}
  .page-hero h1{font-size:clamp(40px,10vw,72px)}
  .page-content{padding:60px 20px 80px}
  .page-content h2{font-size:clamp(26px,6vw,40px);margin-bottom:24px}
  .page-content p, .page-content li{font-size:16px}
  .page-content p:first-child{font-size:18px}
  .post-nav{padding:36px 20px;grid-template-columns:1fr;gap:32px}
  .post-nav .post-nav-next{text-align:left}

  /* The Lab phone */
  .lab-hero{padding:120px 20px 0}
  .lab-hero h1{font-size:clamp(56px,14vw,96px)}
  .lab-body{padding:48px 20px 64px}
  .lab-body p{font-size:18px}
  .lab-section{padding:64px 20px}
  .lab-services li{font-size:clamp(22px,6vw,32px);padding:12px 0}
  .lab-studios{grid-template-columns:1fr;gap:32px}
  .lab-contact{padding:64px 20px}
  .lab-contact-inner{grid-template-columns:1fr;gap:24px}
  .lab-contact-line{font-size:18px}

  /* Single project phone */
  .project-hero{height:70vh;min-height:480px}
  .project-title-block{padding:0 20px 48px}
  .project-title-block h1{font-size:clamp(40px,10vw,64px)}
  .project-meta{padding:48px 20px;grid-template-columns:1fr 1fr;gap:24px}
  .project-content{padding:60px 20px}
  .project-content p, .project-content li{font-size:16px}
  .project-content blockquote{font-size:20px;padding-left:24px;margin:32px 0}
  .project-gallery{padding:32px 20px;grid-template-columns:1fr}
  .project-credits{padding:60px 20px}
  .project-credits-grid .credit-row{grid-template-columns:1fr;gap:6px}
  .credit-name{font-size:15px}
  .project-next{padding:60px 20px}
}

/* Small phone */
@media (max-width:380px){
  .nav{padding:12px 16px}
  .nav-logo-lockup{height:24px}
  .hero-content{padding:0 16px 32px;padding-top:100px}
  .intro, .clients, .journal, .cta, .work-header, .awards-strip, .site-footer{padding-left:16px;padding-right:16px}
  .logo-wall{grid-template-columns:repeat(2,1fr)}
}