/*
Theme Name: Pay Capital
Theme URI: https://paycapital.co.za
Author: Custom Build
Author URI: https://paycapital.co.za
Description: Custom WordPress theme for Pay Capital, a boutique strategic and investments advisory firm. Rebuilt from scratch in plain PHP to replace an unsupported legacy theme.
Version: 1.0.16
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: paycapital
*/

/* ==========================================================================
   0. Variables & Reset
   ========================================================================== */
:root{
  --coral: #cd5b45;
  --coral-dark: #b64d38;
  --coral-tint: #f6ddd2;
  --ink: #262626;
  --gray: #6e6e6e;
  --gray-light: #9a9a9a;
  --gold: #eeb31f;
  --border: #e6e2df;
  --bg-soft: #faf8f7;
  --max-width: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body{
  margin:0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  background: #fff;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--coral); text-decoration:none; }
a:hover{ color: var(--coral-dark); }
ul, ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.2px;
  margin:0 0 20px;
}
.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 30px;
}
/* container-md / container-lg intentionally removed: every page now shares
   the same 1180px frame as the header so left/right edges always align. */
.section{ padding: 70px 0; }
.section-tight{ padding: 40px 0; }
.section-alt{ background: var(--bg-soft); }
.eyebrow{
  color: var(--coral);
  font-weight:600;
  font-size:1.5em;
  text-align:center;
}
.center{ text-align:center; }
.lede{
  color: var(--gray);
  text-align:center;
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 1.05em;
}
.btn{
  display:inline-block;
  background: var(--gold);
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:.85em;
  padding: 13px 34px;
  border:none;
  border-radius:2px;
  cursor:pointer;
  transition: background .2s ease;
}
.btn:hover{ background:#d9a112; color:#fff; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header{
  border-bottom: 1px solid var(--border);
  position: sticky;
  top:0;
  background:#fff;
  z-index: 100;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
  flex-wrap: wrap;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{ width:52px; height:52px; flex-shrink:0; }
.brand-text{ line-height:1.1; }
.brand-text .name{
  font-family:'Montserrat', sans-serif;
  color: var(--coral);
  font-weight:700;
  font-size:1.5em;
  letter-spacing:1px;
}
.brand-text .tagline{
  color: var(--gray-light);
  font-size:.72em;
  letter-spacing:.5px;
}
.primary-nav > ul{
  display:flex;
  gap:34px;
  flex-wrap: wrap;
}
.primary-nav > ul > li{ position:relative; }
.primary-nav a{
  color: var(--ink);
  font-weight:600;
  font-size:.95em;
  display:inline-block;
  padding:8px 0;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-page-ancestor > a{ color: var(--coral); }
.nav-toggle{ display:none; }

/* Dropdown submenus (The Firm / Services etc.) */
.primary-nav .menu-item-has-children > a:after{
  content:"\25BE";
  font-size:.7em;
  margin-left:6px;
  color: var(--gray-light);
}
.primary-nav ul.sub-menu{
  list-style:none;
  margin:0; padding:0;
}
.primary-nav > ul > li > ul.sub-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  padding:8px 0;
  display:none;
  z-index:200;
}
.primary-nav > ul > li:hover > ul.sub-menu,
.primary-nav > ul > li.sub-menu-open > ul.sub-menu{
  display:block;
}
.primary-nav ul.sub-menu li a{
  display:block;
  padding:10px 20px;
  font-weight:500;
  white-space:nowrap;
}
.primary-nav ul.sub-menu li a:hover{ background: var(--bg-soft); }
.submenu-toggle{
  display:none;
  position:absolute;
  right:0; top:0;
  width:36px; height:36px;
  background:none;
  border:none;
  font-size:1em;
  color: var(--gray);
  cursor:pointer;
}

@media (max-width: 860px){
  .nav-toggle{
    display:block;
    background:none;
    border:none;
    font-size:1.6em;
    cursor:pointer;
    color: var(--ink);
  }
  .primary-nav{
    display:none;
    width:100%;
    order:3;
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav > ul{ flex-direction:column; gap:0; padding: 10px 0; }
  .primary-nav > ul > li{ border-top:1px solid var(--border); }
  .primary-nav a{ display:block; padding:12px 0; }

  .primary-nav > ul > li > ul.sub-menu{
    position:static;
    border:none;
    box-shadow:none;
    padding:0 0 0 16px;
    display:none;
  }
  .primary-nav > ul > li.sub-menu-open > ul.sub-menu{ display:block; }
  .submenu-toggle{ display:block; }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: 420px;
  display:flex;
  align-items:center;
  background-size: cover;
  background-position:center;
  background-color: #1c1c2b;
  background-image: linear-gradient(90deg, rgba(28,20,60,.75) 0%, rgba(120,95,110,.55) 55%, rgba(246,221,210,.92) 100%);
  overflow:hidden;
}
.hero.has-image{ background-blend-mode: normal; }
.hero-inner{
  width:100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 30px;
  display:flex;
  justify-content:flex-end;
}
.hero-text{
  max-width: 600px;
  text-align:right;
}
.hero-text h1{
  color: var(--coral);
  font-size: 2em;
  margin:0 0 14px;
  text-shadow: 0 1px 8px rgba(255,255,255,.6);
}
.hero-text .hero-subhead{
  color: var(--ink);
  font-size:1.05em;
  line-height:1.6;
  margin:0;
}
.hero-simple{
  background: var(--bg-soft);
  padding: 60px 0 40px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
.hero-simple h1{
  color: var(--coral);
  font-size:2em;
}
.hero-simple p{ color: var(--gray); max-width:650px; margin:0 auto; }

/* ==========================================================================
   3. Content blocks
   ========================================================================== */
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:50px;
  align-items:start;
}
@media (max-width: 780px){ .two-col{ grid-template-columns:1fr; } }

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:36px;
  margin-top:40px;
}
.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:4px;
  padding:30px;
}
.card h3{ color: var(--coral); font-size:1.1em; }

.jump-list{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
  padding: 20px 0 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:50px;
}
.jump-list a{
  color: var(--ink);
  font-weight:600;
}
.jump-list a:before{ content:"— "; color: var(--coral); }

.check-list li{
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
  color: var(--gray);
}
.check-list li:before{
  content:"";
  position:absolute;
  left:0; top:9px;
  width:8px; height:8px;
  background: var(--coral);
  border-radius:50%;
}

.numbered-services{
  counter-reset: svc;
  list-style: none;
  padding: 0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:24px;
  margin: 40px 0 0;
}
.numbered-services li{
  counter-increment: svc;
  background: var(--bg-soft);
  border:1px solid var(--border);
  border-radius:4px;
  padding:26px 22px 22px;
  font-weight:700;
  color: var(--ink);
}
.numbered-services li:before{
  content: counter(svc) ".";
  color: var(--coral);
  font-size:1.6em;
  display:block;
  margin-bottom:8px;
}

.service-block{
  padding: 50px 0;
  border-bottom:1px solid var(--border);
}
.service-block:last-child{ border-bottom:none; }
.service-block h3{
  color: var(--coral);
  font-size:1.3em;
}
.service-block .approach-label{
  color: var(--gray-light);
  font-weight:700;
  text-transform:uppercase;
  font-size:.8em;
  letter-spacing:1px;
  margin-bottom:16px;
  display:block;
}

/* Highlights: stat cards, pull-quotes, CTA strips, labeled cards */
.stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:12px;
}
.stat-card{
  background: var(--bg-soft);
  border-radius:8px;
  padding:20px 14px;
  text-align:center;
}
.stat-card .stat-number{
  font-family:'Playfair Display', Georgia, serif;
  color: var(--coral);
  font-size:1.7em;
  font-weight:700;
  line-height:1.1;
}
.stat-card .stat-label{
  color: var(--gray);
  font-size:.78em;
  margin-top:6px;
}
.pull-quote{
  border-left:2px solid var(--coral);
  padding-left:16px;
  margin-bottom:20px;
  color: var(--gray);
}
.cta-strip{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.cta-strip .cta-label{ font-weight:600; color: var(--ink); }
.cta-strip .cta-link{ color: var(--coral); font-weight:600; }
.labeled-card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:16px;
  margin-top:10px;
}
.labeled-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:18px;
}
.labeled-card .label{
  font-family:'Playfair Display', Georgia, serif;
  color: var(--coral);
  font-size:1em;
  font-weight:700;
  margin-bottom:6px;
  display:block;
}
.labeled-card .body{ color: var(--gray); font-size:.9em; line-height:1.6; }
.value-groups{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:32px;
  margin-top:10px;
}
.value-groups h4{
  font-size:1em;
  color: var(--ink);
  margin-bottom:14px;
}
.value-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:22px;
}
.value-card .check-list li{ font-size:.9em; }

/* Team */
.team-member{
  border:1px solid var(--border);
  border-radius:4px;
  padding:34px;
  margin-bottom:30px;
}
.team-member h3{
  color: var(--ink);
  font-size:1.25em;
  margin-bottom:2px;
}
.team-member .role{
  color: var(--coral);
  font-weight:700;
  text-transform:uppercase;
  font-size:.8em;
  letter-spacing:1px;
  display:block;
  margin-bottom:16px;
}
.team-member p{ color: var(--gray); margin:0 0 12px; }

.team-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.team-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background: var(--coral-tint);
  color: var(--coral-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  font-size:1.05em;
  flex-shrink:0;
}
.team-avatar.lg{
  width:76px;
  height:76px;
  font-size:1.35em;
  margin:0 auto 14px;
}
.team-header .team-name{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  color: var(--ink);
  font-size:1.15em;
  line-height:1.3;
}
.team-header .role{
  margin-bottom:0;
}
.team-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.team-chip{
  background: var(--bg-soft);
  color: var(--gray);
  font-size:.78em;
  font-weight:600;
  padding:5px 12px;
  border-radius:20px;
}

/* Leadership (homepage teaser) */
.leadership-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:30px;
  margin-top:36px;
  text-align:center;
}
.leadership-member{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.leadership-member .team-name{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:700;
  color: var(--ink);
  font-size:1.1em;
  line-height:1.3;
}
.leadership-member .role{
  color: var(--coral);
  font-weight:600;
  font-size:.85em;
}

/* Career */
.career-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap:30px;
  margin-top:40px;
}
.career-grid .card h3{ text-transform:uppercase; font-size:1em; letter-spacing:.5px; }

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:60px;
  align-items:start;
}
@media (max-width: 780px){ .contact-grid{ grid-template-columns:1fr; } }

.form-row{ margin-bottom:22px; }
.form-row label{
  display:block;
  color: var(--gray);
  margin-bottom:6px;
  font-size:.95em;
}
.form-row input[type=text],
.form-row input[type=email],
.form-row textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:2px;
  padding:11px 14px;
  font-family:inherit;
  font-size:1em;
  background:#fff;
}
.form-row textarea{ min-height:170px; resize:vertical; }
.form-honeypot{ position:absolute; left:-9999px; }

.contact-info-item{
  display:flex;
  gap:16px;
  margin-bottom:28px;
}
.contact-info-item .icon{
  color: var(--coral);
  font-size:1.4em;
  line-height:1;
  flex-shrink:0;
}
.contact-info-item h4{
  color: var(--coral);
  font-size:1em;
  margin:0 0 6px;
}
.contact-info-item p{ color: var(--gray); margin:0; }

.form-notice{
  padding:14px 18px;
  border-radius:3px;
  margin-bottom:26px;
  font-size:.95em;
}
.form-notice.success{ background:#e9f7ee; color:#1e7a3d; border:1px solid #bfe6cc; }
.form-notice.error{ background:#fbeaea; color:#a3312f; border:1px solid #f3c3c2; }

/* ==========================================================================
   4. Footer
   ========================================================================== */
.site-footer{
  background: var(--coral);
  color:#fff;
  text-align:center;
  padding: 26px 0;
  font-weight:600;
  letter-spacing:.5px;
}
.site-footer a{ color:#fff; }