/*
Theme Name: 100MPH Elementor
Theme URI: https://100mph.example
Description: 100MPH brand child theme for Elementor. Built on Hello Elementor. Loads the 100MPH fonts (Bricolage Grotesque, Hanken Grotesk, Space Mono), brand colours and the custom animation styles used by the importable Elementor page templates (Home, Services, About, Contact). Requires the free Hello Elementor parent theme and the Elementor plugin.
Author: 100MPH
Template: hello-elementor
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: mph-elementor
*/

:root{
  --navy:#021A54;--navy-deep:#010E2E;--pink:#FF85BB;--pink-light:#FFCEE3;
  --magenta:#FF4FA3;--blush:#FFF5FA;--ink:#0A1330;--muted:#5A648A;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;
}

body{font-family:var(--font-body);color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em}

/* Kicker / gauge label */
.mph-kicker{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.26em;
  font-size:.74rem;font-weight:700;color:var(--magenta);display:inline-flex;align-items:center;gap:.7em}
.mph-kicker::before{content:"";width:32px;height:2px;background:currentColor;display:inline-block}

/* Marquee */
.mph-marquee{overflow:hidden;width:100%}
.mph-marquee__track{display:flex;width:max-content;gap:0;animation:mph-marq 26s linear infinite}
.mph-marquee:hover .mph-marquee__track{animation-play-state:paused}
.mph-marquee span{font-family:var(--font-display);font-weight:800;font-size:1.3rem;text-transform:uppercase;
  color:var(--navy);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.mph-marquee span::after{content:"";width:9px;height:9px;background:var(--navy);border-radius:50%;display:inline-block}
@keyframes mph-marq{to{transform:translateX(-50%)}}

/* Art block */
.mph-art{border-radius:24px;overflow:hidden;box-shadow:0 18px 50px rgba(2,26,84,.18);line-height:0}
.mph-art svg{display:block;width:100%;height:auto}

/* Leadership */
.mph-leaders{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.mph-leader{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid rgba(2,26,84,.12);
  border-radius:16px;padding:16px 18px}
.mph-leaders--light .mph-leader{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.mph-av{width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--navy);
  background:linear-gradient(140deg,var(--pink),var(--pink-light))}
.mph-leader b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--navy)}
.mph-leaders--light .mph-leader b{color:#fff}
.mph-leader small{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta)}
.mph-leaders--light .mph-leader small{color:var(--pink)}

/* Office card */
.mph-office{background:#fff;border:1px solid rgba(2,26,84,.12);border-radius:24px;padding:32px;height:100%}
.mph-flag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  font-weight:700;color:var(--magenta);display:inline-block;margin-bottom:10px}
.mph-office h3{font-size:1.5rem;color:var(--navy);margin:0 0 16px}
.mph-office ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.mph-office li{color:var(--ink);line-height:1.55}
.mph-office li b{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:3px}

/* Contact form placeholder note */
.mph-formnote{background:var(--blush);border:1px dashed var(--pink);border-radius:16px;padding:22px 24px;color:var(--navy)}
.mph-formnote code{background:#fff;padding:2px 7px;border-radius:6px;font-size:.9em}

@media(max-width:767px){.mph-leaders{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mph-marquee__track{animation:none}}

/* =========================================================
   Header & Footer (for Header & Footer Builder plugin)
   ========================================================= */
.mph-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.mph-brand svg{width:42px;height:42px;flex:none}
.mph-brand .mph-wm{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;line-height:1}
.mph-brand .mph-wm b{color:var(--pink)}
.mph-brand .mph-wm small{display:block;font-family:var(--font-mono);font-size:.54rem;letter-spacing:.22em;color:var(--pink);text-transform:uppercase;margin-top:3px}

.mph-topbar{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.03em;color:#cdd6ff;display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.mph-topbar b{color:var(--pink)}
.mph-topbar a{color:#cdd6ff;text-decoration:none}
.mph-topbar a:hover{color:var(--pink)}
.mph-topbar--right{justify-content:flex-end}

/* Navigation Menu widget colours on the navy bar */
.elementor-widget-navigation-menu .hfe-nav-menu .hfe-menu-item,
.elementor-widget-navigation-menu .hfe-nav-menu .sub-menu .hfe-menu-item{color:#fff !important;font-family:var(--font-body);font-weight:600}
.elementor-widget-navigation-menu .hfe-nav-menu .hfe-menu-item:hover,
.elementor-widget-navigation-menu .hfe-nav-menu .current-menu-item>.hfe-menu-item,
.elementor-widget-navigation-menu .hfe-nav-menu .current-menu-ancestor>.hfe-menu-item{color:var(--pink) !important}
.elementor-widget-navigation-menu .hfe-menu-toggle,
.elementor-widget-navigation-menu .hfe-menu-toggle svg{color:#fff !important;fill:#fff !important}
.elementor-widget-navigation-menu .hfe-nav-menu .sub-menu{background:#021A54 !important;border:0}
.elementor-widget-navigation-menu .hfe-nav-menu__submenu .menu-item a.hfe-sub-menu-item{color:#fff !important}

/* Footer */
.mph-fcol h4{color:#fff;font-family:var(--font-display);font-size:1.05rem;margin:0 0 16px}
.mph-flinks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.mph-flinks a{color:#aeb9e6;text-decoration:none;font-size:.96rem}
.mph-flinks a:hover{color:var(--pink)}
.mph-foffice{color:#aeb9e6;font-size:.94rem;line-height:1.5;margin-bottom:16px}
.mph-foffice b{display:block;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:4px}
.mph-foffice a{color:#cdd6ff;text-decoration:none}
.mph-foffice a:hover{color:var(--pink)}
.mph-ftag{color:#9aa6d6;font-size:.95rem;margin-top:14px;max-width:300px}
.mph-fsocial{display:flex;gap:10px;margin-top:16px}
.mph-fsocial a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:#cdd6ff;text-decoration:none;font-size:.78rem;font-family:var(--font-mono)}
.mph-fsocial a:hover{background:var(--pink);color:var(--navy)}
.mph-fbottom{color:#8e9bd0;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em}