/*
Theme Name: Relevance Consulting
Theme URI: https://relevanceconsulting.co.za
Author: Relevance Consulting
Description: Custom theme for Relevance Consulting — matches the brand's navy/brass design system, with a fully functioning blog.
Version: 1.0
*/

:root{
  --navy-950:#080a19; --navy-900:#0f1329; --navy-800:#161a38; --navy-700:#232852;
  --stone-100:#ece9df; --stone-200:#c7c4b7; --stone-300:#a9a696;
  --brass:#b3925c; --brass-bright:#d4b483; --white:#ffffff;
  --line: rgba(236,233,223,0.14);
  --serif: 'Lora', 'Georgia', serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1120px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--navy-950);
  color:var(--stone-100);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{ background:var(--brass); color:var(--navy-950); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{ font-family:var(--sans); font-size:12px; letter-spacing:0.24em; text-transform:uppercase; color:var(--brass-bright); font-weight:500; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; color:var(--stone-100); }

/* Nav */
header.site-header{ position:sticky; top:0; z-index:50; background:rgba(8,10,25,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:120px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:88px; width:auto; }
.nav-links{ display:flex; gap:36px; list-style:none; }
.nav-links a{ font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--stone-300); transition:color .25s ease; }
.nav-links a:hover{ color:var(--stone-100); }
.nav-cta{ border:1px solid var(--stone-300); padding:10px 20px; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-100); transition:all .25s ease; white-space:nowrap; }
.nav-cta:hover{ background:var(--stone-100); color:var(--navy-950); border-color:var(--stone-100); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 28px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid transparent; transition:all .25s ease; cursor:pointer; font-family:var(--sans); font-weight:500; }
.btn-primary{ background:var(--brass); color:var(--navy-950); }
.btn-primary:hover{ background:var(--brass-bright); }
.btn-ghost{ border-color:var(--stone-300); color:var(--stone-100); background:transparent; }
.btn-ghost:hover{ border-color:var(--stone-100); }

section{ padding:100px 0; border-top:1px solid var(--line); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,3vw,38px); margin-top:14px; line-height:1.15; }
.section-head p{ color:var(--stone-300); margin-top:16px; font-size:15.5px; max-width:52ch; }

/* Blog: archive list */
.blog-hero{ padding:140px 0 60px; border-top:none; }
.blog-hero h1{ font-size:clamp(32px,4vw,48px); line-height:1.15; }
.blog-hero p{ color:var(--stone-300); margin-top:16px; font-size:16px; max-width:60ch; }

.post-list{ display:flex; flex-direction:column; }
.post-card{ padding:40px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:140px 1fr; gap:32px; }
.post-card:last-child{ border-bottom:1px solid var(--line); }
.post-date{ font-size:12.5px; color:var(--brass-bright); letter-spacing:0.05em; padding-top:4px; }
.post-card h2{ font-size:24px; line-height:1.3; }
.post-card h2 a:hover{ color:var(--brass-bright); }
.post-excerpt{ color:var(--stone-300); font-size:14.5px; margin-top:12px; max-width:70ch; }
.post-meta{ font-size:12px; color:var(--stone-300); margin-top:14px; letter-spacing:0.03em; }

.pagination{ display:flex; gap:16px; justify-content:center; padding:60px 0; }
.pagination a, .pagination span{ font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone-300); border:1px solid var(--line); padding:10px 18px; }
.pagination a:hover{ border-color:var(--brass-bright); color:var(--stone-100); }
.pagination .current{ border-color:var(--brass); color:var(--brass-bright); }

/* Blog: single post */
.single-post{ padding:140px 0 100px; border-top:none; max-width:760px; margin:0 auto; float:none; }
.single-post .post-date{ display:block; margin-bottom:18px; }
.single-post h1{ font-size:clamp(30px,4vw,44px); line-height:1.18; margin-bottom:24px; }
.single-post .post-content{ font-size:16.5px; color:var(--stone-200); line-height:1.8; }
.single-post .post-content p{ margin-bottom:22px; }
.single-post .post-content h2{ font-size:26px; margin:44px 0 18px; }
.single-post .post-content h3{ font-size:20px; margin:34px 0 14px; }
.single-post .post-content a{ color:var(--brass-bright); text-decoration:underline; text-underline-offset:3px; }
.single-post .post-content blockquote{ border-left:2px solid var(--brass-bright); padding-left:22px; font-style:italic; color:var(--stone-100); margin:28px 0; }
.single-post .post-content ul, .single-post .post-content ol{ margin:0 0 22px 24px; }
.back-to-blog{ display:inline-block; margin-top:50px; font-size:13px; letter-spacing:0.05em; text-transform:uppercase; color:var(--stone-300); border-top:1px solid var(--line); padding-top:24px; width:100%; }
.back-to-blog:hover{ color:var(--brass-bright); }

/* Footer */
footer.site-footer{ border-top:1px solid var(--line); padding:44px 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-inner img{ height:60px; width:auto; }
.footer-meta{ font-size:12px; color:var(--stone-300); display:flex; gap:26px; }
.footer-meta a:hover{ color:var(--stone-100); }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .post-card{ grid-template-columns:1fr; gap:8px; }
  .wrap{ padding:0 22px; }
  section, .single-post{ padding:70px 0; }
  .hero-inner, .about, .contact-grid, .teaser-inner, .proof-card{ grid-template-columns:1fr; }
  .tiers{ grid-template-columns:1fr; }
  .tier{ border-left:none !important; border-top:1px solid var(--line); }
  .row2{ grid-template-columns:1fr; }
}

/* ---------- HOME PAGE ---------- */
.hero{ position:relative; padding:120px 0 100px; overflow:hidden; }
.hero-inner{ position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:48px; align-items:start; }
.hero-frame{ border:1px solid var(--line); padding:44px 40px; position:relative; max-width:720px; }
.hero h1{ font-size:clamp(34px, 4.4vw, 56px); line-height:1.08; margin:18px 0 26px; }
.hero h1 em{ color:var(--brass-bright); font-style:italic; }
.hero p.lede{ font-size:17px; color:var(--stone-200); max-width:60ch; margin-bottom:34px; font-weight:300; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); }
.tier{ padding:44px 34px; border-left:1px solid var(--line); }
.tier:first-child{ border-left:none; }
.tier.flagship{ background:rgba(179,146,92,0.06); }
.tier-roman{ font-family:var(--serif); font-style:italic; color:var(--brass-bright); font-size:13px; letter-spacing:0.1em; text-transform:uppercase; }
.tier h3{ font-size:22px; margin:14px 0 16px; line-height:1.25; }
.tier p.desc{ color:var(--stone-300); font-size:14.5px; margin-bottom:22px; }
.tier ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:26px;}
.tier li{ font-size:13.5px; color:var(--stone-200); display:flex; gap:10px; }
.tier li::before{ content:"\2014"; color:var(--brass-bright); flex:none; }
.tier-note{ font-size:12px; color:var(--stone-300); border-top:1px solid var(--line); padding-top:16px; }
.hourly-note{ margin-top:34px; padding:26px 34px; border:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }

.about{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; }
.about p{ color:var(--stone-300); font-size:14.5px; margin-bottom:16px; }
.chip{ font-size:11.5px; letter-spacing:0.04em; color:var(--stone-200); border:1px solid var(--line); padding:8px 14px; display:inline-block; margin:0 10px 10px 0; }

.proof-card{ border:1px solid var(--line); padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.proof-tag{ display:inline-block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy-950); background:var(--brass-bright); padding:5px 10px; margin-bottom:18px;}
.proof-card p{ color:var(--stone-300); font-size:14.5px; margin-bottom:14px; }
.proof-stats .stat{ border-left:2px solid var(--brass-bright); padding-left:18px; margin-bottom:22px; }
.proof-stats .num{ font-family:var(--serif); font-size:28px; color:var(--stone-100); }
.proof-stats .lbl{ font-size:12.5px; color:var(--stone-200); margin-top:3px; }

.teaser{ background:var(--navy-900); }
.teaser-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.teaser-badge{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass-bright); border:1px solid var(--brass); padding:7px 14px; margin-bottom:22px; }
.teaser h2{ font-size:clamp(26px,3vw,36px); margin-bottom:18px; }
.teaser p{ color:var(--stone-300); font-size:15px; margin-bottom:20px; max-width:48ch; }
.teaser-panel{ border:1px solid var(--line); padding:40px; background:rgba(0,0,0,0.18); }
.signup-form{ display:flex; flex-direction:column; gap:14px; }
.signup-form input{ background:transparent; border:1px solid var(--stone-300); padding:14px 16px; color:var(--stone-100); font-family:var(--sans); font-size:14px; width:100%; }

.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; }
.contact-line{ display:flex; align-items:baseline; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.contact-line .k{ font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-bright); width:110px; flex:none; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.field label{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--stone-200); }
.field input, .field select, .field textarea{ background:transparent; border:1px solid var(--line); border-bottom:1px solid var(--stone-300); padding:13px 4px; color:var(--stone-100); font-family:var(--sans); font-size:14.5px; width:100%; }