/* =============================================================
   BOMBAY BUILDING WORKSHOP — STYLESHEET
   Design system: monochrome, editorial, cinematic.
   Structure: 1. Variables & Reset  2. Base/Typography  3. Utilities
   4. Layout primitives  5. Component sections (in HTML order)
   6. Loader/Cursor/Lightbox/Modals  7. Animations  8. Media queries
============================================================= */

/* -------------------------------------------------------------
   1. VARIABLES & RESET
------------------------------------------------------------- */
:root{
  /* Palette */
  --c-black:      #0b0b0a;
  --c-charcoal:   #1a1a18;
  --c-stone:      #4a4844;
  --c-concrete:   #8a8680;
  --c-line:       #d8d4cc;
  --c-beige:      #ece7dd;
  --c-offwhite:   #f6f4ef;
  --c-white:      #fdfdfb;
  --c-accent:     #a9663f;      /* muted clay — used sparingly */

  --bg:            var(--c-offwhite);
  --bg-alt:        var(--c-beige);
  --ink:           var(--c-black);
  --ink-soft:      var(--c-stone);
  --ink-faint:     var(--c-concrete);
  --hairline:      rgba(11,11,10,0.12);
  --hairline-dark: rgba(253,253,251,0.18);

  /* Type */
  --f-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --f-body:    'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --f-serif:   'Fraunces', Georgia, serif;

  /* Fluid type scale */
  --fs-hero:   clamp(3rem, 3.2vw + 2.4rem, 8.5rem);
  --fs-h1:     clamp(2.2rem, 1.6vw + 1.8rem, 4.6rem);
  --fs-h2:     clamp(1.8rem, 1.2vw + 1.5rem, 3.2rem);
  --fs-h3:     clamp(1.4rem, 0.6vw + 1.2rem, 2rem);
  --fs-lg:     clamp(1.1rem, 0.3vw + 1rem, 1.4rem);
  --fs-body:   clamp(1rem, 0.1vw + 0.95rem, 1.125rem);
  --fs-sm:     0.85rem;
  --fs-xs:     0.72rem;

  /* Spacing (8pt-ish fluid) */
  --sp-section: clamp(5rem, 8vw, 10rem);
  --sp-xl: clamp(3rem, 5vw, 6rem);
  --sp-lg: clamp(2rem, 3vw, 3.5rem);
  --sp-md: clamp(1.2rem, 2vw, 2rem);
  --sp-sm: clamp(0.8rem, 1vw, 1.2rem);

  --container: 1600px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(.16,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .3s;
  --dur-med: .6s;
  --dur-slow: 1.1s;

  --radius: 2px;
  --nav-h: 92px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  width: 100%;
}
html.has-smooth-scroll{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
body.no-scroll{ overflow: hidden; height: 100vh; }

img, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul{ list-style: none; margin: 0; padding: 0; }
input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; }

/* Hide native cursor when custom cursor active */
html.cursor-enabled, html.cursor-enabled *{ cursor: none !important; }

::selection{ background: var(--ink); color: var(--c-white); }

/* -------------------------------------------------------------
   2. TYPOGRAPHY
------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}
em{ font-style: italic; font-family: var(--f-serif); font-weight: 400; }

.eyebrow{
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-sm);
  font-weight: 600;
}

/* -------------------------------------------------------------
   3. UTILITIES / LAYOUT PRIMITIVES
------------------------------------------------------------- */
.section-frame{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section-head{ max-width: 900px; margin-bottom: var(--sp-xl); }
.section-head h2{ font-size: var(--fs-h2); margin-top: .2em; }
.section-head__desc{ font-size: var(--fs-lg); color: var(--ink-soft); max-width: 560px; margin-top: var(--sp-md); font-weight: 300; }
.section-head--split{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--sp-lg); }
.section-head--split > div{ max-width: 640px; }
.section-head--split .section-head__desc{ margin-top: 0; }
.section-head--center{ text-align: center; margin-left: auto; margin-right: auto; }

section{ position: relative; padding: var(--sp-section) 0; }

.btn{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1.1em 2.2em;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.btn span{ position: relative; z-index: 2; }
.btn::before{
  content:'';
  position:absolute; inset:0;
  z-index: 1;
  transform: translateY(101%);
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover::before{ transform: translateY(0); }

.btn--ghost-light{
  color: var(--c-white);
  border: 1px solid var(--hairline-dark);
}
.btn--ghost-light::before{ background: var(--c-white); }
.btn--ghost-light:hover{ color: var(--c-black); border-color: var(--c-white); }

.btn--dark{
  color: var(--c-white);
  background: var(--ink);
}
.btn--dark::before{ background: var(--c-accent); }
.btn--dark:hover{ color: var(--c-white); }

.btn--play{ color: var(--c-white); }
.btn__play-icon{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.btn__play-icon::after{
  content:'';
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--c-white);
  margin-left: 3px;
}

/* Ripple */
.ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transform: scale(0);
  animation: ripple-anim .65s var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
@keyframes ripple-anim{ to{ transform: scale(3); opacity: 0; } }

/* Reveal system (Intersection Observer driven) */
[data-reveal]{ opacity: 0; will-change: transform, opacity; }
[data-reveal="fade-up"]{ transform: translateY(48px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="fade-left"]{ transform: translateX(-56px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="fade-right"]{ transform: translateX(56px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
[data-reveal="scale"]{ transform: scale(0.92); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-visible{ opacity: 1; transform: none; }

[data-reveal-text]{ overflow: hidden; display: block; }
[data-reveal-text] > .split-line{ display:block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
[data-reveal-text].is-visible > .split-line{ transform: translateY(0); }

.stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* -------------------------------------------------------------
   LOADER
------------------------------------------------------------- */
.loader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--c-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-lg);
  transition: opacity .9s var(--ease-soft), visibility .9s;
}
.loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader__mark{ overflow: hidden; }
.loader__word{
  display:block; font-family: var(--f-display); color: var(--c-white);
  font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -0.01em;
  opacity: 0; transform: translateY(30px);
  animation: loaderWordIn 1s var(--ease-out) .2s forwards;
}
@keyframes loaderWordIn{ to{ opacity: 1; transform: translateY(0); } }
.loader__bar{ width: min(320px, 60vw); height: 1px; background: var(--hairline-dark); position: relative; }
.loader__bar-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--c-white); transition: width .25s var(--ease-soft); }
.loader__count{ font-family: var(--f-display); color: var(--c-concrete); font-size: var(--fs-sm); letter-spacing: .1em; }

/* -------------------------------------------------------------
   CUSTOM CURSOR
------------------------------------------------------------- */
.cursor-dot, .cursor-ring{
  position: fixed; top:0; left:0; z-index: 9998;
  pointer-events: none;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
  transition: opacity .2s, background .3s;
}
.cursor-ring{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: width .3s var(--ease-soft), height .3s var(--ease-soft), opacity .2s, border-color .3s, background-color .3s;
}
.cursor-ring__label{
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  opacity: 0; transition: opacity .2s; white-space: nowrap; color: inherit; font-weight: 700;
}
html.cursor-hidden .cursor-dot, html.cursor-hidden .cursor-ring{ opacity: 0; }
.cursor-ring.is-hover{ width: 90px; height: 90px; background: var(--ink); border-color: var(--ink); }
.cursor-ring.is-hover .cursor-ring__label{ opacity: 1; color: var(--c-white); }
.cursor-ring.is-hover ~ .cursor-dot{ opacity: 0; }
.cursor-ring.is-light{ border-color: var(--c-white); }
.cursor-ring.is-light.is-hover{ background: var(--c-white); }
.cursor-ring.is-light.is-hover .cursor-ring__label{ color: var(--c-black); }
@media (hover: none), (pointer: coarse){
  .cursor-dot, .cursor-ring{ display: none; }
}

/* Magnetic buttons: JS applies inline transform */
[data-magnetic]{ display: inline-flex; will-change: transform; }

/* -------------------------------------------------------------
   SCROLL PROGRESS
------------------------------------------------------------- */
.scroll-progress{
  position: fixed; top:0; left:0; height: 2px; width: 0%;
  background: var(--ink); z-index: 9997;
  transition: width .1s linear;
}

/* -------------------------------------------------------------
   NAVIGATION
------------------------------------------------------------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 900;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: transform .5s var(--ease-soft), background-color .5s var(--ease-soft), height .4s var(--ease-soft), border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.is-solid{
  background: rgba(246,244,239,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--hairline);
  height: calc(var(--nav-h) - 20px);
}
.nav.is-hidden{ transform: translateY(-100%); }
.nav__inner{ position: relative; z-index: 810; width: 100%; max-width: var(--container); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }

.nav__logo{ display: flex; align-items: center; gap: .7rem; }
.nav__logo-img{ width: 34px; height: 34px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.nav__logo-text{ font-family: var(--f-display); font-size: 1rem; letter-spacing: -0.01em; color: var(--c-white); transition: color .5s; }
.nav.is-solid .nav__logo-text{ color: var(--ink); }
.nav__logo-text em{ display: block; font-size: .7em; opacity: .6; font-style: normal; font-family: var(--f-body); letter-spacing: .1em; text-transform: uppercase; }

.nav__links{ display: flex; align-items: center; gap: clamp(1.2rem, 2vw, 2.2rem); }
.nav__links a{
  font-size: var(--fs-sm); letter-spacing: .03em; color: var(--c-white);
  position: relative; padding: .3em 0; transition: color .5s;
}
.nav.is-solid .nav__links a{ color: var(--ink); }
.nav__links a::after{
  content:''; position: absolute; left:0; bottom:-2px; width:100%; height:1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform: scaleX(1); transform-origin: left; }
.nav__links a.is-active{ font-weight: 700; }
.nav__cta{
  border: 1px solid currentColor; border-radius: 100px; padding: .6em 1.3em !important;
}
.nav__cta::after{ display: none; }

.nav__burger{
  display: none; flex-direction: column; justify-content: center; gap: 6px;
  width: 34px; height: 34px;
}
.nav__burger span{
  display:block; width: 100%; height: 1px; background: var(--c-white); transition: transform .4s var(--ease-soft), opacity .3s, background-color .5s;
}
.nav.is-solid .nav__burger span{ background: var(--ink); }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav__mobile{
  position: fixed; inset: 0; top: 0;
  background: var(--c-black);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 3rem;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .7s var(--ease-out), visibility 0s linear .7s;
  z-index: 800;
}
.nav__mobile.is-open{
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .7s var(--ease-out), visibility 0s linear 0s;
}
.nav__mobile nav{ display: flex; flex-direction: column; gap: .3rem; }
.nav__mobile a{
  display: flex; align-items: baseline; gap: 1.2rem;
  font-family: var(--f-display); font-size: clamp(2rem, 8vw, 3.2rem);
  color: var(--c-white); padding: .35em 0; border-bottom: 1px solid var(--hairline-dark);
  opacity: 0; transform: translateY(24px);
  pointer-events: none;
}
.nav__mobile.is-open a{ animation: mobileLinkIn .6s var(--ease-out) forwards; pointer-events: auto; }
.nav__mobile a span{ font-size: .35em; color: var(--ink-faint); font-family: var(--f-body); }
@keyframes mobileLinkIn{ to{ opacity: 1; transform: translateY(0); } }
.nav__mobile-footer{ color: var(--c-concrete); font-size: var(--fs-sm); }
.nav__mobile-footer p{ margin: .2em 0; }

/* -------------------------------------------------------------
   HERO
------------------------------------------------------------- */
.hero{
  height: 100vh; min-height: 640px;
  display: flex; align-items: flex-end;
  padding: 0;
  overflow: hidden;
}
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__video{ width: 100%; height: 100%; object-fit: cover; will-change: transform; transform: scale(1.08); }
.hero__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.75) 100%);
}
.hero__grain{
  position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__content{ position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding: 0 var(--gutter) 8rem; max-width: 1200px; }
.hero__eyebrow{ color: var(--c-concrete); font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1.2rem; font-weight: 600; }
.hero__title{ font-size: var(--fs-hero); color: var(--c-white); font-weight: 300; }
.hero__title-line{ overflow: hidden; }
.hero__disciplines{
  display: flex; flex-wrap: wrap; gap: .6em; align-items: center;
  color: var(--c-white); font-size: var(--fs-lg); margin-top: 1.4rem; letter-spacing: .02em;
  font-family: var(--f-display); font-weight: 300;
}
.hero__dot{ color: var(--ink-faint); }
.hero__subtitle{
  color: rgba(253,253,251,0.75); max-width: 460px; margin-top: 1.6rem; font-size: var(--fs-body); font-weight: 300;
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.6rem; }

.hero__meta{
  position: absolute; right: var(--gutter); bottom: 3rem; z-index: 2;
  display: flex; gap: 2.4rem;
}
.hero__meta-item{
  color: var(--c-white); font-family: var(--f-display); font-size: 1.6rem; font-weight: 300;
  display: flex; flex-direction: column-reverse; gap: .3rem;
}
.hero__meta-item span{ font-size: 1.6rem; }
.hero__meta-item{ font-size: var(--fs-xs); color: var(--c-concrete); letter-spacing: .1em; text-transform: uppercase; }

.scroll-indicator{
  position: absolute; left: var(--gutter); bottom: 3rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  color: var(--c-white);
}
.scroll-indicator__text{ font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-indicator__line{ width: 1px; height: 60px; background: var(--hairline-dark); overflow: hidden; display:block; position: relative; }
.scroll-indicator__line i{
  position: absolute; top: -60px; left:0; width: 100%; height: 60px; background: var(--c-white);
  animation: scrollLine 2.2s var(--ease-soft) infinite;
}
@keyframes scrollLine{ 0%{ top: -60px; } 60%{ top: 60px; } 100%{ top: 60px; } }

/* -------------------------------------------------------------
   ABOUT
------------------------------------------------------------- */
.about{ background: var(--bg); }
.about__grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--sp-lg) var(--gutter);
}
.about__label{ grid-column: 1 / 4; }
.about__heading{
  grid-column: 4 / 13;
  font-size: var(--fs-h1); font-weight: 300; color: var(--ink);
  max-width: 16ch;
}
.about__image{
  grid-column: 1 / 6;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius);
}
.about__image img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.about__image:hover img{ transform: scale(1.06); }
.about__image-caption{
  position: absolute; left: 1.2rem; bottom: 1.2rem; color: var(--c-white);
  font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase;
}
.about__body{ grid-column: 7 / 13; align-self: start; }
.about__body p{ font-size: var(--fs-lg); color: var(--ink-soft); font-weight: 300; margin: 0 0 1.4em; max-width: 56ch; }
.about__stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }
.stat{ display: flex; flex-direction: column; gap: .3rem; }
.stat__num{ font-family: var(--f-display); font-size: clamp(1.8rem, 2vw, 2.6rem); font-weight: 400; }
.stat__num::after{ content: '+'; }
.stat__label{ font-size: var(--fs-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }

.about__timeline{ grid-column: 4 / 13; margin-top: var(--sp-lg); border-top: 1px solid var(--hairline); }
.timeline-row{
  display: flex; gap: var(--sp-lg); padding: 1.4rem 0; border-bottom: 1px solid var(--hairline);
  transition: padding-left .4s var(--ease-soft);
}
.timeline-row:hover{ padding-left: 1rem; }
.timeline-row__year{ font-family: var(--f-display); font-size: var(--fs-lg); color: var(--ink-faint); min-width: 5ch; }
.timeline-row__text{ color: var(--ink-soft); font-weight: 300; max-width: 60ch; }

/* -------------------------------------------------------------
   FOUNDERS
------------------------------------------------------------- */
.founders{ background: var(--bg-alt); }
.founder-row{
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.founder-row:last-child{ border-bottom: 1px solid var(--hairline); }
.founder-row--reverse{ direction: rtl; }
.founder-row--reverse > *{ direction: ltr; }
.founder-row__image{ aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius); position: relative; }
.founder-row__image img{ width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.55); transition: filter .8s var(--ease-soft), transform 1.4s var(--ease-out); }
.founder-row__image:hover img{ filter: grayscale(0); transform: scale(1.05); }
.founder-row__index{ font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.founder-row__name{ font-size: clamp(2.6rem, 4vw, 4.5rem); font-weight: 300; margin: .2em 0 0; }
.founder-row__role{ color: var(--ink-soft); font-size: var(--fs-lg); margin: .3em 0 1.2em; font-weight: 300; }
.founder-row__bio{ color: var(--ink-soft); max-width: 52ch; font-weight: 300; }
.founder-row__quote{
  font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h3); font-weight: 300;
  margin: 1.6em 0; padding-left: 1.2em; border-left: 2px solid var(--ink);
  color: var(--ink);
}
.founder-row__awards{ margin-top: 1.4rem; }
.founder-row__awards li{
  font-size: var(--fs-sm); color: var(--ink-faint); padding: .5em 0; border-top: 1px solid var(--hairline);
}

/* -------------------------------------------------------------
   FEATURED WORK
------------------------------------------------------------- */
.work__list{ display: flex; flex-direction: column; }
.project-card{
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-lg) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.work__list .project-card:last-child{ border-bottom: 1px solid var(--hairline); }
.project-card--reverse{ direction: rtl; }
.project-card--reverse > *{ direction: ltr; }

.project-card__media{
  position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius);
}
.project-card__media img, .project-card__media video{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease-out);
}
.project-card:hover .project-card__media img,
.project-card:hover .project-card__media video{ transform: scale(1.08); }
.project-card__media video{ position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-soft); }
.project-card:hover .project-card__media video{ opacity: 1; }
.project-card__num{
  position: absolute; top: 1rem; left: 1rem; color: var(--c-white);
  font-family: var(--f-display); font-size: var(--fs-sm); z-index: 2;
  mix-blend-mode: difference;
}

.project-card__content{ padding: 1rem 0; }
.project-card__meta{ display: flex; gap: 1rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); margin-bottom: 1rem; }
.project-card__meta span:not(:last-child)::after{ content: '·'; margin-left: 1rem; color: var(--hairline); }
.project-card__title{ font-size: var(--fs-h3); font-weight: 400; margin-bottom: .5rem; position: relative; display: inline-block; }
.project-card__desc{ color: var(--ink-soft); font-weight: 300; max-width: 48ch; margin: 1rem 0 1.6rem; }
.project-card__link{
  display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-sm); letter-spacing: .04em; font-weight: 600;
  position: relative; padding-bottom: 2px;
}
.project-card__link::after{
  content:''; position: absolute; left:0; bottom:0; width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.project-card:hover .project-card__link::after{ transform: scaleX(1); transform-origin: left; }
.project-card__arrow{ transition: transform .4s var(--ease-out); }
.project-card:hover .project-card__arrow{ transform: translateX(6px); }

/* -------------------------------------------------------------
   ARCHITECTURE — MASONRY + FILTER
------------------------------------------------------------- */
.filter-bar{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-md); }
.filter-btn{
  padding: .6em 1.4em; border: 1px solid var(--hairline); border-radius: 100px;
  font-size: var(--fs-sm); letter-spacing: .03em; color: var(--ink-soft);
  transition: all .35s var(--ease-soft);
}
.filter-btn:hover{ border-color: var(--ink); color: var(--ink); }
.filter-btn.is-active{ background: var(--ink); color: var(--c-white); border-color: var(--ink); }

.masonry{
  column-count: 3; column-gap: var(--gutter);
  max-width: var(--container); margin: var(--sp-lg) auto 0; padding: 0 var(--gutter);
}
.masonry-item{
  break-inside: avoid; margin-bottom: var(--gutter);
  position: relative; overflow: hidden; border-radius: var(--radius);
  opacity: 1; transform: none; transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
  cursor: pointer;
}
.masonry-item.is-hidden-filter{ opacity: 0; transform: scale(.9); position: absolute; pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.masonry-item img{ width: 100%; display: block; object-fit: cover; transition: transform 1.2s var(--ease-out), filter .8s; }
/* Cycled aspect ratios reserve layout space before lazy images load, preventing reflow/CLS. */
.masonry-item:nth-child(6n+1) img{ aspect-ratio: 3/4; }
.masonry-item:nth-child(6n+2) img{ aspect-ratio: 1/1; }
.masonry-item:nth-child(6n+3) img{ aspect-ratio: 4/5; }
.masonry-item:nth-child(6n+4) img{ aspect-ratio: 4/3; }
.masonry-item:nth-child(6n+5) img{ aspect-ratio: 3/4; }
.masonry-item:nth-child(6n+0) img{ aspect-ratio: 1/1; }
.masonry-item:hover img{ transform: scale(1.08); }
.masonry-item__overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.78) 100%);
  opacity: 0; transition: opacity .5s var(--ease-soft);
  display: flex; align-items: flex-end; padding: 1.4rem;
}
.masonry-item:hover .masonry-item__overlay{ opacity: 1; }
.masonry-item__info{ color: var(--c-white); transform: translateY(10px); transition: transform .5s var(--ease-soft); }
.masonry-item:hover .masonry-item__info{ transform: translateY(0); }
.masonry-item__cat{ font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.masonry-item__title{ font-family: var(--f-display); font-size: 1.05rem; margin-top: .3rem; }

/* -------------------------------------------------------------
   URBAN DESIGN
------------------------------------------------------------- */
.urban__reel{
  position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; margin: 0 0 var(--sp-lg);
}
.urban__reel-video{ width: 100%; height: 100%; object-fit: cover; }
.urban__reel-overlay{ position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), transparent 50%); }
.urban__reel-caption{
  position: absolute; left: var(--gutter); bottom: 1.6rem; color: var(--c-white);
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase;
}
.urban__gallery{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gutter);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.urban__gallery .gallery-tile{ position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; }
.urban__gallery .gallery-tile img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.urban__gallery .gallery-tile:hover img{ transform: scale(1.08); }
.urban__gallery .gallery-tile:nth-child(6n+1){ grid-column: span 4; aspect-ratio: 16/10; }
.urban__gallery .gallery-tile:nth-child(6n+2){ grid-column: span 2; aspect-ratio: 3/4; }
.urban__gallery .gallery-tile:nth-child(6n+3){ grid-column: span 2; aspect-ratio: 3/4; }
.urban__gallery .gallery-tile:nth-child(6n+4){ grid-column: span 2; aspect-ratio: 3/4; }
.urban__gallery .gallery-tile:nth-child(6n+5){ grid-column: span 4; aspect-ratio: 16/10; }
.urban__gallery .gallery-tile:nth-child(6n+0){ grid-column: span 6; aspect-ratio: 21/9; }

/* -------------------------------------------------------------
   INTERIOR
------------------------------------------------------------- */
.interior__break{ position: relative; width: 100%; aspect-ratio: 21/9; overflow: hidden; margin-bottom: var(--sp-lg); }
.interior__break-video{ width: 100%; height: 100%; object-fit: cover; }
.interior__break-overlay{ position: absolute; inset: 0; background: rgba(0,0,0,.25); }
.interior__gallery{
  columns: 3 260px; column-gap: var(--gutter);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.interior__gallery .gallery-tile{
  break-inside: avoid; margin-bottom: var(--gutter); position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer;
}
.interior__gallery .gallery-tile img{ width: 100%; display: block; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.interior__gallery .gallery-tile:nth-child(5n+1) img{ aspect-ratio: 3/4; }
.interior__gallery .gallery-tile:nth-child(5n+2) img{ aspect-ratio: 4/5; }
.interior__gallery .gallery-tile:nth-child(5n+3) img{ aspect-ratio: 1/1; }
.interior__gallery .gallery-tile:nth-child(5n+4) img{ aspect-ratio: 4/3; }
.interior__gallery .gallery-tile:nth-child(5n+0) img{ aspect-ratio: 3/4; }
.interior__gallery .gallery-tile:hover img{ transform: scale(1.08); }

.gallery-tile__zoom{
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: all .4s var(--ease-soft); font-size: 14px;
}
.gallery-tile:hover .gallery-tile__zoom{ opacity: 1; transform: scale(1); }

/* -------------------------------------------------------------
   PROCESS
------------------------------------------------------------- */
.process__timeline{
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gutter);
  margin-top: var(--sp-xl);
}
.process__line{
  position: absolute; top: -2.4rem; left: 0; right: 0; height: 1px; background: var(--hairline);
}
.process__line-fill{ position: absolute; top:0; left:0; height: 100%; width: 0%; background: var(--ink); transition: width 1.2s var(--ease-out); }
.process__step{ position: relative; padding-top: 1rem; }
.process__step::before{
  content:''; position: absolute; top: -2.5rem; left: 0; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-white); border: 2px solid var(--ink); transform: translateY(-3px);
}
.process__num{ font-family: var(--f-display); font-size: var(--fs-sm); color: var(--ink-faint); }
.process__step h3{ font-size: var(--fs-h3); font-weight: 400; margin: .6rem 0 .8rem; }
.process__step p{ color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 300; }

/* -------------------------------------------------------------
   AWARDS
------------------------------------------------------------- */
.awards__counters{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
  padding: var(--sp-lg) 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--sp-lg);
}
.counter{ text-align: left; }
.counter__num{ display:block; font-family: var(--f-display); font-size: clamp(2.6rem,4vw,4.5rem); font-weight: 300; }
.counter__num::after{ content: '+'; }
.counter__label{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }

.awards__list li{
  display: grid; grid-template-columns: 100px minmax(0,1fr) auto; align-items: baseline; gap: 1.5rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--hairline);
  transition: padding-left .4s var(--ease-soft), background .4s;
}
.awards__list li:hover{ padding-left: 1rem; background: var(--bg-alt); }
.awards__year{ font-family: var(--f-display); color: var(--ink-faint); font-size: var(--fs-lg); }
.awards__title{ font-size: var(--fs-lg); font-weight: 400; }
.awards__project{ font-size: var(--fs-sm); color: var(--ink-faint); font-style: italic; font-family: var(--f-serif); }

/* -------------------------------------------------------------
   CLIENTS
------------------------------------------------------------- */
.clients__wall{
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
}
.client-logo{
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  aspect-ratio: 2.4/1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: clamp(1rem, 1.4vw, 1.4rem); letter-spacing: .02em;
  color: var(--ink-faint); filter: grayscale(1); opacity: .6;
  transition: color .5s, opacity .5s, filter .5s, background .5s;
  text-align: center; padding: 1rem;
}
.client-logo:hover{ color: var(--c-accent); opacity: 1; filter: grayscale(0); background: var(--bg-alt); }

/* -------------------------------------------------------------
   PUBLICATIONS
------------------------------------------------------------- */
.publications__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter);
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.pub-card{ position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/5; cursor: pointer; }
.pub-card img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.pub-card:hover img{ transform: scale(1.1) rotate(-1deg); }
.pub-card__overlay{
  position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
}
.pub-card__tag{ color: var(--c-concrete); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; }
.pub-card__name{ color: var(--c-white); font-family: var(--f-display); font-size: 1.4rem; margin-top: .3rem; transform: translateY(8px); transition: transform .5s var(--ease-soft); }
.pub-card:hover .pub-card__name{ transform: translateY(0); }

/* -------------------------------------------------------------
   TESTIMONIALS
------------------------------------------------------------- */
.testimonials{ background: var(--ink); color: var(--c-white); }
.testimonials .eyebrow{ color: var(--c-concrete); }
.testimonials__inner{ max-width: 900px; margin: 0 auto; text-align: center; }
.testimonials__track{ position: relative; min-height: 320px; margin-top: var(--sp-lg); }
.testimonial{
  position: absolute; inset: 0; opacity: 0; pointer-events: none; transform: translateY(16px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
  display: flex; flex-direction: column; align-items: center;
}
.testimonial.is-active{ opacity: 1; pointer-events: auto; transform: translateY(0); position: relative; }
.testimonial__quote{
  font-family: var(--f-serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.4; max-width: 22ch;
}
.testimonial__avatar{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-top: 2rem; filter: grayscale(1); }
.testimonial__name{ font-family: var(--f-display); margin-top: 1rem; }
.testimonial__role{ font-size: var(--fs-sm); color: var(--c-concrete); }

.testimonials__controls{ display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: var(--sp-lg); }
.testimonials__arrow{ font-size: 1.2rem; color: var(--c-white); border: 1px solid var(--hairline-dark); border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; transition: background .3s, color .3s; }
.testimonials__arrow:hover{ background: var(--c-white); color: var(--c-black); }
.testimonials__dots{ display: flex; gap: .5rem; }
.testimonials__dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-dark); transition: background .4s, width .4s; }
.testimonials__dots span.is-active{ background: var(--c-white); width: 18px; border-radius: 4px; }

/* -------------------------------------------------------------
   INSTAGRAM
------------------------------------------------------------- */
.instagram__grid{
  columns: 4 220px; column-gap: 4px;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}
.insta-tile{ break-inside: avoid; margin-bottom: 4px; position: relative; overflow: hidden; cursor: pointer; }
.insta-tile img{ width: 100%; display: block; object-fit: cover; transition: transform .6s var(--ease-soft); }
.insta-tile:nth-child(4n+1) img{ aspect-ratio: 1/1; }
.insta-tile:nth-child(4n+2) img{ aspect-ratio: 4/5; }
.insta-tile:nth-child(4n+3) img{ aspect-ratio: 3/4; }
.insta-tile:nth-child(4n+0) img{ aspect-ratio: 1/1; }
.insta-tile__overlay{
  position: absolute; inset: 0; background: rgba(11,11,10,0.55);
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
  opacity: 0; transition: opacity .4s var(--ease-soft);
  color: var(--c-white); font-size: var(--fs-sm); font-weight: 700;
}
.insta-tile:hover .insta-tile__overlay{ opacity: 1; }
.insta-tile:hover img{ transform: scale(1.1); }

/* -------------------------------------------------------------
   CONTACT
------------------------------------------------------------- */
.contact__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
.contact__intro h2{ font-size: var(--fs-h1); font-weight: 300; margin: .2em 0 .6em; }
.contact__intro p{ color: var(--ink-soft); max-width: 48ch; font-weight: 300; }
.contact__details{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; margin-top: var(--sp-lg); }
.contact__label{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.contact__details p{ margin: .3em 0 0; font-weight: 400; color: var(--ink); }
.contact__socials{ display: flex; gap: 1rem; }
.contact__socials a{ text-decoration: underline; text-underline-offset: 3px; }

.contact__form{ background: var(--bg-alt); padding: var(--sp-lg); border-radius: var(--radius); }
.form-row{ margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.form-row label{ font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.form-row input, .form-row select, .form-row textarea{
  background: transparent; border: none; border-bottom: 1px solid var(--hairline);
  padding: .6em 0; outline: none; transition: border-color .3s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color: var(--ink); }
.form-row textarea{ resize: vertical; }
.form-note{ margin-top: 1rem; font-size: var(--fs-sm); color: var(--c-accent); min-height: 1.4em; }

.contact__map{ margin-top: var(--sp-xl); position: relative; aspect-ratio: 21/6; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline); }
.contact__map-canvas{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, var(--hairline) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 48px),
    var(--bg-alt);
}
.contact__map-pin{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--ink); color: var(--c-white); padding: .6em 1.2em; border-radius: 100px; font-size: var(--fs-sm);
}
.contact__map-pin::before{
  content:''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 0 0 6px rgba(11,11,10,.15);
  animation: pinPulse 2s infinite;
}
@keyframes pinPulse{ 0%,100%{ box-shadow: 0 0 0 6px rgba(11,11,10,.15); } 50%{ box-shadow: 0 0 0 12px rgba(11,11,10,.05); } }

/* -------------------------------------------------------------
   FOOTER
------------------------------------------------------------- */
.footer{ background: var(--ink); color: var(--c-white); padding: var(--sp-xl) 0 var(--sp-md); }
.footer__top{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer__logo{ font-family: var(--f-display); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.footer__logo em{ display: block; font-style: normal; font-family: var(--f-body); font-size: .35em; letter-spacing: .2em; text-transform: uppercase; color: var(--c-concrete); }
.footer__back{ font-size: var(--fs-sm); color: var(--c-concrete); transition: color .3s; }
.footer__back:hover{ color: var(--c-white); }
.footer__line{ height: 1px; background: var(--hairline-dark); margin: var(--sp-lg) 0; position: relative; overflow: hidden; }
.footer__line::after{
  content:''; position: absolute; inset: 0; background: var(--c-white); transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s var(--ease-out);
}
.footer.is-inview .footer__line::after{ transform: scaleX(1); }
.footer__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-lg); }
.footer__heading{ display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--c-concrete); margin-bottom: 1rem; }
.footer__col{ display: flex; flex-direction: column; gap: .6rem; }
.footer__col a, .footer__col p{ font-size: var(--fs-sm); color: rgba(253,253,251,0.8); }
.footer__col a{ width: fit-content; position: relative; }
.footer__col a::after{ content:''; position: absolute; left:0; bottom:-2px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.footer__col a:hover::after{ transform: scaleX(1); transform-origin: left; }
.footer__bottom{ display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-xl); padding-top: 1.6rem; border-top: 1px solid var(--hairline-dark); font-size: var(--fs-xs); color: var(--c-concrete); }

/* -------------------------------------------------------------
   BACK TO TOP (floating)
------------------------------------------------------------- */
.back-to-top{
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 500;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none;
  transition: opacity .4s var(--ease-soft), transform .4s var(--ease-soft);
}
.back-to-top.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* -------------------------------------------------------------
   LIGHTBOX
------------------------------------------------------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 9500; background: rgba(11,11,10,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-soft), visibility .5s;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox__stage{ max-width: 84vw; max-height: 84vh; text-align: center; }
.lightbox__stage img{ max-width: 84vw; max-height: 76vh; object-fit: contain; margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,.5); opacity: 0; transform: scale(.96); transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft); }
.lightbox.is-open .lightbox__stage img{ opacity: 1; transform: scale(1); }
.lightbox__caption{ color: var(--c-concrete); font-size: var(--fs-sm); margin-top: 1.2rem; letter-spacing: .04em; }
.lightbox__close{ position: absolute; top: 1.6rem; right: 1.6rem; color: var(--c-white); font-size: 1.2rem; width: 44px; height:44px; }
.lightbox__nav{ position: absolute; top: 50%; transform: translateY(-50%); color: var(--c-white); font-size: 1.6rem; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; transition: opacity .3s; }
.lightbox__nav:hover{ opacity: .6; }
.lightbox__nav--prev{ left: 1rem; }
.lightbox__nav--next{ right: 1rem; }
.lightbox__count{ position: absolute; bottom: 1.6rem; left: 1.6rem; color: var(--c-concrete); font-size: var(--fs-xs); letter-spacing: .1em; }

/* -------------------------------------------------------------
   VIDEO MODAL (Showreel)
------------------------------------------------------------- */
.video-modal{
  position: fixed; inset: 0; z-index: 9600; background: rgba(11,11,10,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-soft), visibility .5s;
}
.video-modal.is-open{ opacity: 1; visibility: visible; }
.video-modal__stage{ width: min(1100px, 88vw); aspect-ratio: 16/9; }
.video-modal__stage video{ width: 100%; height: 100%; background: #000; }
.video-modal__close{ position: absolute; top: 1.6rem; right: 1.6rem; color: var(--c-white); font-size: 1.2rem; width: 44px; height: 44px; }

/* -------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------- */
@media (max-width: 1100px){
  .about__label{ grid-column: 1 / 13; margin-bottom: -1rem; }
  .about__heading{ grid-column: 1 / 13; max-width: none; }
  .about__image{ grid-column: 1 / 13; aspect-ratio: 16/9; }
  .about__body{ grid-column: 1 / 13; }
  .about__timeline{ grid-column: 1 / 13; }
  .about__stats{ grid-template-columns: repeat(2, 1fr); }

  .founder-row, .project-card{ grid-template-columns: 1fr; }
  .founder-row--reverse, .project-card--reverse{ direction: ltr; }
  .founder-row__image{ aspect-ratio: 16/10; }

  .masonry{ column-count: 2; }
  .urban__gallery{ grid-template-columns: repeat(2, 1fr); }
  .urban__gallery .gallery-tile{ grid-column: span 1 !important; aspect-ratio: 4/3 !important; }
  .interior__gallery{ columns: 2 220px; }
  .publications__grid{ grid-template-columns: repeat(2, 1fr); }
  .process__timeline{ grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .process__line{ display: none; }
  .clients__wall{ grid-template-columns: repeat(3, 1fr); }
  .contact__grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px){
  :root{ --nav-h: 76px; }
  .nav__links{ display: none; }
  .nav__burger{ display: flex; }
  .hero__meta{ display: none; }
  .hero{ padding-top: var(--nav-h); }
  .hero__content{ padding-bottom: 4rem; }
  .hero__title{ font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .hero__eyebrow{ margin-bottom: .8rem; }
  .hero__disciplines{ font-size: 1rem; margin-top: 1rem; }
  .hero__subtitle{ margin-top: 1.1rem; }
  .hero__actions{ margin-top: 1.6rem; }
  .about__stats{ grid-template-columns: repeat(2,1fr); }
  .awards__counters{ grid-template-columns: repeat(2, 1fr); }
  .instagram__grid{ columns: 2 160px; }
  .masonry{ column-count: 1; }
  .interior__gallery{ columns: 1; }
  .contact__details{ grid-template-columns: 1fr; }
  .awards__list li{ grid-template-columns: 60px 1fr; }
  .awards__project{ grid-column: 2 / 3; }
}

@media (max-width: 560px){
  .clients__wall{ grid-template-columns: repeat(2, 1fr); }
  .publications__grid{ grid-template-columns: 1fr; }
  .footer__grid{ grid-template-columns: 1fr; }
  .footer__top{ flex-direction: column; align-items: flex-start; }
  .contact__form{ padding: var(--sp-md); }
  .lightbox__nav{ width: 40px; height: 40px; font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}