/* Zayn Consulting — site styles
   Layout: dark navy navigation and feature bands, light working sections between.
   Gold is used once per band, as an accent, never as a surface. */

:root{
  --navy:#09182B;
  --navy-2:#0F2742;
  --gold:#B8924E;
  --gold-br:#D4AF68;
  --paper:#FFFFFF;
  --paper-2:#F4F6F8;
  --ink:#131C27;
  --ink-2:#4E5A68;
  --ink-3:#7E8A98;
  --rule:#DCE1E7;
  --on-dark:#EEF2F7;
  --on-dark-2:#B3C4D8;
  --rule-dark:#1E3A5C;
  --serif:"Spectral","Utopia",Georgia,"Times New Roman",serif;
  --sans:"Archivo","TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme: light;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--gold-br); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--gold); color:#08121F;
  padding:10px 18px; font-size:14px; font-weight:600; z-index:50;
}
.skip:focus{ left:12px; top:12px; }

.wrap{
  max-width:1120px; margin:0 auto;
  padding-left:max(22px, env(safe-area-inset-left,0px));
  padding-right:max(22px, env(safe-area-inset-right,0px));
}
.band{ padding-block:clamp(54px,6.5vw,88px); }
.dark{ background:var(--navy); color:var(--on-dark); }
.tint{ background:var(--paper-2); }

/* ---------- type ---------- */
.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.21em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
.dark .eyebrow{ color:var(--gold-br); }

h1,h2,h3{ text-wrap:balance; }
h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(33px,5.2vw,58px); line-height:1.09; letter-spacing:-.015em;
  margin:0 0 22px; max-width:17ch;
}
h1 em{ font-style:italic; color:var(--gold-br); }
h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(26px,3.4vw,38px); line-height:1.19; letter-spacing:-.01em;
  margin:0 0 18px; max-width:21ch; color:var(--navy);
}
.dark h2{ color:var(--on-dark); }
h3{
  font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.3;
  margin:0 0 9px; color:var(--navy);
}
.dark h3{ color:var(--on-dark); }
p{ margin:0 0 15px; }
p:last-child{ margin-bottom:0; }
.lede{ font-size:18.5px; color:var(--ink-2); max-width:60ch; }
.dark .lede{ color:#C6D4E4; }
.sec-intro{ max-width:60ch; color:var(--ink-2); margin-bottom:44px; }
.dark .sec-intro{ color:var(--on-dark-2); }
.more{ margin-top:26px; font-size:15px; font-weight:600; }
.more a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--gold); padding-bottom:2px; }
.more.light a{ color:#fff; border-bottom-color:var(--gold-br); }

/* ---------- nav ---------- */
.nav{ background:var(--navy); border-bottom:1px solid var(--rule-dark); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:22px; padding-block:17px; flex-wrap:wrap; }
.brand{ display:block; line-height:0; }
.nav img{ width:168px; display:block; }
.navlinks{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.navlinks a{ font-size:13.5px; letter-spacing:.04em; color:var(--on-dark-2); text-decoration:none; }
.navlinks a:hover{ color:#fff; }
.navlinks a.on{ color:#fff; border-bottom:1px solid var(--gold-br); padding-bottom:3px; }

.btn{
  display:inline-block; font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:.04em; text-decoration:none; padding:11px 22px;
  background:var(--gold); color:#08121F; border:1px solid var(--gold);
  transition:background .15s ease, border-color .15s ease;
}
.btn:hover{ background:var(--gold-br); border-color:var(--gold-br); }
.navlinks a.btn{ color:#08121F; }
.navlinks a.btn:hover{ color:#08121F; }
.btn-ghost{ background:transparent; color:var(--on-dark); border:1px solid #2C4C72; }
.btn-ghost:hover{ background:#122E4C; border-color:#3C638F; }

/* ---------- heroes ---------- */
.hero{ background:var(--navy); color:var(--on-dark); }
.hero .lede, .pagehero .lede{ color:#C6D4E4; }
.hero .eyebrow, .pagehero .eyebrow{ color:var(--gold-br); }
.hero .wrap{ padding-block:clamp(62px,8.5vw,112px) clamp(50px,6vw,74px); }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }

.pagehero{ background:var(--navy); color:var(--on-dark); }
.pagehero .wrap{ padding-block:clamp(50px,6.5vw,82px) clamp(46px,5.5vw,70px); }
.pagehero h1{ font-size:clamp(30px,4.4vw,48px); max-width:19ch; }

.credbar{ border-top:1px solid var(--rule-dark); background:var(--navy-2); }
.credbar .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding-block:28px; }
.credbar .wrap{ align-items:start; }
.credbar .k{ font-size:10.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--on-dark-2); margin:0 0 10px; }
.credbar .v{ font-size:13.5px; line-height:1.45; color:var(--on-dark-2); margin:0; }
.credbar .big{
  display:block; font-family:var(--serif); font-weight:300; font-size:40px;
  line-height:1; color:#fff; margin-bottom:7px; font-variant-numeric:lining-nums;
}

/* ---------- grids ---------- */
.probs{ display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }
.probs > div{ min-width:0; padding-top:20px; border-top:2px solid var(--navy); }
.probs p{ color:var(--ink-2); font-size:15.5px; margin:0; }

.svcs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.svc{ background:var(--paper); padding:28px 26px; min-width:0; }
.svc .no{ font-size:11.5px; font-weight:700; letter-spacing:.17em; color:var(--gold); margin:0 0 11px; }
.svc h3{ font-size:19px; }
.svc p{ color:var(--ink-2); font-size:15px; margin:0; }

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:58px; align-items:start; }
.split > div{ min-width:0; }

.pullquote{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,2.4vw,26px); line-height:1.42; color:var(--navy);
  border-left:3px solid var(--gold); padding-left:26px; margin:0;
}
.dark .pullquote{ color:var(--on-dark); border-left-color:var(--gold-br); }

.checks{ list-style:none; margin:0; padding:0; display:grid; gap:17px; }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; font-size:15.5px; color:var(--ink-2); }
.checks .tick{ color:var(--gold); font-weight:700; line-height:1.5; }
.checks b{ color:var(--navy); font-weight:600; display:block; }

.facts{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.facts li{ display:grid; gap:3px; padding:14px 0; border-top:1px solid var(--rule-dark); }
.facts li:last-child{ border-bottom:1px solid var(--rule-dark); }
.facts .fk{ font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--on-dark-2); }
.facts .fv{ font-family:var(--serif); font-size:18px; color:#fff; line-height:1.3; }

/* ---------- service detail (services page) ---------- */
.detail{ display:grid; grid-template-columns:72px 1fr; gap:0 26px; padding-block:38px; border-top:1px solid var(--rule); }
.detail:first-child{ border-top:none; padding-top:0; }
.detail > div{ min-width:0; }
.dnum{ font-family:var(--serif); font-size:34px; line-height:1; color:var(--gold); }
.dh{ font-size:clamp(23px,2.8vw,30px); margin-bottom:14px; max-width:24ch; }
.detail p{ color:var(--ink-2); max-width:66ch; }
.dlist{ margin:20px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.dlist li{ position:relative; padding-left:20px; font-size:15.5px; color:var(--ink-2); }
.dlist li::before{ content:""; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--gold); }

/* ---------- steps / plans / faq ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--navy); }
.step{ min-width:0; padding:26px 28px 26px 0; }
.step + .step{ padding-left:28px; border-left:1px solid var(--rule); }
.step .no{ font-family:var(--serif); font-size:32px; line-height:1; color:var(--gold); margin:0 0 11px; }
.step p{ color:var(--ink-2); font-size:15.5px; margin:0; }

.plans{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.plan{ border:1px solid var(--rule); padding:30px 28px; background:var(--paper); min-width:0; }
.plan .tag{ font-size:11px; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--gold); margin:0 0 12px; }
.plan p{ color:var(--ink-2); font-size:15.5px; }
.plan .terms{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink-3); }

.faq{ display:grid; grid-template-columns:1fr 1fr; gap:32px 54px; margin-top:40px; }
.faq > div{ min-width:0; }
.faq h3{ font-family:var(--sans); font-size:16px; font-weight:600; color:var(--navy); margin-bottom:7px; }
.faq p{ color:var(--ink-2); font-size:15.5px; margin:0; }

/* ---------- cases (experience page) ---------- */
.case{ display:grid; grid-template-columns:230px 1fr; gap:0 36px; padding-block:34px; border-top:1px solid var(--rule); }
.case:first-of-type{ border-top:2px solid var(--navy); }
.case > div{ min-width:0; }
.cmeta .ck{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:0 0 3px; }
.cmeta .cv{ font-family:var(--serif); font-size:16px; color:var(--navy); line-height:1.3; margin:0 0 16px; }
.cmeta .cv:last-child{ margin-bottom:0; }
.case h3{ font-size:22px; margin-bottom:11px; max-width:26ch; }
.case p{ color:var(--ink-2); max-width:64ch; }
.ctags{ display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0 !important; }
.ctags span{
  font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--rule); padding:3px 10px; white-space:nowrap;
}

/* ---------- sectors ---------- */
.sect{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }
.sect > div{ min-width:0; }
.sect h3{ font-size:19px; }
.sect p{ color:var(--on-dark-2); font-size:15px; margin:0; }
.sect .rule{ height:2px; background:var(--gold-br); width:40px; margin-bottom:17px; }

/* ---------- contact ---------- */
.cfield{ padding:17px 0; border-top:1px solid var(--rule); }
.cfield:last-child{ border-bottom:1px solid var(--rule); }
.cfield .k{ font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); margin:0 0 5px; }
.cfield .v{ font-size:18px; color:var(--navy); margin:0; word-break:break-word; }
.cfield .v a{ text-decoration:none; border-bottom:1px solid var(--gold); }

.facts2{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.facts2 > div{ min-width:0; }
.facts2 .k{ font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-3); margin:0 0 5px; }
.facts2 .v{ font-family:var(--serif); font-size:17px; color:var(--navy); margin:0; line-height:1.3; }

/* ---------- closing CTA ---------- */
.cta-band{ border-top:1px solid var(--rule-dark); }
.cta-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:44px; align-items:center; }
.cta-inner > div{ min-width:0; }
.cta-inner h2{ margin-bottom:14px; }
.cta-act{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.cta-mail{ font-size:15px; color:var(--on-dark-2); margin:0; word-break:break-word; }

/* ---------- footer ---------- */
footer{ background:var(--navy-2); color:var(--on-dark-2); }
.foot-grid{
  display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:38px;
  padding-block:44px 32px;
}
.foot-grid > div{ min-width:0; }
.foot-logo{ width:152px; margin-bottom:16px; }
.foot-grid p{ font-size:14px; margin:0 0 7px; max-width:40ch; }
.foot-grid a{ display:block; font-size:14px; text-decoration:none; margin-bottom:7px; word-break:break-word; }
.foot-grid a:hover{ color:#fff; }
.fh{ font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:#7E93AD; margin-bottom:13px !important; }
.fp{ color:var(--on-dark-2); }
.foot-legal{
  display:flex; flex-wrap:wrap; gap:10px 32px; justify-content:space-between;
  padding-block:20px; border-top:1px solid var(--rule-dark); font-size:12.5px;
}
.foot-legal strong{ color:#fff; font-weight:600; letter-spacing:.04em; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .svcs{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .facts2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .probs,.sect{ grid-template-columns:1fr; gap:28px; }
  .split{ grid-template-columns:1fr; gap:32px; }
  .steps{ grid-template-columns:1fr; }
  .step{ padding:22px 0; border-top:1px solid var(--rule); }
  .step + .step{ padding-left:0; border-left:none; }
  .plans,.faq{ grid-template-columns:1fr; }
  .faq{ gap:26px; }
  .cta-inner{ grid-template-columns:1fr; gap:28px; }
  .case{ grid-template-columns:1fr; gap:18px; }
  .cmeta{ display:flex; flex-wrap:wrap; gap:0 32px; }
  .cmeta .cv{ margin-bottom:0; }
  .detail{ grid-template-columns:1fr; gap:12px; }
  .credbar .wrap{ grid-template-columns:repeat(2,1fr); gap:22px; }
}
@media (max-width:620px){
  .svcs{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:28px; }
  .navlinks{ gap:18px; }
  .navlinks a{ font-size:13px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- founder bio ---------- */
.bio{ display:grid; grid-template-columns:360px 1fr; gap:54px; align-items:start; }
.bio > div{ min-width:0; }
.bio-photo img{ display:block; width:100%; height:auto; }
.bio-role{
  font-size:12px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold); margin:-6px 0 20px;
}
.bio p{ color:var(--ink-2); max-width:62ch; }
.bio .pullquote{ margin-top:28px; color:var(--navy); }
@media (max-width:860px){
  .bio{ grid-template-columns:1fr; gap:30px; }
  .bio-photo{ max-width:330px; }
}

/* ---------- career timeline ---------- */
.tl{ border-top:2px solid var(--navy); }
.tlrow{ display:grid; grid-template-columns:190px 1fr; gap:0 36px; padding:26px 0; border-bottom:1px solid var(--rule); }
.tlrow > div{ min-width:0; }
.tldate{
  font-size:12px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold); margin:4px 0 0;
}
.tlrow h3{ font-size:20px; margin-bottom:4px; max-width:32ch; }
.tlorg{
  font-size:12.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 11px;
}
.tlrow p:last-child{ color:var(--ink-2); max-width:66ch; }
@media (max-width:860px){
  .tlrow{ grid-template-columns:1fr; gap:8px; }
  .tldate{ margin-top:0; }
}

/* ---------- figure / mechanism diagram ---------- */
.fig{ margin:0; color:var(--ink); }
.figscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fig svg{ display:block; width:100%; min-width:660px; max-width:900px; height:auto; }
.fig figcaption{
  margin-top:14px; font-size:14px; color:var(--ink-3);
  max-width:66ch; border-left:2px solid var(--rule); padding-left:14px;
}

/* ---------- services index ---------- */
.svcindex{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-bottom:44px;
}
.svcindex a{
  background:var(--paper); padding:16px 18px; text-decoration:none;
  font-size:14.5px; color:var(--navy); min-width:0;
  display:flex; gap:10px; align-items:baseline;
  transition:background .14s ease;
}
.svcindex a:hover{ background:var(--paper-2); }
.svcindex a span{
  font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--gold); flex:none;
}
.detail{ scroll-margin-top:24px; }
@media (max-width:860px){ .svcindex{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svcindex{ grid-template-columns:1fr; } }

/* ---------- mobile navigation ---------- */
@media (max-width:620px){
  .nav .wrap{ flex-direction:column; align-items:stretch; gap:14px; padding-block:15px; }
  .nav .brand{ align-self:flex-start; }
  .navlinks{ width:100%; gap:0; display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; align-items:center; }
  .navlinks a{ font-size:13px; }
  .navlinks a.btn{ grid-column:1 / -1; text-align:center; margin-top:12px; padding:13px 20px; }
  .navlinks a.on{ padding-bottom:2px; }
}

/* ---------- full-width statement band ---------- */
.dark + .dark{ border-top:1px solid var(--rule-dark); }
.statement .wrap{ padding-block:clamp(60px,7vw,92px); }
.bigstatement{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px,5vw,58px); line-height:1.1; letter-spacing:-.015em;
  color:#fff; margin:0 0 40px; max-width:19ch; text-wrap:balance;
}
.bigstatement em{ font-style:italic; color:var(--gold-br); }
.st-foot{ display:grid; grid-template-columns:1fr auto; gap:28px 52px; align-items:end;
  border-top:1px solid var(--rule-dark); padding-top:28px; }
.st-foot > *{ min-width:0; }
.st-foot p{ color:var(--on-dark-2); max-width:62ch; margin:0; font-size:15.5px; }
@media (max-width:860px){ .st-foot{ grid-template-columns:1fr; align-items:start; } }

/* ---------- comparison table ---------- */
.cmp{ border-top:2px solid var(--navy); }
.cmp-head, .cmp-row{
  display:grid; grid-template-columns:200px 1fr 1fr; gap:0 32px;
  padding:16px 0; border-bottom:1px solid var(--rule-2);
}
.cmp-head{ padding-block:12px 14px; border-bottom:1px solid var(--rule); }
.cmp-head p{ margin:0; font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:600; }
.cmp-head .cmp-a{ color:var(--ink-3); }
.cmp-head .cmp-b{ color:var(--gold); }
.cmp-row p{ margin:0; min-width:0; font-size:15.5px; }
.cmp-row .cmp-k{ font-size:13px; font-weight:600; color:var(--navy); }
.cmp-row .cmp-a{ color:var(--ink-3); }
.cmp-row .cmp-b{ color:var(--ink); }
@media (max-width:860px){
  .cmp-head{ display:none; }
  .cmp-row{ grid-template-columns:1fr; gap:4px; padding:18px 0; }
  .cmp-row .cmp-k{ font-size:11px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px; }
  .cmp-row .cmp-a::before{ content:"Most advisers — "; color:var(--ink-3); font-weight:600; }
  .cmp-row .cmp-b::before{ content:"Zayn Consulting — "; color:var(--gold); font-weight:600; }
  .cmp-row .cmp-b{ margin-top:6px; }
}

/* ---------- method phases ---------- */
.phases{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--navy); }
.phase{ min-width:0; padding:26px 30px 28px 0; }
.phase + .phase{ padding-left:30px; border-left:1px solid var(--rule); }
.pno{ font-size:11px; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.phase h3{ margin-bottom:4px; }
.pdur{ font-size:12.5px; letter-spacing:.07em; color:var(--ink-3); margin:0 0 14px; }
.phase p{ color:var(--ink-2); font-size:15.5px; }
.pdel{
  margin-top:18px !important; padding-top:14px; border-top:1px solid var(--rule);
  font-size:14px; color:var(--ink) !important;
}
.pdel span{
  display:block; font-size:10.5px; letter-spacing:.19em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin-bottom:5px;
}
@media (max-width:860px){
  .phases{ grid-template-columns:1fr; }
  .phase{ padding:22px 0 24px; border-top:1px solid var(--rule); }
  .phase:first-child{ border-top:none; }
  .phase + .phase{ padding-left:0; border-left:none; }
}

/* ---------- governance ---------- */
.gov{ display:grid; grid-template-columns:1fr 1fr; gap:36px 52px; }
.gov > div{ min-width:0; padding-top:18px; border-top:2px solid var(--navy); }
.gov p{ color:var(--ink-2); font-size:15.5px; margin:0; }
@media (max-width:860px){ .gov{ grid-template-columns:1fr; gap:28px; } }