@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* Scoped to .mp-site for WordPress (avoids theme collisions) */
/* ============================================================
   Amir Freimann · Master Peace — Unified Design System
   Derived from spiritualresearch.net
   Signature teal #2A9496 · crimson #991919 · warm cream #ECEBE3
   ============================================================ */



:root {
  /* Brand */
  --teal:        #2A9496;
  --teal-dark:   #1E8888;
  --teal-deep:   #0D6E77;
  --teal-tint:   #e8f2f2;
  --crimson:     #991919;
  --terracotta:  #991919;   /* v2: terracotta replaced by crimson #991919 */
  --crimson-dark:#6f1212;
  --gold:        #c99a3f;
  --gold-dark:   #a87f2e;

  /* Neutrals */
  --ink:         #1c1c1c;
  --graphite:    #333333;
  --slate:       #595959;
  --mist:        #8a8a8a;
  --line:        #e4e2dc;
  --cream:       #ECEBE3;
  --cream-deep:  #e3e0d5;
  --paper:       #ffffff;
  --off:         #FAFAFA;

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --maxw: 1160px;
  --gap: clamp(1.5rem, 4vw, 4rem);
  --radius: 4px;
  --shadow: 0 24px 60px -30px rgba(13,110,119,.35);
  --shadow-sm: 0 10px 30px -18px rgba(0,0,0,.35);
}


.mp-site * { box-sizing: border-box; }

.mp-site { scroll-behavior: smooth; }

.mp-site {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--graphite);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

.mp-site img { max-width: 100%; display: block; }

.mp-site a { color: var(--teal-deep); text-decoration: none; }

.mp-site a:hover { text-decoration: underline; }


.mp-site h1, .mp-site h2, .mp-site h3, .mp-site h4 { font-family: var(--serif); color: var(--ink); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }

.mp-site h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }

.mp-site h2 { font-size: clamp(2rem, 4vw, 3rem); }

.mp-site h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

.mp-site p { margin: 0 0 1.1em; }

.mp-site .lead { font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--slate); line-height: 1.6; }


.mp-site .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 4vw, 2.5rem); }

.mp-site .narrow { max-width: 780px; }

.mp-site section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }


/* Micro-label */
.mp-site .eyebrow {
  font-family: var(--sans);
  font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  color: var(--teal-deep);
  margin: 0 0 1.1rem;
}

.mp-site .eyebrow.crimson { color: var(--crimson); }

.mp-site .eyebrow.gold { color: var(--gold); }


/* ---------- Buttons ---------- */
.mp-site .btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 500; font-size: .98rem;
  padding: .85em 1.6em; border-radius: 40px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: all .22s ease; text-decoration: none;
}

.mp-site .btn:hover { text-decoration: none; transform: translateY(-2px); }

.mp-site .btn-primary { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -12px rgba(42,148,150,.8); }

.mp-site .btn-primary:hover { background: var(--teal-dark); }

.mp-site .btn-ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal); }

.mp-site .btn-ghost:hover { background: var(--teal-tint); }

.mp-site .btn-warm { background: var(--crimson); color: #fff; box-shadow: 0 10px 24px -12px rgba(153,25,25,.7); }

.mp-site .btn-warm:hover { background: var(--crimson-dark); }

.mp-site .btn-dark { background: var(--ink); color: #fff; }

.mp-site .btn-dark:hover { background: #000; }

.mp-site .btn-lg { font-size: 1.05rem; padding: 1em 1.9em; }

.mp-site .link-arrow { font-weight: 500; color: var(--teal-deep); display: inline-flex; align-items: center; gap: .4em; }

.mp-site .link-arrow::after { content: "→"; transition: transform .2s; }

.mp-site .link-arrow:hover { text-decoration: none; }

.mp-site .link-arrow:hover::after { transform: translateX(4px); }


/* ---------- Header / Nav ---------- */
.mp-site .site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.mp-site .nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.mp-site .brand { display: grid; grid-template-columns: auto auto; grid-template-areas: "dot name" "dot tag"; column-gap: .55rem; row-gap: 1px; align-items: center; text-decoration: none; }

.mp-site .brand:hover { text-decoration: none; }

.mp-site .brand .dot { grid-area: dot; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); display: inline-block; align-self: center; }

.mp-site .brand .brand-name { grid-area: name; font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 600; letter-spacing: -.01em; line-height: 1.05; }

.mp-site .brand small { grid-area: tag; font-family: var(--sans); font-size: .7rem; font-weight: 400; letter-spacing: .01em; color: var(--mist); line-height: 1.2; }

.mp-site .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-family: var(--sans); font-size: .92rem; }

.mp-site .nav-links a { color: var(--graphite); font-weight: 450; }

.mp-site .nav-links a:hover { color: var(--teal-deep); text-decoration: none; }

.mp-site .nav-links a.active { color: var(--teal-deep); font-weight: 600; }
@media (max-width: 860px) {
 .mp-site .nav-links a:not(.btn) { display:none; }
}


/* ---------- Hero ---------- */
.mp-site .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, var(--off) 100%); }

.mp-site .hero-screen {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(42,148,150,.16), transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(201,154,63,.12), transparent 60%);
}

.mp-site .hero .wrap { position: relative; z-index: 1; padding-top: clamp(3rem,7vw,5.5rem); padding-bottom: clamp(3rem,7vw,5.5rem); }

.mp-site .hero h1 { max-width: 15ch; }

.mp-site .hero .lead { max-width: 46ch; margin-bottom: 2rem; }

.mp-site .hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

.mp-site .hero-tertiary { margin-top: 1.6rem; font-size: .95rem; color: var(--slate); }


/* ---------- Authority strip ---------- */
.mp-site .authority { background: var(--ink); color: #d9d9d9; }

.mp-site .authority .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding: clamp(2.2rem,4vw,3rem) clamp(1.2rem,4vw,2.5rem); }

.mp-site .authority .stat { }

.mp-site .authority .num { font-family: var(--serif); font-size: 2.4rem; color: #fff; line-height: 1; margin-bottom: .35rem; }

.mp-site .authority .num .accent { color: var(--teal); }

.mp-site .authority .label { font-size: .82rem; color: #9a9a9a; line-height: 1.45; }
@media (max-width: 760px) {
 .mp-site .authority .wrap { grid-template-columns: repeat(2,1fr); }
}


/* ---------- Two doors ---------- */
.mp-site .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 820px) {
 .mp-site .doors { grid-template-columns: 1fr; }
}

.mp-site .door {
  position: relative; padding: clamp(1.8rem,3vw,2.6rem); border-radius: 10px;
  border: 1px solid var(--line); overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; min-height: 320px;
}

.mp-site .door:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration: none; }

.mp-site .door-research { background: linear-gradient(160deg, #fff, var(--teal-tint)); }

.mp-site .door-mp { background: linear-gradient(160deg, #fff, #f6efe6); }

.mp-site .door .eyebrow { margin-bottom: .8rem; }

.mp-site .door h3 { color: var(--ink); }

.mp-site .door p { color: var(--slate); flex: 1; }

.mp-site .door .door-foot { margin-top: 1.2rem; }


/* ---------- Pillars ---------- */
.mp-site .pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 820px) {
 .mp-site .pillars { grid-template-columns: 1fr; }
}

.mp-site .pillar { padding: 1.8rem; border-radius: 10px; background: var(--off); border: 1px solid var(--line); transition: .2s; }

.mp-site .pillar:hover { border-color: var(--teal); background: #fff; box-shadow: var(--shadow-sm); }

.mp-site .pillar .glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--teal-tint); color: var(--teal-deep); }

.mp-site .pillar h3 { font-size: 1.5rem; margin-bottom: .5rem; }

.mp-site .pillar p { font-size: .96rem; color: var(--slate); }


/* ---------- Section heading ---------- */
.mp-site .sec-head { max-width: 640px; margin-bottom: 2.6rem; }

.mp-site .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }


/* ---------- Portrait / narrative ---------- */
.mp-site .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) {
 .mp-site .split { grid-template-columns: 1fr; }
}

.mp-site .portrait {
  aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--teal-deep), var(--ink) 70%);
  display: grid; place-items: center; color: rgba(255,255,255,.35);
  box-shadow: var(--shadow);
}

.mp-site .portrait .initials { font-family: var(--serif); font-size: 5rem; letter-spacing: .05em; }

.mp-site .portrait::after { content:""; position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 20%, rgba(42,148,150,.4), transparent 60%); }


/* ---------- Bands / alt backgrounds ---------- */
.mp-site .band-cream { background: var(--cream); }

.mp-site .band-teal { background: linear-gradient(160deg, var(--teal-deep), #0a565e); color: #eaf6f6; }

.mp-site .band-teal h2, .mp-site .band-teal h3 { color: #fff; }

.mp-site .band-teal .lead { color: #cfeaea; }

.mp-site .band-dark { background: var(--ink); color: #d9d9d9; }

.mp-site .band-dark h2, .mp-site .band-dark h3 { color: #fff; }


/* ---------- Bridge modes (Understand/Encounter/...) ---------- */
.mp-site .modes { display: grid; gap: 1rem; }

.mp-site .mode {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; align-items: start;
  padding: 1.8rem; border-radius: 10px; background: #fff; border: 1px solid var(--line);
}
@media (max-width: 720px) {
 .mp-site .mode { grid-template-columns: 1fr; gap: .6rem; }
}

.mp-site .mode-tag { font-family: var(--serif); font-size: 1.5rem; color: var(--teal-deep); }

.mp-site .mode-tag small { display:block; font-family: var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--mist); margin-top:.3rem; }

.mp-site .mode p { color: var(--slate); margin: 0; }

.mp-site .mode .mini-cta { margin-top: .9rem; }


/* ---------- Cards / dialogues archive ---------- */
.mp-site .grid-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
@media (max-width: 900px) {
 .mp-site .grid-cards { grid-template-columns: repeat(2,1fr);}
}
@media (max-width: 620px) {
 .mp-site .grid-cards { grid-template-columns: 1fr;}
}

.mp-site .card { border-radius: 10px; overflow: hidden; background:#fff; border:1px solid var(--line); transition:.22s; display:flex; flex-direction:column; }

.mp-site .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); text-decoration:none; }

.mp-site .card-media { aspect-ratio: 16/10; background: linear-gradient(150deg, var(--teal), var(--teal-deep)); position: relative; display:grid; place-items:center; }

.mp-site .card-media.v2 { background: linear-gradient(150deg, #4a7c7d, var(--ink)); }

.mp-site .card-media.v3 { background: linear-gradient(150deg, var(--crimson), var(--crimson-dark)); }

.mp-site .card-media .play { width: 52px; height:52px; border-radius:50%; background: rgba(255,255,255,.9); display:grid; place-items:center; color: var(--teal-deep); }

.mp-site .card-media .dur { position:absolute; bottom:10px; right:10px; background: rgba(0,0,0,.6); color:#fff; font-size:.72rem; padding:.2em .6em; border-radius:4px; }

.mp-site .card-body { padding: 1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }

.mp-site .card-body .tradition { font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin-bottom:.5rem; }

.mp-site .card-body h3 { font-size:1.35rem; margin-bottom:.4rem; color: var(--ink); }

.mp-site .card-body p { font-size:.92rem; color: var(--slate); flex:1; }

.mp-site .tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }

.mp-site .tag { font-size:.72rem; padding:.25em .7em; border-radius:20px; background: var(--teal-tint); color: var(--teal-deep); }


/* ---------- Pricing tiers ---------- */
.mp-site .tiers { display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; align-items:stretch; }
@media (max-width: 860px) {
 .mp-site .tiers { grid-template-columns:1fr; }
}

.mp-site .tier { border:1px solid var(--line); border-radius:12px; padding:2rem 1.8rem; background:#fff; display:flex; flex-direction:column; }

.mp-site .tier.featured { border-color: var(--teal); box-shadow: var(--shadow); position:relative; }

.mp-site .tier.featured::before { content:"Most chosen"; position:absolute; top:-12px; left:1.8rem; background:var(--teal); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:.3em .9em; border-radius:20px; }

.mp-site .tier .tname { font-family:var(--serif); font-size:1.5rem; color:var(--ink); margin-bottom:.3rem; }

.mp-site .tier .price { font-family:var(--serif); font-size:2.6rem; color:var(--teal-deep); line-height:1; margin:.4rem 0; }

.mp-site .tier .price small { font-family:var(--sans); font-size:.85rem; color:var(--mist); font-weight:400; }

.mp-site .tier .tmeta { font-size:.9rem; color:var(--slate); margin-bottom:1.2rem; }

.mp-site .tier ul { list-style:none; padding:0; margin:0 0 1.6rem; font-size:.94rem; color:var(--slate); flex:1; }

.mp-site .tier li { padding:.4em 0 .4em 1.6em; position:relative; }

.mp-site .tier li::before { content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:600; }

.mp-site .tier .btn { width:100%; justify-content:center; }


/* ---------- Interest / newsletter tracks ---------- */
.mp-site .tracks { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; margin:1.8rem 0; }
@media (max-width: 720px) {
 .mp-site .tracks { grid-template-columns:1fr; }
}

.mp-site .track { border:1.5px solid var(--line); border-radius:10px; padding:1.3rem; cursor:pointer; transition:.18s; background:#fff; }

.mp-site .track:hover, .mp-site .track.sel { border-color:var(--teal); background:var(--teal-tint); }

.mp-site .track h4 { font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink); margin:0 0 .3rem; }

.mp-site .track p { font-size:.85rem; color:var(--slate); margin:0; }

.mp-site .track .check { width:20px;height:20px;border-radius:50%;border:2px solid var(--line); display:inline-block; float:right; }

.mp-site .track.sel .check { background:var(--teal); border-color:var(--teal); }


.mp-site .field { display:flex; gap:.6rem; flex-wrap:wrap; max-width:520px; }

.mp-site .field input { flex:1; min-width:220px; padding:.85em 1.1em; border:1.5px solid var(--line); border-radius:40px; font-family:var(--sans); font-size:1rem; }

.mp-site .field input:focus { outline:none; border-color:var(--teal); }

.mp-site .consent { font-size:.78rem; color:var(--mist); margin-top:.9rem; max-width:520px; }


/* ---------- Callout / disclaimer ---------- */
.mp-site .callout { border-left:3px solid var(--teal); background:var(--teal-tint); padding:1.4rem 1.6rem; border-radius:0 8px 8px 0; font-size:.96rem; color:var(--graphite); }

.mp-site .callout.warm { border-left-color:var(--terracotta); background:#f6efe6; }

.mp-site .disclaimer { font-size:.86rem; color:var(--mist); border:1px dashed var(--line); padding:1.1rem 1.3rem; border-radius:8px; }


/* ---------- Steps ---------- */
.mp-site .steps { counter-reset: s; display:grid; gap:1.1rem; }

.mp-site .step { display:grid; grid-template-columns:52px 1fr; gap:1.2rem; align-items:start; }

.mp-site .step .n { counter-increment:s; width:52px;height:52px;border-radius:50%; background:var(--teal-tint); color:var(--teal-deep); font-family:var(--serif); font-size:1.5rem; display:grid; place-items:center; }

.mp-site .step .n::before { content: counter(s); }

.mp-site .step h4 { font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin:.2rem 0 .3rem; }

.mp-site .step p { font-size:.94rem; color:var(--slate); margin:0; }


/* ---------- Footer ---------- */
.mp-site .site-footer { background: var(--ink); color:#b8b8b8; padding: clamp(3rem,6vw,4.5rem) 0 2rem; font-size:.92rem; }

.mp-site .footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gap); margin-bottom:2.5rem; }
@media (max-width: 780px) {
 .mp-site .footer-grid { grid-template-columns:1fr 1fr; }
}

.mp-site .site-footer h5 { font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1rem; }

.mp-site .site-footer a { color:#b8b8b8; display:block; padding:.28em 0; }

.mp-site .site-footer a:hover { color:var(--teal); text-decoration:none; }

.mp-site .site-footer .brand { color:#fff; margin-bottom:.8rem; display:grid; grid-template-columns:auto auto; grid-template-areas:"dot name" "dot tag"; column-gap:.55rem; row-gap:2px; align-items:center; width:max-content; }

.mp-site .site-footer .brand .brand-name { color:#fff; }

.mp-site .site-footer .brand small { color:#9a9a9a; }

.mp-site .footer-note { color:#8a8a8a; max-width:34ch; font-size:.86rem; }

.mp-site .footer-bottom { border-top:1px solid #333; padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; color:#7a7a7a; font-size:.82rem; }


/* utilities */
.mp-site .center { text-align:center; }

.mp-site .mt0 { margin-top:0; }
 .mp-site .mb0 { margin-bottom:0; }

.mp-site .divider { height:1px; background:var(--line); border:0; margin:0; }

.mp-site .pill { display:inline-block; font-size:.74rem; font-weight:600; letter-spacing:.06em; padding:.35em .9em; border-radius:20px; background:var(--teal-tint); color:var(--teal-deep); }

.mp-site .pill.free { background:#eef7ee; color:#2e7d32; }

.mp-site .pill.crimson { background:#f7ebeb; color:var(--crimson); }


/* ============================================================
   V2 — High-contrast, per-strand navigation
   Each strand owns a colour; the nav bar visibly changes
   between the different parts of the site.
   ============================================================ */
:root {
  --c-research:  var(--teal-deep);   /* teal   */
  --c-dialogues: var(--gold-dark);   /* gold   */
  --c-mp:        var(--crimson);      /* crimson */
  --c-topics:    var(--teal);         /* teal   */
  --c-interview: var(--ink);          /* ink    */
  --c-home:      var(--teal-deep);
}

/* per-page strand accent driving --nav */
.mp-site.strand-research { --nav: var(--c-research); }

.mp-site.strand-dialogues { --nav: var(--c-dialogues); }

.mp-site.strand-mp { --nav: var(--c-mp); }

.mp-site.strand-topics { --nav: var(--c-topics); }

.mp-site.strand-interview { --nav: var(--c-interview); }

.mp-site.strand-home { --nav: var(--c-home); }


/* header: bold strand-coloured top rule + faint strand tint */
.mp-site .site-header {
  border-top: 5px solid var(--nav, var(--teal));
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.mp-site .site-header::before {
  content:""; position:absolute; inset:0 0 auto 0; height:100%;
  background: var(--nav, var(--teal)); opacity:.045; pointer-events:none;
}

.mp-site .site-header { position: sticky; }

.mp-site .nav { position: relative; z-index:1; }

.mp-site .brand .dot { background: var(--nav, var(--teal)); transition: background .2s; }


/* menu items coloured by their destination strand = a legend of the worlds */
.mp-site .nav-links a[href$="/research/"] { color: var(--c-research); }

.mp-site .nav-links a[href$="/dialogues/"] { color: var(--c-dialogues); }

.mp-site .nav-links a[href$="/master-peace/"] { color: var(--c-mp); }

.mp-site .nav-links a[href$="/experience-of-being/"] { color: var(--c-topics); }

.mp-site .nav-links a:not(.btn) {
  position: relative; font-weight: 550; padding: .3em 0;
}

.mp-site .nav-links a:not(.btn)::after {
  content:""; position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background: currentColor; transition: right .22s ease;
}

.mp-site .nav-links a:not(.btn):hover { text-decoration:none; }

.mp-site .nav-links a:not(.btn):hover::after { right:0; }


/* active page = solid filled pill in the strand colour */
.mp-site .nav-links a:not(.btn).active {
  color:#fff !important; background: var(--nav);
  padding:.4em 1.05em; border-radius:22px; font-weight:600;
}

.mp-site .nav-links a:not(.btn).active::after { display:none; }


/* the Personal-Interview CTA carries the ink strand */
.mp-site .nav-links a.btn.btn-ghost, .mp-site .nav-links a.btn.btn-warm {
  border-color: var(--c-interview); color: var(--c-interview); background: transparent;
}

.mp-site .nav-links a.btn.btn-ghost:hover, .mp-site .nav-links a.btn.btn-warm:hover { background: var(--c-interview); color:#fff; }

.mp-site .nav-links a.btn.active { background: var(--c-interview); color:#fff; border-color: var(--c-interview); }
/* ---- Type sizes exposed as variables so the Appearance settings can override them
   (default = the original clamp values via the var() fallback). ---- */
.mp-site h1{ font-size: var(--fs-h1, clamp(2.6rem, 6vw, 4.4rem)); }
.mp-site h2{ font-size: var(--fs-h2, clamp(2rem, 4vw, 3rem)); }
.mp-site h3{ font-size: var(--fs-h3, clamp(1.4rem, 2.4vw, 1.9rem)); }


/* ---- Bridge: native core/button rendered as an MP .btn (pricing tiers) ---- */
.mp-site .tier .wp-block-buttons{ display:block; margin:0; }
.mp-site .wp-block-button.mp-btn{ width:100%; }
.mp-site .wp-block-button.mp-btn > .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em; width:100%;
  font-family:var(--sans); font-weight:500; font-size:.98rem;
  padding:.85em 1.6em; border-radius:40px; border:1.5px solid transparent;
  transition:all .22s ease; text-decoration:none; box-shadow:none;
}
.mp-site .wp-block-button.mp-btn.primary > .wp-block-button__link{ background:var(--teal); color:#fff; }
.mp-site .wp-block-button.mp-btn.primary > .wp-block-button__link:hover{ background:var(--teal-dark); }
.mp-site .wp-block-button.mp-btn.warm > .wp-block-button__link{ background:var(--crimson); color:#fff; }
.mp-site .wp-block-button.mp-btn.warm > .wp-block-button__link:hover{ background:var(--crimson-dark); }
.mp-site .wp-block-button.mp-btn.ghost > .wp-block-button__link{ background:transparent; color:var(--teal-deep); border-color:var(--teal); }
.mp-site .wp-block-button.mp-btn.ghost > .wp-block-button__link:hover{ background:var(--teal-tint); }
.mp-site .wp-block-button.mp-btn.dark > .wp-block-button__link{ background:var(--ink); color:#fff; }

/* ---- Cosmetic styles moved out of markup so those blocks could go native ---- */
.mp-site.strand-research  .hero{ background:linear-gradient(180deg,#fff,var(--teal-tint)); }
.mp-site.strand-dialogues .hero{ background:linear-gradient(180deg,#fff,#f4f2ec); }
.mp-site.strand-mp        .hero{ background:linear-gradient(180deg,#fff,#f6efe6); }
.mp-site .authority{ padding:0; }
.mp-site .pillar{ text-decoration:none; }
.mp-site .pillar .link-arrow{ margin-top:1rem; display:inline-flex; }
.mp-site .modes .mode:nth-child(2){ background:var(--teal-tint); border-color:transparent; }
.mp-site .modes .mode:nth-child(4){ background:#f6efe6; border-color:transparent; }
.mp-site .modes .mode:nth-child(4) .mode-tag{ color:var(--crimson); }

/* ---- HubSpot forms, styled to match the design system ---- */
.mp-site .mp-hsform{ max-width:560px; margin:1.6rem auto 0; }
.mp-site .mp-hsform .hs-form-field{ margin-bottom:.9rem; text-align:left; }
.mp-site .mp-hsform label{ font-size:.9rem; font-weight:500; }
.mp-site .mp-hsform .hs-input,
.mp-site .mp-hsform input[type=email],
.mp-site .mp-hsform input[type=text]{ width:100%; padding:.85em 1.1em; border:1.5px solid var(--line); border-radius:12px; font-family:var(--sans); font-size:1rem; background:#fff; box-sizing:border-box; }
.mp-site .mp-hsform .hs-input:focus{ outline:none; border-color:var(--teal); }
.mp-site .mp-hsform .hs-button,
.mp-site .mp-hsform input[type=submit]{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:500; font-size:1rem; padding:.9em 1.8em; border-radius:40px; border:0; background:var(--teal); color:#fff; cursor:pointer; transition:.2s; margin-top:.4rem; }
.mp-site .mp-hsform .hs-button:hover{ background:var(--teal-dark); }
.mp-site .mp-hsform .hs-error-msgs{ list-style:none; padding:0; margin:.3rem 0 0; color:var(--crimson); font-size:.85rem; }
/* interview form sits on the dark teal band */
.mp-site.strand-interview .mp-hsform label,
.mp-site.strand-interview .mp-hsform .hs-richtext,
.mp-site.strand-interview .mp-hsform .hs-form-field{ color:#eaf6f6; }
.mp-site.strand-interview .mp-hsform .hs-button,
.mp-site.strand-interview .mp-hsform input[type=submit]{ background:var(--ink); }

/* ---- Calendly embed framed as a white card (sits on the dark interview band) ---- */
.mp-site .mp-calendly{ max-width:840px; margin:1.8rem auto 0; background:#fff; border-radius:14px; padding:.4rem; box-shadow:var(--shadow); overflow:hidden; }
.mp-site .mp-calendly .calendly-inline-widget{ min-width:320px; }

/* ============================================================
   Global header/footer as template parts + WordPress Navigation menu
   ============================================================ */
/* kill stray vertical spacing so header/content/footer sit flush */
.mp-site{ margin-top:0 !important; margin-bottom:0 !important; }
.mp-header, .mp-footer{ margin:0 !important; }
.mp-header .wrap.nav{ min-height:72px; }

/* header shell (the .site-header base is scoped .mp-site .site-header and the header
   IS the .mp-site element, so restate the shell directly on .mp-header) */
.mp-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-top:5px solid var(--teal-deep);
  border-bottom:1px solid var(--line);
}
.mp-header .nav-right{ display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.4rem); flex-wrap:wrap; }

/* WordPress Navigation block styled like the mock nav */
.mp-header .wp-block-navigation{ font-family:var(--sans); font-size:.9rem; }
.mp-header .wp-block-navigation .wp-block-navigation__container{ gap:clamp(.5rem,1.4vw,1.3rem); align-items:center; }
.mp-header .wp-block-navigation-item{ margin:0; }
.mp-header .wp-block-navigation-item__content{ color:var(--graphite); font-weight:550; text-decoration:none; padding:.35em 0; }
.mp-header .wp-block-navigation-item__content:hover{ color:var(--teal-deep); }
/* per-destination colour legend */
.mp-header a[href*="/research/"]{ color:var(--teal-deep) !important; }
.mp-header a[href*="/dialogues/"]{ color:var(--gold-dark) !important; }
.mp-header a[href*="/master-peace/"]{ color:var(--crimson) !important; }
.mp-header .nav-blog a, .mp-header a[href*="/blog/"]{ color:var(--teal) !important; }
.mp-header .nav-about a, .mp-header a[href*="/about/"]{ color:var(--ink) !important; }
/* current page = keep its colour + a visible underline (so you can locate yourself) */
.mp-header a[aria-current="page"],
.mp-header .current-menu-item > .wp-block-navigation-item__content,
.mp-header .current_page_item > .wp-block-navigation-item__content{
  text-decoration: underline !important; text-decoration-thickness:2px; text-underline-offset:6px; font-weight:700;
}
/* Fallback for custom-link menus (WP doesn't mark custom links current):
   drive the underline from the body page-id class. IDs are per install —
   adjust if your page IDs differ. */
body.page-id-11 .mp-header .nav-home a, body.page-id-11 .mp-header .nav-links a[href="/"],
body.page-id-14 .mp-header a[href*="/research/"],
body.page-id-16 .mp-header a[href*="/master-peace/"],
body.page-id-20 .mp-header a[href*="/dialogues/"],
body.page-id-22 .mp-header a[href*="/experience-of-being/"],
body.page-id-24 .mp-header a[href*="/personal-interview/"],
body.page-id-51 .mp-header a[href*="/about/"],
body.page-id-52 .mp-header a[href*="/blog/"]{
  text-decoration: underline !important; text-decoration-thickness:2px; text-underline-offset:6px; font-weight:700;
}
/* the brand/logo is never underlined */
.mp-header a.brand, .mp-header a.brand:hover{ text-decoration:none !important; }
/* the Personal-Interview CTA (ink ghost pill) */
.mp-header .nav-cta{ white-space:nowrap; border-color:var(--ink); color:var(--ink); }
.mp-header .nav-cta:hover{ background:var(--ink); color:#fff; }

/* ---- No gap between header and content; tighter hero top ---- */
.mp-header{ margin-bottom:0 !important; }
.mp-header + *{ margin-top:0 !important; }
.mp-site .hero{ margin-top:0 !important; padding-top: clamp(1.4rem, 3.5vw, 2.6rem) !important; }

/* ---- Hero: full width, two columns (text + media slot) ---- */
.mp-site .hero .wrap.hero-grid{
  max-width:100%;
  padding: clamp(1.4rem,3vw,2.4rem) clamp(1.6rem,7vw,7rem) clamp(2.4rem,5vw,3.8rem);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
@media (max-width:900px){ .mp-site .hero .wrap.hero-grid{ grid-template-columns:1fr; } }
.mp-site .hero-copy h1{ margin-top:.2rem; }
.mp-site .hero-media{
  position:relative; aspect-ratio:4/3; min-height:280px; border-radius:14px; overflow:hidden;
  background:linear-gradient(150deg,var(--teal-tint),#f6efe6); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.mp-site .hero-media > *{ width:100%; margin:0; }
.mp-site .hero-media img,
.mp-site .hero-media video,
.mp-site .hero-media .wp-block-video{ width:100%; height:100%; object-fit:cover; }
.mp-site .hero-media-hint{ font-family:var(--sans); font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); text-align:center; }

/* ---- Blog: WordPress Query Loop styled as MP cards ---- */
.mp-site .mp-bloglist{ margin-top:1rem; }
.mp-site .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1.5rem; }
@media (max-width:900px){ .mp-site .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .mp-site .blog-grid{ grid-template-columns:1fr; } }
.mp-site .blog-card{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; transition:.22s; display:flex; flex-direction:column; height:100%; }
.mp-site .blog-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.mp-site .blog-media{ margin:0; aspect-ratio:16/10; overflow:hidden; }
.mp-site .blog-media img{ width:100%; height:100%; object-fit:cover; }
.mp-site .blog-body{ padding:1.3rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; }
.mp-site .blog-date{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:.5rem; }
.mp-site .blog-card .wp-block-post-title{ font-size:1.35rem; margin:0 0 .5rem; line-height:1.15; }
.mp-site .blog-card .wp-block-post-title a{ color:var(--ink); text-decoration:none; }
.mp-site .blog-card .wp-block-post-title a:hover{ color:var(--teal-deep); }
.mp-site .blog-card .wp-block-post-excerpt{ font-size:.94rem; color:var(--slate); flex:1; margin:0; }
.mp-site .blog-card .wp-block-post-excerpt__more-link{ color:var(--teal-deep); font-weight:500; display:inline-block; margin-top:.6rem; text-decoration:none; }

/* ---- Research: four lines of inquiry (4-up) + academic profile links ---- */
.mp-site .pillars.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .mp-site .pillars.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mp-site .pillars.four{ grid-template-columns:1fr; } }
.mp-site .acad-links{ margin-top:1.2rem; font-size:1.02rem; color:var(--mist); }
.mp-site .acad-links a{ color:var(--teal-deep); font-weight:500; }

/* ---- Plain WordPress buttons (e.g. the About strand cards) → compact teal pill, white text, one line ---- */
.mp-site .pillar .wp-block-buttons{ width:100%; }
.mp-site .wp-block-button:not(.mp-btn){ width:auto !important; }
.mp-site .wp-block-button:not(.mp-btn) > .wp-block-button__link{
  background: var(--teal) !important; color:#fff !important;
  border-radius:40px; font-family:var(--sans); font-weight:500; font-size:.85rem;
  padding:.5em 1.2em; border:0; white-space:nowrap; width:auto;
}
.mp-site .wp-block-button:not(.mp-btn) > .wp-block-button__link:hover{ background: var(--teal-dark) !important; }
/* equal-height & equal-width strand cards, button pinned to the bottom.
   Two things are BOTH required for true equality on the live site (verified via CDP):
   1) height:100% so each card fills its (definite) grid-row track. align-items:stretch
      alone is defeated by the button's margin-top:auto — the auto margin makes the
      flex height indefinite, creating a circular sizing that inflates the tallest card.
   2) Kill WordPress's flow-layout blockGap. The core rule
      `:root :where(.is-layout-flow) > *{ margin-block-start:1.2rem }` adds ~20px of top
      margin to every card EXCEPT the first (the first-child reset zeroes card 1 only),
      which pushes cards 2..N down by 20px inside their grid cells → misaligned tops.
      Our `.mp-site .pillars > *` (specificity 0,2,0) beats it (0,1,0), no !important needed. */
.mp-site .pillars{ align-items:stretch; }
.mp-site .pillars > *{ margin-top:0; margin-block-start:0; }
.mp-site .pillar{ display:flex; flex-direction:column; min-width:0; height:100%; }
.mp-site .pillar .wp-block-buttons{ margin-top:auto; }
/* exactly 4 strand cards → grid becomes 4-up (5+ stays 3-up) */
.mp-site .pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .mp-site .pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .mp-site .pillars:has(> .wp-block-group:nth-child(4)):not(:has(> .wp-block-group:nth-child(5))){ grid-template-columns:1fr; } }

/* ---- Full-bleed colour bands must touch: kill the WP flow blockGap that leaks a
   ~19px white strip between top-level sections (same is-layout-flow rule as the cards).
   `.mp-site section` (0,1,1) beats `:root :where(.is-layout-flow) > *` (0,1,0). ---- */
.mp-site section{ margin-top:0; margin-block-start:0; }

/* ---- Top bar: social (left) + language switcher (right). Reused at the very top of
   the header and inside the footer via the [mp_topbar] shortcode. ---- */
.mp-topbar{ background:var(--ink,#1c1c1c); color:#fff; font-family:var(--sans); font-size:.8rem; }
.mp-topbar .mp-topbar-inner{ max-width:1240px; margin:0 auto; padding:.45rem clamp(1rem,4vw,2.4rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.mp-topbar-social{ display:flex; align-items:center; gap:.9rem; }
.mp-topbar-social a{ color:#fff; display:inline-flex; opacity:.82; transition:.15s; text-decoration:none; }
.mp-topbar-social a:hover{ opacity:1; color:var(--teal-tint,#d9efec); }
.mp-topbar-social svg{ width:18px; height:18px; fill:currentColor; display:block; }
.mp-topbar-lang{ display:flex; align-items:center; gap:.55rem; text-transform:uppercase; letter-spacing:.07em; font-weight:500; }
.mp-topbar-lang .mp-lang-current{ font-weight:700; }
.mp-topbar-lang ul{ list-style:none; display:flex; gap:.55rem; margin:0; padding:0; }
.mp-topbar-lang li{ margin:0; }
.mp-topbar-lang a{ color:#fff; opacity:.65; text-decoration:none; }
.mp-topbar-lang a:hover{ opacity:1; }
.mp-topbar-lang .current-lang, .mp-topbar-lang .current-lang > a{ opacity:1; font-weight:700; }
/* the core/shortcode wrapper must not add spacing or constrain width */
.wp-block-shortcode:has(.mp-topbar), .mp-footer .wp-block-shortcode:has(.mp-topbar){ margin:0; padding:0; }
/* footer variant: the .mp-footer WRAPPER has no background of its own (the dark fill
   lives on the inner .site-footer), so a transparent bar would show the white page and
   render white-on-white. Keep the bar's dark fill (inherited) + a hairline divider. */
.mp-footer{ background:var(--ink,#1c1c1c); }
.mp-footer .mp-topbar{ border-top:1px solid rgba(255,255,255,.14); }

/* ---- Reusable 2-column "media + text" row for the editor. Add "mp-media-row" as the
   Columns block's Additional CSS class (Block → Advanced) to get vertical centring, a
   comfortable gap, and the site's rounded/shadowed media treatment. The !important on
   align-items is required because core ships `.wp-block-columns{align-items:normal!important}`. ---- */
.mp-site .mp-media-row.wp-block-columns{ align-items:center !important; gap:clamp(1.6rem,4vw,3.6rem); }
.mp-site .mp-media-row .wp-block-image{ margin:0; }
.mp-site .mp-media-row .wp-block-image img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--shadow); }
@media (max-width:781px){ .mp-site .mp-media-row.wp-block-columns{ gap:1.6rem; } }

/* ---- Portrait photo shown IN FULL (whole head, no crop). Add "mp-photo-full" to the
   Image block. Inside a hero media slot we ONLY drop the fixed 4/3 crop box so the
   picture keeps its natural height — the tinted gradient background + shadow + rounded
   corners of .hero-media are deliberately kept (the cut-out PNG shows the tint behind it). ---- */
.mp-site .hero-media:has(.mp-photo-full){ aspect-ratio:auto; }
.mp-site .mp-photo-full{ margin:0; }
.mp-site .mp-photo-full img{ width:100%; height:auto; display:block; object-fit:contain; border-radius:14px; }

/* ---- Subscription "tracks" selector driven by real radio inputs (accessible + the
   selected card highlights). Hides the raw radio; the card border/tint shows the choice. ---- */
.mp-site .track{ position:relative; display:block; }
.mp-site .track input[type="radio"]{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.mp-site .track:has(input[type="radio"]:checked){ border-color:var(--teal); background:var(--teal-tint); }
.mp-site .track:focus-within{ outline:2px solid var(--teal); outline-offset:2px; }
/* visible radio indicator (top-right dot) — pure CSS, no markup change: empty ring
   when unselected, solid teal when the card's radio is checked. */
.mp-site .track::after{ content:""; position:absolute; top:1.5rem; right:1.4rem; width:20px; height:20px; border-radius:50%; border:2px solid var(--mist); background:#fff; box-sizing:border-box; transition:.15s; }
.mp-site .track:has(input[type="radio"]:checked)::after{ background:var(--teal); border-color:var(--teal); }
.mp-site .track h4{ padding-right:1.9rem; }
.mp-site form.mp-subscribe{ margin:0; }
.mp-site .mp-subscribe-msg{ font-size:.92rem; margin:.9rem 0 0; padding:.6rem .95rem; border-radius:8px; max-width:520px; }
.mp-site .mp-subscribe-msg.is-ok{ background:var(--teal-tint); color:var(--teal-deep); }
.mp-site .mp-subscribe-msg.is-err{ background:#fdecec; color:#991919; }

/* ---- Responsive burger menu (tablet + phone). core/navigation overlayMenu:"mobile"
   collapses to a hamburger below 600px on its own; we raise that to 900px so tablets
   collapse too, and style the hamburger + full-screen overlay to match the design. ---- */
/* hamburger button — hidden on desktop, shown ≤900px */
.mp-header .wp-block-navigation__responsive-container-open{ color:var(--ink); padding:.3em; }
.mp-header .wp-block-navigation__responsive-container-open svg{ width:28px; height:28px; fill:currentColor; }
@media (max-width:900px){
  .mp-header .wp-block-navigation__responsive-container-open:not(.always-shown){ display:flex !important; }
  .mp-header .wp-block-navigation__responsive-container:not(.is-menu-open):not(.always-shown){ display:none !important; }
  /* CRITICAL: backdrop-filter on the header creates a containing block for position:fixed
     descendants, which traps WordPress's full-screen overlay inside the ~72px header
     (it renders as a tiny box top-right). Drop the blur ≤900px so the overlay fills the
     viewport; keep a near-solid background so the sticky header stays legible. */
  .mp-header{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,255,255,.98) !important; }
}
/* the open overlay */
.mp-header .wp-block-navigation__responsive-container.is-menu-open{
  background:var(--cream, #f6efe6); padding:clamp(1.6rem,6vw,4rem);
}
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ width:100%; max-width:520px; margin-inline:auto; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:.4rem; align-items:stretch; justify-content:flex-start; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{ border-bottom:1px solid var(--line); width:100%; text-align:left; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{ display:block; padding:.9em .2em !important; font-size:1.15rem; text-align:left; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ color:var(--ink); top:1.4rem; right:1.4rem; }
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{ width:30px; height:30px; fill:currentColor; }
/* the Home house-icon stays an icon inside the overlay too */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .nav-home-icon .wp-block-navigation-item__content::before{ vertical-align:middle; }
/* submenu inside the overlay: show indented, not as a floating dropdown */
.mp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ position:static !important; opacity:1 !important; visibility:visible !important; border:0; box-shadow:none; background:transparent; padding:0 0 0 1rem; min-width:0; }

/* ---- About dropdown submenu ---- */
.mp-header .wp-block-navigation__submenu-container{ background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); padding:.4rem; min-width:250px; }
.mp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ padding:.55em .85em !important; color:var(--graphite) !important; font-weight:500; text-decoration:none !important; }
.mp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{ color:var(--teal-deep) !important; }

/* ---- Sub-page (About strand) layout: breadcrumb + centred editorial hero ---- */
.mp-site .breadcrumb{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin:0 0 1.1rem; }
.mp-site .breadcrumb a{ color:var(--teal-deep); font-weight:600; }
.mp-site .subhero{ text-align:center; }
.mp-site .subhero .lead{ margin-left:auto; margin-right:auto; max-width:58ch; }
.mp-site .subpage-nav{ display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; font-size:.95rem; margin-top:1.2rem; }

/* ---- Home nav item shown as a house icon only (first position, before Research) ---- */
.mp-header .nav-home-icon .wp-block-navigation-item__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mp-header .nav-home-icon .wp-block-navigation-item__content{ display:inline-flex; align-items:center; padding:.35em 0; }
.mp-header .nav-home-icon .wp-block-navigation-item__content::before{
  content:""; width:22px; height:22px; display:inline-block; background:var(--teal-deep);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011.2%2012%204l8.5%207.2%27%2F%3E%3Cpath%20d%3D%27M5.5%209.8V19a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1V9.8%27%2F%3E%3Cpath%20d%3D%27M10%2020v-5h4v5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.7%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3.5%2011.2%2012%204l8.5%207.2%27%2F%3E%3Cpath%20d%3D%27M5.5%209.8V19a1%201%200%200%200%201%201h11a1%201%200%200%200%201-1V9.8%27%2F%3E%3Cpath%20d%3D%27M10%2020v-5h4v5%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
.mp-header .nav-home-icon .wp-block-navigation-item__content:hover::before{ background:var(--teal); }
body.page-id-11 .mp-header .nav-home-icon .wp-block-navigation-item__content::before{ background:var(--teal); }