/* ============================================================
   NOVAPLEX — architecture . interior
   Calm, editorial multi-page site. Brand from company profile.
   ============================================================ */

/* ---- Fonts: Microsoft Yi Baiti (Windows) → Open Sauce Sans (webfont) ---- */
:root{
  --cream:    #F0EEEB;
  --cream-2:  #E7E2DA;   /* alt section / cards */
  --espresso: #4A4233;   /* headings + primary text */
  --taupe:    #6A5D4B;   /* dark sections / footer */
  --taupe-d:  #5C5142;
  --copper:   #6E452A;   /* accent */
  --copper-l: #8A5E3E;
  --stone:    #595959;   /* secondary text */
  --line:     rgba(74,66,51,.16);
  --line-2:   rgba(74,66,51,.10);
  --line-lt:  rgba(240,238,235,.20);

  --sans: "Microsoft Yi Baiti","Open Sauce Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --container: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --header-h: 78px;

  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--espresso);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(64px,9vw,140px);}
.section--tight{padding-block:clamp(48px,6vw,90px);}
.dark{background:var(--taupe);color:var(--cream);}
.dark .eyebrow{color:#E4C9AE;}
.alt{background:var(--cream-2);}

/* ---------- Typography ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.72rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--copper);
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;}
.eyebrow.center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6;}
.eyebrow.center{justify-content:center;}

h1,h2,h3,h4{font-weight:400;line-height:1.1;color:inherit;letter-spacing:-.01em;}
.h-display{font-size:clamp(2.6rem,6.4vw,5.2rem);font-weight:300;line-height:1.02;letter-spacing:-.02em;}
.h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:300;letter-spacing:-.02em;}
.h2{font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:300;letter-spacing:-.015em;}
.h3{font-size:clamp(1.18rem,1.8vw,1.5rem);font-weight:500;letter-spacing:-.005em;}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:300;line-height:1.6;color:inherit;}
.muted{color:var(--stone);}
.dark .muted{color:rgba(240,238,235,.72);}
p{max-width:64ch;}
.measure{max-width:60ch;}

.section-num{
  font-size:.72rem;font-weight:600;letter-spacing:.28em;color:var(--copper);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:1.05em 1.9em;border:1px solid transparent;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.btn .arr{transition:transform .4s var(--ease);}
.btn:hover .arr{transform:translateX(5px);}
.btn--primary{background:var(--copper);color:#F6EFE8;}
.btn--primary:hover{background:var(--espresso);}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--espresso);}
.btn--ghost:hover{border-color:var(--espresso);background:var(--espresso);color:var(--cream);}
.dark .btn--ghost{border-color:var(--line-lt);color:var(--cream);}
.dark .btn--ghost:hover{background:var(--cream);color:var(--espresso);border-color:var(--cream);}

.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);
  padding-bottom:3px;border-bottom:1px solid currentColor;
  transition:gap .4s var(--ease),color .3s;
}
.link-arrow:hover{gap:1em;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:200;background:var(--cream);
  border-bottom:1px solid var(--line-2);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);
}
.brand{display:flex;align-items:center;}
.brand img{height:42px;width:auto;}
.nav{display:flex;align-items:center;gap:2.4rem;}
.nav a{
  position:relative;font-size:.78rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--espresso);padding:.4em 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--copper);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left;}
.nav a.active{color:var(--copper);}
.nav .btn{padding:.85em 1.4em;}
.nav .btn--primary{color:#F6EFE8;}
.nav .btn--primary::after{display:none;}
.nav-cta{margin-left:.6rem;}

.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:22px;position:relative;}
.nav-toggle span{position:absolute;left:0;width:100%;height:1.6px;background:var(--espresso);transition:.35s var(--ease);}
.nav-toggle span:nth-child(1){top:0;}
.nav-toggle span:nth-child(2){top:50%;transform:translateY(-50%);}
.nav-toggle span:nth-child(3){bottom:0;}
body.menu-open .nav-toggle span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
body.menu-open .nav-toggle span:nth-child(3){bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg);}

/* ---------- Hero (home) ---------- */
.hero{position:relative;min-height:calc(100vh - var(--header-h));min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;}
.hero__media,.hero__media video,.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,35,27,.34) 0%,rgba(40,35,27,.12) 38%,rgba(50,43,33,.72) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad) clamp(48px,7vw,96px);color:#F4EFE8;}
.hero h1{color:#F6F2EB;max-width:16ch;text-shadow:0 1px 30px rgba(0,0,0,.25);}
.hero h1 em{font-style:italic;font-weight:300;color:#EAD2B7;}
.hero__sub{margin-top:1.4rem;max-width:48ch;color:rgba(245,240,232,.9);font-weight:300;font-size:clamp(1rem,1.4vw,1.2rem);}
.hero__cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;}
.hero .eyebrow{color:#E7CDB1;}
.hero .btn--ghost{border-color:rgba(244,239,232,.5);color:#F4EFE8;}
.hero .btn--ghost:hover{background:#F4EFE8;color:var(--espresso);border-color:#F4EFE8;}
.hero__meta{
  position:absolute;top:clamp(20px,4vw,40px);left:0;right:0;z-index:2;
  display:flex;justify-content:space-between;
  padding-inline:var(--pad);max-width:var(--container);margin:0 auto;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,232,.78);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(36px,5vw,64px);}
.page-hero .h-display{max-width:18ch;}
.page-hero p{margin-top:1.4rem;}
.meta-row{
  display:flex;justify-content:space-between;border-bottom:1px solid var(--line);
  padding-bottom:14px;margin-bottom:clamp(40px,6vw,72px);
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);
}

/* ---------- Grids & shared blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;}
.split--top{align-items:start;}
.cols-2{columns:2;column-gap:48px;}
.cols-2 p{margin-bottom:1rem;break-inside:avoid;}

.figure{overflow:hidden;background:var(--cream-2);}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.figure:hover img{transform:scale(1.045);}
.figure--tall{aspect-ratio:3/4;}
.figure--wide{aspect-ratio:16/10;}
.figure--sq{aspect-ratio:1/1;}

/* intro statement */
.statement{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:300;line-height:1.28;letter-spacing:-.015em;max-width:24ch;}
.statement em{font-style:italic;color:var(--copper);}

/* ---------- Service preview list (home) ---------- */
.svc-list{border-top:1px solid var(--line);}
.svc-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,4vw,48px);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--ease);
}
.svc-row:hover{padding-left:12px;}
.svc-row .n{font-size:.8rem;letter-spacing:.2em;color:var(--copper);font-weight:600;}
.svc-row .t{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:300;letter-spacing:-.01em;}
.svc-row .d{color:var(--stone);max-width:42ch;font-size:.98rem;}

/* ---------- Service detail (services page) ---------- */
.service{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,80px);border-bottom:1px solid var(--line);}
.service:nth-child(even) .service__img{order:2;}
.service__num{font-size:.78rem;letter-spacing:.24em;color:var(--copper);font-weight:600;}
.service__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream-2);}
.service__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);}
.service:hover .service__img img{transform:scale(1.04);}
.service h3{margin:.7rem 0 .9rem;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:300;}

/* ---------- Category chips ---------- */
.cats{display:flex;flex-wrap:wrap;gap:10px;}
.cat{
  font-size:.82rem;letter-spacing:.04em;color:var(--espresso);
  border:1px solid var(--line);padding:.6em 1.1em;border-radius:999px;background:transparent;
  transition:.35s var(--ease);
}
.cat:hover{border-color:var(--copper);color:var(--copper);}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;}
.gallery .figure{grid-column:span 4;aspect-ratio:1/1;}
.gallery .figure.lg{grid-column:span 6;aspect-ratio:4/3;}
.gallery .figure.wide{grid-column:span 8;aspect-ratio:16/9;}

/* ---------- Timeline (story) ---------- */
.timeline{border-top:1px solid var(--line);}
.tl-row{
  display:grid;grid-template-columns:160px 1fr;gap:clamp(16px,4vw,48px);
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);
}
.tl-year{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;color:var(--copper);letter-spacing:-.01em;}
.tl-body{max-width:54ch;color:var(--espresso);}

/* ---------- Founder ---------- */
.founder{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center;}
.founder__img{aspect-ratio:4/5;overflow:hidden;background:var(--cream-2);}
.founder__img img{width:100%;height:100%;object-fit:cover;}
.founder__role{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);font-weight:600;}
.founder__name{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:300;margin:.3rem 0 1.4rem;}

/* ---------- Stats / values ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);}
.value{border-top:1px solid var(--line);padding-top:22px;}
.value .n{font-size:.78rem;letter-spacing:.24em;color:var(--copper);font-weight:600;}
.value h3{margin:.8rem 0 .6rem;}
.value p{color:var(--stone);font-size:.98rem;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 48px;max-width:680px;}
.contact-item{border-top:1px solid var(--line);padding-top:18px;}
.contact-item .lbl{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);font-weight:600;}
.contact-item .val{font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:300;margin-top:.5rem;}
.contact-item a.val{transition:color .3s;}
.contact-item a.val:hover{color:var(--copper);}
.channels{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,44px);}

/* ---------- CTA band ---------- */
.cta-band{text-align:center;}
.cta-band .h1{margin:0 auto;max-width:18ch;}
.cta-band .btns{margin-top:2.2rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}

/* ---------- Footer ---------- */
.site-footer{background:var(--taupe);color:var(--cream);padding-block:clamp(56px,7vw,90px) 28px;}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line-lt);}
.footer-brand img{height:54px;width:auto;margin-bottom:1.2rem;}
.footer-brand p{color:rgba(240,238,235,.74);font-weight:300;max-width:32ch;font-size:.96rem;}
.footer-col h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#E4C9AE;font-weight:600;margin-bottom:1.1rem;}
.footer-col li{margin-bottom:.7rem;}
.footer-col a,.footer-col span{color:rgba(240,238,235,.82);font-weight:300;font-size:.96rem;transition:color .3s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(240,238,235,.55);}

/* ---------- Reveal on scroll (progressive enhancement) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1s var(--ease);}
.js [data-reveal].d1{transition-delay:.08s;}
.js [data-reveal].d2{transition-delay:.16s;}
.js [data-reveal].d3{transition-delay:.24s;}
/* hero entrance */
.hero__inner>*{animation:rise 1.1s var(--ease) both;}
.hero__inner>*:nth-child(2){animation-delay:.12s;}
.hero__inner>*:nth-child(3){animation-delay:.24s;}
.hero__inner>*:nth-child(4){animation-delay:.36s;}
@keyframes rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  :root{--header-h:64px;}
  .nav{
    position:fixed;inset:0;top:0;background:var(--cream);
    flex-direction:column;justify-content:center;gap:1.6rem;
    transform:translateX(100%);transition:transform .5s var(--ease);z-index:150;
  }
  body.menu-open .nav{transform:translateX(0);}
  .nav a{font-size:1.1rem;letter-spacing:.12em;}
  .nav .btn{margin-top:1rem;}
  .nav-toggle{display:block;z-index:200;}
  .split,.service,.founder,.founder__img{grid-template-columns:1fr;}
  .service:nth-child(even) .service__img{order:0;}
  .cols-2{columns:1;}
  .grid-3{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .gallery .figure,.gallery .figure.lg,.gallery .figure.wide{grid-column:span 6;aspect-ratio:1/1;}
  .tl-row{grid-template-columns:1fr;gap:6px;}
  .svc-row{grid-template-columns:auto 1fr;}
  .svc-row .d{display:none;}
}
@media (max-width:540px){
  .footer-top{grid-template-columns:1fr;}
  .hero__cta .btn{flex:1 1 auto;justify-content:center;}
  .gallery .figure,.gallery .figure.lg,.gallery .figure.wide{grid-column:span 12;}
  .meta-row{font-size:.6rem;letter-spacing:.16em;white-space:nowrap;}
  .meta-row span:last-child{display:none;}
  .footer-bottom{font-size:.6rem;letter-spacing:.12em;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .js [data-reveal]{opacity:1!important;transform:none!important;}
}