/* ============================================================
   Colourfull Painting Services – Shared Stylesheet
   style.css  |  Used by: index.html, services.html, contact.html
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

/* ── CSS VARIABLES ── */
:root {
  --red:    #C8281E;
  --red2:   #9B1D15;
  --dark:   #1A1A1A;
  --cream:  #FAF8F5;
  --cream2: #F0ECE6;
  --white:  #FFFFFF;
  --grey:   #6B6B6B;
  --lgrey:  #E8E4DE;
  --green:  #2E7D32;
  --yellow: #F9A800;
  --purple: #7B1FA2;
  --orange: #D84315;
  --teal:   #00796B;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
}

/* ── NAV ── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:999;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 5%; height: 70px;
  background: rgba(250,248,245,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lgrey);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-brand-dot { width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 8px rgba(200,40,30,0.4); }
.nav-brand-text { font-family:'Bebas Neue',sans-serif; font-size:1.4rem; letter-spacing:2px; color:var(--dark); }
.nav-brand-text span { color:var(--red); }
.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a { color:var(--grey); text-decoration:none; font-size:0.85rem; font-weight:500; letter-spacing:0.5px; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover,.nav-links a.active { color:var(--dark); }
.nav-cta { background:var(--red); color:var(--white) !important; padding:10px 24px; border-radius:2px; transition:background 0.2s !important; }
.nav-cta:hover { background:var(--red2) !important; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.hamburger span { display:block; width:24px; height:2px; background:var(--dark); border-radius:2px; }

/* ── SECTION UTILITIES ── */
.s-tag { font-size:0.72rem; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--red); margin-bottom:14px; display:block; }
.s-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,4vw,3.2rem); line-height:1; letter-spacing:1px; color:var(--dark); margin-bottom:16px; }
.s-sub { font-size:1rem; color:var(--grey); line-height:1.75; max-width:540px; }

/* ── BUTTONS ── */
.btn-red {
  background:var(--red); color:var(--white);
  padding:16px 36px; border-radius:2px;
  text-decoration:none; font-weight:600; font-size:0.95rem;
  display:inline-flex; align-items:center; gap:10px;
  transition:all 0.25s; box-shadow:0 4px 20px rgba(200,40,30,0.3);
}
.btn-red:hover { background:var(--red2); transform:translateY(-2px); box-shadow:0 6px 28px rgba(200,40,30,0.4); }
.btn-outline {
  border:2px solid var(--dark); color:var(--dark);
  padding:14px 32px; border-radius:2px;
  text-decoration:none; font-weight:500; font-size:0.95rem; transition:all 0.2s;
}
.btn-outline:hover { background:var(--dark); color:var(--white); }
.btn-white { background:var(--white); color:var(--red); padding:18px 40px; border-radius:2px; text-decoration:none; font-weight:700; font-size:1rem; white-space:nowrap; transition:all 0.2s; box-shadow:0 4px 20px rgba(0,0,0,0.15); }
.btn-white:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,0.2); }

/* ── CTA BAND ── */
.cta-band {
  background:var(--red); padding:80px 7%;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:40px;
}
.cta-band h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2rem,4vw,3rem); color:var(--white); line-height:1.05; }
.cta-band p { color:rgba(255,255,255,0.85); font-size:1rem; line-height:1.6; margin-top:10px; }

/* ── FOOTER ── */
footer { background:var(--dark); padding:64px 7% 32px; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; margin-bottom:48px; }
.footer-brand-text { font-family:'Bebas Neue',sans-serif; font-size:1.8rem; letter-spacing:3px; color:var(--white); margin-bottom:16px; }
.footer-brand-text span { color:var(--red); }
.footer-desc { font-size:0.88rem; color:rgba(255,255,255,0.45); line-height:1.7; margin-bottom:24px; }
.footer-contact a { display:flex; align-items:center; gap:10px; text-decoration:none; color:rgba(255,255,255,0.6); font-size:0.88rem; margin-bottom:10px; transition:color 0.2s; }
.footer-contact a:hover { color:var(--white); }
.footer-contact a em { color:var(--red); font-style:normal; }
.footer-col h4 { font-weight:600; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:20px; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:12px; }
.footer-col ul li a { text-decoration:none; color:rgba(255,255,255,0.55); font-size:0.88rem; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--white); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.8rem; color:rgba(255,255,255,0.25); flex-wrap:wrap; gap:12px; }
.footer-colourbar { height:4px; background:linear-gradient(90deg,var(--red) 0%,var(--orange) 20%,var(--yellow) 40%,var(--green) 60%,var(--teal) 80%,var(--purple) 100%); }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── WHATSAPP FLOATING BUTTON ── */
.wa-btn {
  position:fixed; bottom:28px; right:28px; z-index:990;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-size:1.6rem;
  box-shadow:0 4px 20px rgba(37,211,102,0.45);
  transition:transform 0.2s, box-shadow 0.2s;
}
.wa-btn:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.6); }
.wa-tooltip {
  position:absolute; right:68px; top:50%; transform:translateY(-50%);
  background:var(--dark); color:#fff;
  font-size:0.78rem; font-weight:500; white-space:nowrap;
  padding:6px 14px; border-radius:100px;
  opacity:0; pointer-events:none; transition:opacity 0.2s;
}
.wa-btn:hover .wa-tooltip { opacity:1; }

/* ── TICKER ── */
.ticker {
  background:var(--red); padding:13px 0; overflow:hidden;
  border-top:3px solid var(--red2); border-bottom:3px solid var(--red2);
}
.ticker-inner { display:flex; width:max-content; animation:tick 28s linear infinite; }
.ticker-item {
  font-family:'Bebas Neue',sans-serif; font-size:0.95rem;
  letter-spacing:3px; padding:0 36px; white-space:nowrap;
  color:var(--white); display:flex; align-items:center; gap:36px;
}
.ticker-item::after { content:'✦'; font-size:0.65rem; opacity:0.7; }
@keyframes tick { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============================================================
   RESPONSIVE – SHARED
   ============================================================ */

/* ── MOBILE NAV (fix: solid background when open) ── */
@media(max-width:768px){
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; inset:70px 0 0 0;
    background:var(--cream);           /* solid – not transparent */
    padding:40px 5%; gap:24px;
    border-top:2px solid var(--lgrey);
    z-index:998;
    overflow-y:auto;
  }
  .nav-links.open a { font-size:1.1rem; color:var(--dark); }
  .hamburger { display:flex; }
  .cta-band { grid-template-columns:1fr; text-align:center; }
  .btn-white { width:100%; text-align:center; }
  .footer-top { grid-template-columns:1fr; gap:40px; }
}