/* ============================================================
   Deon Swiggs — swiggs.nz
   Design tokens & shared components
   ============================================================ */

:root{
  --navy: #0A2A43;
  --navy-light: #12405E;
  --navy-pale: #E7EEF3;
  --forest: #1F6E43;
  --forest-light: #2E8B57;
  --gold: #C99A2E;
  --gold-light: #E4BB5C;
  --sand: #F7F3EA;
  --ink: #14202B;
  --slate: #52626D;
  --slate-light: #8496A1;
  --line: #E1DED2;
  --white: #FFFFFF;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 10px rgba(10,42,67,0.06);
  --shadow-md: 0 10px 30px rgba(10,42,67,0.10);
  --shadow-lg: 0 24px 60px rgba(10,42,67,0.16);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{
  font-family:'Fraunces', 'Georgia', serif;
  letter-spacing:-0.01em;
}
.font-serif{font-family:'Fraunces','Georgia',serif;}
a{text-decoration:none;}
::selection{background:var(--gold-light);color:var(--navy);}

.container-x{max-width:1240px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem;}
@media(min-width:1024px){.container-x{padding-left:2.5rem;padding-right:2.5rem;}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--forest);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);display:inline-block;}

/* ---------- Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,234,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header.is-scrolled{box-shadow:var(--shadow-sm);}
.nav-wrap{
  max-width:1240px;margin:0 auto;padding:.9rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.7rem;}
.brand-mark{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(145deg,var(--navy),var(--navy-light));
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-light); font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem;
  box-shadow:var(--shadow-sm);
}
.brand-text{line-height:1.15;}
.brand-text strong{display:block;font-family:'Fraunces',serif;font-size:1.05rem;color:var(--navy);}
.brand-text span{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);}

.nav-links{display:none;align-items:center;gap:2rem;}
@media(min-width:960px){.nav-links{display:flex;}}
.nav-links a{
  font-size:.92rem;font-weight:500;color:var(--slate);
  position:relative;padding:.3rem 0;transition:color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--navy);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);
}
.nav-cta{
  background:var(--navy);color:var(--white)!important;padding:.6rem 1.3rem;border-radius:999px;
  font-weight:600!important;transition:background .2s, transform .2s;
}
.nav-cta:hover{background:var(--forest);transform:translateY(-1px);}

.nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem;}
@media(min-width:960px){.nav-toggle{display:none;}}
.nav-toggle span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.25s;}
.mobile-menu{
  display:none;flex-direction:column;gap:.2rem;
  background:var(--white);border-top:1px solid var(--line);
  padding:.5rem 1.5rem 1.2rem;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--navy);font-weight:500;}
.mobile-menu a:last-child{border-bottom:none;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.6rem;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  white-space:nowrap;
}
.btn-primary{background:var(--navy);color:var(--white);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--forest);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn-gold{background:var(--gold);color:var(--navy);}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);}
.btn-outline{border:1.5px solid rgba(255,255,255,.55);color:var(--white);}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{border:1.5px solid var(--navy);color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy);color:var(--white);}
.btn-sm{padding:.55rem 1.1rem;font-size:.85rem;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;}
.hero-bg{position:absolute;inset:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,42,67,.55) 0%, rgba(10,42,67,.35) 35%, rgba(10,42,67,.92) 100%);
}
.hero-content{position:relative;z-index:2;color:var(--white);padding:4rem 0 4.5rem;}
.hero-badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  padding:.5rem 1.1rem;border-radius:999px;font-size:.82rem;font-weight:600;
  backdrop-filter:blur(6px);margin-bottom:1.3rem;
}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold-light);}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:1.04;font-weight:600;}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:rgba(255,255,255,.88);max-width:640px;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;min-height:56vh;display:flex;align-items:flex-end;overflow:hidden;}
.page-hero-content{position:relative;z-index:2;color:var(--white);padding:3.4rem 0;}
.page-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:600;line-height:1.08;}

/* ---------- Cards ---------- */
.card{
  background:var(--white);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:box-shadow .25s, transform .25s;
  border:1px solid var(--line);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);}
.stat-card{
  background:var(--white);border-radius:var(--radius);
  border:1px solid var(--line); padding:1.6rem;
}
.icon-tile{
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy-pale);color:var(--navy);font-size:1.2rem;
}
.icon-tile.gold{background:#FBF0D9;color:#96731D;}
.icon-tile.forest{background:#E4F1E9;color:var(--forest);}

/* ---------- Timeline ---------- */
.timeline{position:relative;padding-left:2.6rem;}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:var(--line);}
.timeline-item{position:relative;padding-bottom:2.4rem;}
.timeline-item:last-child{padding-bottom:0;}
.timeline-dot{
  position:absolute;left:-2.6rem;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--white);border:3px solid var(--navy);display:flex;align-items:center;justify-content:center;
}
.timeline-item.is-current .timeline-dot{border-color:var(--gold);background:var(--gold);}
.timeline-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.6rem;}

/* ---------- Quote ---------- */
.pull-quote{
  border-left:3px solid var(--gold);
  padding-left:1.4rem; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--navy);
  font-weight:500; line-height:1.5;
}

/* ---------- Tag ---------- */
.tag{
  display:inline-block;padding:.32rem .8rem;border-radius:999px;
  background:var(--navy-pale);color:var(--navy);font-size:.78rem;font-weight:600;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.82);}
.site-footer a{color:rgba(255,255,255,.82);transition:color .2s;}
.site-footer a:hover{color:var(--gold-light);}
.footer-social{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.footer-social:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)!important;}

/* ---------- Misc ---------- */
.section-divider{height:1px;background:var(--line);}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

.back-to-top{
  position:fixed;right:1.4rem;bottom:1.4rem;z-index:40;
  width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;
}
.back-to-top.show{opacity:1;pointer-events:auto;}
.back-to-top:hover{background:var(--forest);transform:translateY(-3px);}

.bg-navy{background:var(--navy);}
.bg-forest{background:var(--forest);}
.bg-sand{background:var(--sand);}
.bg-navy-pale{background:var(--navy-pale);}
.text-gold{color:var(--gold);}
.text-forest{color:var(--forest);}
.text-navy{color:var(--navy);}
.text-slate{color:var(--slate);}

.grain-line{background:repeating-linear-gradient(90deg, var(--gold) 0 26px, transparent 26px 52px); height:4px; opacity:.55;}

/* ---------- Video embed ---------- */
.video-embed{position:relative;width:100%;padding-top:56.25%;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--navy);}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- Site notice (disclaimer) ---------- */
.site-notice{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.1);}
.site-notice p{color:rgba(255,255,255,.5);font-size:.72rem;line-height:1.5;}

/* ---------- Updates filter tabs ---------- */
.filter-tab{
  display:inline-flex;align-items:center;padding:.55rem 1.2rem;border-radius:999px;
  font-weight:600;font-size:.85rem;color:var(--slate);background:var(--white);
  border:1px solid var(--line);cursor:pointer;transition:.2s;
}
.filter-tab:hover{border-color:var(--navy);color:var(--navy);}
.filter-tab.is-active{background:var(--navy);color:var(--white);border-color:var(--navy);}