@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Inter:wght@400;500;600;700&family=Barlow+Semi+Condensed:wght@600;700;800&family=Jost:wght@300;400&display=swap');
.pm{ --bg:#080b0c; --bg2:#0d1315; --card:#111a1b; --line:rgba(255,255,255,.07); --ink:#f1f5f4; --mut:#8a9998; --teal:#31d4c2; --tealdim:#1fb6a6;
  font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--ink); border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55);}
/* accent overrides — original North Shore teal */
.pm{ --teal:#1fb6a6; --tealdim:#159e91;}
.pm *{ box-sizing:border-box;}
.pm .disp{ font-family:'Orbitron',sans-serif;}
.pm .ey{ display:inline-block; font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; color:var(--teal);
  border:1px solid rgba(49,212,194,.3); background:rgba(49,212,194,.07); padding:6px 14px; border-radius:20px; margin-bottom:20px;}
.pm h2.d{ font-family:'Orbitron',sans-serif; font-weight:700; font-size:42px; line-height:1.1; margin:0 0 14px; letter-spacing:.01em;}
.pm h2.d .ac{ color:var(--teal);}
.pm .sub{ color:var(--mut); font-size:15px; line-height:1.6; max-width:520px;}
.pm .sec{ padding:74px 46px; text-align:center;}
.pm .sec.tl{ text-align:left;}
/* util + nav */
.pm .util{ background:#050708; color:var(--mut); font-size:12px; display:flex; justify-content:space-between; padding:9px 46px; letter-spacing:.02em;}
.pm .util a{color:var(--ink); text-decoration:none;} .pm .util .q{color:var(--teal); font-weight:700;}
.pm .nav{ display:flex; justify-content:space-between; align-items:center; padding:20px 46px; border-bottom:1px solid var(--line); background:rgba(8,11,12,.9);}
.pm .nav .lg{ display:flex; align-items:center; gap:12px; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:23px; letter-spacing:.005em; text-transform:uppercase; line-height:1;}
.pm .nav .lg .ridge{ width:50px; height:27px; flex:none;}
.pm .nav .lg .txt span{ color:var(--teal);}
.pm .nav .mn span{ margin-left:22px; font-size:13px; color:var(--mut); font-weight:500;} .pm .nav .mn .on{color:var(--ink);}
.pm .nav .cta{ margin-left:22px; background:var(--teal); color:#04211e; padding:9px 18px; border-radius:7px; font-weight:700; font-size:13px;}
/* hero */
.pm .hero{ position:relative; padding:96px 46px 104px; overflow:hidden; text-align:center;}
.pm .hero .bg{ position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(8,11,12,.72),rgba(8,11,12,.86)), linear-gradient(0deg,var(--bg),transparent 40%), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1600&q=80') center/cover;}
.pm .hero .in{ position:relative; z-index:2; max-width:820px; margin:0 auto;}
.pm .hero .hero-brand{ display:block; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.22em; font-size:16px; color:var(--ink); margin-bottom:16px;}
.pm .hero .hero-brand span{ color:var(--teal);}
.pm .hero h1{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:60px; line-height:1.06; margin:0 0 20px; letter-spacing:.01em;}
.pm .hero h1 .ac{ color:var(--teal);}
.pm .hero p{ color:#c3cecd; font-size:17px; line-height:1.6; max-width:560px; margin:0 auto 30px;}
.pm .hero .btns a{ display:inline-block; padding:15px 30px; border-radius:8px; font-weight:700; font-size:14px; margin:0 7px; text-decoration:none;}
.pm .hero .b1{ background:var(--teal); color:#04211e;}
.pm .hero .b2{ border:1px solid rgba(255,255,255,.28); color:#fff;}
.pm .hero .tl{ margin-top:28px; color:var(--mut); font-size:13px; letter-spacing:.03em;}
.pm .hero .tl b{color:var(--teal);}
.pm .qcard{ position:absolute; right:46px; top:50%; transform:translateY(-50%); z-index:3; width:300px; text-align:left;
  background:#ffffff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:18px; box-shadow:0 26px 55px rgba(0,0,0,.55); color:#141b1a;}
.pm .qcard .qh{ display:flex; gap:10px; align-items:center; margin-bottom:12px;}
.pm .qcard .dot{ width:32px; height:32px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; font-size:16px;}
.pm .qcard b{font-size:13px; color:#141b1a;} .pm .qcard small{display:block; color:#71807e; font-size:11px;}
.pm .bub{ background:#f1f5f4; border:1px solid #e5ecea; border-radius:11px; padding:9px 12px; font-size:12.5px; margin-bottom:9px; color:#2b3534;}
.pm .bub b{color:#141b1a;}
.pm .chips{display:flex; flex-wrap:wrap; gap:6px;}
.pm .chip{ background:#fff; border:1px solid #dfe7e5; border-radius:18px; padding:6px 11px; font-size:12px; color:#3a4443;}
.pm .chip.sel{ background:var(--tealdim); color:#fff; border-color:var(--tealdim); font-weight:700;}
/* stats */
.pm .stats{ display:flex; justify-content:center; gap:70px; padding:34px 46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2); flex-wrap:wrap;}
.pm .stat .n{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:34px; color:var(--teal);}
.pm .stat .l{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-top:4px;}
/* award */
.pm .award{ position:relative; width:210px; height:238px; margin:0 auto 4px;}
.pm .award .rays{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:206px; height:206px; border-radius:50%;
  background:repeating-conic-gradient(#e6c074 0deg 7deg,#c99f45 7deg 14deg); -webkit-mask:radial-gradient(circle,transparent 85px,#000 86px); mask:radial-gradient(circle,transparent 85px,#000 86px);}
.pm .award .seal{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle at 50% 34%,#12a294 0%,#0b463f 66%,#061212 100%); border:4px solid #e6c074;
  box-shadow:0 18px 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2;}
.pm .award .stars{color:#e6c074; font-size:11px; letter-spacing:3px; margin-bottom:3px;}
.pm .award .num{ font-family:'Orbitron',sans-serif; font-size:52px; font-weight:800; line-height:.85; color:#fff;}
.pm .award .yr{ font-size:12px; letter-spacing:.34em; text-transform:uppercase; margin-top:5px; color:#e6c074; font-weight:700;}
.pm .award .since{ font-size:10px; letter-spacing:.2em; color:#bfeae3; margin-top:6px;}
.pm .award .ribbon{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:#0b463f; color:#e6c074; font-size:11px; font-weight:800; letter-spacing:.1em; padding:7px 20px 11px; z-index:3;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);}
.pm .who p{ color:#b7c4c2; font-size:15px; line-height:1.7; max-width:640px; margin:0 auto 14px;}
.pm .who .kicker{ font-family:'Orbitron',sans-serif; font-size:16px; font-weight:600; color:var(--teal); margin-top:22px; letter-spacing:.01em;}
.pm .who{ position:relative; overflow:hidden;}
.pm .who::before{ content:""; position:absolute; inset:0; z-index:0;
  background:url('../img/northshore-mtn.png') center 40%/cover no-repeat; opacity:.42;
  -webkit-mask:linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);
  mask:linear-gradient(180deg, transparent 0%, #000 26%, #000 72%, transparent 100%);}
.pm .who::after{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 50% 45%, rgba(8,11,12,.35), rgba(8,11,12,.72));}
.pm .who > *{ position:relative; z-index:1;}
.pm .pills{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; max-width:820px; margin:26px auto 0;}
.pm .pill{ background:var(--card); border:1px solid var(--line); border-radius:22px; padding:9px 15px; font-size:12.5px; color:#c9d2d1;}
/* grids */
.pm .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.pm .svc{ display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; text-align:left; transition:border-color .2s;}
.pm .svc .ph{ height:158px; background-size:cover; background-position:center; position:relative;}
.pm .svc .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,11,12,0) 40%,rgba(8,11,12,.85));}
.pm .svc .bd{ padding:18px 20px;}
.pm .svc h3{ font-size:16px; margin:0 0 7px; color:var(--ink);}
.pm .svc p{ color:var(--mut); font-size:13px; line-height:1.5; margin:0;}
.pm .svc .more{ display:inline-block; margin-top:11px; color:var(--teal); font-weight:700; font-size:12.5px; text-decoration:none;}
.pm .svc:hover .more{ text-decoration:underline;}
/* gallery */
.pm .ggrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px;}
.pm .gtile{ position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:13px; transition:transform .3s ease;}
.pm .gtile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,11,12,.05) 38%,rgba(8,11,12,.85));}
.pm .gtile:hover{ transform:translateY(-4px);}
.pm .gtile span{ font-weight:700; font-size:14px; z-index:2;}
.pm .gtile.more{ background:linear-gradient(160deg,#16211f,#0b1211); align-items:center; justify-content:center;}
.pm .gtile.more::after{ display:none;} .pm .gtile.more span{ color:var(--teal);}
/* brands */
.pm .bwall{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:8px;}
.pm .brand{ height:70px; border:1px solid var(--line); border-radius:10px; background:var(--card); display:flex; align-items:center; justify-content:center; color:#9fa9a8; font-weight:700; letter-spacing:.05em; font-size:13px;}
/* rolling brand marquee */
.pm .marquee{ position:relative; overflow:hidden; margin-top:14px;
  -webkit-mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);}
.pm .mtrack{ display:flex; gap:14px; width:max-content; animation:pmMarquee 42s linear infinite;}
.pm .marquee:hover .mtrack{ animation-play-state:paused;}
.pm .mbrand{ flex:none; height:76px; min-width:172px; padding:0 28px; border:1px solid var(--line); border-radius:12px; background:var(--card);
  display:flex; align-items:center; justify-content:center; color:#aab4b3; font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; letter-spacing:.05em; font-size:18px; white-space:nowrap; text-decoration:none; cursor:pointer; transition:color .2s ease, border-color .2s ease, transform .2s ease;}
.pm .mbrand:hover{ transform:translateY(-3px);}
.pm .mbrand:hover{ color:#fff; border-color:rgba(31,182,166,.45);}
.pm .mbrand img{ max-height:36px; max-width:134px; object-fit:contain; opacity:.82; transition:opacity .2s ease;}
.pm .mbrand:hover img{ opacity:1;}
.pm .wm-audison{ font-family:'Jost',sans-serif; font-weight:300; text-transform:lowercase; letter-spacing:1.5px; font-size:25px; color:#eef3f2;}
/* ===== interactive quote chatbot ===== */
.pm .qcard{ min-height:236px;}
.pm .qprogress{ height:3px; background:#e5ecea; border-radius:3px; margin-bottom:12px; overflow:hidden;}
.pm .qprogress span{ display:block; height:100%; width:0; background:var(--teal); border-radius:3px; transition:width .45s ease;}
.pm .qbody{ display:flex; flex-direction:column; gap:8px; max-height:236px; overflow-y:auto; padding-right:3px; margin-bottom:10px;}
.pm .qbody::-webkit-scrollbar{ width:5px;} .pm .qbody::-webkit-scrollbar-thumb{ background:#d3dbda; border-radius:3px;}
.pm .qmsg{ max-width:90%; padding:9px 12px; border-radius:13px; font-size:12.5px; line-height:1.42; animation:qpop .28s ease;}
.pm .qmsg.bot{ background:#f1f5f4; border:1px solid #e5ecea; color:#2b3534; align-self:flex-start; border-bottom-left-radius:4px;}
.pm .qmsg.bot b{ color:#14201f;}
.pm .qmsg.user{ background:var(--tealdim); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; font-weight:600;}
@keyframes qpop{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.pm .qchips{ display:flex; flex-wrap:wrap; gap:6px;}
.pm .qchip{ background:#fff; border:1px solid #dfe7e5; border-radius:18px; padding:7px 12px; font-size:12.5px; color:#26332f; cursor:pointer; font-family:inherit; transition:background .15s, color .15s, border-color .15s;}
.pm .qchip:hover{ background:var(--tealdim); color:#fff; border-color:var(--tealdim);}
.pm .qinput{ display:flex; gap:6px;}
.pm .qinput input{ flex:1; min-width:0; border:1px solid #dfe7e5; border-radius:9px; padding:9px 11px; font-size:13px; font-family:inherit; color:#14201f; outline:none; transition:border-color .15s;}
.pm .qinput input:focus{ border-color:var(--teal);}
.pm .qinput button{ background:var(--tealdim); color:#fff; border:0; border-radius:9px; padding:0 16px; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;}
.pm .qtyping{ display:inline-flex !important; gap:3px; align-items:center;}
.pm .qtyping i{ width:6px; height:6px; border-radius:50%; background:#9fb0ad; animation:qdot 1s infinite;}
.pm .qtyping i:nth-child(2){ animation-delay:.15s;} .pm .qtyping i:nth-child(3){ animation-delay:.3s;}
@keyframes qdot{ 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }
.pm .qsummary{ background:#eef4f3; border:1px dashed #b9d8d3; color:#2b3534;}
.pm .qrestart{ background:none; border:0; color:var(--tealdim); font-weight:700; font-size:12px; cursor:pointer; padding:6px 2px; font-family:inherit;}
/* quote modal */
.pm .qmodal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(4,8,8,.74); backdrop-filter:blur(3px); padding:20px;}
.pm .qmodal.open{ display:flex; animation:qfade .2s ease;}
@keyframes qfade{ from{opacity:0;} to{opacity:1;} }
.pm .qmodal-card{ position:relative !important; top:auto !important; right:auto !important; left:auto !important; transform:none !important; width:100% !important; max-width:388px; box-shadow:0 30px 70px rgba(0,0,0,.6);}
.pm .qmodal.open .qmodal-card{ animation:qpop2 .3s cubic-bezier(.22,.61,.36,1);}
@keyframes qpop2{ from{opacity:0; transform:translateY(18px) scale(.98);} to{opacity:1; transform:none;} }
.pm .qmodal-x{ position:absolute; top:8px; right:12px; background:none; border:0; color:#8a9998; font-size:24px; line-height:1; cursor:pointer; z-index:4; padding:2px 6px;}
.pm .qmodal-x:hover{ color:#14201f;}
@keyframes pmMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
/* reviews */
.pm .rev{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px;}
.pm .rc{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:left;}
.pm .rc .st{color:var(--teal); margin-bottom:10px; letter-spacing:2px;}
.pm .rc p{ color:#cdd6d5; font-size:13.5px; line-height:1.6; margin:0 0 14px;}
.pm .rc b{font-size:13px;} .pm .rc small{color:var(--mut);}
/* cta */
.pm .ctaband{ position:relative; padding:80px 46px; text-align:center; overflow:hidden;
  background:radial-gradient(circle at 50% 0%, rgba(49,212,194,.14), transparent 60%), var(--bg2); border-top:1px solid var(--line);}
.pm .ctaband h2{ font-family:'Orbitron',sans-serif; font-size:38px; margin:0 0 12px;}
.pm .ctaband p{ color:var(--mut); margin:0 0 26px; font-size:16px;}
.pm .ctaband a{ background:var(--teal); color:#04211e; padding:16px 36px; border-radius:8px; font-weight:700; text-decoration:none;}
/* contact + footer */
.pm .contact{ display:flex; border-top:1px solid var(--line);}
.pm .contact .info{ flex:1; padding:52px 46px; text-align:left;}
.pm .contact .info h3{ font-family:'Orbitron',sans-serif; font-size:22px; margin:0 0 18px;}
.pm .contact .info .row{ margin-bottom:12px; font-size:14px; color:#cdd6d5;} .pm .contact .info .row b{color:var(--teal);}
.pm .contact .map{ flex:1; min-height:280px; background:#0a1514; overflow:hidden; position:relative;}
.pm .contact .map iframe{ width:100%; height:100%; min-height:280px; border:0; display:block; filter:grayscale(.25) contrast(1.05);}
.pm .ft{ display:flex; justify-content:space-between; padding:22px 46px; font-size:12px; color:var(--mut); border-top:1px solid var(--line);}
.pm .ft a{ color:var(--mut); text-decoration:none; transition:color .15s ease;}
.pm .ft a:hover{ color:var(--teal);}
/* ---- motion ---- */
.pm .rv{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.pm .rv.in{ opacity:1; transform:none;}
.pm .svc.rv, .pm .gtile.rv, .pm .rc.rv, .pm .stat.rv, .pm .pill.rv{ transition-delay:calc(var(--i,0)*65ms);}
.pm .hero .bg{ animation:pmZoom 20s ease-out forwards;}
@keyframes pmZoom{ from{ transform:scale(1.14);} to{ transform:scale(1);} }
.pm .svc{ transition:border-color .25s ease, transform .3s ease, box-shadow .3s ease;}
.pm .svc:hover{ border-color:rgba(49,212,194,.45); transform:translateY(-5px); box-shadow:0 16px 34px rgba(0,0,0,.4);}
.pm .svc .ph{ transition:transform .55s ease;} .pm .svc:hover .ph{ transform:scale(1.06);}
.pm .rc{ transition:border-color .25s ease, transform .3s ease;} .pm .rc:hover{ border-color:rgba(49,212,194,.4); transform:translateY(-4px);}
.pm .nav .cta, .pm .hero .b1, .pm .ctaband a, .pm .util .q{ transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;}
.pm .nav .cta:hover, .pm .hero .b1:hover, .pm .ctaband a:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(49,212,194,.35);}
.pm .chip{ transition:transform .18s ease, background .18s ease, border-color .18s ease;}
.pm .chip:hover{ transform:translateY(-2px); border-color:var(--teal);}
.pm .award .seal{ transition:transform .4s ease;} .pm .award:hover .seal{ transform:translateX(-50%) scale(1.04);}
/* hero load-in */
@keyframes heroUp{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
@keyframes heroCard{ from{opacity:0; transform:translate(48px,-50%);} to{opacity:1; transform:translate(0,-50%);} }
@keyframes heroFab{ from{opacity:0; transform:translateY(16px) scale(.9);} to{opacity:1; transform:none;} }
.pm .hero .in > *{ opacity:0; animation:heroUp .7s cubic-bezier(.22,.61,.36,1) both;}
.pm .hero .in .ey{ animation-delay:.15s;}
.pm .hero .in h1{ animation-delay:.30s;}
.pm .hero .in p{ animation-delay:.48s;}
.pm .hero .in .btns{ animation-delay:.64s;}
.pm .hero .in .tl{ animation-delay:.80s;}
.pm .hero .qcard{ opacity:0; animation:heroCard .85s cubic-bezier(.22,.61,.36,1) .55s both;}
.pm .hero .fab{ opacity:0; animation:heroFab .5s ease 1.1s both;}
@media (prefers-reduced-motion: reduce){ .pm .rv{opacity:1; transform:none; transition:none;} .pm .hero .bg{animation:none;} .pm .hero .in > *, .pm .hero .qcard, .pm .hero .fab{opacity:1 !important; animation:none !important;} }
/* ===== mobile ===== */
.pm .nav-burger{ display:none; background:none; border:1px solid var(--line); color:var(--ink); font-size:19px; border-radius:8px; padding:6px 12px; line-height:1; cursor:pointer; order:2;}
@media (max-width: 860px){
  .pm .util{ flex-wrap:wrap; gap:4px 14px; font-size:11.5px; padding:8px 18px;}
  .pm .nav{ padding:13px 18px; flex-wrap:wrap; row-gap:10px;}
  .pm .nav .lg{ font-size:19px; gap:9px;}
  .pm .nav .lg .ridge{ width:44px; height:24px;}
  .pm .nav-burger{ display:inline-flex; align-items:center;}
  .pm .nav .mn{ display:none; width:100%; order:3; flex-direction:column; align-items:stretch;}
  .pm .nav.open .mn{ display:flex;}
  .pm .nav.open .mn span{ margin:0; padding:12px 2px; border-top:1px solid var(--line); font-size:15px;}
  .pm .nav.open .mn .cta{ margin:12px 0 2px; text-align:center; font-size:14px;}
  .pm .hero{ padding:60px 20px 46px;}
  .pm .hero h1{ font-size:33px;}
  .pm .hero p{ font-size:15.5px; margin-left:auto; margin-right:auto;}
  .pm .hero .qcard{ position:static; transform:none; top:auto; right:auto; width:100%; max-width:360px; margin:32px auto 0; animation:heroUp .7s cubic-bezier(.22,.61,.36,1) .5s both;}
  .pm .sec{ padding:48px 20px;}
  .pm h2.d{ font-size:29px;}
  .pm .stats{ gap:24px 40px; padding:26px 20px;}
  .pm .grid3{ grid-template-columns:1fr;}
  .pm .ggrid{ grid-template-columns:1fr 1fr;}
  .pm .rev{ grid-template-columns:1fr;}
  .pm .who{ padding:46px 20px 30px;}
  .pm .contact{ flex-direction:column;}
  .pm .ctaband{ padding:56px 20px;} .pm .ctaband h2{ font-size:29px;}
  .pm .ft{ flex-direction:column; gap:8px; text-align:center;}
}
@media (max-width: 480px){
  .pm .hero h1{ font-size:28px;}
  .pm .ggrid{ grid-template-columns:1fr;}
  .pm .stats{ gap:22px 30px;}
}

/* ============================================================
   FULL-PAGE SITE OVERRIDES (mockup was rendered as a card)
   ============================================================ */
html,body{ margin:0; padding:0; background:#080b0c; }
.pm{ border-radius:0 !important; box-shadow:none !important; }
img{ max-width:100%; }
/* nav links are <a> now (were <span> in the mockup) */
.pm .nav .lg{ text-decoration:none; color:var(--ink); }
.pm .nav .mn a{ margin-left:22px; font-size:13px; color:var(--mut); font-weight:500; text-decoration:none; }
.pm .nav .mn a:hover, .pm .nav .mn a.on{ color:var(--ink); }
.pm .nav .mn a.cta{ color:#04211e; }
@media (max-width: 860px){
  .pm .nav.open .mn a{ margin:0; padding:12px 2px; border-top:1px solid var(--line); font-size:15px; }
  .pm .nav.open .mn a.cta{ margin:12px 0 2px; text-align:center; font-size:14px; border-top:0; }
}
/* gallery "more" tile is a link now */
.pm a.gtile{ text-decoration:none; color:inherit; }
/* generic inner-page section helpers */
.pm .lead{ color:#c3cecd; font-size:17px; line-height:1.7; max-width:640px; margin:0 auto 30px; }
.pm .sec.tl .lead{ margin-left:0; }
.pm .prose{ max-width:720px; margin:0 auto; text-align:left; color:#c3cecd; font-size:15.5px; line-height:1.8; }
.pm .prose h3{ color:var(--ink); font-family:'Barlow Semi Condensed',sans-serif; font-size:22px; margin:30px 0 10px; }
.pm .prose ul{ padding-left:20px; } .pm .prose li{ margin:7px 0; }
.pm .featurelist{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; max-width:720px; margin:26px auto 0; text-align:left; }
.pm .featurelist .f{ background:var(--card); border:1px solid var(--line); border-radius:11px; padding:14px 16px; font-size:14px; color:var(--ink); }
.pm .featurelist .f b{ color:var(--teal); }
@media (max-width:620px){ .pm .featurelist{ grid-template-columns:1fr; } }
/* page hero (inner pages) */
.pm .phero{ padding:64px 46px 44px; text-align:center; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--bg2),var(--bg)); }
.pm .phero h1{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:42px; line-height:1.1; margin:0 0 14px; }
.pm .phero h1 .ac{ color:var(--teal); }
/* reusable teal button (inner-page CTAs) */
.pm .btnteal{ display:inline-block; background:var(--teal); color:#04211e; padding:15px 30px; border-radius:8px; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.pm .btnteal:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(31,182,166,.3); }
/* contact fallback form */
.pm .cform{ max-width:560px; margin:0 auto; text-align:left; display:grid; gap:14px; }
.pm .cform label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); display:block; margin-bottom:6px; }
.pm .cform input, .pm .cform textarea{ width:100%; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:12px 14px; color:var(--ink); font-family:inherit; font-size:14px; }
.pm .cform textarea{ min-height:120px; resize:vertical; }
.pm .cform .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .pm .cform .row2{ grid-template-columns:1fr; } }

/* ============================================================
   REMOTE-START & SECURITY SHOWCASE (recreated animated block)
   2x2 glass grid on desktop, stacked on mobile. Scoped .pm .rss*
   ============================================================ */
.pm .rss{ max-width:1060px; margin:0 auto; }
.pm .rss-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; text-align:left; }
@media (max-width:820px){ .pm .rss-grid{ grid-template-columns:1fr; } }
.pm .rss-card{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:rgba(42,42,42,.30); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 0 rgba(255,255,255,.06);
  transition:border-color .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), transform .4s cubic-bezier(.4,0,.2,1); }
.pm .rss-card:hover{ border-color:rgba(31,182,166,.5); box-shadow:0 0 34px rgba(31,182,166,.14), inset 0 1px 0 0 rgba(255,255,255,.06); transform:translateY(-4px); }
.pm .rss-media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.pm .rss-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .7s ease, transform .7s ease; }
.pm .rss-card:hover .rss-media img{ filter:grayscale(0); transform:scale(1.06); }
.pm .rss-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--bg) 3%, rgba(8,11,12,.15) 45%, transparent 70%); }
.pm .rss-ico{ position:absolute; bottom:13px; left:16px; z-index:3; color:var(--teal); filter:drop-shadow(0 0 8px var(--teal)); line-height:0; }
.pm .rss-ico svg{ width:30px; height:30px; }
.pm .rss-body{ padding:18px 22px 24px; }
.pm .rss-body h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); margin:0 0 8px; transition:color .3s ease; }
.pm .rss-card:hover .rss-body h3{ color:var(--teal); }
.pm .rss-body p{ color:var(--mut); font-size:14px; line-height:1.65; margin:0 0 14px; }
.pm .rss-body p:last-child{ margin-bottom:0; }
.pm .rss-btn{ display:inline-block; border:1px solid var(--teal); color:var(--teal); background:none; padding:9px 16px; border-radius:6px;
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; text-decoration:none; font-family:inherit; transition:all .3s ease; }
.pm .rss-btn:hover{ background:var(--teal); color:#04211e; }
/* smartphone card: teal radial glow behind image */
.pm .rss-card.intro .rss-media::before{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(circle at 62% 42%, rgba(31,182,166,.22), transparent 62%); }
/* security card: keep it readable for the nodes, no grayscale flip */
.pm .rss-card.sec .rss-media img{ filter:grayscale(.25) brightness(.82); }
.pm .rss-card.sec:hover .rss-media img{ filter:grayscale(.25) brightness(.9); transform:scale(1.03); }
/* pulsing security hotspot nodes */
.pm .rss-node{ position:absolute; z-index:4; }
.pm .rss-node .dotp{ width:22px; height:22px; border-radius:50%; background:var(--teal); display:flex; align-items:center; justify-content:center; cursor:pointer; animation:rssPulse 2s infinite ease-in-out; }
.pm .rss-node .dotp i{ width:7px; height:7px; border-radius:50%; background:#04211e; display:block; }
.pm .rss-node .tip{ position:absolute; bottom:150%; left:50%; transform:translateX(-50%); background:#20201f; border:1px solid rgba(142,145,146,.35);
  color:var(--ink); padding:4px 9px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; border-radius:5px; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.pm .rss-node:hover .tip{ opacity:1; }
@keyframes rssPulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(31,182,166,.5); }
  50%{ transform:scale(1.14); box-shadow:0 0 16px 3px rgba(31,182,166,.55); }
  100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(31,182,166,0); }
}
@media (prefers-reduced-motion: reduce){
  .pm .rss-node .dotp{ animation:none; }
  .pm .rss-card:hover .rss-media img, .pm .rss-card.sec:hover .rss-media img{ transform:none; }
}
/* smartphone-integration tile: full colour (teal UI must show), like the source */
.pm .rss-card.intro .rss-media img{ filter:none; }
.pm .rss-card.intro:hover .rss-media img{ filter:none; transform:scale(1.04); }

/* ============================================================
   DASH CAMS & SAFETY SHOWCASE (recreated cyber/surveillance block)
   Scoped .pm .saf* — featured product + feature cards + night vision
   ============================================================ */
.pm .saf-sec{ background-image:radial-gradient(circle at 2px 2px, rgba(31,182,166,.055) 1px, transparent 0); background-size:40px 40px; }
.pm .saf{ max-width:1060px; margin:0 auto; }
.pm .saf .d .ac{ text-shadow:0 0 14px rgba(31,182,166,.5); }
.pm .saf-glass, .pm .saf-card{ background:rgba(10,10,10,.78); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(58,73,75,.35); border-radius:14px; }
/* featured product visualization */
.pm .saf-hero{ position:relative; overflow:hidden; border-radius:14px; margin-bottom:24px; box-shadow:0 0 24px rgba(31,182,166,.13); border:1px solid rgba(58,73,75,.4); }
.pm .saf-hero img{ width:100%; aspect-ratio:16/8; object-fit:cover; display:block; transition:transform .7s ease; }
.pm .saf-hero:hover img{ transform:scale(1.05); }
.pm .saf-hero-grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,11,12,.92), transparent 55%); }
.pm .saf-hero-meta{ position:absolute; left:20px; right:20px; bottom:18px; display:flex; justify-content:space-between; align-items:flex-end; text-align:left; }
.pm .saf-live{ display:flex; align-items:center; gap:8px; color:var(--teal); font-family:'Barlow Semi Condensed',sans-serif; font-size:12px; letter-spacing:.18em; font-weight:700; margin-bottom:5px; }
.pm .saf-live .dot{ width:8px; height:8px; border-radius:50%; background:#ff4d4d; animation:safBlink 1.3s infinite ease-in-out; }
@keyframes safBlink{ 0%,100%{ opacity:1; box-shadow:0 0 8px #ff4d4d; } 50%{ opacity:.3; box-shadow:none; } }
.pm .saf-hero-title{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:23px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); }
.pm .saf-fov{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; color:var(--teal); font-size:14px; letter-spacing:.04em; white-space:nowrap; }
/* feature cards */
.pm .saf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
@media (max-width:820px){ .pm .saf-grid{ grid-template-columns:1fr; } }
.pm .saf-card{ padding:22px; display:flex; flex-direction:column; gap:14px; text-align:left;
  transition:transform .4s cubic-bezier(.175,.885,.32,1.275), border-color .4s ease, box-shadow .4s ease; }
.pm .saf-card:hover{ transform:translateY(-4px); border-color:rgba(31,182,166,.5); box-shadow:0 0 26px rgba(31,182,166,.14); }
.pm .saf-card.lb{ border-left:2px solid var(--teal); }
.pm .saf-card.rb{ border-right:2px solid var(--teal); text-align:right; }
.pm .saf-head{ display:flex; align-items:center; justify-content:space-between; }
.pm .saf-card.rb .saf-head{ flex-direction:row-reverse; }
.pm .saf-ico{ color:var(--teal); line-height:0; filter:drop-shadow(0 0 6px var(--teal)); }
.pm .saf-ico svg{ width:26px; height:26px; }
.pm .saf-tag-n{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.pm .saf-card h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; letter-spacing:.02em; color:var(--teal); margin:0; }
.pm .saf-media{ aspect-ratio:16/9; border-radius:10px; overflow:hidden; border:1px solid rgba(68,71,72,.4); }
.pm .saf-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); opacity:.72; transition:filter .5s ease, opacity .5s ease, transform .5s ease; }
.pm .saf-card:hover .saf-media img{ filter:grayscale(0); opacity:1; transform:scale(1.04); }
.pm .saf-card p{ color:var(--mut); font-size:14px; line-height:1.6; margin:0; }
.pm .saf-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.pm .saf-card.rb .saf-tags{ justify-content:flex-end; }
.pm .saf-tags span{ background:rgba(255,255,255,.06); color:var(--teal); padding:5px 10px; border-radius:5px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
/* night vision — full width */
.pm .saf-card.night{ text-align:left; }
.pm .saf-nightmedia{ position:relative; border-radius:10px; overflow:hidden; border:1px solid rgba(68,71,72,.5); }
.pm .saf-nightmedia img{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block; }
.pm .saf-lowlight{ position:absolute; top:12px; left:12px; z-index:2; background:rgba(0,0,0,.6); color:#ff5555; padding:4px 8px; border-radius:4px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.pm .saf-bar{ position:absolute; bottom:0; left:0; height:3px; width:0; background:var(--teal); box-shadow:0 0 10px var(--teal); transition:width 1s ease-in-out; }
.pm .saf-card.night:hover .saf-bar{ width:100%; }
.pm .saf-cta{ text-align:center; margin-top:32px; }
@media (prefers-reduced-motion: reduce){
  .pm .saf-live .dot{ animation:none; }
  .pm .saf-hero:hover img, .pm .saf-card:hover{ transform:none; }
  .pm .saf-card:hover .saf-media img{ transform:none; }
  .pm .saf-bar{ transition:none; }
}

/* ============================================================
   CARPLAY / SYSTEM INTEGRATION SHOWCASE (recreated cyber block)
   Scoped .pm .cpi* — intro + aftermarket split + feature cards + brand row
   ============================================================ */
.pm .cpi{ max-width:1060px; margin:0 auto; }
.pm .cpi .d .ac{ text-shadow:0 0 12px rgba(31,182,166,.5); }
.pm .cpi-mono{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
/* intro with decorative crosshair */
.pm .cpi-intro{ position:relative; overflow:hidden; text-align:center; }
.pm .cpi-cross{ position:absolute; top:50%; right:-30px; transform:translateY(-50%); width:340px; height:340px; opacity:.10; pointer-events:none; display:none; }
@media (min-width:900px){ .pm .cpi-cross{ display:block; } }
.pm .cpi-cross .ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid var(--teal); border-radius:50%; }
.pm .cpi-cross .r1{ width:340px; height:340px; } .pm .cpi-cross .r2{ width:220px; height:220px; }
.pm .cpi-cross .cx{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--teal); }
.pm .cpi-cross .cx.v{ width:1px; height:90px; } .pm .cpi-cross .cx.h{ width:90px; height:1px; }
/* aftermarket split */
.pm .cpi-split{ display:flex; gap:32px; align-items:center; text-align:left; margin:8px 0 12px; }
@media (max-width:820px){ .pm .cpi-split{ flex-direction:column; } }
.pm .cpi-col{ width:100%; }
@media (min-width:821px){ .pm .cpi-col{ width:50%; } }
.pm .cpi-shot{ position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(255,255,255,.09); transition:border-color .3s ease; }
.pm .cpi-shot:hover{ border-color:var(--teal); }
.pm .cpi-shot img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .7s ease; }
.pm .cpi-shot:hover img{ transform:scale(1.05); }
.pm .cpi-shot .grad{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.8), transparent 55%); }
.pm .cpi-badges{ position:absolute; bottom:14px; left:14px; display:flex; gap:8px; z-index:2; }
.pm .cpi-badge{ padding:5px 10px; border-radius:5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.06em; }
.pm .cpi-badge.on{ background:var(--teal); color:#04211e; font-weight:700; }
.pm .cpi-badge.alt{ background:rgba(255,255,255,.06); color:var(--teal); border:1px solid rgba(31,182,166,.35); }
.pm .cpi-scan{ position:absolute; left:0; width:100%; height:2px; background:rgba(31,182,166,.5); box-shadow:0 0 10px rgba(31,182,166,.6); z-index:1; animation:cpiScan 4s linear infinite; }
@keyframes cpiScan{ 0%{ top:0; } 100%{ top:100%; } }
.pm .cpi-col h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin:0 0 12px; }
.pm .cpi-col p{ color:var(--mut); font-size:14.5px; line-height:1.7; margin:0 0 18px; }
.pm .cpi-col p b{ color:var(--teal); font-weight:600; }
.pm .cpi-specs{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pm .cpi-box{ padding:14px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:8px; transition:border-color .3s ease; }
.pm .cpi-box:hover{ border-color:var(--teal); }
.pm .cpi-box .k{ display:block; color:var(--teal); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; letter-spacing:.08em; margin-bottom:5px; }
.pm .cpi-box .v{ color:var(--ink); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.pm .cpi-ref{ position:relative; margin-top:12px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.pm .cpi-ref img{ width:100%; height:96px; object-fit:cover; display:block; transition:transform .5s ease; }
.pm .cpi-ref:hover img{ transform:scale(1.08); }
.pm .cpi-ref .ov{ position:absolute; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.pm .cpi-ref:hover .ov{ opacity:1; }
.pm .cpi-ref .ov span{ color:var(--teal); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; letter-spacing:.12em; }
/* core integration feature cards */
.pm .cpi-head{ text-align:left; margin:16px 0 22px; }
.pm .cpi-head h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:22px; text-transform:uppercase; letter-spacing:.02em; color:var(--ink); margin:0; }
.pm .cpi-head .u{ width:48px; height:3px; background:var(--teal); margin-top:8px; }
.pm .cpi-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:left; }
@media (max-width:820px){ .pm .cpi-feats{ grid-template-columns:1fr; } }
.pm .cpi-feat{ position:relative; overflow:hidden; padding:26px; background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:10px; transition:border-color .3s ease, transform .3s ease; }
.pm .cpi-feat:hover{ border-color:var(--teal); transform:translateY(-4px); }
.pm .cpi-feat .fico{ color:var(--teal); line-height:0; margin-bottom:18px; filter:drop-shadow(0 0 6px var(--teal)); }
.pm .cpi-feat .fico svg{ width:34px; height:34px; }
.pm .cpi-feat h4{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:18px; text-transform:uppercase; color:var(--ink); margin:0 0 12px; }
.pm .cpi-feat p{ color:var(--mut); font-size:14px; line-height:1.6; margin:0 0 18px; }
.pm .cpi-status{ display:flex; align-items:center; gap:8px; color:var(--teal); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; letter-spacing:.06em; }
.pm .cpi-status .d{ width:8px; height:8px; border-radius:50%; background:var(--teal); animation:cpiBlink 1.4s infinite ease-in-out; }
@keyframes cpiBlink{ 0%,100%{ opacity:1; box-shadow:0 0 8px var(--teal); } 50%{ opacity:.3; box-shadow:none; } }
.pm .cpi-feat .bgico{ position:absolute; right:-26px; bottom:-30px; color:var(--ink); opacity:.05; line-height:0; transition:opacity .5s ease; }
.pm .cpi-feat:hover .bgico{ opacity:.1; }
.pm .cpi-feat .bgico svg{ width:170px; height:170px; }
/* global vehicle support row */
.pm .cpi-support{ text-align:center; margin-top:14px; }
.pm .cpi-support .lbl{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--mut); margin-bottom:22px; }
.pm .cpi-brands{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 30px; opacity:.55; filter:grayscale(1); transition:opacity .5s ease, filter .5s ease; }
.pm .cpi-support:hover .cpi-brands{ opacity:1; filter:grayscale(0); }
.pm .cpi-brands span{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.01em; color:var(--ink); }
.pm .cpi-cta{ text-align:center; margin-top:34px; }
@media (prefers-reduced-motion: reduce){
  .pm .cpi-scan{ animation:none; opacity:0; }
  .pm .cpi-status .d{ animation:none; }
  .pm .cpi-shot:hover img, .pm .cpi-feat:hover, .pm .cpi-ref:hover img{ transform:none; }
}

/* ============================================================
   CAR AUDIO / HIGH-FIDELITY SOUND SHOWCASE (recreated)
   Scoped .pm .ca* — cinematic hero + bento grid + BMW stages
   ============================================================ */
.pm .ca{ max-width:1080px; margin:0 auto; }
.pm .ca-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
/* cinematic hero band */
.pm .ca-hero{ position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,.09); }
.pm .ca-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; z-index:0; }
.pm .ca-hero .grad{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,11,12,.62), rgba(8,11,12,.9)); }
.pm .ca-hero .inner{ position:relative; z-index:2; text-align:center; padding:76px 26px; }
.pm .ca-hero .eyb{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--teal); margin-bottom:14px; }
.pm .ca-hero h2{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:42px; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); margin:0 0 14px; text-shadow:0 0 16px rgba(31,182,166,.3); }
.pm .ca-hero p{ color:#c3cecd; font-size:16px; line-height:1.7; max-width:600px; margin:0 auto 26px; }
.pm .ca-hero .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.pm .ca-btn2{ display:inline-block; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink); padding:9px 18px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; font-family:inherit; transition:all .3s ease; }
.pm .ca-btn2:hover{ background:rgba(255,255,255,.12); }
/* technical grid backdrop */
.pm .ca-tech{ background-image:linear-gradient(rgba(31,182,166,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(31,182,166,.04) 1px, transparent 1px); background-size:22px 22px; }
/* bento grid */
.pm .ca-bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:20px; }
@media (max-width:820px){ .pm .ca-bento{ grid-template-columns:1fr; } }
.pm .ca-cell{ background:var(--bg); border:1px solid rgba(31,182,166,.2); border-radius:12px; overflow:hidden; box-shadow:0 0 15px rgba(31,182,166,.10); transition:border-color .3s ease, box-shadow .3s ease; }
.pm .ca-cell:hover{ border-color:var(--teal); box-shadow:0 0 22px rgba(31,182,166,.25); }
.pm .ca-c8{ grid-column:span 8; } .pm .ca-c4{ grid-column:span 4; }
@media (max-width:820px){ .pm .ca-c8, .pm .ca-c4{ grid-column:auto; } }
.pm .ca-split{ display:flex; flex-direction:column; height:100%; }
@media (min-width:821px){ .pm .ca-split.row{ flex-direction:row; } }
.pm .ca-txt{ padding:28px; flex:1; display:flex; flex-direction:column; justify-content:center; text-align:left; }
.pm .ca-tag{ display:flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--teal); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.08em; }
.pm .ca-tag svg{ width:18px; height:18px; }
.pm .ca-txt h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; text-transform:uppercase; color:var(--ink); margin:0 0 12px; font-size:24px; }
.pm .ca-txt p{ color:var(--mut); font-size:14px; line-height:1.65; margin:0 0 18px; }
.pm .ca-txt p:last-child{ margin-bottom:0; }
.pm .ca-media{ flex:1; min-height:230px; overflow:hidden; }
.pm .ca-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s ease; display:block; }
.pm .ca-cell:hover .ca-media img{ transform:scale(1.05); }
.pm .ca-specs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pm .ca-spec{ border-left:2px solid var(--teal); padding-left:14px; }
.pm .ca-spec .l{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.06em; color:var(--mut); text-transform:uppercase; }
.pm .ca-spec .n{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--teal); font-size:14px; }
.pm .ca-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.pm .ca-list li{ display:flex; align-items:center; gap:10px; color:var(--mut); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; }
.pm .ca-list li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none; }
.pm .ca-amp-img{ border-radius:8px; overflow:hidden; margin-top:auto; }
.pm .ca-amp-img img{ width:100%; height:190px; object-fit:cover; display:block; transition:transform .5s ease; }
.pm .ca-cell:hover .ca-amp-img img{ transform:rotate(2deg) scale(1.05); }
/* BMW stages */
.pm .ca-bmw{ text-align:center; }
.pm .ca-bmw .bar{ height:1px; background:linear-gradient(90deg, transparent, var(--teal), transparent); opacity:.4; margin-bottom:38px; }
.pm .ca-bmw h2{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:34px; text-transform:uppercase; color:var(--ink); margin:0 0 12px; }
.pm .ca-bmw .u{ width:96px; height:3px; background:var(--teal); margin:0 auto 40px; }
.pm .ca-stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; text-align:left; }
@media (max-width:820px){ .pm .ca-stages{ grid-template-columns:1fr; } }
.pm .ca-stage{ position:relative; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:28px; display:flex; flex-direction:column; }
.pm .ca-stage.pop{ border-color:rgba(31,182,166,.45); box-shadow:0 0 20px rgba(31,182,166,.14); }
.pm .ca-stage .num{ position:absolute; top:16px; right:18px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:20px; color:var(--ink); opacity:.2; }
.pm .ca-stage .pop-tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--teal); color:#04211e; padding:4px 14px; border-radius:20px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; font-weight:700; letter-spacing:.08em; white-space:nowrap; }
.pm .ca-stage .st{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.1em; color:var(--teal); margin-bottom:6px; }
.pm .ca-stage h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; color:var(--ink); margin:0 0 12px; }
.pm .ca-stage p{ color:var(--mut); font-size:13.5px; line-height:1.6; margin:0 0 18px; }
.pm .ca-stage .sch{ margin-top:auto; background:rgba(8,11,12,.5); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:hidden; }
.pm .ca-stage .sch img{ width:100%; height:150px; object-fit:contain; display:block; }
.pm .ca-bmw .cta{ margin-top:38px; }
.pm .ca-bmw .contacts{ margin-top:20px; display:flex; gap:24px; justify-content:center; flex-wrap:wrap; color:var(--mut); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.pm .ca-bmw .contacts a{ color:var(--mut); text-decoration:none; } .pm .ca-bmw .contacts a:hover{ color:var(--teal); }
@media (prefers-reduced-motion: reduce){ .pm .ca-cell:hover .ca-media img, .pm .ca-cell:hover .ca-amp-img img{ transform:none; } }

/* ===== Marine showcase ===== */
.pm .mar-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-bottom:34px; }
.pm .mar-h2{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:34px; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); margin:6px 0 0; }
.pm .mar-badge{ display:flex; align-items:center; gap:14px; max-width:340px; padding:14px 18px; border-radius:14px;
  background:linear-gradient(135deg, rgba(31,182,166,.22), rgba(4,33,30,.5)); border:1px solid rgba(31,182,166,.5);
  box-shadow:0 0 18px rgba(31,182,166,.18); animation:mar-pulse 3s ease-in-out infinite; }
.pm .mar-badge svg{ width:26px; height:26px; color:var(--teal); flex:none; }
.pm .mar-badge p{ margin:0; color:#cfe9e4; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.5; }

.pm .mar-grid{ display:grid; grid-template-columns:5fr 7fr; gap:24px; align-items:start; }
.pm .mar-left{ display:flex; flex-direction:column; }
.pm .mar-intro{ color:#c3cecd; font-size:16px; line-height:1.75; margin:0 0 22px; }
.pm .mar-list{ list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:12px; }
.pm .mar-list li{ display:flex; align-items:center; gap:12px; color:var(--ink); font-size:14px; }
.pm .mar-list li::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex:none; box-shadow:0 0 8px rgba(31,182,166,.6); }
.pm .mar-quote{ font-family:'Barlow Semi Condensed',sans-serif; font-style:italic; font-size:19px; color:var(--teal); border-left:3px solid var(--teal); padding-left:20px; margin:0 0 26px; line-height:1.4; }
.pm .mar-features{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pm .mar-feat{ padding:14px 16px; border-radius:12px; background:rgba(31,32,33,.5); border:1px solid var(--line); border-left:2px solid var(--teal); backdrop-filter:blur(8px); }
.pm .mar-feat h4{ margin:0 0 4px; color:var(--teal); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.06em; }
.pm .mar-feat p{ margin:0; color:var(--mut); font-size:10px; text-transform:uppercase; letter-spacing:.04em; }

.pm .mar-right{ display:flex; flex-direction:column; gap:24px; }
.pm .mar-card{ position:relative; background:#131b1c; border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.pm .mar-speakers{ display:flex; flex-direction:column; }
.pm .mar-card-head{ padding:26px 28px 0; }
.pm .mar-kick{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.pm .mar-card-head h3{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:800; font-size:26px; text-transform:uppercase; color:var(--ink); margin:8px 0 0; }
.pm .mar-speaker-stage{ display:flex; align-items:center; justify-content:center; padding:26px; }
.pm .mar-disc{ position:relative; width:100%; max-width:400px; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  border:1px solid rgba(31,182,166,.25); box-shadow:0 0 45px rgba(31,182,166,.14); background:#0b1112; transition:transform .7s ease; }
.pm .mar-speakers:hover .mar-disc{ transform:scale(1.03); }
.pm .mar-disc img{ width:100%; height:100%; object-fit:cover; }
.pm .mar-badges{ position:absolute; bottom:22px; right:22px; display:flex; gap:8px; }
.pm .mar-badges span{ padding:5px 11px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--line); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; color:var(--mut); }

.pm .mar-duo{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.pm .mar-command{ display:flex; flex-direction:column; justify-content:space-between; padding:26px; }
.pm .mar-command-txt{ position:relative; z-index:1; }
.pm .mar-command-txt h4{ font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; font-size:22px; color:var(--teal); margin:0 0 8px; text-transform:uppercase; }
.pm .mar-command-txt p{ margin:0; color:var(--mut); font-size:13px; line-height:1.6; }
.pm .mar-command-cta{ position:relative; z-index:1; margin-top:20px; }
.pm .mar-ghost{ position:absolute; right:-18px; bottom:-18px; width:130px; height:130px; color:rgba(255,255,255,.04); z-index:0; }
.pm .mar-source{ position:relative; min-height:210px; }
.pm .mar-source img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease; }
.pm .mar-source:hover img{ transform:scale(1.08); }
.pm .mar-source-grad{ position:absolute; inset:0; background:linear-gradient(to top, #131b1c 4%, transparent 60%); }
.pm .mar-source-label{ position:absolute; bottom:16px; left:22px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); z-index:1; }

.pm .mar-brands{ margin-top:40px; padding-top:28px; border-top:1px solid var(--line); text-align:center; }
.pm .mar-brands-label{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); margin-bottom:16px; }
.pm .mar-brands-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.pm .mar-brands-row span{ padding:9px 18px; border-radius:8px; background:rgba(31,32,33,.5); border:1px solid var(--line);
  font-family:'Barlow Semi Condensed',sans-serif; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); font-size:14px; transition:border-color .25s ease, color .25s ease; }
.pm .mar-brands-row span:hover{ border-color:var(--teal); color:var(--teal); }

@keyframes mar-pulse{ 0%,100%{ box-shadow:0 0 18px rgba(31,182,166,.18);} 50%{ box-shadow:0 0 26px rgba(31,182,166,.4);} }

@media (max-width:860px){
  .pm .mar-grid{ grid-template-columns:1fr; }
  .pm .mar-duo{ grid-template-columns:1fr; }
  .pm .mar-badge{ max-width:none; }
  .pm .mar-h2{ font-size:28px; }
}
@media (prefers-reduced-motion: reduce){
  .pm .mar-badge{ animation:none; }
  .pm .mar-disc, .pm .mar-source img{ transition:none; }
}

/* ============================================================
   LIGHT THEME — demo toggle (class .theme-light on <html>)
   Flips the core tokens site-wide; the cinematic bands (hero,
   mountain section, and the 5 product showcases) stay dark as
   intentional feature blocks on the light page.
   ============================================================ */
html.theme-light, html.theme-light body{ background:#e9efee; }
.theme-light .pm{ --bg:#f5f8f7; --bg2:#e9efee; --card:#ffffff; --line:rgba(0,0,0,.10); --ink:#121a19; --mut:#5c6a68; }
.theme-light .pm .util{ background:#e6eceb; color:#5c6a68; border-bottom:1px solid rgba(0,0,0,.06); }
.theme-light .pm .util a{ color:#1a2322; }
.theme-light .pm .nav{ background:rgba(255,255,255,.9); }
/* text colours that were hard-coded light → readable on light sections */
.theme-light .pm .lead,
.theme-light .pm .prose,
.theme-light .pm .rc p,
.theme-light .pm .contact .info .row,
.theme-light .pm .pill{ color:#3b4746; }
.theme-light .pm .brand,
.theme-light .pm .mbrand{ color:#5c6a68; }
.theme-light .pm .mbrand:hover{ color:#121a19; }
.theme-light .pm .wm-audison{ color:#1a2322; }
/* cards get a soft shadow instead of relying on dark contrast */
.theme-light .pm .svc{ box-shadow:0 1px 4px rgba(0,0,0,.06); }
.theme-light .pm .svc:hover{ border-color:rgba(31,182,166,.55); box-shadow:0 16px 34px rgba(0,0,0,.13); }
.theme-light .pm .contact .map{ background:#dde5e4; }
/* keep the cinematic bands dark: re-assert dark tokens + background */
.theme-light .pm .hero,
.theme-light .pm .who,
.theme-light .pm .sec:has(.marquee),
.theme-light .pm .sec.rss,
.theme-light .pm .sec.saf-sec,
.theme-light .pm .sec:has(.cpi),
.theme-light .pm .sec:has(.ca){
  --bg:#080b0c; --bg2:#0d1315; --card:#111a1b; --line:rgba(255,255,255,.07); --ink:#f1f5f4; --mut:#8a9998;
  background:#080b0c; color:#f1f5f4;
}
/* theme toggle button (nav) */
.pm .themetog{ margin-left:22px; background:none; border:1px solid var(--line); color:var(--ink);
  width:36px; height:34px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  padding:0; vertical-align:middle; transition:border-color .2s ease, color .2s ease; }
.pm .themetog:hover{ border-color:var(--teal); color:var(--teal); }
.pm .themetog svg{ width:18px; height:18px; }
.pm .themetog .ic-moon{ display:none; }
.theme-light .pm .themetog .ic-sun{ display:none; }
.theme-light .pm .themetog .ic-moon{ display:block; }
@media (max-width:860px){
  .pm .nav.open .mn .themetog{ margin:10px auto 0; }
}