/* ==========================================================================
   TRIAXIS DESIGN STUDIO — Site Stylesheet
   Loaded by every page. Sections:
   1. Variables & reset
   2. Base typography
   3. Cursor, grain, loader
   4. Navigation
   5. Footer
   6. WhatsApp floater
   7. Buttons & shared components
   8. Reveal animations & utilities
   9. Marquee, eyebrow, wrap
   10. Page-specific styles are inline in each page's <style> block
   ========================================================================== */

/* 1. VARIABLES ============================================================ */
:root{
  --ink:#1a1613;
  --ink-2:#2a2420;
  --ivory:#f5efe6;
  --ivory-2:#ebe3d5;
  --brass:#b8895a;
  --brass-deep:#8f6540;
  --terra:#c26a44;
  --mute:#7d7267;
  --line:rgba(26,22,19,0.10);
  --line-d:rgba(245,239,230,0.14);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit}

/* 2. BASE TYPOGRAPHY ====================================================== */
body{
  font-family:var(--sans);
  background:var(--ivory);
  color:var(--ink);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
::selection{background:var(--brass);color:var(--ivory)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.06;letter-spacing:-.005em}

.eyebrow{
  font-family:var(--sans);font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--brass-deep);font-weight:500;
}
.wrap{max-width:1400px;margin:0 auto;padding:0 44px}

/* 3. CURSOR, GRAIN, LOADER ================================================ */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.cursor{
  position:fixed;top:0;left:0;width:8px;height:8px;background:var(--ink);
  border-radius:50%;pointer-events:none;z-index:1000;transition:width .3s,height .3s,background .3s;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.cursor.grow{width:60px;height:60px;background:var(--brass)}
.cursor-ring{
  position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid var(--ink);
  border-radius:50%;pointer-events:none;z-index:999;transition:transform .15s;
  transform:translate(-50%,-50%);opacity:.35;
}
.loader{
  position:fixed;inset:0;z-index:2000;background:var(--ink);color:var(--ivory);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s .3s,visibility .8s .3s;
}
.loader.gone{opacity:0;visibility:hidden}
.loader .mark{
  font-family:var(--serif);font-style:italic;font-size:60px;font-weight:300;
  letter-spacing:.02em;opacity:0;animation:markIn 1.2s .3s forwards;
}
.loader .bar{
  position:absolute;bottom:0;left:0;height:2px;background:var(--brass);width:0;
  animation:barGo 1.6s .3s cubic-bezier(.7,.02,.36,1) forwards;
}
@keyframes markIn{to{opacity:1}}
@keyframes barGo{to{width:100%}}

/* 4. NAVIGATION =========================================================== */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 44px;
  transition:all .6s cubic-bezier(.16,1,.3,1);
}
nav.site::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(26,22,19,.35),transparent);
  transition:opacity .5s;
}
nav.site.scr{background:rgba(245,239,230,.94);backdrop-filter:blur(14px);padding:15px 44px;box-shadow:0 1px 0 var(--line)}
nav.site.scr::before{opacity:0}
nav.site.scr .nav-links a{color:var(--ink)}
/* Dark pages (about, individual project pages) use nav-dark class */
nav.site.nav-dark{background:rgba(26,22,19,.94);backdrop-filter:blur(14px);position:sticky}
nav.site.nav-dark .nav-links a{color:var(--ivory)}
nav.site.nav-dark::before{display:none}

.logo{
  display:flex;align-items:center;text-decoration:none;
  transition:opacity .4s;position:relative;
}
.logo img{
  height:44px;width:auto;display:block;
  transition:opacity .4s;
}
.logo .logo-dark{position:absolute;top:0;left:0;opacity:0}
nav.site.scr .logo .logo-light{opacity:0}
nav.site.scr .logo .logo-dark{opacity:1}
/* Footer + always-dark nav: only light version shows */
footer.site .logo .logo-dark,
nav.site.nav-dark .logo .logo-dark{display:none}
.logo:hover{opacity:.85}

.nav-links{display:flex;gap:38px;list-style:none;align-items:center}
.nav-links a{
  color:var(--ivory);text-decoration:none;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:500;position:relative;padding:5px 0;
  transition:color .4s;
}
.nav-links a.on{color:var(--brass)}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:currentColor;transition:width .5s cubic-bezier(.16,1,.3,1);
}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}

.enq{
  border:1px solid currentColor;padding:11px 22px;font-family:var(--sans);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;background:none;color:inherit;cursor:none;
  font-weight:500;transition:all .4s;text-decoration:none;
}
.enq:hover{background:var(--brass);border-color:var(--brass);color:var(--ivory)}

/* Header WhatsApp pill (desktop) */
.nav-wa{
  display:inline-flex;align-items:center;gap:8px;
  background:#25d366;color:#fff;text-decoration:none;
  padding:11px 18px 11px 15px;border-radius:40px;
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;transition:all .4s;cursor:none;margin-left:14px;
  box-shadow:0 4px 14px rgba(37,211,102,.3);
}
.nav-wa:hover{background:#128c4a;transform:translateY(-1px);box-shadow:0 6px 18px rgba(37,211,102,.4)}
.nav-wa svg{flex-shrink:0}

/* Mobile hamburger */
.nav-toggle{display:none;background:none;border:none;color:inherit;cursor:none;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:.3s}
.mobile-menu{
  position:fixed;top:0;right:-100%;width:100%;max-width:360px;height:100vh;
  background:var(--ink);color:var(--ivory);z-index:150;padding:100px 40px 40px;
  transition:right .5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;
}
.mobile-menu.open{right:0}
.mobile-menu a{
  color:var(--ivory);text-decoration:none;font-family:var(--serif);font-size:28px;
  padding:18px 0;border-bottom:1px solid var(--line-d);display:block;
}
.mobile-menu a:hover{color:var(--brass)}
.mobile-menu .mclose{
  position:absolute;top:26px;right:26px;background:none;border:none;color:var(--ivory);
  font-size:28px;cursor:none;padding:6px 12px;
}

/* 5. FOOTER =============================================================== */
footer.site{background:var(--ink);color:rgba(245,239,230,.65);padding:80px 44px 30px}
.f-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;margin-bottom:60px}
footer.site .logo{color:var(--ivory);margin-bottom:16px}
footer.site .blurb{font-size:14px;max-width:340px;margin-top:4px;line-height:1.75}
footer.site h4{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory);margin-bottom:18px;font-weight:600;
}
footer.site ul{list-style:none}
footer.site li{margin-bottom:11px}
footer.site a{color:rgba(245,239,230,.65);text-decoration:none;font-size:14px;transition:color .3s}
footer.site a:hover{color:var(--brass)}
.f-fine{
  max-width:1400px;margin:0 auto;border-top:1px solid var(--line-d);padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:12px;color:rgba(245,239,230,.4);letter-spacing:.05em;
}

/* 6. WHATSAPP FLOATER ===================================================== */
.wa{
  position:fixed;bottom:26px;right:26px;z-index:99;
  width:60px;height:60px;border-radius:50%;background:#25d366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 30px rgba(37,211,102,.45);
  cursor:none;transition:transform .3s;text-decoration:none;
  animation:wapop 1s 2.2s cubic-bezier(.34,1.56,.64,1) backwards;
}
.wa:hover{transform:scale(1.1)}
.wa svg{width:32px;height:32px;fill:#fff}
.wa::before{
  content:'Chat with us';position:absolute;right:74px;top:50%;transform:translateY(-50%);
  background:var(--ink);color:var(--ivory);font-family:var(--sans);font-size:12px;
  padding:8px 14px;border-radius:30px;white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.wa:hover::before{opacity:1}
@keyframes wapop{from{transform:scale(0);opacity:0}to{transform:none;opacity:1}}

/* 7. BUTTONS & SHARED COMPONENTS ========================================== */
.btn-fill{
  background:var(--ink);color:var(--ivory);border:none;padding:16px 34px;
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  cursor:none;transition:all .4s;text-decoration:none;display:inline-block;font-weight:500;
}
.btn-fill:hover{background:var(--brass);letter-spacing:.28em}
.btn-line{
  background:none;color:var(--ink);border:1px solid var(--ink);padding:15px 32px;
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  cursor:none;transition:all .4s;text-decoration:none;display:inline-block;font-weight:500;
}
.btn-line:hover{background:var(--ink);color:var(--ivory)}

/* 8. REVEAL ANIMATIONS ==================================================== */
.reveal{opacity:0;transform:translateY(40px);transition:all 1.1s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}
.reveal.d2{transition-delay:.2s}
.reveal.d3{transition-delay:.3s}
.reveal.d4{transition-delay:.4s}

/* 9. MARQUEE STRIP ======================================================== */
.marq{
  background:var(--ink);color:var(--ivory);padding:22px 0;overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);
}
.marq div{display:inline-block;animation:mscroll 32s linear infinite;font-family:var(--serif);font-size:22px}
.marq span{margin:0 30px;font-style:italic;opacity:.85}
.marq i{color:var(--brass);font-style:normal;opacity:.7}
@keyframes mscroll{to{transform:translateX(-50%)}}

/* 10. RESPONSIVE ========================================================== */
@media(hover:none){body{cursor:auto}.cursor,.cursor-ring{display:none}}
@media(max-width:900px){
  body{cursor:auto}
  .cursor,.cursor-ring{display:none}
  nav.site{padding:18px 22px}
  nav.site.scr{padding:14px 22px}
  .nav-links,.enq,.nav-wa{display:none}
  .nav-toggle{display:block}
  .wrap{padding:0 22px}
  footer.site{padding:60px 22px 26px}
  .f-in{grid-template-columns:1fr;gap:36px}
  .wa{bottom:20px;right:20px;width:54px;height:54px}
  .wa svg{width:28px;height:28px}
}