/* ═══════════════════════════════════════════════════════════════
   robsanders.com.au — Site Stylesheet
   Shared across all pages.
   Page-specific CSS stays in each page's <style> block.
═══════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── ROOT ─── */
:root {
  --orange:   #FCB900;
  --orange-h: #E0A500;
  --dark:     #111111;
  --dark2:    #2C2C2C;
  --mid:      #555555;
  --light:    #888888;
  --border:   #E5E5E5;
  --bg-alt:   #F7F7F7;
  --white:    #FFFFFF;
  --tight:    'Inter Tight', sans-serif;
  --body:     'Inter', sans-serif;
  --max:      1280px;
  --pad:      clamp(20px, 4vw, 64px);
}

/* ─── BASE ─── */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--dark2); line-height: 1.65; font-size: 16px; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
strong { font-weight: 600; color: var(--dark); }

/* ─── NAV ─── */
.nav { position: sticky; top: 0; z-index: 200; background: var(--white); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.nav-logo-text { font-family: 'Inter Tight', sans-serif; font-size: 17px; font-weight: 700; color: var(--dark); }
.nav-logo-text span { color: var(--orange); }
.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu a { font-size: 14px; font-weight: 500; color: var(--mid); transition: color 0.15s; text-decoration: none; }
.nav-menu a:hover { color: var(--dark); }
.nav-menu a.active { color: var(--dark); font-weight: 600; }
.nav-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter Tight', sans-serif; font-size: 14px; font-weight: 700; color: var(--dark); background: var(--orange); padding: 10px 22px; border-radius: 6px; border: 2px solid var(--orange); transition: background 0.15s, color 0.15s; white-space: nowrap; text-decoration: none; }
.nav-btn:hover { background: transparent; color: var(--orange); }
@media (max-width: 768px) { .nav-menu { display: none; } }

/* ─── HERO — INNER PAGES (dark) ─── */
.hero { background: #0D0D0D; background-image: linear-gradient(135deg, rgba(252,185,0,0.18) 0%, transparent 55%), radial-gradient(ellipse at 75% 60%, rgba(252,185,0,0.10) 0%, transparent 65%); border-bottom: 3px solid var(--orange); padding: 96px var(--pad); position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.hero-inner { max-width: var(--max); margin: 0 auto; position: relative; z-index: 1; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(252,185,0,0.1); color: var(--orange); border: 1px solid rgba(252,185,0,0.25); padding: 7px 16px; border-radius: 100px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 24px; }
.hero-tag-line { width: 32px; height: 2px; background: var(--orange); }
.hero h1 { font-family: 'Inter Tight', sans-serif; font-size: clamp(48px, 6.5vw, 80px); font-weight: 900; line-height: 1.0; letter-spacing: -3px; color: #FFFFFF; margin-bottom: 24px; }
.hero h1 span { color: var(--orange); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.55); max-width: 560px; line-height: 1.7; }

/* ─── BREADCRUMB ─── */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.35); margin-bottom: 28px; }
.breadcrumb a { color: var(--orange); text-decoration: none; transition: opacity 0.15s; }
.breadcrumb a:hover { opacity: 0.75; }
.breadcrumb span { color: rgba(255,255,255,0.25); }

/* ─── CTA STRIP ─── */
.cta-strip { background: #111111; padding: 72px var(--pad); }
.cta-inner { max-width: 640px; margin: 0 auto; text-align: center; }

/* ─── FOOTER ─── */
.footer { background: var(--dark); padding: 48px var(--pad) 32px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 28px; }
.footer-logo { font-family: 'Inter Tight', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 12px; }
.footer-logo span { color: var(--orange); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.4); line-height: 1.6; }
.footer-col h4 { font-family: 'Inter Tight', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 16px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.55); transition: color 0.15s; text-decoration: none; }
.footer-links a:hover { color: rgba(255,255,255,0.9); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-copy a { color: rgba(255,255,255,0.4); transition: color 0.15s; text-decoration: none; }
.footer-copy a:hover { color: rgba(255,255,255,0.7); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; } }