@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Reset & Base ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{background:none;border:none;cursor:pointer;font:inherit}
ul,ol{list-style:none}

:root{
  --bg: #ece7df;
  --fg: #1c1b18;
  --secondary: #dfd8cd;
  --muted: #7a756c;
  --border: #d5cec3;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  overflow-x:hidden;
}

/* ── Typography helpers ────────────────────────── */
.font-serif{font-family:var(--font-serif)}
.font-sans{font-family:var(--font-sans)}
.italic{font-style:italic}
.tracking-tight{letter-spacing:-.04em}
.tracking-wide{letter-spacing:.12em}
.uppercase{text-transform:uppercase}
.text-muted{color:var(--muted)}
.text-center{text-align:center}

/* ── Layout ────────────────────────────────────── */
.container{width:100%;padding-left:1rem;padding-right:1rem}
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}
.min-h-screen{min-height:100vh}
.relative{position:relative}
.overflow-hidden{overflow:hidden}
.block{display:block}.inline-block{display:inline-block}
.w-full{width:100%}

/* 12-col grid */
.grid{display:grid}
.grid-12{grid-template-columns:repeat(12,1fr);gap:1.5rem}

/* ── Navigation ────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 1rem;
  mix-blend-mode:difference;
}
.nav-logo img{height:3.5rem;filter:invert(1)}
.nav-links{display:none;gap:2.5rem}
.nav-links a{
  font-family:var(--font-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);transition:opacity .3s;
}
.nav-links a:hover,.nav-links a.active{opacity:.6}

/* Hamburger */
.nav-hamburger{
  display:flex;flex-direction:column;gap:5px;
  width:24px;cursor:pointer;z-index:60;
  mix-blend-mode:difference;
}
.nav-hamburger span{
  display:block;height:1.5px;width:100%;background:var(--bg);
  transition:transform .3s,opacity .3s;
}

/* Mobile overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--fg);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.mobile-menu.open{display:flex}
.mobile-menu .close-btn{
  position:absolute;top:1.5rem;right:1rem;
  font-size:1.5rem;color:var(--bg);cursor:pointer;
}
.mobile-menu .menu-logo img{height:4rem;filter:invert(1);margin-bottom:2rem}
.mobile-menu a{
  font-family:var(--font-sans);font-size:.85rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);transition:opacity .3s;
}
.mobile-menu a:hover{opacity:.6}

/* ── Hero (Index) ──────────────────────────────── */
.hero{padding:7rem 1rem 3rem}
.hero h1{
  font-family:var(--font-serif);font-size:2.25rem;
  line-height:.85;letter-spacing:-.04em;
}
.hero h1 .indent{padding-left:1rem}
.hero-desc{
  font-size:.875rem;color:var(--muted);
  max-width:35ch;line-height:1.7;margin-top:1.5rem;
}

/* Featured image band */
.featured-image{padding:0 1rem 4rem}
.featured-image a{
  display:block;position:relative;width:100%;
  aspect-ratio:16/9;overflow:hidden;background:var(--secondary);
}
.featured-image img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.95);transform:scale(1.05);
  transition:transform 1s;
}
.featured-image a:hover img{transform:scale(1)}
.featured-image .label{
  position:absolute;bottom:1rem;right:1rem;
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--bg);
}

/* Dark section */
.dark-section{
  background:var(--fg);color:var(--bg);
  padding:4rem 1rem;
}
.dark-section .label{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;opacity:.5;
  margin-bottom:1rem;display:block;
}
.dark-section h2{
  font-family:var(--font-serif);font-size:1.5rem;
  line-height:1.2;margin-bottom:2rem;
}
.dark-section .pillar{margin-bottom:2rem}
.dark-section .pillar-title{
  font-family:var(--font-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem;
}
.dark-section .pillar-text{
  font-family:var(--font-serif);font-size:1rem;
  font-style:italic;opacity:.7;line-height:1.7;
}

/* Work preview cards */
.work-preview{padding:4rem 1rem}
.work-card{margin-bottom:3rem}
.work-card .thumb{
  display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--secondary);margin-bottom:1rem;
}
.work-card .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s;
}
.work-card .thumb:hover img{transform:scale(1.05)}
.work-card .meta{display:flex;justify-content:space-between;align-items:flex-start}
.work-card h4{font-family:var(--font-serif);font-size:1.25rem}
.work-card .location{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.25rem;
}
.tag{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:-.02em;text-transform:uppercase;
  border:1px solid rgba(28,27,24,.2);padding:.375rem .5rem;
  white-space:nowrap;
}

/* CTA section */
.cta-section{
  background:var(--secondary);text-align:center;
  padding:4rem 1rem;
}
.cta-section .label{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;display:block;
}
.cta-section h2{
  font-family:var(--font-serif);font-size:1.5rem;
  letter-spacing:-.04em;line-height:1.2;
  max-width:40ch;margin:0 auto 1.5rem;
}
.cta-link{
  font-family:var(--font-sans);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--fg);padding-bottom:.5rem;
  transition:padding-bottom .3s;display:inline-block;
}
.cta-link:hover{padding-bottom:.75rem}

/* ── Footer ────────────────────────────────────── */
.footer{
  margin-top:auto;padding:4rem 1rem 2rem;
  border-top:1px solid var(--border);
}
.footer h2{font-family:var(--font-serif);font-size:1.75rem;letter-spacing:-.04em;margin-bottom:2rem}
.footer .ft-inquiries,.footer .ft-studio{margin-bottom:2rem}
.footer .col-label{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.5rem;display:block;
}
.footer .col-text{font-family:var(--font-serif);font-size:1.1rem;color:var(--muted)}
.footer .col-text a{transition:color .3s}
.footer .col-text a:hover{color:var(--fg)}
.footer-bottom{
  display:flex;flex-direction:column;gap:1rem;
  border-top:1px solid var(--border);padding-top:1.5rem;margin-top:2rem;
}
.footer-bottom .copy{
  display:flex;align-items:center;gap:.75rem;
}
.footer-bottom .copy img{height:1.25rem}
.footer-bottom .copy span{
  font-family:var(--font-sans);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.footer-links{display:flex;gap:2rem}
.footer-links a{
  font-family:var(--font-sans);font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .3s;
}
.footer-links a:hover{color:var(--fg)}

/* ── Page Headers (inner pages) ────────────────── */
.page-header{padding:8rem 1rem 3rem}
.page-header .label{
  font-family:var(--font-sans);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.5rem;display:block;
}
.page-header h1{
  font-family:var(--font-serif);font-size:2.25rem;
  letter-spacing:-.04em;line-height:.9;
}
.page-header .intro{
  font-size:.875rem;color:var(--muted);
  line-height:1.7;margin-top:1.5rem;max-width:45ch;
}

/* Wide image band */
.wide-image{padding:0 1rem 3rem}
.wide-image .frame{
  width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--secondary);
}
.wide-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.95)}

/* Two-col content */
.two-col{padding:4rem 1rem}
.two-col .col{margin-bottom:3rem}
.two-col .col-label{
  font-family:var(--font-sans);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2rem;display:block;
}
.two-col .item{margin-bottom:2rem}
.two-col .item-title{
  font-family:var(--font-sans);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.5rem;
}
.two-col .item-text{
  font-family:var(--font-serif);font-size:1rem;
  font-style:italic;color:var(--muted);line-height:1.7;
}

/* Studio page */
.studio-grid{padding:7rem 1rem 3rem}
.studio-photo{aspect-ratio:3/4;overflow:hidden;background:var(--secondary);margin-top:2rem}
.studio-photo img{width:100%;height:100%;object-fit:cover;object-position:top;filter:saturate(.85) contrast(1.05) brightness(1.02)}
.director-block{margin-top:2rem}
.director-block .dir-label{
  font-family:var(--font-sans);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.75rem;display:block;
}
.director-block h3{font-family:var(--font-serif);font-size:1.75rem;letter-spacing:-.04em;margin-bottom:.75rem}

/* Process diagram (Approach) */
.process{padding:4rem 1rem;text-align:center}
.process .label{
  font-family:var(--font-sans);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:3rem;display:block;
}
.process-steps{display:flex;flex-direction:column;gap:3rem;max-width:55rem;margin:0 auto}
.process-step .circle{
  width:5rem;height:5rem;border-radius:50%;
  border:1px solid var(--border);display:flex;
  align-items:center;justify-content:center;margin:0 auto 1.5rem;
  transition:border-color .3s;
}
.process-step:hover .circle{border-color:var(--fg)}
.process-step .circle span{font-family:var(--font-serif);font-size:1.5rem;color:var(--muted)}
.process-step:hover .circle span{color:var(--fg)}
.process-step h3{
  font-family:var(--font-sans);font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.25rem;
}
.process-step .subtitle{
  font-family:var(--font-sans);font-size:.65rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.75rem;
}
.process-step p{
  font-family:var(--font-serif);font-size:.95rem;
  font-style:italic;color:var(--muted);line-height:1.6;
  max-width:25ch;margin:0 auto;
}

/* Works page */
.works-list{padding:0 1rem 5rem}
.project-article{margin-bottom:4rem}
.project-article .carousel{
  aspect-ratio:4/5;overflow:hidden;background:var(--secondary);
  position:relative;
}
.project-article .carousel img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s;
}
.project-article .carousel:hover img{transform:scale(1.05)}
.carousel-controls{display:flex;gap:.5rem;margin-top:1rem}
.carousel-btn{
  width:2rem;height:2rem;border:1px solid rgba(28,27,24,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;cursor:pointer;transition:border-color .3s;
}
.carousel-btn:hover{border-color:var(--fg)}
.project-info{margin-top:1.5rem}
.project-info h2{font-family:var(--font-serif);font-size:1.25rem;margin-bottom:.25rem}
.project-info .location{
  font-family:var(--font-sans);font-size:.625rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.project-info .desc{
  font-family:var(--font-serif);font-size:1rem;
  font-style:italic;color:var(--muted);line-height:1.7;margin-top:1rem;
}
.project-info .view-link{
  display:inline-block;margin-top:1rem;
  font-family:var(--font-sans);font-size:.7rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border-bottom:1px solid var(--fg);padding-bottom:.25rem;
  transition:padding-bottom .3s;
}
.project-info .view-link:hover{padding-bottom:.5rem}

/* Project detail page */
.detail-header{padding:7rem 1rem 3rem}
.detail-header .back{
  font-family:var(--font-sans);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:2rem;display:inline-block;
  transition:color .3s;
}
.detail-header .back:hover{color:var(--fg)}
.detail-header h1{font-family:var(--font-serif);font-size:2.25rem;letter-spacing:-.04em;line-height:.9}
.detail-gallery{padding:0 1rem 3rem}
.detail-gallery .scroll-track{
  display:flex;gap:1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.detail-gallery .scroll-track::-webkit-scrollbar{display:none}
.detail-gallery .slide{
  flex:0 0 90%;scroll-snap-align:start;
  aspect-ratio:16/10;overflow:hidden;background:var(--secondary);
}
.detail-gallery .slide img{width:100%;height:100%;object-fit:cover}
.detail-specs{padding:0 1rem 4rem}
.detail-specs .specs-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;
  border-top:1px solid var(--border);padding-top:1.5rem;
}
.detail-specs .spec-label{
  font-family:var(--font-sans);font-size:.65rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.35rem;display:block;
}
.detail-specs .spec-value{font-family:var(--font-serif);font-size:1.05rem}

/* ═══════════════════════════════════════════════════
   TABLET — 768px+ (matches Tailwind md: breakpoint)
   ═══════════════════════════════════════════════════ */
@media(min-width:768px){
  .container{padding-left:2rem;padding-right:2rem}

  /* Nav: show desktop links, hide hamburger */
  .nav{padding:2.5rem 2rem}
  .nav-logo img{height:5rem}
  .nav-links{display:flex}
  .nav-hamburger{display:none}
  .mobile-menu .menu-logo img{height:5rem}

  /* Hero */
  .hero{padding:12rem 2rem 6rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .hero-text{grid-column:1/8}
  .hero h1{font-size:3.2rem}
  .hero h1 .indent{padding-left:3rem}
  .hero-aside{grid-column:8/13;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:1rem}
  .hero-desc{margin-top:0;font-size:1.1rem}

  /* Featured image */
  .featured-image{padding:0 2rem 8rem}
  .featured-image a{aspect-ratio:21/9}
  .featured-image .label{bottom:2rem;right:2rem;font-size:.7rem}

  /* Dark section */
  .dark-section{padding:10rem 2rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .dark-section .ds-left{grid-column:2/7}
  .dark-section h2{font-size:2.5rem;margin-bottom:2rem}
  .dark-section .label{margin-bottom:2rem}
  .dark-section .ds-right{grid-column:8/12;display:flex;flex-direction:column;justify-content:center;gap:3rem}
  .dark-section .pillar-text{font-size:1.25rem}

  /* Work preview */
  .work-preview{padding:8rem 2rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;row-gap:6rem}
  .work-card{margin-bottom:0}
  .work-card:nth-child(1){grid-column:1/7}
  .work-card:nth-child(2){grid-column:8/13;padding-top:6rem}
  .work-card:nth-child(2) .thumb{aspect-ratio:3/4}
  .work-card h4{font-size:1.85rem}

  /* CTA */
  .cta-section{padding:8rem 2rem}
  .cta-section h2{font-size:3rem;margin-bottom:3rem}

  /* Footer */
  .footer{padding:8rem 2rem 2.5rem}
  .footer .footer-top{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin-bottom:4rem}
  .footer .ft-heading{grid-column:1/7}
  .footer h2{font-size:3rem}
  .footer .ft-inquiries{grid-column:7/10}
  .footer .ft-studio{grid-column:10/13}
  .footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}

  /* Inner page headers */
  .page-header{padding:12rem 2rem 5rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .page-header .ph-left{grid-column:1/8}
  .page-header .ph-right{grid-column:9/13;display:flex;flex-direction:column;justify-content:flex-end}
  .page-header h1{font-size:4.5rem}
  .page-header .intro{margin-top:0;font-size:1.1rem}

  .wide-image{padding:0 2rem 5rem}
  .wide-image .frame{aspect-ratio:21/9}

  .dark-section.centered{display:flex;flex-direction:column;align-items:center;padding:5rem 2rem}
  .dark-section.centered h2{font-size:2.5rem;max-width:45ch;text-align:center}
  .dark-section.centered p{text-align:center;max-width:40ch}

  .two-col{padding:5rem 2rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .two-col .col:nth-child(1){grid-column:2/7}
  .two-col .col:nth-child(2){grid-column:8/12}

  /* Studio */
  .studio-grid{padding:12rem 2rem 5rem;display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .studio-left{grid-column:1/7}
  .studio-right{grid-column:8/12;display:flex;flex-direction:column;justify-content:space-between}
  .studio-right .text-block{padding-top:3rem}

  /* Process */
  .process{padding:5rem 2rem}
  .process-steps{flex-direction:row;gap:2rem;position:relative}
  .process-steps::before{
    content:'';position:absolute;top:2.5rem;left:0;right:0;
    height:1px;background:var(--border);
  }
  .process-step{flex:1;position:relative}
  .process-step .circle{background:var(--bg);position:relative;z-index:1}

  /* Works page */
  .works-list{padding:0 2rem 8rem}
  .project-article{
    display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;
    margin-bottom:5rem;
  }
  .project-article .pa-media{grid-column:1/8}
  .project-article:nth-child(even) .pa-media{grid-column:6/13}
  .project-article .pa-info{grid-column:9/13;display:flex;flex-direction:column;justify-content:flex-end}
  .project-article:nth-child(even) .pa-info{grid-column:1/5;grid-row:1}
  .project-info h2{font-size:2rem}
  .project-info .desc{font-size:1.1rem}

  /* Detail */
  .detail-header{padding:12rem 2rem 3rem}
  .detail-header .dh-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem}
  .detail-header .dh-left{grid-column:1/8}
  .detail-header .dh-right{grid-column:9/13;display:flex;flex-direction:column;justify-content:flex-end}
  .detail-header h1{font-size:4.5rem}
  .detail-gallery{padding:0 2rem 4rem}
  .detail-gallery .slide{flex:0 0 80%}
  .detail-specs{padding:0 2rem 5rem}
  .detail-specs .specs-grid{grid-template-columns:repeat(4,1fr)}
}

/* ═══════════════════════════════════════════════════
   LARGE DESKTOP — 1024px+
   ═══════════════════════════════════════════════════ */
@media(min-width:1024px){
  .hero h1{font-size:5rem}
  .hero h1 .indent{padding-left:3rem}

  .dark-section h2{font-size:3rem}

  .cta-section h2{font-size:3.5rem}

  .page-header h1{font-size:5.5rem}
  .detail-header h1{font-size:5.5rem}

  .dark-section.centered h2{font-size:3rem}
}

/* ═══════════════════════════════════════════════════
   XL DESKTOP — 1280px+ (matches Tailwind lg:)
   ═══════════════════════════════════════════════════ */
@media(min-width:1280px){
  .hero h1{font-size:9rem}
  .hero h1 .indent{padding-left:6rem}
  .page-header h1{font-size:6rem}
  .detail-header h1{font-size:6rem}
  .cta-section h2{font-size:3.75rem}
}