/* New content components: syllabus accordions, consulting, roles, audience chips */

/* ---------- shared accordion lists ---------- */
.topics{margin-top:.5rem;border-top:1px solid rgba(6,24,43,.1);padding-top:.3rem}
.topics summary,
.svc summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.8rem}
.topics summary::-webkit-details-marker,
.svc summary::-webkit-details-marker{display:none}
.topics summary{font-weight:700;color:var(--navy);font-size:var(--t-small);padding:.7rem 0}
.topics summary::after,
.svc summary::after{content:"+";margin-inline-start:auto;color:var(--gold-2);font-size:1.4rem;line-height:1;font-weight:400}
.topics[open] summary::after,
.svc[open] summary::after{content:"\2212"}
.topics summary:hover{color:var(--gold-2)}
.topics-body{padding:.3rem 0 .8rem;display:grid;gap:1.1rem}
.topics-body h4{font-size:var(--t-small);color:var(--navy);margin-bottom:.35rem}
.topics-body ul,
.svc-body ul,
.ccard ul{display:grid;gap:.3rem}
.topics-body li,
.svc-body li,
.ccard li{position:relative;padding-inline-start:1.15rem;color:var(--muted);font-size:var(--t-small);line-height:1.85}
.topics-body li::before,
.svc-body li::before,
.ccard li::before{content:"";position:absolute;inset-inline-start:0;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--gold-2)}
.course .note{font-size:var(--t-small);color:var(--ink-2);border-inline-start:3px solid var(--gold);padding:.2rem .9rem;margin-top:.3rem;line-height:1.9}

/* plain art panel (course without photo) */
.art-plain{
  display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,rgba(242,182,50,.2),transparent 55%),linear-gradient(135deg,#06182B,#0B2D4D)!important;
  min-height:240px;
}
.course .art.art-plain svg.art-ic{width:110px;height:110px;color:var(--gold);opacity:.9}

/* ---------- about: approach principles ---------- */
#about .about-body h3.about-sub{color:#fff;font-size:var(--t-h3);margin:2.6rem 0 .8rem}
#about .about-body .about-note{color:#B9C9D7;max-width:62ch}
.principles{margin-top:1.3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.principles li{padding:1rem 1.1rem;border:1px solid rgba(242,182,50,.22);border-radius:12px;background:rgba(255,255,255,.035);font-size:var(--t-small);color:#B9C9D7;line-height:1.85}
.principles li b{display:block;color:var(--gold-soft);margin-bottom:.2rem}
#about .about-copy{max-width:66ch}

/* ---------- section heads ---------- */
.sec-head{margin-bottom:2.4rem;max-width:64ch}
.sec-head .sub{max-width:62ch}
.prose{display:grid;gap:1rem;color:var(--muted);max-width:72ch}

/* ---------- consulting ---------- */
#consulting{background:#fff;border-block:1px solid rgba(6,24,43,.1)}
#consulting .marker .no{color:var(--gold-2)}
#consulting .marker .hair{background:rgba(6,24,43,.14)}
.cons-h{font-family:"Noto Naskh Arabic","Vazirmatn",serif;font-size:clamp(1.35rem,1.15rem + .8vw,1.9rem);color:var(--navy);margin:2.6rem 0 1.1rem}
.svc-list{border-top:1px solid rgba(6,24,43,.12)}
.svc{border-bottom:1px solid rgba(6,24,43,.12)}
.svc summary{padding:1.25rem .2rem;font-weight:700;color:var(--navy)}
.svc summary:hover{color:var(--gold-2)}
.svc .sn{font-size:var(--t-caption);color:var(--gold-2);letter-spacing:.14em;flex:0 0 auto;font-weight:600}
.svc .st{font-size:var(--t-body)}
.svc-body{padding:0 .2rem 1.6rem 2.6rem;display:grid;gap:.9rem;max-width:80ch}
.svc-body p{color:var(--muted);font-size:var(--t-small);line-height:1.95}
.svc-body p.strong{color:var(--ink-2);font-weight:600}
.cons-cta{margin-top:1.8rem;padding:1.2rem 1.4rem;border-radius:12px;background:var(--navy);color:#DDE7EF;line-height:1.95;font-size:var(--t-small)}
.ccards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:2.8rem}
.ccard{background:var(--paper);border:1px solid rgba(6,24,43,.1);border-radius:14px;padding:clamp(1.3rem,1rem + 1.2vw,2rem);display:flex;flex-direction:column;gap:.8rem;box-shadow:0 10px 30px rgba(6,24,43,.06)}
.ccard h3{font-size:var(--t-h3);color:var(--navy)}
.ccard p{color:var(--muted);font-size:var(--t-small);line-height:1.95}
.ccard .topics{margin-top:auto}

/* ---------- why (8 cards, gap-grid) ---------- */
#why .why-grid{gap:1px;background:rgba(242,182,50,.16);border:1px solid rgba(242,182,50,.16)}
#why .why{border:0!important;background:#07203A}
#why .why:hover{background:#0A2B4A}
#why .why p{max-width:36ch}

/* ---------- mindset (roles) ---------- */
#mindset{background:var(--paper)}
#mindset .marker .no,#audience .marker .no{color:var(--gold-2)}
#mindset .marker .hair,#audience .marker .hair{background:rgba(6,24,43,.14)}
.role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin:2rem 0}
.role{background:#fff;border:1px solid rgba(6,24,43,.1);border-top:3px solid var(--gold);border-radius:12px;padding:1.5rem 1.4rem;box-shadow:0 10px 30px rgba(6,24,43,.06)}
.role .rn{font-size:var(--t-caption);color:var(--gold-2);letter-spacing:.14em;font-weight:600}
.role h3{font-size:var(--t-h3);color:var(--navy);margin:.4rem 0 .6rem}
.role p{color:var(--muted);font-size:var(--t-small);line-height:1.95}

/* ---------- audience chips ---------- */
#audience{background:var(--paper-2);border-block:1px solid rgba(6,24,43,.1)}
.chips{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.6rem 0}
.chips li{padding:.6rem 1.1rem;border-radius:99px;background:#fff;border:1px solid rgba(6,24,43,.14);color:var(--navy);font-size:var(--t-small);font-weight:600}
.chips li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold-2);margin-inline-end:.55rem;vertical-align:middle}

/* ---------- journey: 5 tabs ---------- */
@media (min-width:701px){
  #journey .tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:700px){
  #journey .tab:last-child{grid-column:1/-1}
}
#journey .journey-note{margin-top:1.8rem;color:var(--muted);max-width:62ch}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ccards,.role-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr}
  .svc-body{padding-inline-start:.4rem}
}

/* ---------- about: long text column -> keep portrait pinned at the top ---------- */
@media (min-width:901px){
  #about .about{align-items:start!important}
  #about .about-portrait{position:sticky;top:6.5rem}
}