/* =====================================================================
   AAT SHARED STYLESHEET — used by every page (index, services, projects,
   about, contact, the WFMS product page, etc).
   Page-specific content styling stays in a <style> block on each page;
   anything here is the stuff that must look identical everywhere:
   design tokens, nav, footer, buttons, and the reveal-on-scroll utility.
   ===================================================================== */

:root{
  --charcoal:#15161A;
  --deepnavy:#0F141B;
  --clay:#8B4A2B;
  --clay-bright:#B36038;
  --sandstone:#C9A15A;
  --teal:#3AA69D;
  --offwhite:#F1ECE0;
  --offwhite-dim:#C9C3B4;
  --line:rgba(241,236,224,0.14);
  --radius:2px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--charcoal);
  color:var(--offwhite);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Fraunces', serif; font-weight:600; letter-spacing:-0.01em;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 32px;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; font-size:12px;}

.btn{
  display:inline-block; padding:14px 26px; border-radius:var(--radius);
  font-size:14px; font-weight:500; text-decoration:none; transition:all 0.2s;
  font-family:'IBM Plex Sans', sans-serif; border:none; cursor:pointer;
}
.btn-primary{background:var(--sandstone); color:var(--charcoal);}
.btn-primary:hover{background:var(--offwhite);}
.btn-ghost{border:1px solid var(--line); color:var(--offwhite); background:transparent;}
.btn-ghost:hover{border-color:var(--offwhite-dim);}

.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.6s ease, transform 0.6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- Nav ---------- */
nav{
  position:sticky; top:0; z-index:40;
  background:rgba(21,22,26,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; padding-left:56px;}
@media (max-width:760px){ nav .wrap{padding-left:32px;} }
.brand{display:flex; align-items:center; gap:12px;}
.brand img{height:44px; width:auto; display:block; background:var(--offwhite); border-radius:4px; padding:3px;}
.brand .brand-text{display:flex; flex-direction:column; line-height:1.1;}
.brand .name{font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
.brand .tag{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.1em; color:var(--sandstone); text-transform:uppercase; margin-top:2px;}
nav ul{list-style:none; display:flex; gap:32px; align-items:center;}
nav a{text-decoration:none; font-size:14px; color:var(--offwhite-dim); transition:color 0.2s;}
nav a:hover{color:var(--offwhite);}
nav a.current{color:var(--sandstone);}
.nav-cta{
  border:1px solid var(--sandstone); padding:9px 18px; border-radius:var(--radius);
  color:var(--sandstone) !important; font-size:13px !important;
}
.nav-cta:hover{background:var(--sandstone); color:var(--charcoal) !important;}
@media (max-width:760px){ nav ul{display:none;} }

.nav-toggle{
  display:none; background:transparent; border:none; cursor:pointer; padding:6px;
  flex-direction:column; gap:5px; margin-right:8px;
}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--offwhite); border-radius:2px;}
@media (max-width:760px){
  .nav-toggle{display:flex;}
  nav ul{
    display:none; position:absolute; top:76px; left:0; right:0;
    flex-direction:column; gap:0; margin:0; padding:8px 32px 16px;
    background:rgb(21,22,26); border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(0,0,0,0.35); max-height:calc(100vh - 76px); overflow-y:auto;
  }
  nav.nav-open ul{display:flex;}
  nav ul li{width:100%;}
  nav ul a{display:block; padding:14px 0; border-bottom:1px solid var(--line);}
  nav ul .nav-cta{border:1px solid var(--sandstone); margin-top:12px; text-align:center; padding:12px;}
}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.35); transition:transform 0.2s ease;
}
.whatsapp-float:hover{transform:scale(1.06);}
.whatsapp-float svg{width:30px; height:30px;}

/* ---------- Footer ---------- */
footer{padding:40px 56px 40px;}
@media (max-width:760px){ footer{padding-left:32px;} }
footer .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
footer .mono{color:var(--offwhite-dim);}
.social-links{display:flex; gap:14px; align-items:center;}
.social-links a{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--offwhite-dim);
  transition:color 0.2s, border-color 0.2s;
}
.social-links a:hover{color:var(--offwhite); border-color:var(--offwhite-dim);}
.social-links svg{width:16px; height:16px; fill:currentColor;}

/* ---------- Shared section shell (used on every page) ---------- */
section{padding:100px 0 100px 56px; border-bottom:1px solid var(--line);}
@media (max-width:760px){ section{padding-left:32px; padding-right:0;} }
.section-head{max-width:640px; margin-bottom:56px;}
.section-num{color:var(--teal); margin-bottom:14px;}
.section-head h2{font-size:clamp(28px,4vw,42px); line-height:1.08;}
.section-head p{margin-top:16px; color:var(--offwhite-dim); font-size:16px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; opacity:1; transform:none;}
}