/* =========================================================
   GCA STUDIO — Architecture & Interior Design
   Design system + layout
   ========================================================= */

:root{
  --bone:#F4F0E7;
  --bone-2:#EAE3D5;
  --paper:#FBF9F3;
  --ink:#171812;
  --ink-soft:#3A3B32;
  --forest:#233026;
  --forest-2:#2E4234;
  --brass:#B4915A;
  --brass-2:#C6A876;
  --muted:#7A776B;
  --line:rgba(23,24,18,.14);
  --line-light:rgba(244,240,231,.22);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wrap:1320px;
  --gut:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bone);
  color:var(--ink);
  line-height:1.6;
  font-weight:300;
  font-size:17px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--forest);color:var(--bone)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.04;letter-spacing:.01em}
.display{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2.9rem,8.5vw,7.5rem);
  line-height:.98;
  letter-spacing:-.01em;
}
.h-xl{font-size:clamp(2.2rem,5.5vw,4.6rem);font-weight:300;line-height:1.02}
.h-lg{font-size:clamp(1.8rem,4vw,3.1rem);font-weight:400}
.h-md{font-size:clamp(1.4rem,2.4vw,2.1rem);font-weight:400}
.kicker{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brass);
}
.lede{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:300;line-height:1.5;color:var(--ink-soft)}
p{font-weight:300}
p+p{margin-top:1.1em}
em{font-family:var(--serif);font-style:italic}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(70px,11vw,160px)}
.section--tight{padding-block:clamp(50px,7vw,90px)}
.bg-ink{background:var(--ink);color:var(--bone)}
.bg-forest{background:var(--forest);color:var(--bone)}
.bg-paper{background:var(--paper)}
.center{text-align:center}
.grid{display:grid;gap:clamp(22px,3vw,46px)}
hr.rule{border:none;height:1px;background:var(--line);margin:0}

/* ---------- reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.12s}
[data-reveal][data-delay="2"]{transition-delay:.24s}
[data-reveal][data-delay="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  color:var(--bone);
  transition:background .5s var(--ease),padding .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease);
}
.header.scrolled{
  background:var(--bone);color:var(--ink);
  padding-block:14px;box-shadow:0 1px 0 var(--line);
}
.header.light{color:var(--ink)} /* for pages with light hero */
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em;line-height:0}
.brand b{font-weight:500}
.brand span{font-family:var(--sans);font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;opacity:.8}
.brand-logo{height:42px;width:auto;display:block}
.brand-logo--dark{display:none}
.header.scrolled .brand-logo--light{display:none}
.header.scrolled .brand-logo--dark{display:block}
.footer-logo{display:inline-block;line-height:0}
.footer-logo img{height:54px;width:auto;display:block}
@media(max-width:820px){.brand-logo{height:30px}.footer-logo img{height:44px}}
.nav{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.6rem)}
.nav a{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
.nav a:hover::after,.nav a.active::after{width:100%}
.lang{display:flex;align-items:center;gap:.35rem;font-size:.74rem;letter-spacing:.12em;font-weight:500}
.lang button{opacity:.5;transition:opacity .3s;padding:2px}
.lang button.on{opacity:1}
.lang i{opacity:.35;font-style:normal}
.nav-right{display:flex;align-items:center;gap:clamp(1.2rem,2vw,2rem)}

.burger{display:none;width:30px;height:16px;position:relative}
.burger span{position:absolute;left:0;height:1.5px;width:100%;background:currentColor;transition:.4s var(--ease)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){bottom:0}
.menu-open .burger span:nth-child(1){top:7px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){bottom:7px;transform:rotate(-45deg)}

/* mobile menu */
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--forest);color:var(--bone);
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:0 var(--gut);
  transform:translateY(-100%);transition:transform .7s var(--ease);
}
.menu-open .mobile-nav{transform:none}
.mobile-nav a{font-family:var(--serif);font-size:clamp(2rem,9vw,3.3rem);font-weight:300}
.mobile-nav .m-contact{margin-top:2rem;font-family:var(--sans);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;
  padding:16px 30px;border:1px solid currentColor;border-radius:2px;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.btn:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.btn--solid{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--solid:hover{background:var(--brass);border-color:var(--brass);color:var(--ink)}
.link-arrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;color:var(--brass);
}
.link-arrow svg{transition:transform .4s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100svh;min-height:600px;display:flex;align-items:flex-end;overflow:hidden;color:var(--bone)}
.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(15,17,11,.35) 0%,rgba(15,17,11,.12) 40%,rgba(15,17,11,.72) 100%)}
.hero__inner{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(48px,7vw,90px)}
.hero .kicker{color:var(--brass-2);margin-bottom:1.4rem}
.hero__title{max-width:16ch}
.hero__sub{margin-top:1.6rem;max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;color:rgba(244,240,231,.9)}
.scroll-cue{position:absolute;right:var(--gut);bottom:clamp(48px,7vw,90px);z-index:2;display:flex;align-items:center;gap:.8rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.scroll-cue .bar{width:1px;height:54px;background:linear-gradient(var(--brass-2),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* page hero (interior pages) */
.page-hero{position:relative;min-height:66vh;display:flex;align-items:flex-end;color:var(--bone);overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,11,.3),rgba(15,17,11,.7))}
.page-hero__inner{position:relative;z-index:2;padding:0 var(--gut) clamp(40px,6vw,80px);width:100%}

/* =========================================================
   INTRO / MANIFESTO
   ========================================================= */
.manifesto{max-width:60rem}
.manifesto p{font-family:var(--serif);font-size:clamp(1.6rem,3.4vw,2.9rem);font-weight:300;line-height:1.22;letter-spacing:.005em}
.manifesto .brass{color:var(--brass)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.two-col--text{grid-template-columns:.9fr 1.1fr}
@media(max-width:820px){.two-col,.two-col--text{grid-template-columns:1fr}}

.stat-row{display:flex;flex-wrap:wrap;gap:clamp(30px,6vw,80px)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.4rem);font-weight:400;line-height:1}
.stat span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* =========================================================
   WORK / PROJECTS
   ========================================================= */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,64px)}
.section-head .kicker{margin-bottom:1rem}

.work-list{display:flex;flex-direction:column;gap:clamp(60px,9vw,150px)}
.work-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.work-item:nth-child(even) .work-item__media{order:2}
.work-item__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.work-item__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.work-item:hover .work-item__media img{transform:scale(1.05)}
.work-item__num{font-family:var(--serif);font-size:1rem;color:var(--brass);letter-spacing:.1em}
.work-item h3{font-size:clamp(2rem,3.6vw,3.2rem);margin:.5rem 0 .2rem}
.work-item .meta{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:1.3rem}
.work-item p{max-width:42ch;margin-bottom:1.6rem;color:var(--ink-soft)}
@media(max-width:820px){
  .work-item{grid-template-columns:1fr}
  .work-item:nth-child(even) .work-item__media{order:0}
}

/* project cards (index) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,30px)}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;aspect-ratio:3/4;color:var(--bone);display:flex;align-items:flex-end}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,17,11,0) 40%,rgba(15,17,11,.78))}
.card:hover img{transform:scale(1.06)}
.card__body{position:relative;z-index:2;padding:clamp(20px,2.4vw,34px)}
.card__body .meta{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-2);margin-bottom:.5rem}
.card__body h3{font-size:clamp(1.5rem,2.2vw,2rem)}

/* =========================================================
   REEL / FILM
   ========================================================= */
.reel{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,80px);align-items:center}
@media(max-width:820px){.reel{grid-template-columns:1fr}}
.reel__player{position:relative;max-width:380px;margin-inline:auto;width:100%;border-radius:4px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.reel__player video{width:100%;display:block;aspect-ratio:760/1360;object-fit:cover;background:#000}
.reel__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,17,11,.28);transition:opacity .4s}
.reel__play svg{width:74px;height:74px}
.reel__player.playing .reel__play{opacity:0;pointer-events:none}

/* =========================================================
   GALLERY (project pages)
   ========================================================= */
.gallery{columns:2;column-gap:clamp(14px,2vw,26px)}
@media(max-width:700px){.gallery{columns:1}}
.gallery figure{break-inside:avoid;margin-bottom:clamp(14px,2vw,26px);overflow:hidden;cursor:zoom-in}
.gallery img{width:100%;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.full-img{width:100%;aspect-ratio:16/9;object-fit:cover}

.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
@media(max-width:760px){.fact-grid{grid-template-columns:1fr 1fr}}
.fact .k{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem}
.fact .v{font-family:var(--serif);font-size:1.35rem;line-height:1.2}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,13,9,.94);display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;pointer-events:none;transition:opacity .4s}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}
.lightbox .lb-close{position:absolute;top:24px;right:30px;color:var(--bone);font-size:2rem;line-height:1}

/* =========================================================
   SERVICES
   ========================================================= */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:820px){.svc{grid-template-columns:1fr}}
.svc__item{background:var(--bone);padding:clamp(30px,3.4vw,54px)}
.bg-ink .svc,.bg-forest .svc{background:var(--line-light)}
.bg-ink .svc__item,.bg-forest .svc__item{background:transparent}
.svc__item .no{font-family:var(--serif);font-size:1rem;color:var(--brass);margin-bottom:1.6rem}
.svc__item h3{font-size:1.5rem;margin-bottom:.8rem}
.svc__item p{color:var(--ink-soft);font-size:.98rem}
.bg-ink .svc__item p,.bg-forest .svc__item p{color:rgba(244,240,231,.72)}

.approach{counter-reset:step;display:grid;gap:1px;background:var(--line-light)}
.approach__row{padding:clamp(26px,3vw,44px) 0;display:grid;grid-template-columns:auto 1fr 2fr;gap:clamp(20px,4vw,60px);align-items:baseline}
@media(max-width:760px){.approach__row{grid-template-columns:1fr}}
.approach__row .n{font-family:var(--serif);color:var(--brass);font-size:1.2rem}
.approach__row h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.approach__row p{color:rgba(244,240,231,.75)}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.field{margin-bottom:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{
  font-family:var(--sans);font-size:1rem;font-weight:300;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--line);padding:10px 0;
  transition:border-color .4s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass)}
.contact-info dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:.4rem}
.contact-info dd{font-size:1.15rem;font-weight:300;margin-bottom:1.8rem}
.contact-info a:hover{color:var(--brass)}

.footer{background:var(--ink);color:var(--bone);padding:clamp(60px,7vw,100px) var(--gut) 36px}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-bottom:clamp(40px,5vw,70px);border-bottom:1px solid var(--line-light)}
@media(max-width:760px){.footer__top{grid-template-columns:1fr;gap:40px}}
.footer .brand{font-size:2.2rem}
.footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-family:var(--sans);font-weight:500;margin-bottom:1.4rem}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.footer ul a{font-size:.95rem;color:rgba(244,240,231,.78)}
.footer ul a:hover{color:var(--bone)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:30px;font-size:.72rem;letter-spacing:.08em;color:rgba(244,240,231,.5)}
.footer__bottom a:hover{color:var(--brass-2)}

/* utilities */
.mt-s{margin-top:1rem}.mt-m{margin-top:2rem}.mt-l{margin-top:3rem}
.maxw{max-width:60ch}
.nowrap{white-space:nowrap}
@media(max-width:820px){
  .nav-desktop{display:none}
  .burger{display:block}
}