:root{
  --paper:#F7F3EC;      /* warm limestone */
  --paper-2:#EFEAE0;
  --ink:#211F1A;        /* warm charcoal */
  --muted:#726B5C;
  --line:#E4DDCF;
  --dark:#1C1B16;       /* buttons / footer */
  --brass:#A7864E;      /* restrained accent */
  --cream:#F3EEE4;
  --font-display:'Marcellus', Georgia, serif;
  --font-sans:'Jost', system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--dark);overscroll-behavior:none}
body{font-family:var(--font-sans);color:var(--ink);background:var(--dark);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 40px}

/* labels + type */
.label{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--brass);font-weight:400}
.label--muted{color:var(--muted)}
.eyebrow{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:400}
.eyebrow--light{color:rgba(255,255,255,.85)}
.h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.12;letter-spacing:.01em}
.lead{font-size:1.05rem;color:#4a463d;max-width:46ch;margin-top:1.2rem}
.link{display:inline-block;margin-top:1.6rem;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:4px}

/* buttons */
.btn{display:inline-block;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;padding:14px 26px;transition:.25s;cursor:pointer;border:1px solid transparent;white-space:nowrap;text-align:center}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:#000}
.btn--ghost{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn--ghost:hover{background:#fff;color:var(--ink)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(247,243,236,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(0,0,0,.06);padding-top:env(safe-area-inset-top)}
.nav__inner{position:relative;max-width:1320px;margin:0 auto;padding:0 40px;height:82px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.nav__burger{display:none;background:none;border:0;padding:4px;color:var(--ink);cursor:pointer;line-height:0}
.nav__logo img{height:48px;width:auto;display:block}
.nav__links{display:flex;gap:34px}
.nav__links a{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:400;opacity:.85;transition:.2s}
.nav__links a:hover{opacity:1;color:var(--brass)}
.nav__actions{display:flex;align-items:center;gap:20px}
.nav__lang{background:none;border:0;padding:0;font-family:var(--font-sans);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);cursor:pointer;opacity:.85;display:flex;align-items:center;gap:6px;transition:.2s}
.nav__lang:hover{opacity:1;color:var(--brass)}
.chev{opacity:.75;display:block}
.nav__icon{color:var(--ink);opacity:.82;display:flex;align-items:center;gap:9px;transition:.2s}
.nav__icon:hover{opacity:1;color:#25a24a}
.nav__wa-text{display:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}

/* hero */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;background:#3a3a34 url('../img/hero.jpg') center/cover no-repeat;transform:scale(1.03)}
.hero__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,12,.42) 0%,rgba(18,16,12,.06) 30%,rgba(18,16,12,.48) 64%,rgba(18,16,12,.86) 100%)}
.hero__content{position:relative;z-index:2;padding:0 40px 12vh;max-width:1200px;margin:0 auto;width:100%}
.hero__content::before{content:"";position:absolute;left:8px;right:-40px;bottom:-40px;top:-24px;z-index:-1;background:radial-gradient(80% 130% at 26% 82%,rgba(10,8,5,.6) 0%,rgba(10,8,5,0) 66%);filter:blur(6px)}
.hero__title{font-family:var(--font-display);font-weight:400;color:#fff;font-size:clamp(2.4rem,5.4vw,4.9rem);line-height:1.08;margin:1.1rem 0 2rem;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero__scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.8);font-size:26px;line-height:1}

/* sections */
.section{padding:110px 0}
.section__head{margin-bottom:52px}
.section__head .label{display:block;margin-bottom:16px}

/* intro */
.intro{background:var(--paper)}
.intro__grid{display:grid;grid-template-columns:1fr 2fr;gap:40px;align-items:start}
.intro__label .label{padding-top:10px;border-top:1px solid var(--line);display:inline-block;padding-right:60px}

/* projects */
.projects{background:var(--paper-2)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.card__media{aspect-ratio:3/2;overflow:hidden;background:#ddd6c8}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .card__media img{transform:scale(1.05)}
.card__name{font-family:var(--font-display);font-weight:400;font-size:1.5rem;margin:20px 0 6px}
.card__meta{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* footer */
.footer{background:var(--dark);color:var(--cream);padding:80px 0 0}
.footer a{color:inherit;opacity:.82;transition:.2s}
.footer a:hover{opacity:1;color:#fff}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer__logo{height:52px;filter:invert(1) brightness(2);margin-bottom:20px}
.footer__tag{font-family:var(--font-display);font-size:1.25rem;color:#e9e3d6;max-width:22ch;line-height:1.3}
.news{display:flex;align-items:stretch;margin-top:18px;max-width:400px;border:1px solid rgba(255,255,255,.22)}
.news input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:0 16px;font-family:var(--font-sans);font-size:.9rem;outline:none}
.news input::placeholder{color:rgba(255,255,255,.5)}
.news .btn{flex-shrink:0;padding:12px 24px;letter-spacing:.16em}
.footer__links{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding:52px 0 60px}
.footer__col .label{display:block;margin-bottom:20px}
.footer__col ul{list-style:none}
.footer__col li{font-size:.93rem;color:#c9c2b2;margin-bottom:13px;line-height:1.55}
.footer__base{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:22px 40px;border-top:1px solid rgba(255,255,255,.12)}
.footer__base span,.footer__legal a{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* responsive */
/* mobile menu overlay */
.mobmenu{position:fixed;inset:0;z-index:100;background:var(--paper);display:flex;flex-direction:column;padding:18px 26px 40px;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);visibility:hidden}
body.menu-open{overflow:hidden}
body.menu-open .mobmenu{transform:translateX(0);visibility:visible}
.mobmenu__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid var(--line)}
.mobmenu__logo{height:40px}
.mobmenu__close{background:none;border:0;color:var(--ink);cursor:pointer;padding:4px;line-height:0}
.mobmenu__links{display:flex;flex-direction:column;padding:28px 0;flex:1}
.mobmenu__links a{font-family:var(--font-display);font-size:1.75rem;color:var(--ink);padding:12px 0}
.mobmenu__foot{display:flex;flex-direction:column;gap:20px}
.mobmenu__lang{align-self:flex-start;background:none;border:0;font-family:var(--font-sans);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 0}
.mobmenu__cta{padding:16px}
@media(min-width:901px){.mobmenu{display:none}}

@media(max-width:900px){
  .nav__inner{height:66px;gap:14px}
  .nav__links{display:none}
  .nav__burger{display:block}
  .nav__logo{margin-right:auto}
  .nav__logo img{height:38px}
  .nav__lang{display:none}
  .nav__actions{gap:0}
  .nav__actions .btn{display:none}
  .nav__wa-text{display:inline}
  .intro__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;gap:28px}
  .footer__top{grid-template-columns:1fr;gap:36px}
  .footer__links{grid-template-columns:1fr 1fr;gap:32px}
  .footer__base{padding-left:24px;padding-right:24px}
  .container,.nav__inner,.hero__content{padding-left:24px;padding-right:24px}
}