/* ====================================================
   PMUP Landing Page — Stylesheet
   Upload this as Additional CSS (WP Customizer) or paste
   into Elementor Pro's Custom CSS panel.
   ==================================================== */

:root{
    --dark-blue:#1B3A5C;
    --mid-blue:#2E6DA4;
    --teal:#1A7A6E;
    --amber:#E67E22;
    --red:#C0392B;
    --gold:#FBF3DC;
    --ink:#1E2A32;
    --paper:#FAFAF8;
    --line:#DDE3E8;
    --max:1120px;
  }
  /* CONTACT CONSTANTS — update in one place if these ever change:
     WhatsApp: +254 722 437 144   |   Email: pmupkenya@gmail.com  */
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.55;
  }
  img,svg{max-width:100%;display:block;}
  a{color:inherit;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  section{padding:88px 0;}
  h1,h2,h3{margin:0; font-weight:700; line-height:1.15;}
  p{margin:0;}
  .eyebrow{
    color:var(--teal);
    font-size:14px;
    letter-spacing:0.02em;
    margin-bottom:14px;
    font-weight:700;
  }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,250,248,0.94);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px; max-width:var(--max); margin:0 auto;
  }
  .brand{display:flex; align-items:center; font-size:20px; font-weight:700; color:var(--dark-blue); letter-spacing:0.01em;}
  .brand span{color:var(--teal);}
  .brand-logo{height:36px; width:auto; display:block;}
  @media (max-width:600px){ .brand-logo{height:30px;} }
  .nav-cta{
    background:var(--dark-blue); color:#fff; text-decoration:none;
    padding:10px 20px; border-radius:4px; font-size:14px; font-weight:700;
    white-space:nowrap;
  }

  /* ---------- HERO ---------- */
  .hero{
    background:linear-gradient(180deg, var(--dark-blue) 0%, #16324f 100%);
    color:#fff;
    padding:100px 0 110px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute; right:-120px; top:-120px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(26,122,110,0.35), transparent 70%);
  }
  .hero-inner{
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap:56px; align-items:center;
    position:relative; z-index:2;
  }
  .hero h1{
    font-size:46px; letter-spacing:-0.01em; margin-bottom:22px;
  }
  .hero p.lead{
    font-size:19px; color:#D9E4EE; max-width:46ch; margin-bottom:34px;
  }
  .btn-primary{
    display:inline-block;
    background:var(--amber); color:#1B1104;
    padding:15px 30px; border-radius:4px;
    text-decoration:none; font-weight:700; font-size:16px;
    box-shadow:0 8px 22px rgba(230,126,34,0.35);
  }
  .hero-media{
    aspect-ratio:4/5;
    background:
      linear-gradient(160deg, rgba(46,109,164,0.55), rgba(27,58,92,0.85)),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 14px);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,0.18);
  }
  .play-ring{
    width:74px; height:74px; border-radius:50%;
    border:2px solid rgba(255,255,255,0.7);
    display:flex; align-items:center; justify-content:center;
  }
  .play-ring::before{
    content:"";
    width:0; height:0;
    border-top:12px solid transparent;
    border-bottom:12px solid transparent;
    border-left:20px solid #fff;
    margin-left:5px;
  }

  /* ---------- PROBLEM ---------- */
  .problem{background:#fff;}
  .problem .wrap{max-width:900px;}
  .problem h2{font-size:30px; color:var(--dark-blue); margin-bottom:40px; max-width:22ch;}
  .problem-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  }
  .problem-item{border-top:3px solid var(--teal); padding-top:16px;}
  .problem-item p{font-size:16.5px; color:#3B4A55;}

  /* ---------- FRAMEWORK ---------- */
  .framework{background:var(--gold);}
  .framework h2{font-size:30px; color:var(--dark-blue); max-width:26ch; margin-bottom:8px;}
  .framework .sub{color:#5A5040; font-size:16px; margin-bottom:44px; display:block; max-width:60ch;}
  .zone-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  }
  .zone-card{
    background:#fff; border-radius:8px; padding:28px 22px;
    border-top:5px solid var(--zone-color, var(--teal));
  }
  .zone-card h3{font-size:18px; color:var(--dark-blue); margin-bottom:10px;}
  .zone-card p{font-size:14.5px; color:#54606B;}

  /* ---------- SOCIAL PROOF / ACCORDION ---------- */
  .proof{background:#fff; padding:64px 0;}
  .proof .eyebrow{text-align:center; display:block; margin-bottom:8px;}
  .proof h2{font-size:26px; color:var(--dark-blue); text-align:center; max-width:34ch; margin:0 auto 36px;}
  .accordion{
    max-width:820px; margin:0 auto;
    border-top:1px solid var(--line);
  }
  .accordion-item{border-bottom:1px solid var(--line);}
  .accordion-trigger{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; text-align:left; cursor:pointer;
    padding:22px 4px; font-family:inherit;
  }
  .accordion-trigger .sector-name{font-size:17px; font-weight:700; color:var(--dark-blue);}
  .accordion-icon{
    width:22px; height:22px; flex:none; position:relative;
  }
  .accordion-icon::before, .accordion-icon::after{
    content:""; position:absolute; background:var(--teal);
    top:50%; left:50%; transform:translate(-50%,-50%);
  }
  .accordion-icon::before{width:14px; height:2px;}
  .accordion-icon::after{width:2px; height:14px; transition:transform 0.2s ease;}
  .accordion-item.open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleX(0);}
  .accordion-panel{
    max-height:0; overflow:hidden; transition:max-height 0.28s ease;
  }
  .accordion-item.open .accordion-panel{max-height:400px;}
  .accordion-panel-inner{padding:0 4px 26px; display:grid; gap:14px;}
  .accordion-panel-inner .row{display:grid; grid-template-columns:130px 1fr; gap:14px;}
  .accordion-panel-inner .row .label{font-size:12.5px; font-weight:700; color:var(--teal); text-transform:uppercase; letter-spacing:0.03em; padding-top:2px;}
  .accordion-panel-inner .row p{font-size:14.5px; color:#54606B;}
  @media (max-width:600px){
    .accordion-panel-inner .row{grid-template-columns:1fr;}
    .accordion-panel-inner .row .label{padding-top:0;}
  }

  /* ---------- FORMATS ---------- */
  .formats{background:#F1F4F6;}
  .formats h2{font-size:30px; color:var(--dark-blue); margin-bottom:40px;}
  .format-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .format-card{
    background:#fff; border-radius:8px; padding:32px 26px;
    border:1px solid var(--line);
    display:flex; flex-direction:column; gap:14px;
  }
  .format-card.featured{border-color:var(--mid-blue); box-shadow:0 12px 28px rgba(46,109,164,0.14);}
  .format-name{font-size:19px; font-weight:700; color:var(--dark-blue);}
  .format-price{font-size:26px; font-weight:700; color:var(--teal);}
  .format-desc{font-size:14.5px; color:#54606B; flex-grow:1;}
  .format-link{font-size:14px; font-weight:700; color:var(--mid-blue); text-decoration:none;}
  .format-link::after{content:" →"; display:inline-block;}
  .format-link{cursor:pointer;}
  .contact-choice-menu{
    position:relative; display:inline-block;
  }
  .contact-choice-menu .choice-panel{
    display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:30;
    background:#fff; border:1px solid var(--line); border-radius:6px;
    box-shadow:0 10px 24px rgba(16,40,60,0.14); min-width:200px; overflow:hidden;
  }
  .contact-choice-menu.open .choice-panel{display:block;}
  .choice-panel a{
    display:block; padding:12px 16px; font-size:14px; color:var(--ink); text-decoration:none;
  }
  .choice-panel a:hover{background:#F1F4F6;}

  /* ---------- LEAD MAGNET ---------- */
  .magnet{
    background:var(--dark-blue); color:#fff;
  }
  .magnet-inner{
    display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center;
  }
  .magnet h2{font-size:28px; margin-bottom:14px; max-width:20ch;}
  .magnet p{color:#C9D8E4; font-size:15.5px; max-width:48ch;}
  .magnet-form{
    background:#fff; border-radius:8px; padding:28px;
  }
  .magnet-form label{display:block; font-size:13px; color:#4A5760; margin-bottom:6px; margin-top:14px; font-weight:700;}
  .magnet-form label:first-child{margin-top:0;}
  .magnet-form input{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:4px; font-size:14px;
    font-family:inherit;
  }
  .magnet-submit{
    margin-top:20px; width:100%; background:var(--amber); border:none; color:#1B1104;
    padding:13px; border-radius:4px; font-weight:700; font-size:15px; cursor:pointer;
  }

  /* ---------- CONTACT ---------- */
  .contact{background:#fff;}
  .contact-inner{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;
  }
  .contact h2{font-size:28px; color:var(--dark-blue); margin-bottom:14px;}
  .whatsapp-btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--teal); color:#fff; text-decoration:none;
    padding:16px 26px; border-radius:6px; font-weight:700; font-size:16px;
    margin-top:8px;
  }
  .contact-form label{display:block; font-size:13px; color:#4A5760; margin-bottom:6px; margin-top:14px; font-weight:700;}
  .contact-form label:first-child{margin-top:0;}
  .contact-form input, .contact-form textarea{
    width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:4px; font-size:14px;
    font-family:inherit;
  }
  .contact-submit{
    margin-top:18px; background:var(--dark-blue); border:none; color:#fff;
    padding:12px 24px; border-radius:4px; font-weight:700; font-size:14.5px; cursor:pointer;
  }

  /* ---------- FOOTER ---------- */
  footer{
    background:#12283F; color:#9FB2C2; padding:34px 0; font-size:13px;
  }
  .footer-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  footer a{text-decoration:none; color:#C9D8E4; margin-left:16px;}

  /* ---------- TABLET ---------- */
  @media (max-width: 960px){
    section{padding:64px 0;}
    .hero{padding:70px 0 80px;}
    .hero-inner{grid-template-columns:1fr; gap:36px;}
    .hero h1{font-size:36px;}
    .hero-media{max-width:420px; margin:0 auto; width:100%;}
    .problem-grid{grid-template-columns:1fr 1fr; row-gap:26px;}
    .zone-grid{grid-template-columns:1fr 1fr;}
    .format-grid{grid-template-columns:1fr 1fr;}
    .magnet-inner{grid-template-columns:1fr; gap:32px;}
    .contact-inner{grid-template-columns:1fr; gap:36px;}
    .proof-row{justify-content:center;}
  }

  /* ---------- MOBILE ---------- */
  @media (max-width: 600px){
    .wrap{padding:0 20px;}
    .nav{padding:14px 20px;}
    .brand{font-size:17px;}
    .nav-cta{padding:9px 14px; font-size:13px;}
    section{padding:52px 0;}
    .hero{padding:52px 0 60px;}
    .hero h1{font-size:29px;}
    .hero p.lead{font-size:16.5px;}
    .btn-primary{width:100%; text-align:center;}
    .problem h2, .framework h2, .formats h2, .magnet h2, .contact h2{font-size:23px;}
    .problem-grid{grid-template-columns:1fr;}
    .zone-grid{grid-template-columns:1fr;}
    .format-grid{grid-template-columns:1fr;}
    .proof-row{flex-direction:column;}
    .proof-slot{width:100%;}
    footer .footer-row{flex-direction:column; align-items:flex-start;}
    footer a{margin-left:0; margin-right:16px;}
  }