/* ============================================
   DAWAQ — Shared Stylesheet
   Version 3 — Production
   ============================================ */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Instrument Sans',-apple-system,sans-serif;
  background:#FEF6EC;color:#1A1A1A;
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* TOKENS */
:root{
  --or:#E8600A;
  --or2:#F2894A;
  --or-light:#FFF0E3;
  --cream:#FEF6EC;
  --beige:#F5E6D0;
  --dark:#1A1A1A;
  --grey:#5C5C5C;
  --light-grey:#A8A8A8;
  --bd:1.5px solid #1A1A1A;
  --bd-soft:1px solid rgba(26,26,26,.12);
  --max:1040px;
}

/* CONTAINER */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}
@media(max-width:576px){
  .container{padding:0 16px}
}

/* ============================================
   HEADER / NAV — Unified across all pages
   ============================================ */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:400;
  background:rgba(254,246,236,.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:var(--bd);
}
.site-header-inner{
  max-width:var(--max);
  margin:0 auto;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
}
@media(max-width:576px){.site-header-inner{padding:0 16px;height:60px}}

.site-logo{display:block;text-decoration:none}
.site-logo img{height:36px;width:auto;display:block}
@media(max-width:576px){.site-logo img{height:32px}}

.nav-menu{
  display:none;
  list-style:none;
  gap:32px;
  align-items:center;
}
@media(min-width:992px){.nav-menu{display:flex}}

.nav-menu a{
  font-size:12px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--dark);
  text-decoration:none;
  transition:color .2s;
  position:relative;
  padding:4px 0;
}
.nav-menu a:hover{color:var(--or)}
.nav-menu a.active{color:var(--or)}
.nav-menu a.active::after{
  content:'';
  position:absolute;
  bottom:-4px;left:0;right:0;
  height:2px;background:var(--or);
}

.nav-actions{display:flex;align-items:center;gap:12px}

.btn-wa-nav{
  background:var(--or);color:var(--cream);
  border:none;
  padding:10px 18px;
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .2s;
  white-space:nowrap;
}
.btn-wa-nav:hover{background:#C4500A}
.btn-wa-nav svg{width:14px;height:14px}

/* Mobile menu button */
.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;
  width:36px;height:36px;
  background:transparent;border:var(--bd);
  cursor:pointer;
  gap:4px;
  align-items:center;
}
.nav-toggle span{width:16px;height:1.5px;background:var(--dark);display:block}
@media(min-width:992px){.nav-toggle{display:none}}

/* Mobile drawer */
.mobile-drawer{
  position:fixed;
  top:0;right:-100%;bottom:0;
  width:min(85%,320px);
  background:var(--dark);
  z-index:500;
  transition:right .3s ease;
  padding:80px 24px 24px;
  display:flex;flex-direction:column;
}
.mobile-drawer.open{right:0}
.mobile-drawer a{
  display:block;
  padding:14px 0;
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
}
.mobile-drawer a.active{color:var(--or2)}
.mobile-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:450;
}
.mobile-overlay.open{display:block}
.drawer-close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;
  background:rgba(255,255,255,.08);
  color:var(--cream);border:none;
  font-size:16px;
}

/* Spacer so content doesn't hide under fixed nav */
.page-spacer{height:64px}
@media(max-width:576px){.page-spacer{height:60px}}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--or);
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';width:24px;height:1.5px;background:var(--or);
}

.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,5vw,56px);
  line-height:.95;
  letter-spacing:-.5px;
  color:var(--dark);
  margin-bottom:16px;
}
.section-title em{
  font-family:'DM Serif Display',serif;
  color:var(--or);font-style:italic;
}

.section-sub{
  font-size:15px;
  color:var(--grey);
  line-height:1.75;
  max-width:540px;
}

/* ============================================
   FOOTER — Unified across all pages
   ============================================ */
.site-footer{
  background:var(--dark);
  color:var(--cream);
  padding:56px 0 32px;
  margin-top:0;
}
.site-footer-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}
@media(max-width:576px){.site-footer-inner{padding:0 16px}}

.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(min-width:768px){
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
}

.footer-brand img{height:40px;width:auto;margin-bottom:16px}
.footer-brand p{
  font-size:13px;
  color:rgba(255,255,255,.45);
  line-height:1.8;
  max-width:300px;
}

.footer-col h4{
  font-family:'Bebas Neue',sans-serif;
  font-size:14px;
  letter-spacing:2.5px;
  color:var(--or2);
  margin-bottom:16px;
}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{
  font-size:13px;
  color:rgba(255,255,255,.55);
  text-decoration:none;
  transition:color .2s;
}
.footer-col ul li a:hover{color:var(--or2)}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-top:24px;
}
.footer-bottom p{
  font-size:11px;
  color:rgba(255,255,255,.25);
  letter-spacing:.5px;
}
.footer-social{display:flex;gap:10px}
.footer-social a{
  width:38px;height:38px;
  border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.5);
  text-decoration:none;
  transition:all .2s;
}
.footer-social a:hover{
  border-color:var(--or);color:var(--or);
  background:rgba(232,96,10,.08);
}
.footer-social svg{width:16px;height:16px}

/* ============================================
   BUTTONS
   ============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  text-decoration:none;
  border:1.5px solid transparent;
  transition:all .2s;
  cursor:pointer;
  font-family:inherit;
}
.btn-primary{
  background:var(--or);
  color:var(--cream);
  border-color:var(--or);
}
.btn-primary:hover{background:#C4500A;border-color:#C4500A}

.btn-dark{
  background:var(--dark);
  color:var(--cream);
  border-color:var(--dark);
}
.btn-dark:hover{background:var(--or);border-color:var(--or)}

.btn-outline{
  background:transparent;
  color:var(--dark);
  border-color:var(--dark);
}
.btn-outline:hover{border-color:var(--or);color:var(--or)}

.btn-outline-light{
  background:transparent;
  color:var(--cream);
  border-color:rgba(255,255,255,.4);
}
.btn-outline-light:hover{border-color:var(--cream)}

/* ============================================
   STICKY MOBILE WHATSAPP BAR
   ============================================ */
.sticky-wa{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:300;
  background:var(--dark);
  border-top:1.5px solid var(--or);
  padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
}
@media(min-width:992px){.sticky-wa{display:none}}
.sticky-wa-text{font-size:11px;color:rgba(255,255,255,.5);flex:1}
.sticky-wa-text strong{color:var(--cream);display:block;font-size:13px}
.sticky-wa-btn{
  background:var(--or);color:var(--cream);
  padding:10px 20px;
  border:none;
  font-size:10px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  white-space:nowrap;
}

/* ============================================
   GLOBAL UTILITIES
   ============================================ */
.section{padding:80px 0}
@media(max-width:768px){.section{padding:56px 0}}

.section-dark{background:var(--dark);color:var(--cream)}
.section-dark .section-title{color:var(--cream)}
.section-dark .section-sub{color:rgba(255,255,255,.5)}
.section-dark .eyebrow{color:var(--or2)}
.section-dark .eyebrow::before{background:var(--or2)}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.fade-up{opacity:0}
.fade-up.visible{animation:fadeUp .6s ease forwards}