/*
Theme Name: Zain Growth Advisory
Theme URI: https://imozain.com
Author: Muhammad Zain
Author URI: https://imozain.com
Description: A premium business-growth advisory theme for Muhammad Zain. Evergreen-ink and brass identity with an editorial serif/sans pairing, full light/dark support, a working contact form, and a multi-page marketing structure (Home, Services, About, Results, Blog, Contact).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zain-growth
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --ink:        #0E1614;
  --ink-2:      #14201C;
  --paper:      #F3EFE4;
  --paper-2:    #ECE6D6;
  --ivory:      #F7F4EC;
  --brass:      #B0842E;
  --brass-hi:   #C9A24B;
  --teal:       #245049;
  --text:       #17201E;
  --text-soft:  #55605B;
  --hair:       rgba(23,32,30,.14);
  --hair-strong:rgba(23,32,30,.28);

  --bg:          var(--paper);
  --bg-alt:      var(--ink);
  --surface:     var(--ivory);
  --fg:          var(--text);
  --fg-soft:     var(--text-soft);
  --accent:      var(--brass);
  --accent-fg:   #2a1f08;
  --rule:        var(--hair);
  --rule-strong: var(--hair-strong);
  --on-dark:     #ECE7D8;
  --on-dark-soft:#9AA79F;

  --serif: "Palatino Linotype","Book Antiqua", Palatino, "URW Palladio L", Georgia, "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1160px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--ink);
    --bg-alt:      var(--ink-2);
    --surface:     #17231F;
    --fg:          var(--on-dark);
    --fg-soft:     var(--on-dark-soft);
    --accent:      var(--brass-hi);
    --accent-fg:   #1a1305;
    --rule:        rgba(236,231,216,.14);
    --rule-strong: rgba(236,231,216,.26);
  }
}
:root[data-theme="dark"] {
  --bg:#0E1614; --bg-alt:#14201C; --surface:#17231F;
  --fg:#ECE7D8; --fg-soft:#9AA79F; --accent:#C9A24B; --accent-fg:#1a1305;
  --rule:rgba(236,231,216,.14); --rule-strong:rgba(236,231,216,.26);
}
:root[data-theme="light"] {
  --bg:#F3EFE4; --bg-alt:#0E1614; --surface:#F7F4EC;
  --fg:#17201E; --fg-soft:#55605B; --accent:#B0842E; --accent-fg:#2a1f08;
  --rule:rgba(23,32,30,.14); --rule-strong:rgba(23,32,30,.28);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; height:auto; display:block; }
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }
h1,h2,h3 { font-family:var(--serif); font-weight:500; line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-.01em; }
p { margin:0; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

.eyebrow { font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:0; }
.lead { font-size:19px; color:var(--fg-soft); line-height:1.7; }

/* ============================================================
   NAV
   ============================================================ */
header.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; height:68px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--serif); font-size:20px; letter-spacing:-.01em; text-decoration:none; color:var(--fg); }
.brand .mark { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1.5px solid var(--accent); color:var(--accent); font-family:var(--serif); font-size:15px; font-weight:600; flex:none; }
.nav-links { display:flex; gap:30px; align-items:center; margin:0; padding:0; list-style:none; }
.nav-links a { text-decoration:none; font-size:14.5px; color:var(--fg-soft); transition:color .2s; }
.nav-links a:hover { color:var(--fg); }
.nav-links .navcta { color:var(--accent-fg); background:var(--accent); padding:9px 18px; border-radius:2px; font-weight:600; font-size:14px; transition:transform .2s, filter .2s; }
.nav-links .navcta:hover { filter:brightness(1.06); transform:translateY(-1px); }
.current-menu-item > a, .current_page_item > a { color:var(--fg); }
@media (max-width:860px){ .nav-links li:not(.nav-cta-li):not(.nav-toggle-li){ display:none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn { display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:2px; font-size:15px; font-weight:600; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .2s, filter .2s, background .2s, color .2s; }
.btn-primary { background:var(--accent); color:var(--accent-fg); }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-2px); }
.btn-ghost { border-color:var(--rule-strong); color:var(--fg); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.toggle { background:none; border:1px solid var(--rule-strong); color:var(--fg-soft); width:34px; height:34px; border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:14px; transition:color .2s, border-color .2s; }
.toggle:hover { color:var(--accent); border-color:var(--accent); }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { padding-block:92px; }
.section-head { max-width:62ch; margin-bottom:52px; }
.section-head h2 { font-size:clamp(30px,4.4vw,46px); margin-top:16px; }
.section-head p { margin-top:20px; }

.dark { background:var(--bg-alt); color:var(--on-dark); }
.dark .eyebrow { color:var(--brass-hi); }
.dark .lead, .dark .section-head p { color:var(--on-dark-soft); }
.dark .btn-ghost { color:var(--on-dark); border-color:rgba(236,231,216,.28); }
.dark .btn-ghost:hover { color:var(--brass-hi); border-color:var(--brass-hi); }
.dark h1,.dark h2,.dark h3 { color:var(--on-dark); }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; overflow:hidden; }
.hero .wrap { padding-top:92px; padding-bottom:96px; }
.hero-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:56px; align-items:end; }
@media (max-width:900px){ .hero-grid { grid-template-columns:1fr; gap:34px; } }
.hero h1 { font-size:clamp(38px,6vw,66px); margin-top:20px; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero .lead { margin-top:26px; max-width:42ch; }
.hero-aside { border-left:1px solid var(--rule); padding-left:30px; }
.hero-aside .eyebrow { margin-bottom:16px; }
.credits { display:flex; flex-direction:column; gap:14px; }
.credit b { font-family:var(--serif); font-size:18px; font-weight:500; display:block; }
.credit span { font-size:13.5px; color:var(--fg-soft); }
.hero-aside .divider { height:1px; background:var(--rule); margin:20px 0; }

/* Page hero (interior pages) */
.page-hero { padding-top:80px; padding-bottom:72px; border-bottom:1px solid var(--rule); }
.page-hero h1 { font-size:clamp(36px,5.4vw,58px); margin-top:18px; }
.page-hero .lead { margin-top:24px; max-width:56ch; }

/* ============================================================
   THESIS
   ============================================================ */
.thesis .wrap { max-width:940px; }
.thesis .big { font-family:var(--serif); font-size:clamp(26px,3.6vw,40px); line-height:1.28; text-wrap:balance; }
.thesis .big u { text-decoration:none; color:var(--brass-hi); border-bottom:2px solid rgba(201,162,75,.4); padding-bottom:2px; }
.thesis .sub { margin-top:30px; max-width:60ch; }

/* ============================================================
   JOURNEY
   ============================================================ */
.journey-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--rule); }
@media (max-width:860px){ .journey-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .journey-grid { grid-template-columns:1fr; } }
.step { padding:30px 26px 34px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); position:relative; }
.journey-grid .step:nth-child(4n){ border-right:none; }
@media (max-width:860px){ .journey-grid .step:nth-child(4n){ border-right:1px solid var(--rule);} .journey-grid .step:nth-child(2n){ border-right:none; } }
.step .num { font-family:var(--serif); font-size:15px; color:var(--accent); letter-spacing:.1em; }
.step h3 { font-size:23px; margin-top:14px; }
.step p { font-size:15px; color:var(--fg-soft); margin-top:12px; }
.step .tag { font-size:12px; color:var(--fg-soft); text-transform:uppercase; letter-spacing:.12em; margin-top:16px; display:block; }

/* ============================================================
   PILLARS
   ============================================================ */
.pillars-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.pillar { background:var(--surface); border:1px solid var(--rule); padding:30px 28px 32px; border-radius:3px; display:flex; flex-direction:column; transition:transform .25s, border-color .25s, box-shadow .25s; }
.pillar:hover { transform:translateY(-4px); border-color:var(--accent); box-shadow:0 18px 40px -28px rgba(0,0,0,.5); }
.pillar.wide { grid-column:span 3; }
.pillar.half { grid-column:span 3; }
.pillar.third { grid-column:span 2; }
@media (max-width:900px){ .pillar.wide,.pillar.half,.pillar.third { grid-column:span 6; } }
.pillar .kicker { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.pillar .idx { font-family:var(--serif); font-size:14px; color:var(--accent); border:1px solid var(--accent); border-radius:50%; width:30px; height:30px; display:grid; place-items:center; flex:none; }
.pillar .src { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-soft); }
.pillar h3 { font-size:24px; }
.pillar .role { color:var(--accent); font-size:14px; font-weight:600; margin-top:6px; font-family:var(--sans); }
.pillar p { font-size:14.5px; color:var(--fg-soft); margin-top:14px; }
.pillar ul { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; }
.pillar li { font-size:12px; border:1px solid var(--rule); color:var(--fg-soft); padding:4px 10px; border-radius:2px; }

/* ============================================================
   MULTIPLIER
   ============================================================ */
.mult { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; position:relative; }
@media (max-width:760px){ .mult { grid-template-columns:1fr; } }
.mult-card { border:1px solid rgba(236,231,216,.2); border-radius:3px; padding:32px 28px; position:relative; }
.mult-card .n { font-family:var(--serif); font-size:46px; color:var(--brass-hi); line-height:1; }
.mult-card h3 { font-size:20px; margin-top:14px; }
.mult-card p { font-size:14px; color:var(--on-dark-soft); margin-top:10px; }
.mult-card .op { position:absolute; right:-30px; top:50%; transform:translateY(-50%); font-family:var(--serif); font-size:34px; color:var(--brass-hi); z-index:2; }
@media (max-width:760px){ .mult-card .op { right:50%; top:auto; bottom:-30px; transform:translateX(50%); } }
.mult-card:last-child .op { display:none; }
.mult-result { text-align:center; margin-top:42px; }
.mult-result .eq { font-family:var(--serif); font-size:clamp(26px,3.4vw,38px); }
.mult-result .eq em { font-style:italic; color:var(--brass-hi); }

/* ============================================================
   WHO
   ============================================================ */
.who-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:760px){ .who-grid { grid-template-columns:1fr; } }
.who-item { display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--rule); }
.who-item .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:9px; flex:none; }
.who-item h3 { font-size:20px; }
.who-item p { font-size:14.5px; color:var(--fg-soft); margin-top:6px; }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:54px; align-items:center; }
@media (max-width:820px){ .about-grid { grid-template-columns:1fr; gap:32px; } }
.portrait { aspect-ratio:4/5; border-radius:4px; border:1px solid var(--rule); background:radial-gradient(120% 80% at 30% 10%, rgba(201,162,75,.18), transparent 60%), linear-gradient(160deg, var(--ink-2), var(--ink)); display:grid; place-items:center; position:relative; overflow:hidden; }
.portrait img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.portrait .mono { font-family:var(--serif); font-size:92px; color:var(--brass-hi); opacity:.9; }
.portrait .cap { position:absolute; bottom:18px; left:20px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-soft); z-index:2; }
.about-body h2 { font-size:clamp(28px,4vw,42px); }
.about-body p { margin-top:20px; color:var(--fg-soft); }
.stats { display:flex; gap:40px; margin-top:30px; flex-wrap:wrap; }
.stat b { font-family:var(--serif); font-size:34px; font-weight:500; display:block; color:var(--fg); }
.dark .stat b { color:var(--on-dark); }
.stat span { font-size:13px; color:var(--fg-soft); }

/* ============================================================
   PROSE (about page, blog)
   ============================================================ */
.prose { max-width:68ch; }
.prose p { margin-top:22px; color:var(--fg-soft); font-size:17.5px; }
.prose h2 { font-size:30px; margin-top:48px; }
.prose h3 { font-size:23px; margin-top:36px; }
.prose ul { margin-top:20px; padding-left:22px; color:var(--fg-soft); }
.prose li { margin-top:8px; }
.prose a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose blockquote { margin:32px 0; padding-left:24px; border-left:3px solid var(--accent); font-family:var(--serif); font-size:22px; font-style:italic; color:var(--fg); }

/* ============================================================
   RESULTS / CASE STUDIES
   ============================================================ */
.results-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .results-grid { grid-template-columns:1fr; } }
.result-card { border:1px solid var(--rule); border-radius:3px; padding:32px 28px; background:var(--surface); }
.result-card .metric { font-family:var(--serif); font-size:46px; color:var(--accent); line-height:1; }
.result-card .metric small { font-size:20px; }
.result-card h3 { font-size:20px; margin-top:16px; }
.result-card p { font-size:14.5px; color:var(--fg-soft); margin-top:12px; }
.result-card .who { margin-top:18px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); }
.quote-band { text-align:center; }
.quote-band .wrap { max-width:820px; }
.quote-band blockquote { font-family:var(--serif); font-size:clamp(24px,3.4vw,36px); line-height:1.32; margin:0; font-style:italic; }
.quote-band cite { display:block; margin-top:24px; font-style:normal; font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-hi); }

/* ============================================================
   BLOG
   ============================================================ */
.post-list { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:760px){ .post-list { grid-template-columns:1fr; } }
.post-card { border:1px solid var(--rule); border-radius:3px; overflow:hidden; display:flex; flex-direction:column; background:var(--surface); transition:transform .25s, border-color .25s; }
.post-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.post-card .thumb { aspect-ratio:16/9; background:linear-gradient(160deg,var(--ink-2),var(--ink)); overflow:hidden; }
.post-card .body { padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.post-card .meta { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); }
.post-card h3 { font-size:22px; margin-top:12px; }
.post-card h3 a { text-decoration:none; }
.post-card h3 a:hover { color:var(--accent); }
.post-card p { font-size:14.5px; color:var(--fg-soft); margin-top:12px; }
.post-card .more { margin-top:auto; padding-top:18px; font-size:14px; color:var(--accent); font-weight:600; text-decoration:none; }
.single-post { max-width:72ch; margin-inline:auto; }
.single-post .meta { font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-soft); }
.single-post h1 { font-size:clamp(32px,5vw,52px); margin-top:16px; }
.pagination { display:flex; gap:14px; margin-top:48px; justify-content:center; flex-wrap:wrap; }
.pagination a, .pagination span { padding:9px 16px; border:1px solid var(--rule); border-radius:2px; text-decoration:none; font-size:14px; color:var(--fg-soft); }
.pagination .current { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }

/* ============================================================
   CONTACT / FORM
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:820px){ .contact-grid { grid-template-columns:1fr; gap:36px; } }
.contact-detail { display:flex; flex-direction:column; gap:20px; }
.contact-detail .row { padding:18px 0; border-top:1px solid var(--rule); }
.contact-detail .row span { display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft); }
.contact-detail .row a, .contact-detail .row b { font-family:var(--serif); font-size:22px; font-weight:500; text-decoration:none; color:var(--fg); margin-top:6px; display:inline-block; }
.contact-detail .row a:hover { color:var(--accent); }

.form-card { border:1px solid var(--rule); border-radius:4px; padding:34px 32px; background:var(--surface); }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.field label { font-size:13px; font-weight:600; letter-spacing:.04em; }
.field input, .field select, .field textarea {
  font-family:var(--sans); font-size:15px; color:var(--fg);
  background:var(--bg); border:1px solid var(--rule-strong); border-radius:2px;
  padding:12px 14px; width:100%; transition:border-color .2s;
}
.field textarea { min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.form-note { margin-top:14px; font-size:12.5px; color:var(--fg-soft); }
.form-status { padding:14px 16px; border-radius:2px; margin-bottom:20px; font-size:14px; }
.form-status.ok { background:rgba(36,80,73,.14); border:1px solid var(--teal); color:var(--fg); }
.form-status.err { background:rgba(176,132,46,.12); border:1px solid var(--accent); color:var(--fg); }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final { text-align:center; }
.final .wrap { max-width:780px; }
.final h2 { font-size:clamp(32px,5vw,54px); }
.final .lead { margin:22px auto 0; }
.final .cta-row { justify-content:center; }
.contact-line { margin-top:30px; display:flex; gap:28px; justify-content:center; flex-wrap:wrap; font-size:14.5px; }
.contact-line a { color:var(--on-dark); text-decoration:none; border-bottom:1px solid rgba(201,162,75,.5); padding-bottom:2px; }
.contact-line a:hover { color:var(--brass-hi); }

/* ============================================================
   FOOTER
   ============================================================ */
footer.site-footer { border-top:1px solid var(--rule); padding-block:40px; }
.foot-inner { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.foot-inner small { color:var(--fg-soft); font-size:13px; }
.foot-links { display:flex; gap:22px; font-size:13.5px; margin:0; padding:0; list-style:none; }
.foot-links a { color:var(--fg-soft); text-decoration:none; }
.foot-links a:hover { color:var(--accent); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } }