/* =========================================================
   صباغ الحسن — Kuwait painting & decor site
   Design tokens
   Primary   : #0E3F3D  (Gulf teal — deep, professional, "wet paint" dark)
   Primary-2 : #145C58  (lighter teal, hover/gradient partner)
   Ochre     : #E7A614  (paint-can gold — main accent, CTAs)
   Rust      : #C1441E  (secondary accent, used sparingly)
   Canvas    : #F7F2E7  (warm off-white background)
   Canvas-2  : #EFE6D3  (section alt background)
   Ink       : #201C16  (near-black text)
   ========================================================= */

:root{
  --teal-900:#0E3F3D;
  --teal-700:#145C58;
  --teal-100:#DCEAE7;
  --gold:#E7A614;
  --gold-dark:#B87F0B;
  --rust:#C1441E;
  --canvas:#F7F2E7;
  --canvas-2:#EFE6D3;
  --ink:#201C16;
  --ink-soft:#4B463D;
  --ring: 231 166 20; /* gold rgb for focus ring */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  background:var(--canvas);
  color:var(--ink);
  font-family:'Tajawal', sans-serif;
}

h1,h2,h3,h4,.font-display{
  font-family:'Cairo', sans-serif;
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Brush-stroke underline (signature element) ---------- */
.brush-underline{
  position:relative;
  display:inline-block;
}
.brush-underline svg{
  position:absolute;
  inset-inline-start:0;
  bottom:-0.28em;
  width:100%;
  height:0.5em;
  z-index:-1;
}

/* ---------- Paint swatch strip (signature divider) ---------- */
.swatch-strip{
  display:flex;
  width:100%;
  height:14px;
}
.swatch-strip span{ flex:1; }

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--gold);
  color:var(--teal-900);
  font-weight:700;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 0 0 var(--gold-dark);
}
.btn-primary:hover{ background:#f0b52b; transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--gold-dark); }

.btn-outline{
  border:2px solid var(--canvas);
  color:var(--canvas);
  transition:background .18s ease, color .18s ease;
}
.btn-outline:hover{ background:var(--canvas); color:var(--teal-900); }

/* ---------- Nav ---------- */
.nav-link{
  position:relative;
  padding-bottom:4px;
}
.nav-link::after{
  content:"";
  position:absolute;
  right:0; left:0; bottom:0;
  height:3px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }

/* ---------- Cards ---------- */
.service-card{
  background:#fff;
  border:1px solid #E7DFCB;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 30px -12px rgba(14,63,61,.25);
  border-color:var(--gold);
}
.swatch-chip{
  width:2.75rem; height:2.75rem; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cairo',sans-serif; font-weight:800; color:#fff; font-size:.95rem;
  box-shadow:inset 0 -4px 6px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.15);
}

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

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed; z-index:40; bottom:1.25rem; inset-inline-start:1.25rem;
  width:3.5rem; height:3.5rem; border-radius:9999px;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px -6px rgba(0,0,0,.35);
  animation:wa-pulse 2.6s ease-in-out infinite;
}
@keyframes wa-pulse{
  0%,100%{ box-shadow:0 10px 20px -6px rgba(0,0,0,.35), 0 0 0 0 rgba(37,211,102,.5);}
  50%{ box-shadow:0 10px 20px -6px rgba(0,0,0,.35), 0 0 0 10px rgba(37,211,102,0);}
}

/* ---------- Before/after gallery frame ---------- */
.ba-frame{ position:relative; overflow:hidden; }
.ba-tag{
  position:absolute; top:.6rem; inset-inline-start:.6rem;
  font-family:'Cairo',sans-serif; font-weight:800; font-size:.72rem;
  padding:.2rem .6rem; border-radius:9999px; color:#fff;
}

/* ---------- Diagonal hero shape ---------- */
.hero-clip{
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}

/* ---------- Mobile menu ---------- */
#mobileMenu{ transition:max-height .3s ease; overflow:hidden; }

/* Lazy-load fade */
img[loading="lazy"]{ background:var(--canvas-2); }