/* ==========================================================================
   Plush Designs Kitchen and Bath - homepage concept
   Design language: Urban Sophisticate (#10) for type, spacing, composition.
   Palette: extracted from the Plush Designs logo (sage square, wheat oval,
   green-charcoal wordmark). No stock colors.
   ========================================================================== */

:root{
  /* Dark family: deepened from the logo wordmark green-charcoal #3e4d46 */
  --ink:            #17211d;
  --ink-2:          #101815;
  --forest:         #26332d;

  /* Accent family: the logo's sage square #7fac9e */
  --sage:           #7fac9e;   /* on dark: 6.52:1 */
  --sage-deep:      #35604f;   /* on cream: 6.40:1 */
  --sage-deeper:    #2a4d3f;
  --sage-lift:      #b5cfc7;   /* lighter sage for small text over photography */
  --sage-glow:      rgba(127,172,158,0.30);
  --sage-line:      rgba(127,172,158,0.24);

  /* Warm family: the logo's wheat oval #e6d8bb */
  --wheat:          #e6d8bb;
  --wheat-soft:     #efe7d3;

  /* Light grounds */
  --cream:          #f6f2e9;
  --porcelain:      #fcfaf5;

  /* Text */
  --text-dark:      #17211d;
  --text-body:      #4a554f;
  --text-muted:     #626d66;
  --text-light:     rgba(255,255,255,0.72);
  --text-light-mut: rgba(255,255,255,0.60);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --wrap:      min(90%, 1180px);
  --wrap-wide: min(94%, 1480px);
  --nav-h:     78px;

  /* Motion */
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--cream);
  color:var(--text-body);
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-0.015em;
  color:var(--text-dark);
  margin:0;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
}

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

.wrap{ width:var(--wrap); margin-inline:auto; }
.wrap-wide{ width:var(--wrap-wide); margin-inline:auto; }

.section{ padding-block:clamp(4.5rem, 8vw, 8rem); }
.section--tight{ padding-block:clamp(3rem, 5vw, 4.5rem); }

.band-dark{ background:var(--ink); color:var(--text-light); }
.band-deep{ background:var(--ink-2); color:var(--text-light); }
.band-forest{ background:var(--forest); color:var(--text-light); }
.band-cream{ background:var(--cream); color:var(--text-body); }
.band-porcelain{ background:var(--porcelain); color:var(--text-body); }

.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4,
.band-deep h1,.band-deep h2,.band-deep h3,.band-deep h4,
.band-forest h1,.band-forest h2,.band-forest h3,.band-forest h4{ color:#fff; }

/* --- Eyebrow ------------------------------------------------------------ */
.eyebrow{
  font-family:var(--font-body);
  font-size:0.7rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--eyebrow-color, var(--sage-deep));
  margin:0 0 1.35rem;
  display:flex;
  align-items:center;
  gap:0.85rem;
}
.eyebrow::after{
  content:"";
  flex:0 0 clamp(28px, 4vw, 56px);
  height:1px;
  background:currentColor;
  opacity:0.5;
}
.band-dark,.band-deep,.band-forest{ --eyebrow-color:var(--sage); }

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.85rem;
  padding:1.02rem 1.5rem 1.02rem 1.75rem;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:0.83rem;
  font-weight:500;
  letter-spacing:0.09em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  will-change:transform;
}
.btn__dot{
  width:30px; height:30px;
  border-radius:50%;
  display:grid; place-items:center;
  flex:0 0 30px;
  transition:transform .5s var(--ease), background .45s var(--ease);
}
.btn__dot svg{ width:13px; height:13px; display:block; }
.btn:hover .btn__dot{ transform:translateX(3px) rotate(45deg); }

.btn--solid{ background:var(--sage-deep); color:#fff; }
.btn--solid .btn__dot{ background:rgba(255,255,255,0.18); }
.btn--solid:hover{ background:var(--sage-deeper); }

.btn--wheat{ background:var(--wheat); color:var(--ink); }
.btn--wheat .btn__dot{ background:rgba(23,33,29,0.14); }
.btn--wheat:hover{ background:var(--wheat-soft); }

.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.34); }
.btn--ghost-light .btn__dot{ background:rgba(255,255,255,0.14); }
.btn--ghost-light:hover{ background:rgba(255,255,255,0.09); border-color:rgba(255,255,255,0.55); }

.btn--ghost-dark{ background:transparent; color:var(--ink); border-color:rgba(23,33,29,0.26); }
.btn--ghost-dark .btn__dot{ background:rgba(23,33,29,0.09); }
.btn--ghost-dark:hover{ background:rgba(23,33,29,0.05); border-color:rgba(23,33,29,0.45); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0;
  z-index:120;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.nav__inner{
  width:var(--wrap-wide);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.nav__logo{
  display:inline-flex; align-items:center;
  background:var(--porcelain);
  border-radius:5px;
  padding:7px 11px;
  box-shadow:0 2px 14px rgba(0,0,0,0.16);
  transition:transform .4s var(--ease);
}
.nav__logo img{ width:auto; height:42px; max-width:210px; object-fit:contain; }
.nav__logo:hover{ transform:translateY(-1px); }

.nav__links{
  display:flex; align-items:center; gap:clamp(1.1rem, 2vw, 2.1rem);
  list-style:none; margin:0; padding:0;
}
.nav__link{
  font-size:0.78rem; font-weight:400;
  letter-spacing:0.12em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  position:relative; padding-block:0.4rem;
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--sage);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__cta{
  padding:0.72rem 1.25rem;
  border-radius:999px;
  background:var(--sage-deep);
  color:#fff !important;
  font-size:0.76rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  transition:background .4s var(--ease);
}
.nav__cta:hover{ background:var(--sage-deeper); }

/* Guarantees nav links always sit on darkness, whatever the hero photo does */
.nav::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:calc(var(--nav-h) + 46px);
  background:linear-gradient(to bottom, rgba(16,24,21,0.86) 0%, rgba(16,24,21,0.58) 48%, rgba(16,24,21,0) 100%);
  pointer-events:none;
  z-index:-1;
  transition:opacity .5s var(--ease);
}
.nav.is-stuck::before{ opacity:0; }

.nav.is-stuck{
  background:rgba(16,24,21,0.96);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,0.07);
  height:68px;
}

.nav__burger{
  display:none;
  width:46px; height:46px;
  border:1px solid rgba(255,255,255,0.3);
  border-radius:50%;
  background:rgba(16,24,21,0.5);
  cursor:pointer;
  position:relative;
  z-index:210;
  padding:0;
}
.nav__burger span{
  position:absolute; left:13px; width:20px; height:1.5px;
  background:#fff; transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav__burger span:nth-child(1){ top:19px; }
.nav__burger span:nth-child(2){ top:25px; }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(0) rotate(-45deg); }

/* Rule 20: the nav must outrank the overlay so the burger X is always clickable */
body.menu-open .nav{ z-index:200; background:transparent; box-shadow:none; }
body.menu-open .nav::before{ opacity:0; }
body.menu-open .nav__cta{ opacity:0; pointer-events:none; }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0;
  z-index:150;
  background:var(--ink-2);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:6rem clamp(1.5rem,7vw,4rem) 3rem;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; }
.mobile-menu__list{ list-style:none; margin:0 0 2.4rem; padding:0; }
.mobile-menu__list li{ overflow:hidden; }
.mobile-menu__link{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem, 8vw, 3rem);
  font-weight:300;
  color:#fff; text-decoration:none;
  padding-block:0.4rem;
  transform:translateY(105%);
  transition:transform .6s var(--ease), color .35s var(--ease);
}
body.menu-open .mobile-menu__link{ transform:translateY(0); }
.mobile-menu__link:hover{ color:var(--sage); }
.mobile-menu__foot{
  border-top:1px solid rgba(255,255,255,0.14);
  padding-top:1.8rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center;
}
.mobile-menu__phone{
  font-family:var(--font-display);
  font-size:1.45rem; color:var(--sage); text-decoration:none;
}
.mobile-menu__addr{ font-size:0.85rem; color:var(--text-light-mut); margin:0; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--ink-2);
  padding-bottom:clamp(3rem, 7vh, 6rem);
}
.hero__media{
  position:absolute; inset:0;
  z-index:0;
}
.hero__media img{
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
  will-change:transform;
}
/* Scrim: opaque at the text seam, fully clear by ~58% so the kitchen reads */
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(16,24,21,0.95) 0%, rgba(16,24,21,0.86) 24%, rgba(16,24,21,0.44) 44%, rgba(16,24,21,0.00) 60%),
    linear-gradient(to top, rgba(16,24,21,0.90) 0%, rgba(16,24,21,0.62) 20%, rgba(16,24,21,0.20) 40%, rgba(16,24,21,0.00) 56%);
}
.hero__inner{
  position:relative; z-index:2;
  width:var(--wrap-wide);
  margin-inline:auto;
}
.hero__copy{ max-width:min(100%, 34em); }
.hero__eyebrow{
  color:var(--sage-lift);
  font-size:0.72rem; font-weight:500;
  letter-spacing:0.24em; text-transform:uppercase;
  margin:0 0 1.5rem;
  display:flex; align-items:center; gap:0.9rem;
}
.hero__eyebrow::before{
  content:""; width:clamp(26px,4vw,52px); height:1px;
  background:currentColor; opacity:0.75; flex:none;
}
.hero__title{
  font-size:clamp(2.6rem, 6.4vw, 5.4rem);
  line-height:1.02;
  letter-spacing:-0.025em;
  color:#fff;
  margin:0 0 1.6rem;
  text-wrap:balance;
}
.hero__title em{
  font-style:italic;
  color:var(--wheat);
}
.hero__sub{
  font-size:clamp(1.02rem, 1.6vw, 1.2rem);
  line-height:1.68;
  color:var(--text-light);
  max-width:44ch;
  margin:0 0 2.5rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; }

.hero__meta{
  position:absolute; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:0.35rem;
  text-align:right;
  max-width:100%;
}
.hero__meta span{
  font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-light-mut);
}
.hero__meta strong{
  font-family:var(--font-display); font-weight:300;
  font-size:1.05rem; color:var(--wheat); letter-spacing:0;
}

.hero__scroll{
  position:absolute; left:50%; bottom:1.4rem; z-index:2;
  transform:translateX(-50%);
  width:1px; height:44px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--sage));
  opacity:0.8;
}

/* ==========================================================================
   ASSOCIATIONS STRIP
   ========================================================================== */
.assoc{ background:var(--porcelain); border-bottom:1px solid rgba(23,33,29,0.07); }
.assoc__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1rem, 3vw, 2.4rem);
  padding-block:clamp(1.6rem, 3vw, 2.3rem);
}
.assoc__label{
  font-size:0.68rem; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--sage-deep);
  flex:0 0 auto; margin:0;
}
.assoc__list{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:0.55rem 1.5rem;
  list-style:none; margin:0; padding:0;
}
.assoc__list li{
  font-size:0.83rem; font-weight:400; letter-spacing:0.04em;
  color:var(--text-body);
  position:relative;
}
.assoc__list li + li::before{
  content:""; position:absolute; left:-0.78rem; top:50%;
  width:3px; height:3px; border-radius:50%;
  background:var(--sage); transform:translateY(-50%);
}

/* ==========================================================================
   STUDIO / HISTORY
   ========================================================================== */
.studio__grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr);
  gap:clamp(2.4rem, 6vw, 6rem);
  align-items:start;
}
.studio__title{
  font-size:clamp(2rem, 3.7vw, 3.35rem);
  color:#fff;
  text-wrap:balance;
}
.studio__title em{ font-style:italic; color:var(--sage); }
.studio__body p{ margin:0 0 1.35rem; color:var(--text-light); }
.studio__body p:last-child{ margin-bottom:0; }
.studio__quote{
  border-left:1px solid var(--sage-line);
  padding-left:1.5rem;
  margin:2rem 0 0;
  font-family:var(--font-display);
  font-size:clamp(1.15rem, 1.9vw, 1.42rem);
  font-style:italic;
  line-height:1.5;
  color:var(--wheat);
}
.studio__facts{
  margin-top:clamp(2.5rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1px;
  background:rgba(255,255,255,0.1);
  border-block:1px solid rgba(255,255,255,0.1);
}
.studio__fact{
  background:var(--ink);
  padding:clamp(1.5rem, 3vw, 2.1rem) clamp(1.2rem, 2.4vw, 1.8rem);
}
.studio__fact dt{
  font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sage); margin-bottom:0.6rem;
}
.studio__fact dd{
  margin:0;
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.28; color:#fff;
}
.studio__fact dd small{
  display:block; font-family:var(--font-body); font-size:0.82rem;
  color:var(--text-light-mut); margin-top:0.4rem; line-height:1.5;
}

/* ==========================================================================
   WORK / PORTFOLIO
   ========================================================================== */
.work__head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2rem, 4vw, 3rem);
}
.work__title{
  font-size:clamp(2rem, 3.9vw, 3.5rem);
  text-wrap:balance; max-width:16ch;
}
.work__title em{ font-style:italic; color:var(--sage-deep); }
.work__lede{ max-width:38ch; margin:0; color:var(--text-body); }

.filter-bar{
  display:flex; gap:0.5rem; flex-wrap:wrap;
  margin-bottom:clamp(1.8rem, 3vw, 2.6rem);
  padding-bottom:2px;
}
.filter-pill{
  flex-shrink:0;
  padding:0.62rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(23,33,29,0.18);
  background:transparent;
  font-family:var(--font-body);
  font-size:0.76rem; font-weight:500;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-body);
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  min-height:44px;
}
.filter-pill:hover{ border-color:var(--sage-deep); color:var(--sage-deep); }
.filter-pill.is-active{
  background:var(--sage-deep); border-color:var(--sage-deep); color:#fff;
}

.work__grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:clamp(0.9rem, 1.6vw, 1.35rem);
}
.work-card{
  position:relative;
  grid-column:span 4;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:3px;
  background:var(--ink);
  text-decoration:none;
  display:block;
}
/* Frame fills the card so a stretched grid row never leaves a dead panel */
.work-card__frame{
  position:absolute; inset:0;
  overflow:hidden;
}
.work-card__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .7s var(--ease);
}
.work-card:hover .work-card__frame img{ transform:scale(1.045); }
.work-card__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(16,24,21,0.86) 0%, rgba(16,24,21,0.28) 34%, rgba(16,24,21,0) 62%);
  pointer-events:none;
}
.work-card__cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(1rem, 2vw, 1.5rem);
  display:flex; flex-direction:column; gap:0.42rem;
  align-items:flex-start;
}
.work-card__chip{
  display:inline-block;
  max-width:100%;
  padding:0.32rem 0.7rem;
  border-radius:999px;
  background:rgba(246,242,233,0.92);
  color:var(--ink);
  font-size:0.62rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
}
.work-card__name{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(1.1rem, 1.7vw, 1.45rem);
  color:#fff; line-height:1.2; margin:0;
  max-width:100%;
}
.filter-empty{
  margin:2rem 0 0; color:var(--text-muted); font-size:0.95rem;
}
.work__note{
  margin:clamp(1.8rem,3vw,2.6rem) 0 0;
  font-size:0.85rem; color:var(--text-muted);
}

/* ==========================================================================
   SHOWROOM
   ========================================================================== */
.showroom{ position:relative; overflow:hidden; }
.showroom__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, 1fr);
  gap:clamp(2.2rem, 5vw, 5rem);
  align-items:center;
}
.showroom__title{
  font-size:clamp(2rem, 3.9vw, 3.4rem);
  color:#fff; text-wrap:balance;
}
.showroom__title em{ font-style:italic; color:var(--sage); }
.showroom__body{ margin-top:1.6rem; }
.showroom__body p{ color:var(--text-light); margin:0 0 1.3rem; }
.showroom__list{
  list-style:none; margin:1.9rem 0 2.3rem; padding:0;
  display:grid; gap:0.85rem;
}
.showroom__list li{
  position:relative; padding-left:1.6rem;
  font-size:0.96rem; color:var(--text-light);
}
.showroom__list li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:7px; height:7px; border-radius:50%;
  background:var(--sage);
}
.showroom__mosaic{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:clamp(0.7rem, 1.3vw, 1.1rem);
}
.showroom__mosaic figure{ margin:0; overflow:hidden; border-radius:3px; }
.showroom__mosaic img{ width:100%; height:100%; object-fit:cover; }
.showroom__mosaic .m1{ grid-column:1 / -1; aspect-ratio:16/9; }
.showroom__mosaic .m2{ aspect-ratio:1/1; }
.showroom__mosaic .m3{ aspect-ratio:1/1; }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.svc{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:0;
  align-items:stretch;
  border-top:1px solid rgba(23,33,29,0.1);
}
.svc:last-of-type{ border-bottom:1px solid rgba(23,33,29,0.1); }
.svc--flip .svc__media{ order:2; }
.svc__media{ overflow:hidden; min-height:clamp(260px, 34vw, 460px); }
.svc__media img{ width:100%; height:100%; object-fit:cover; }
.svc__body{
  padding:clamp(2.2rem, 4.5vw, 4rem) clamp(1.5rem, 4vw, 3.4rem);
  display:flex; flex-direction:column; justify-content:center;
}
.svc__num{
  font-family:var(--font-display); font-weight:300;
  font-size:0.95rem; letter-spacing:0.1em;
  color:var(--sage-deep); margin:0 0 1rem;
}
.svc__title{
  font-size:clamp(1.6rem, 2.9vw, 2.5rem);
  margin:0 0 1.05rem;
}
.svc__body p{ margin:0 0 1.35rem; max-width:46ch; }
.svc__tags{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:0.45rem;
}
.svc__tags li{
  font-size:0.71rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--sage-deep);
  border:1px solid rgba(53,96,79,0.3);
  border-radius:999px;
  padding:0.36rem 0.72rem;
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process__head{ max-width:52ch; margin-bottom:clamp(2.4rem, 5vw, 3.8rem); }
.process__title{ font-size:clamp(2rem, 3.9vw, 3.4rem); color:#fff; text-wrap:balance; }
.process__title em{ font-style:italic; color:var(--sage); }
.process__steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap:1px;
  background:rgba(255,255,255,0.11);
  border:1px solid rgba(255,255,255,0.11);
}
.step{
  background:var(--ink-2);
  padding:clamp(1.6rem, 2.8vw, 2.3rem) clamp(1.3rem, 2.2vw, 1.7rem);
  display:flex; flex-direction:column; gap:0.8rem;
  transition:background .5s var(--ease);
}
.step:hover{ background:var(--forest); }
.step__n{
  font-family:var(--font-display); font-weight:300;
  font-size:2.1rem; line-height:1; color:var(--sage);
}
.step__t{
  font-family:var(--font-display); font-weight:300;
  font-size:1.2rem; line-height:1.24; color:#fff; margin:0;
}
.step__d{ margin:0; font-size:0.9rem; line-height:1.6; color:var(--text-light-mut); }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team__head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem;
  margin-bottom:clamp(2.2rem, 4vw, 3.2rem);
}
.team__title{ font-size:clamp(2rem, 3.9vw, 3.4rem); text-wrap:balance; max-width:18ch; }
.team__title em{ font-style:italic; color:var(--sage-deep); }
.team__lede{ max-width:36ch; margin:0; }
.team__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap:clamp(1.2rem, 2.4vw, 2rem);
}
.member__frame{
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:3px;
  background:var(--wheat-soft);
  margin-bottom:0.95rem;
}
.member__frame img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(0.94);
  transition:transform 1s var(--ease), filter .6s var(--ease);
}
.member:hover .member__frame img{ transform:scale(1.04); filter:saturate(1.05); }
.member__name{
  font-family:var(--font-display); font-weight:300;
  font-size:1.18rem; line-height:1.2; margin:0 0 0.35rem;
  color:var(--text-dark);
}
.member__line{ margin:0; font-size:0.84rem; line-height:1.55; color:var(--text-muted); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{ position:relative; overflow:hidden; }
.cta__inner{ position:relative; z-index:2; text-align:center; }
.cta__title{
  font-size:clamp(2.2rem, 5vw, 4rem);
  color:#fff; margin:0 auto 1.3rem; max-width:18ch; text-wrap:balance;
}
.cta__title em{ font-style:italic; color:var(--wheat); }
.cta__sub{
  max-width:52ch; margin:0 auto 2.5rem; color:var(--text-light);
  font-size:clamp(1rem, 1.5vw, 1.13rem);
}
.cta__actions{ display:flex; flex-wrap:wrap; gap:0.9rem; justify-content:center; }
.cta__details{
  margin-top:clamp(2.6rem, 5vw, 4rem);
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap:1px;
  background:rgba(255,255,255,0.13);
  border:1px solid rgba(255,255,255,0.13);
  text-align:left;
}
.cta__detail{ background:var(--forest); padding:clamp(1.4rem, 2.6vw, 1.9rem); }
.cta__detail dt{
  font-size:0.67rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--sage); margin-bottom:0.55rem;
}
.cta__detail dd{
  margin:0; font-size:0.98rem; line-height:1.6; color:#fff;
}
.cta__detail dd a{
  color:#fff; text-decoration:none;
  border-bottom:1px solid var(--sage-line);
  display:inline-block;
  padding-block:0.65rem;
  min-height:44px;
}
.cta__detail dd a:hover{ border-bottom-color:var(--sage); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--ink-2); color:var(--text-light-mut); }
.footer__top{
  display:grid;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(2rem, 4vw, 3.5rem);
  padding-block:clamp(3rem, 6vw, 4.5rem);
}
.footer__logo{
  display:inline-flex; background:var(--porcelain);
  border-radius:5px; padding:8px 12px; margin-bottom:1.3rem;
}
.footer__logo img{ width:auto; height:48px; max-width:230px; object-fit:contain; }
.footer__blurb{ margin:0; font-size:0.92rem; max-width:34ch; line-height:1.7; }
.footer__h{
  font-size:0.68rem; letter-spacing:0.19em; text-transform:uppercase;
  color:var(--sage); margin:0 0 1.1rem;
}
.footer__list{ list-style:none; margin:0; padding:0; }
.footer__list a, .footer__list span{
  display:block;
  padding-block:0.65rem;
  font-size:0.9rem; color:var(--text-light-mut);
  text-decoration:none;
  transition:color .35s var(--ease);
}
.footer__list a:hover{ color:var(--sage); }
.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-block:1.6rem;
  display:flex; flex-wrap:wrap; gap:0.7rem 1.6rem;
  justify-content:space-between; align-items:center;
  font-size:0.79rem;
}
.footer__bottom p{ margin:0; }

/* ==========================================================================
   404
   ========================================================================== */
.error-section{
  min-height:100vh; min-height:100svh;
  background:var(--ink);
  display:flex; align-items:center;
  padding-block:clamp(7rem, 14vh, 10rem) clamp(4rem, 8vh, 6rem);
}
.error__code{
  font-family:var(--font-display); font-weight:300;
  font-size:clamp(6rem, 20vw, 14rem); line-height:0.86;
  color:var(--sage-glow); margin-bottom:1.2rem;
}
.error__title{ font-size:clamp(2rem, 5vw, 3.4rem); color:#fff; margin:0 0 1.2rem; }
.error__body{ color:var(--text-light); max-width:46ch; margin:0 0 2.3rem; }

/* ==========================================================================
   REVEAL ANIMATION HOOKS
   ========================================================================== */
html.js .reveal{ opacity:0; transform:translateY(26px); }
html.js .reveal-stagger > *{ opacity:0; transform:translateY(22px); }

@media (prefers-reduced-motion: reduce){
  html.js .reveal, html.js .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px){
  .work-card{ grid-column:span 6; }
  .footer__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
}

@media (max-width: 1024px){
  .nav__links{ display:none; }
  .nav__burger{ display:block; }
  .studio__grid{ grid-template-columns:minmax(0,1fr); }
  .showroom__grid{ grid-template-columns:minmax(0,1fr); }
  .svc{ grid-template-columns:minmax(0,1fr); }
  .svc--flip .svc__media{ order:0; }
  .svc__media{ min-height:0; aspect-ratio:16/10; }
}

@media (max-width: 768px){
  :root{ --nav-h:70px; }
  .hero{
    height:auto;
    min-height:100svh;
    padding-top:calc(var(--nav-h) + 3.5rem);
  }
  .hero__scrim{
    background:
      linear-gradient(to top, rgba(16,24,21,0.94) 0%, rgba(16,24,21,0.89) 42%, rgba(16,24,21,0.66) 70%, rgba(16,24,21,0.38) 100%);
  }
  .hero__media img{ object-position:center 38%; }
  .hero__copy{ max-width:100%; }
  .hero__meta{
    position:static; text-align:left;
    margin-top:2.4rem;
    flex-direction:row; flex-wrap:wrap; gap:0.3rem 1.4rem; align-items:baseline;
  }
  .hero__scroll{ display:none; }
  .work-card{ grid-column:span 12; aspect-ratio:16/10; }
  .filter-bar{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filter-bar::-webkit-scrollbar{ display:none; }
  .footer__top{ grid-template-columns:minmax(0,1fr); }
  .footer__bottom{ justify-content:flex-start; }
  .team__grid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
}

@media (max-width: 480px){
  .hero{ padding-top:calc(var(--nav-h) + 2.5rem); }
  .btn{ width:100%; justify-content:space-between; }
  .hero__actions, .cta__actions{ flex-direction:column; align-items:stretch; }
  .showroom__mosaic{ grid-template-columns:minmax(0,1fr); }
  .showroom__mosaic .m2, .showroom__mosaic .m3{ aspect-ratio:16/10; }
  .team__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}