/* ============================================
   NEW WOOD MALL — shared stylesheet
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --charcoal:#292929;
  --dark-wood:#3B2920;
  --wood-brown:#7A5235;
  --cream:#F7F3EA;
  --white:#FFFFFF;
  --beige:#E8DDCC;
  --green:#6F7D45;
  --yellow:#C9A227;
  --red:#A13D2B;

  --font-head:'Fraunces', 'Georgia', serif;
  --font-body:'Work Sans', -apple-system, sans-serif;

  --max-w:1280px;
  --pad:6vw;

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

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  color:var(--dark-wood);
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; max-width:62ch; }
.container{ max-width:var(--max-w); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }
::selection{ background:var(--wood-brown); color:var(--white); }
:focus-visible{ outline:2px solid var(--wood-brown); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:1em 2em;
  font-family:var(--font-body); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--wood-brown); color:var(--white); }
.btn-primary:hover{ background:var(--dark-wood); }
.btn-outline-light{ border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-outline-light:hover{ background:var(--white); color:var(--dark-wood); }
.btn-outline-dark{ border-color:rgba(41,41,41,.3); color:var(--charcoal); }
.btn-outline-dark:hover{ background:var(--charcoal); color:var(--white); border-color:var(--charcoal); }
.btn-ghost{ color:var(--dark-wood); padding:0; letter-spacing:.06em; border-bottom:1px solid var(--wood-brown); border-radius:0; }
.btn-ghost:hover{ color:var(--wood-brown); }

.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.14em;
  color:var(--wood-brown); text-transform:uppercase; margin-bottom:.9em;
}

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(247,243,234,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(41,41,41,.08);
  transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:20px; padding-bottom:20px;
  transition:padding .3s var(--ease);
}
.site-header.scrolled .container{ padding-top:10px; padding-bottom:10px; }
.site-header.scrolled{ box-shadow:0 6px 24px rgba(41,41,41,.08); }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:52px; width:auto; transition:height .3s var(--ease); }
.site-header.scrolled .brand img{ height:40px; }
.brand-text{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; letter-spacing:.02em; color:var(--dark-wood); }

.main-nav{ display:flex; align-items:center; gap:2.6rem; }
.main-nav a{
  font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--charcoal);
  position:relative; padding:.2em 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--wood-brown);
  transition:width .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--dark-wood); font-weight:600; }
.header-cta{ display:flex; align-items:center; gap:1.8rem; }

.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:1100;
}
.hamburger span{ width:24px; height:2px; background:var(--charcoal); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(78vw,340px); background:var(--cream);
  transform:translateX(100%); transition:transform .4s var(--ease);
  z-index:1050; padding:100px 2.2rem 2rem; box-shadow:-8px 0 30px rgba(0,0,0,.12);
  display:flex; flex-direction:column; gap:1.9rem;
}
.mobile-nav.open{ transform:translateX(0); }
.mobile-nav a{ font-family:var(--font-head); font-size:1.5rem; color:var(--dark-wood); }
.nav-scrim{
  position:fixed; inset:0; background:rgba(41,41,41,.4); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); z-index:1040;
}
.nav-scrim.open{ opacity:1; pointer-events:auto; }

@media (max-width:920px){
  .main-nav{ display:none; }
  .header-cta .btn{ display:none; }
  .hamburger{ display:flex; }
}

/* ============ HERO ============ */
.hero{
  min-height:100svh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  position:relative; color:var(--white);
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,17,14,.35) 0%, rgba(20,17,14,.35) 40%, rgba(20,17,14,.78) 100%);
}
.hero-inner{ position:relative; z-index:2; padding-bottom:6.5vh; width:100%; }
.hero-brand{ font-size:.85rem; letter-spacing:.28em; text-transform:uppercase; opacity:.85; margin-bottom:1.4rem; }
.hero h1{ color:var(--white); font-size:clamp(2.4rem, 6vw, 4.6rem); max-width:16ch; margin-bottom:.4em; }
.hero .lede{ max-width:46ch; font-size:1.05rem; color:rgba(255,255,255,.88); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin:1.8rem 0 2.4rem; }
.hero-location{ font-size:.82rem; letter-spacing:.03em; opacity:.75; display:flex; align-items:center; gap:.5em; }
.scroll-cue{
  position:absolute; bottom:28px; left:var(--pad); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--white); opacity:.75;
}
.scroll-cue .line{ width:1px; height:38px; background:rgba(255,255,255,.6); overflow:hidden; }
.scroll-cue .line::after{ content:''; display:block; width:100%; height:50%; background:#fff; animation:scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown{ 0%{ transform:translateY(-100%);} 100%{ transform:translateY(200%);} }

/* generic page hero (About / Gallery / Contact) */
.page-hero{
  padding:calc(120px + 6vh) var(--pad) 6vh;
  background:var(--dark-wood); color:var(--cream); position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; mix-blend-mode:luminosity;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem,5vw,3.4rem); max-width:20ch; }
.page-hero p{ color:rgba(247,243,234,.8); font-size:1.05rem; max-width:52ch; }

/* ============ SECTION SPACING ============ */
.section{ padding:8vh var(--pad); }
.section-narrow{ max-width:var(--max-w); margin:0 auto; }
.section-head{ max-width:640px; margin-bottom:3.2rem; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.section-dark{ background:var(--charcoal); color:var(--beige); }
.section-dark h2, .section-dark h3{ color:var(--white); }
.section-wood{ background:var(--dark-wood); color:var(--beige); }
.section-beige{ background:var(--beige); }

/* ============ INTRO SPLIT ============ */
.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:5vw; align-items:center;
  max-width:var(--max-w); margin:0 auto; padding:8vh var(--pad);
}
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-img{ border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(41,29,22,.35); aspect-ratio:4/5; }
.split-img img{ width:100%; height:100%; object-fit:cover; }
.split-body h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); }
@media (max-width:900px){
  .split, .split.reverse{ grid-template-columns:1fr; direction:ltr; }
  .split-img{ aspect-ratio:16/10; }
}

/* ============ SERVICE CARDS ============ */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.service-card{
  background:var(--white); border-radius:8px; overflow:hidden;
  box-shadow:0 14px 34px -18px rgba(41,29,22,.28);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.service-card:hover{ transform:translateY(-8px); box-shadow:0 26px 46px -18px rgba(41,29,22,.4); }
.service-card .img-wrap{ aspect-ratio:5/4; overflow:hidden; }
.service-card .img-wrap img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.service-card:hover .img-wrap img{ transform:scale(1.08); }
.service-card .card-body{ padding:1.6rem 1.5rem 1.9rem; position:relative; }
.service-card .num{ font-family:var(--font-head); font-size:.85rem; color:var(--wood-brown); font-weight:600; margin-bottom:.5em; display:block; }
.service-card h3{ font-size:1.18rem; margin-bottom:.4em; }
.service-card p{ font-size:.92rem; color:#5c5346; margin-bottom:0; }
.card-arrow{
  position:absolute; right:1.4rem; top:1.7rem; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(122,82,53,.35); display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  color:var(--wood-brown);
}
.service-card:hover .card-arrow{ transform:translate(4px,-4px); background:var(--wood-brown); border-color:var(--wood-brown); color:var(--white); }
@media (max-width:1100px){ .card-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .card-grid{ grid-template-columns:1fr;} }

/* ============ APPLICATIONS GRID ============ */
.apps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.apps-grid .app-tile:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.app-tile{
  position:relative; border-radius:6px; overflow:hidden; aspect-ratio:1/1; color:var(--white);
}
.apps-grid .app-tile:nth-child(1){ aspect-ratio:auto; }
.app-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); position:absolute; inset:0; }
.app-tile:hover img{ transform:scale(1.06); }
.app-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,17,14,0) 40%,rgba(20,17,14,.82) 100%); }
.app-tile-label{ position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem; z-index:2; }
.app-tile-label h4{ color:var(--white); font-size:1.02rem; margin-bottom:.15em; }
.app-tile-label span{ font-size:.8rem; color:rgba(255,255,255,.75); }
@media (max-width:900px){
  .apps-grid{ grid-template-columns:repeat(2,1fr); }
  .apps-grid .app-tile:nth-child(1){ grid-column:span 2; grid-row:auto; aspect-ratio:2/1; }
}
@media (max-width:560px){
  .apps-grid{ grid-template-columns:1fr; }
  .apps-grid .app-tile:nth-child(1){ grid-column:span 1; aspect-ratio:4/3; }
}

/* ============ WHY US ============ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid rgba(232,221,204,.18); }
.why-block{ padding:2.6rem 1.6rem 2.6rem 0; border-right:1px solid rgba(232,221,204,.18); }
.why-block:last-child{ border-right:none; }
.why-num{ font-family:var(--font-head); font-size:1rem; color:var(--yellow); display:block; margin-bottom:1.2em; }
.why-block h3{ font-size:1.08rem; letter-spacing:.02em; }
.why-block p{ font-size:.92rem; color:rgba(232,221,204,.75); margin-bottom:0; }
@media (max-width:900px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .why-block{ border-bottom:1px solid rgba(232,221,204,.18); padding-right:1.6rem; }
}
@media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } .why-block{ border-right:none; } }

/* ============ MASONRY / GALLERY PREVIEW ============ */
.masonry-preview{ column-count:3; column-gap:1.2rem; }
.masonry-preview figure{ margin:0 0 1.2rem; border-radius:6px; overflow:hidden; break-inside:avoid; }
.masonry-preview img{ width:100%; display:block; transition:transform .6s var(--ease); }
.masonry-preview figure:hover img{ transform:scale(1.05); }
@media (max-width:800px){ .masonry-preview{ column-count:2; } }

/* ============ FINAL CTA ============ */
.final-cta{
  background:var(--charcoal); color:var(--white); text-align:center; padding:11vh var(--pad);
}
.final-cta h2{ color:var(--white); font-size:clamp(2rem,4vw,3rem); max-width:18ch; margin:0 auto .5em; }
.final-cta p{ color:rgba(247,243,234,.75); margin:0 auto 2.2rem; }
.final-cta .actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--dark-wood); color:rgba(247,243,234,.8); padding:7vh var(--pad) 2.4rem; }
.footer-grid{ max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid rgba(247,243,234,.14); }
.footer-brand img{ height:46px; margin-bottom:1.1rem; }
.footer-brand p{ font-size:.9rem; max-width:32ch; color:rgba(247,243,234,.65); }
.footer h5{ color:var(--white); font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-links a{ font-size:.92rem; color:rgba(247,243,234,.75); transition:color .3s; }
.footer-links a:hover{ color:var(--yellow); }
.footer-contact p{ font-size:.92rem; margin-bottom:.6rem; color:rgba(247,243,234,.75); }
.footer-bottom{ max-width:var(--max-w); margin:0 auto; padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.8rem; color:rgba(247,243,234,.55); }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr; gap:2.2rem; } .footer-bottom{ flex-direction:column; } }

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .3s var(--ease);
}
.wa-float:hover{ transform:scale(1.08); }
.wa-tooltip{
  position:absolute; right:70px; bottom:16px; background:var(--charcoal); color:var(--white);
  padding:.5em 1em; border-radius:5px; font-size:.82rem; white-space:nowrap;
  opacity:0; pointer-events:none; transform:translateX(6px); transition:opacity .3s, transform .3s;
}
.wa-float:hover .wa-tooltip{ opacity:1; transform:translateX(0); }

/* ============ MAP ============ */
.map-section{ padding:0; }
.map-frame{ width:100%; height:460px; border:0; filter:grayscale(.25) contrast(1.05); display:block; }
.map-cta-bar{
  background:var(--wood-brown); color:var(--white); padding:1.6rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.map-cta-bar p{ margin:0; color:var(--white); }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:5vw; max-width:var(--max-w); margin:0 auto; padding:8vh var(--pad); }
.contact-info h3{ font-size:1.6rem; }
.info-line{ margin-bottom:1.7rem; }
.info-line span.label{ display:block; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wood-brown); margin-bottom:.35em; }
.info-line a, .info-line div.value{ font-size:1.02rem; color:var(--charcoal); }
.form-field{ margin-bottom:1.3rem; }
.form-field label{ display:block; font-size:.82rem; margin-bottom:.5em; color:var(--dark-wood); font-weight:500; }
.form-field input, .form-field textarea{
  width:100%; padding:.9em 1em; font-family:var(--font-body); font-size:.96rem;
  border:1px solid rgba(41,41,41,.18); border-radius:5px; background:var(--white); color:var(--charcoal);
  transition:border-color .3s;
}
.form-field input:focus, .form-field textarea:focus{ border-color:var(--wood-brown); outline:none; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
.form-note{ font-size:.82rem; color:#6b6255; margin-top:.6rem; }
.form-success{ display:none; background:var(--beige); border-radius:6px; padding:1.2rem 1.4rem; font-size:.92rem; color:var(--dark-wood); margin-top:1rem; }
.form-success.show{ display:block; }

/* ============ GALLERY PAGE ============ */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:3rem; }
.filter-btn{
  padding:.6em 1.3em; border:1px solid rgba(41,41,41,.2); border-radius:30px; background:transparent;
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  cursor:pointer; transition:all .3s var(--ease); color:var(--charcoal);
}
.filter-btn:hover{ border-color:var(--wood-brown); color:var(--wood-brown); }
.filter-btn.active{ background:var(--charcoal); border-color:var(--charcoal); color:var(--white); }
.gallery-masonry{ column-count:3; column-gap:1.1rem; }
.gallery-item{ margin:0 0 1.1rem; break-inside:avoid; border-radius:6px; overflow:hidden; cursor:pointer; position:relative; display:none; }
.gallery-item.show{ display:block; }
.gallery-item img{ width:100%; display:block; transition:transform .5s var(--ease); }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .g-tag{
  position:absolute; left:10px; bottom:10px; background:rgba(41,41,41,.65); color:var(--white);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; padding:.35em .8em; border-radius:20px;
  opacity:0; transition:opacity .3s;
}
.gallery-item:hover .g-tag{ opacity:1; }
@media (max-width:900px){ .gallery-masonry{ column-count:2; } }
@media (max-width:520px){ .gallery-masonry{ column-count:1; } }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(20,17,14,.94); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:5vh 4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:4px; }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:var(--white);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:rgba(255,255,255,.25); }
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
@media (max-width:600px){
  .lightbox-prev{ left:8px; } .lightbox-next{ right:8px; } .lightbox-close{ top:12px; right:12px; }
}

/* ============ ABOUT PAGE EXTRAS ============ */
.approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.approach-block{ background:var(--white); border-radius:8px; padding:2.4rem 2rem; box-shadow:0 14px 34px -20px rgba(41,29,22,.25); }
.approach-block .eyebrow{ margin-bottom:1.4rem; }
@media (max-width:800px){ .approach-grid{ grid-template-columns:1fr; } }

.cinematic{ position:relative; height:60vh; min-height:380px; border-radius:0; overflow:hidden; }
.cinematic img{ width:100%; height:100%; object-fit:cover; }
.cinematic-caption{ max-width:var(--max-w); margin:2.4rem auto 0; padding:0 var(--pad); }

.cat-strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:rgba(41,41,41,.1); }
.cat-item{ background:var(--cream); padding:2.4rem 1.2rem; text-align:center; }
.cat-item h4{ font-size:.95rem; margin:0; }
@media (max-width:900px){ .cat-strip{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cat-strip{ grid-template-columns:repeat(2,1fr); } }