/* =====================================================================
   MP Tech Business — v10 visual theme layer
   Loaded after each page's own styles. Style only: no content changes.
   Palette: deep navy + warm gold · Headings: DM Serif Display
   ===================================================================== */

:root{
  --navy:#0b1829;
  --navy2:#12263d;
  --gold:#c49a3a;
  --gold-l:#e0b44a;
  --gold-deep:#a8832c;      /* gold for large accents on light backgrounds */
  --off:#f8f7f4;
  --smoke:#f0ede6;
  --border:#e6e0d3;
  --blue:#1a3452;
  --blue-light:#8a6a22;     /* small links/accents on light bg (readable gold) */
}

/* DM Serif Display has a single weight: never fake-bold it */
html{font-synthesis:style;}

/* ---------- NAV ---------- */
nav .nav-links a{
  text-transform:none;
  font-size:14px;
  font-weight:500;
  letter-spacing:.02em;
}
nav .nav-links a:hover,
nav .nav-links a.active{color:var(--gold-l);}
nav .nav-cta{
  background:var(--gold);
  color:var(--navy);
  border:1px solid var(--gold);
  border-radius:4px;
  text-transform:none;
  font-weight:600;
  letter-spacing:.01em;
}
nav .nav-cta:visited{color:var(--navy);}
nav .nav-cta:hover{background:var(--gold-l);border-color:var(--gold-l);color:var(--navy);}
.mobile-menu .m-cta{border-radius:4px;text-transform:none;letter-spacing:.01em;}

/* ---------- BUTTONS ---------- */
.btn-primary,.btn-secondary,.btn-enroll,.btn-g,.btn-o,.btn-export{border-radius:4px;}
.btn-primary,.btn-enroll{text-transform:none;letter-spacing:.01em;}

/* ---------- HEADING ACCENTS ON LIGHT BACKGROUNDS (were blue) ---------- */
.s-h2 em,.snap-h2 em{color:var(--gold-deep);}
.svc-card .svc-link{color:var(--gold-l);}   /* links inside the navy offer cards */
.svc-card{background:var(--navy2);}

/* ---------- TICKER BAND (gold, as v10) ---------- */
.cred-strip{
  background:var(--gold) !important;
  border-top-color:transparent !important;
  border-bottom-color:transparent !important;
}
.cred-strip .strip-item{
  color:var(--navy) !important;
  font-weight:600;
  letter-spacing:.14em;
}
.cred-strip .strip-item::before{background:var(--navy) !important;}

/* ---------- FOOTER ---------- */
footer{background:#060f1c !important;}

/* =====================================================================
   GLOBE (rotating network sphere — three.js)
   ===================================================================== */
.mp-globe{position:relative;pointer-events:none;}
.mp-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* About hero — fills the free space under the portrait */
@media(min-width:769px){
  .about-portrait.has-globe{align-self:stretch;display:flex;flex-direction:column;}
  .about-portrait.has-globe > img{flex:0 0 auto;}
  .about-portrait.has-globe .mp-globe{flex:1 1 auto;min-height:200px;margin-top:20px;}
}
@media(max-width:768px){ .about-portrait .mp-globe{display:none;} }

/* Tools hero — empty right side of the navy band */
.hero.has-globe{position:relative;overflow:hidden;}
.hero.has-globe .hero-inner{position:relative;z-index:2;}
.hero.has-globe .mp-globe{
  position:absolute;z-index:1;
  right:5vw;top:calc(50% + 33px);transform:translateY(-50%);
  width:280px;height:280px;
}
@media(max-width:1139px){ .hero.has-globe .mp-globe{display:none;} }

/* =====================================================================
   ZÜRICH CONNECTIONS MAP (SVG)
   ===================================================================== */
.mp-map svg{width:100%;height:auto;display:block;overflow:visible;}
.mp-map .mp-map-line{stroke:var(--gold);fill:none;stroke-width:1;stroke-dasharray:4 4;animation:mpMapFlow 3s linear infinite;}
.mp-map .mp-map-dot{fill:var(--gold);opacity:.75;}
.mp-map .mp-map-label{font-family:'DM Sans',sans-serif;font-size:10px;fill:rgba(255,255,255,.62);}
.mp-map .mp-map-home{font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;fill:var(--gold-l);}
.mp-map .mp-map-pulse{fill:none;stroke:var(--gold);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:mpMapPulse 2.8s ease-out infinite;}
@keyframes mpMapFlow{to{stroke-dashoffset:-80;}}
@keyframes mpMapPulse{0%{transform:scale(.6);opacity:.9;}100%{transform:scale(2.6);opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .mp-map .mp-map-line,.mp-map .mp-map-pulse{animation:none;}
}

/* About — "Italian by origin. Global by practice." header gets the map */
.snap-head.has-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:48px;align-items:center;}
.snap-head.has-map .mp-map{background:var(--navy);border-radius:8px;padding:20px 22px;}
@media(max-width:900px){
  .snap-head.has-map{grid-template-columns:1fr;gap:28px;}
  .snap-head.has-map .mp-map{max-width:520px;}
}

/* Contact — under "Based in Zurich / Working globally" */
.mp-map--contact{margin-top:40px;padding-top:28px;border-top:1px solid rgba(196,154,58,.18);max-width:540px;}

/* ---------- Breathing room for the new serif on wrapped headings ---------- */
.snap-h2{line-height:1.32;}
.yt-section h2{line-height:1.32;}

/* ---------- Pre-existing fix: related-article cards pushed 2 articles wider than the screen ---------- */
.related-grid > *{min-width:0;}
.related-card{overflow-wrap:anywhere;}

/* Map labels: larger on phones so they stay legible */
@media(max-width:600px){
  .mp-map .mp-map-label{font-size:13px;}
  .mp-map .mp-map-home{font-size:15px;}
}