/* =====================================================================
   MSH Electronics homepage, built on the Lasting homepage design. One stylesheet, four brand colours.
   Evergreen          : text, icons
   Deep Ocean (teal)  : large dark surfaces (hero band, footer)
   Aquamarine (mint)  : actions only, always with Evergreen text
   Mint tint          : light surfaces (tint of Aquamarine)
   ===================================================================== */
:root{
  --teal:#0F5C8C;        /* Deep Ocean */
  --evergreen:#13324A;   /* Evergreen */
  --teal-deep:#0A4068;   /* tonal step of Deep Ocean: carousel cards */
  --mint:#9FC7E4;        /* Aquamarine */
  --mint-hover:#7FB0E0;  /* tonal step of mint */
  --ink:#13324A;         /* Evergreen: headings, body, icons */
  --quiet:#4B5D6B;       /* tint of Evergreen: secondary text */
  --ghost:#EEF5FB;       /* Mint tint */
  --ghost-line:#D3E3F0;
  --white:#fff;

  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --btn-r:4px;
  --sec:clamp(72px,8vw,112px);
  --gutter:clamp(24px,5.5vw,80px);
  --pad-l:max(var(--gutter),env(safe-area-inset-left,0px));
  --pad-r:max(var(--gutter),env(safe-area-inset-right,0px));
}
html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:6px}
.hero a:focus-visible,.hero button:focus-visible,.foot a:focus-visible{outline-color:var(--mint)}
img{display:block}
h1,h2,h3,p,ul,figure,blockquote{margin:0}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Buttons: large, 4px radius, hover drops the arrow into a chip ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:64px;padding:22px 38px;border:0;border-radius:var(--btn-r);font:inherit;font-size:18px;font-weight:500;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.btn-primary{background:var(--mint);color:var(--ink);--chip:var(--ink);--chip-ink:var(--mint)}
.btn-primary:hover{background:var(--mint-hover)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--ink);--chip:var(--ink);--chip-ink:var(--white)}
.btn-outline:hover{background:rgba(19,50,74,.08)}
.btn-white{background:var(--white);color:var(--ink);--chip:var(--ink);--chip-ink:var(--white)}
.btn-white:hover{background:#eef3f7}
.card .btn-white{min-height:48px;padding:12px 22px;font-size:16px;gap:10px}
.card .btn-white .btn-arr{width:30px;height:30px;margin:-6px -10px -6px 0}
.card .btn-white .btn-arr svg{width:16px;height:16px}
.btn-arr{display:inline-grid;place-items:center;width:44px;height:44px;margin:-12px -26px -12px 0;border-radius:3px;background:transparent;color:inherit;transition:background .25s ease,color .25s ease}
.btn-arr svg{transition:transform .25s ease}
.btn:hover .btn-arr,.btn:focus-visible .btn-arr{background:var(--chip);color:var(--chip-ink)}
.btn:hover .btn-arr svg{transform:translateX(2px)}
.btn svg{flex:0 0 auto}

/* ---------- Hero sits on its own image; carousel sits on white ---------- */
.darkwrap{--cw:min(62vw,1120px);--ch:max(480px,calc(var(--cw) / 1.85));--ctl:72px;--cut:calc(var(--ch) * .424 + 104px + var(--ctl));position:relative;overflow:hidden;background:var(--white)}
.darkwrap>section{position:relative;z-index:2}
.darkwrap>.hero{z-index:3}

/* ---------- Hero ---------- */
.hero{height:640px;display:flex;flex-direction:column;color:var(--white);background:linear-gradient(180deg,rgba(19,50,74,.08) 0%,rgba(19,50,74,.22) 45%,rgba(10,25,40,.72) 100%),url(images/home-hero.jpg?v=8365dc73) center center/cover no-repeat}
@media (max-width:760px){.hero{background-image:linear-gradient(180deg,rgba(19,50,74,.08) 0%,rgba(19,50,74,.22) 45%,rgba(10,25,40,.72) 100%),url(images/home-hero-800.jpg?v=8cc8b951)}}
.hero-bar{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px var(--pad-r) 16px var(--pad-l)}
.logo{display:inline-flex;line-height:0;justify-self:start}
.logo img{height:29px;width:auto}
.nav-main{display:flex;align-items:center;justify-content:center;gap:clamp(20px,3vw,44px);list-style:none;margin:0;padding:0;font-size:15px}
.nav-main>li{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:10px 0;font:inherit;font-size:15px;color:var(--white);cursor:pointer;line-height:1.2}
.nav-link:hover{text-decoration:underline;text-underline-offset:6px}
.nav-link svg{flex:0 0 auto;transition:transform .2s}
[aria-expanded="true"]>svg{transform:rotate(180deg)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:12px;position:relative}
.nav-cta .btn{gap:12px;min-height:52px;padding:16px 28px;font-size:16px}
.nav-cta .btn-arr{width:36px;height:36px;margin:-10px -20px -10px 0}
.dd-panel,.mpanel{background:var(--white);color:var(--ink);border:1px solid var(--ghost-line);border-radius:16px;padding:8px;display:flex;flex-direction:column;box-shadow:0 14px 36px rgba(19,50,74,.14)}
.dd-panel{position:absolute;top:calc(100% + 8px);min-width:240px}
.nav-main .dd-panel{left:50%;transform:translateX(-50%)}
.dd-panel a,.mpanel a{padding:12px 16px;border-radius:10px;font-size:15px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.dd-panel a:hover,.mpanel a:hover{background:var(--ghost)}
.mpanel{position:absolute;top:100%;left:var(--pad-l);right:var(--pad-r)}
.mpanel a{padding:13px 16px;font-size:16px}
.mpanel small{padding:12px 16px 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.menu-btn{display:none;place-items:center;width:52px;height:52px;padding:0;background:var(--white);color:var(--ink);border:0;border-radius:var(--btn-r);cursor:pointer}
.menu-btn .ico-close,.menu-btn[aria-expanded="true"] .ico-open{display:none}
.menu-btn[aria-expanded="true"] .ico-close{display:block}
.menu-btn svg{transform:none!important}
.hero-main{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:40px;padding:40px var(--pad-r) 64px var(--pad-l)}
.hero h1{max-width:1100px;font-size:clamp(32px,4.2vw,56px);line-height:1.05;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.hero-lede{max-width:860px;font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:rgba(255,255,255,.9)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px 32px;margin-top:16px}
.hero-mail{font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:6px;overflow-wrap:anywhere}

/* ---------- Cards carousel ---------- */
.cards{display:flex;flex-direction:column;gap:40px;overflow:hidden;padding:120px 0 clamp(40px,4vw,56px)}
/* Default (no script): cards sit in a sideways, snapping row */
.track{--gap:32px;display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;width:100%}
.track::-webkit-scrollbar{display:none}
.track img{-webkit-user-drag:none;pointer-events:none}
.card{flex:0 0 var(--cw);height:var(--ch);scroll-snap-align:center;background:var(--teal-deep);color:var(--white);border-radius:28px;overflow:hidden}
/* With script: stacked, animated carousel */
.js .track{position:relative;display:block;overflow:visible;scroll-snap-type:none;height:var(--ch);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.js .track.dragging{cursor:grabbing}
.js .track.dragging .card{transition:opacity .4s}
.js .card{--o:0;position:absolute;top:0;left:50%;flex:none;scroll-snap-align:none;width:var(--cw);margin-left:calc(var(--cw) / -2);transform:translateX(calc(var(--o) * (var(--cw) + var(--gap)) + var(--drag,0px)));transition:transform .55s cubic-bezier(.22,.7,.2,1),opacity .4s}
.js .card.is-hidden{opacity:0;pointer-events:none}
.card-text{width:min(640px,100%);height:100%;padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:22px;min-width:0}
.card h3{max-width:9em;font-size:clamp(30px,3.7vw,54px);line-height:1.04;font-weight:800;letter-spacing:-.035em}
.card p{max-width:26em;font-size:clamp(15px,1.25vw,18px);line-height:1.5;color:rgba(255,255,255,.9)}
.card .btn{margin-top:10px}
.ctl{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px 28px;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:6px;background:var(--ghost);border-radius:10px}
.tab{display:inline-block;text-decoration:none;border:0;cursor:pointer;font-family:inherit;font-size:17px;font-weight:500;line-height:1;padding:19px 30px;border-radius:var(--btn-r);background:transparent;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--mint)}
.arrows{display:none;gap:10px}
.js .arrows{display:flex}
.arrow,.t-arrow{width:60px;height:60px;border-radius:var(--btn-r);display:grid;place-items:center;padding:0;cursor:pointer;color:var(--ink);background:transparent;border:1px solid rgba(19,50,74,.3);transition:background .2s,color .2s,border-color .2s}
.arrow:hover,.t-arrow:hover:not(:disabled){background:var(--mint);border-color:var(--mint)}
.t-arrow:disabled{opacity:.35;cursor:default}

/* ---------- About ---------- */
.about,.testi,.proc,.faq{display:flex;justify-content:center;padding:var(--sec) var(--pad-r) var(--sec) var(--pad-l)}
.about-in{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:clamp(64px,8vw,112px)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.pic{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:24px;overflow:hidden;background:var(--ghost)}
.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Portrait photos (1200x1615) shown whole, not cropped to the default 4:3 */
.pic-tall{aspect-ratio:1200/1615}
.copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.about h2{font-size:clamp(30px,3.4vw,46px);line-height:1.1;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.about h2 span{color:var(--ink)}
.about p{max-width:36em;font-size:18px;line-height:1.65}

/* ---------- Testimonials ---------- */
.testi{background:var(--ghost)}
.testi-in{width:100%;max-width:1200px;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.testi-side{display:flex;flex-direction:column;align-items:flex-start;gap:28px;min-width:0}
.testi-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:15px;line-height:1.4;color:var(--quiet)}
.testi-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.testi h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;font-weight:500;letter-spacing:-.02em;text-wrap:balance}
.t-arrows{display:flex;gap:10px;margin-top:auto;padding-top:24px}
.tview{overflow:hidden;min-width:0}
.ttrack{--vis:3;--gap:20px;--i:0;display:flex;gap:var(--gap);width:100%;transform:translateX(calc(var(--i) * -1 * (100% + var(--gap)) / var(--vis)));transition:transform .55s cubic-bezier(.22,.7,.2,1)}
.tcard{flex:0 0 calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis));min-height:340px;padding:28px;background:var(--white);border:1px solid var(--ghost-line);border-radius:20px;display:flex;flex-direction:column;gap:20px;min-width:0}
.tcard svg{flex:0 0 auto;color:var(--teal)}
.tcard blockquote{font-size:17px;line-height:1.55}
.tcard mark{background:rgba(159,199,228,.45);color:inherit;padding:0 2px;border-radius:3px}
.tcard figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:1.4}
.tcard figcaption span{font-size:14px;color:var(--quiet)}

/* ---------- Process ---------- */
.proc-in{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;gap:clamp(48px,6vw,72px);text-align:center}
.proc-head{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:640px}
.proc-head h2{font-size:clamp(32px,4vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.proc-head p{font-size:18px;line-height:1.5;color:var(--quiet)}
.proc-grid{list-style:none;margin:0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,64px) 48px}
.proc-grid li{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.proc-grid svg{width:64px;height:64px;color:var(--teal);margin-bottom:8px}
.proc-grid h3{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
.proc-grid p{max-width:30ch;font-size:16px;line-height:1.55;color:var(--quiet)}
.proc-foot{display:flex;flex-direction:column;align-items:center;gap:20px;font-size:17px}

/* ---------- FAQ ---------- */
.faq{background:#F4F5F5}
.faq-in{width:100%;max-width:920px;display:flex;flex-direction:column;gap:48px}
.faq h2{font-size:clamp(34px,4vw,54px);line-height:1.05;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.faq-head{display:flex;flex-direction:column;gap:16px}
.faq-head p{font-size:18px;line-height:1.5}
.faq-head a{text-decoration:underline;text-underline-offset:3px}
.faq-list{display:flex;flex-direction:column;gap:16px}
.qa{background:var(--white);border:1px solid #E2E6E6;border-radius:24px;padding:28px 32px}
.q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.q:hover{color:var(--teal)}
.q svg{flex:0 0 auto;color:var(--teal);transition:transform .2s}
.q[aria-expanded="true"] svg{transform:rotate(180deg)}
.ans{padding-top:16px;max-width:640px;font-size:18px;line-height:1.6}
.ans p+p,.ans ul+p,.ans p+ul{margin-top:12px}
.ans ul{padding-left:24px;display:flex;flex-direction:column;gap:8px}

/* ---------- Footer ---------- */
.foot{display:flex;flex-direction:column;background:var(--teal);color:var(--white);padding:clamp(56px,7vw,88px) var(--pad-r) 40px var(--pad-l)}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot .btn:hover{text-decoration-thickness:1px;text-underline-offset:6px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:48px 64px}
.foot-cta{flex:1 1 300px;max-width:400px;display:flex;flex-direction:column;gap:28px}
.foot-cta h2{font-size:24px;line-height:1.3;font-weight:500}
.foot-cta .btn{align-self:flex-start}
.foot-nav{flex:1 1 380px;display:flex;flex-wrap:wrap;gap:32px 56px;font-size:16px;line-height:1.2}
.foot-nav div{display:flex;flex-direction:column;gap:18px;min-width:0}
.foot-nav span{color:rgba(255,255,255,.65)}
.foot-nav a{overflow-wrap:anywhere}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{width:116px;height:96px;background:var(--white);color:var(--ink);border-radius:10px;padding:12px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px}
.badge b{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.badge b.sm{font-size:16px}
.badge small{font-size:11px;line-height:1.3;color:var(--quiet)}
.mark{margin:clamp(48px,7vw,88px) auto 0;display:grid;place-items:center;border-radius:45px;width:min(1136px,100%);aspect-ratio:1136/387}
.mark img{width:88%;height:auto;max-width:100%}
.legal{margin-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.65)}
.legal a{color:var(--white)}

/* ---------- Back to top ---------- */
.to-top{position:fixed;z-index:50;right:max(16px,calc(env(safe-area-inset-right,0px) + 16px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 16px));width:56px;height:56px;border:0;border-radius:var(--btn-r);background:var(--mint);color:var(--ink);display:grid;place-items:center;padding:0;cursor:pointer;box-shadow:0 6px 20px rgba(19,50,74,.28);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .2s}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--mint-hover)}
.to-top svg{transition:transform .2s}
.to-top:hover svg{transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--white);outline-offset:2px;box-shadow:0 0 0 4px var(--ink)}

/* ---------- Narrow screens ---------- */
@media (max-width:960px){
  .hero-bar{grid-template-columns:auto 1fr}
  .hero-bar>nav{display:none}
  .menu-btn{display:grid}
}
@media (max-width:900px){.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .row{grid-template-columns:1fr}
  .row .pic{order:-1}
}
@media (max-width:760px){
  .darkwrap{--cw:84vw;--ch:430px;--ctl:150px}
  .hero{height:auto;min-height:780px}
  .track{--gap:12px}
  .card-text{width:100%;padding:28px 24px}
  .testi-in{grid-template-columns:1fr}
  .ttrack{--vis:1;--gap:16px}
  .t-arrows{margin-top:0;padding-top:0}
  .testi-side{display:grid;grid-template-columns:1fr auto;align-items:center}
  .testi-eyebrow,.testi h2{grid-column:1/-1}
  .qa{padding:24px 22px}
  .q{font-size:19px}
}
@media (max-width:560px){.proc-grid{grid-template-columns:1fr;gap:48px}}
@media (max-width:520px){
  .btn{padding:19px 26px;font-size:17px;min-height:58px}
  .btn-arr{width:40px;height:40px;margin:-12px -18px -12px 0}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:14px 18px;font-size:15px;min-height:48px}
  .menu-btn{width:48px;height:48px}
  .tab{padding:16px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ttrack,.card,.q svg,.btn-arr,.btn-arr svg,.to-top,.to-top svg{transition:none}
}

.nav-link[aria-current]{font-weight:700;text-decoration:underline;text-decoration-color:#F5C518;text-decoration-thickness:3px;text-underline-offset:8px}
.dd-panel a[aria-current]{font-weight:800;box-shadow:inset 4px 0 0 #F5C518}
.mpanel a[aria-current]{background:var(--ghost);font-weight:800;box-shadow:inset 3px 0 0 var(--teal)}
.foot a[aria-current]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hero-bar .btn{white-space:nowrap}
.dd-panel a b{font-weight:800}
.dd-panel{max-height:min(70vh,520px);overflow-y:auto}
.mpanel{max-height:calc(100vh - 96px);overflow-y:auto}
.mpanel .mgroup{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 16px;border:0;border-radius:10px;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--ink);text-align:left;cursor:pointer}
.mpanel .mgroup:hover{background:var(--ghost)}
.mpanel .mgroup svg{flex:0 0 auto;transition:transform .2s}
.mpanel .mgroup[aria-expanded="true"] svg{transform:rotate(180deg)}
.mpanel .mgroup[aria-current]{box-shadow:inset 3px 0 0 var(--teal)}
.mpanel .msub{display:flex;flex-direction:column;padding:0 0 8px 12px}
.mpanel .msub a{padding:11px 16px;font-size:15px;color:var(--quiet);font-weight:500}
.mpanel .msub a b,.mpanel .msub a[aria-current]{color:var(--ink);font-weight:800}
.mpanel>a{font-weight:700}

@media (max-width:960px){
  html.menu-open,html.menu-open body{overflow:hidden}
  .mpanel{position:fixed;inset:0;top:0;left:0;right:0;z-index:1000;display:flex;flex-direction:column;gap:0;padding:0;border:0;border-radius:0;box-shadow:none;max-height:none;overflow-y:auto;background:var(--ink);color:var(--white);padding-bottom:env(safe-area-inset-bottom,0px)}
  .mpanel[hidden]{display:none}
  .m-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
  .m-top img{display:block;height:32px;width:auto}
  .m-close{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--mint);color:var(--ink);cursor:pointer;transition:transform .25s ease,background .2s;}
  .m-close:hover{background:var(--mint-hover)}
  
  .m-close:focus-visible{outline:3px solid var(--white);outline-offset:3px}
  .m-list{display:flex;flex-direction:column;padding:12px max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));flex:1 0 auto}
  .mpanel .m-list>a,.mpanel .mgroup{display:flex;align-items:center;justify-content:space-between;width:100%;padding:18px 0;border:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:0;background:none;color:var(--white);font:inherit;font-size:clamp(26px,8vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.1;text-align:left;cursor:pointer}
  .mpanel .m-list>a:hover,.mpanel .mgroup:hover{background:none;color:var(--mint)}
  .mpanel .mgroup svg{width:28px;height:28px}
  .mpanel .mgroup[aria-current],.mpanel .m-list>a[aria-current]{box-shadow:none;color:#F5C518}
  .mpanel .msub{padding:6px 0 14px;border-bottom:1px solid rgba(255,255,255,.16)}
  .mpanel .msub a{padding:12px 0;border-radius:0;color:rgba(255,255,255,.82);font-size:19px;font-weight:600;letter-spacing:-.01em}
  .mpanel .msub a:hover{background:none;color:var(--mint)}
  .mpanel .msub a b,.mpanel .msub a[aria-current]{color:#F5C518;font-weight:800}
  .mpanel .msub a[aria-current]{background:none;box-shadow:none}
  .m-foot{padding:28px max(24px,env(safe-area-inset-right,0px)) 32px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;font-size:16px;color:rgba(255,255,255,.7)}
  .m-foot a{color:var(--white);font-weight:700;font-size:18px;padding:0;background:none}
  .m-foot a:hover{background:none;color:var(--mint)}
}

/* MSH wordmark (no logo file yet) */
.wordmark{white-space:nowrap;font-weight:800;font-size:20px;letter-spacing:-.02em;text-transform:uppercase;color:#fff;line-height:1}
.wordmark span{color:var(--mint);font-weight:500}
.mark .wordmark-lg{font-size:clamp(48px,9vw,120px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;color:#fff;line-height:1}
.mark .wordmark-lg span{color:var(--mint);font-weight:500}

/* Prototyping card photo */
.card.card-photo{background:linear-gradient(90deg,rgba(42,123,207,.94) 0%,rgba(42,123,207,.82) 26%,rgba(42,123,207,.18) 50%,rgba(42,123,207,0) 68%),url(images/prototype-built-to-drawing.jpg?v=2ff68157) center center/cover no-repeat}

/* Wiring harness card photo */
.card.card-photo-harness{background:linear-gradient(90deg,rgba(42,123,207,.94) 0%,rgba(42,123,207,.82) 26%,rgba(42,123,207,.18) 50%,rgba(42,123,207,0) 68%),url(images/harness-black-sleeved-breakouts.jpg?v=8b8bc1f0) center center/cover no-repeat}

/* Soft shadow so white hero text stays legible over the photo */
.hero h1,.hero-lede,.hero-mail,.hero .wordmark{text-shadow:0 2px 14px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.35)}
.hero .btn{box-shadow:0 8px 24px rgba(0,0,0,.35)}

/* Cable assemblies card photo */
.card.card-photo-cables{background:linear-gradient(90deg,rgba(42,123,207,.94) 0%,rgba(42,123,207,.82) 26%,rgba(42,123,207,.18) 50%,rgba(42,123,207,0) 68%),url(images/harness-braided-sleeving-red-connectors.jpg?v=16c31d83) center center/cover no-repeat}

/* Contract manufacturing card photo */
.card.card-photo-cem{background:linear-gradient(90deg,rgba(42,123,207,.94) 0%,rgba(42,123,207,.82) 26%,rgba(42,123,207,.18) 50%,rgba(42,123,207,0) 68%),url(images/cem-built-to-build-pack.jpg?v=46bd7396) center center/cover no-repeat}

/* Taller hero with more breathing room */
.hero h1{line-height:1.08}
.hero-lede{max-width:860px}
@media (max-width:520px){.hero-main{gap:32px;padding-top:56px;padding-bottom:64px}}

/* Phone header: keep the menu button on screen */
@media (max-width:520px){.wordmark{font-size:16px;white-space:normal;line-height:1.1}.hero-bar{gap:12px}.nav-cta{gap:8px;flex-shrink:0}.nav-cta .btn{padding:12px 14px;font-size:14px;min-height:44px}}

/* ISO 9001 badge in hero */
.hero-badge{width:auto;height:84px;max-width:min(260px,60vw);margin-top:8px;background:#fff;border-radius:4px;padding:0}
@media (max-width:520px){.hero-badge{height:68px}}
/* Hero buttons: 10% smaller */
.hero .btn{min-height:58px;padding:20px 34px;font-size:16.2px;gap:14px}

/* Intro text section between carousel and About */
.intro{padding:72px var(--pad-r) 24px var(--pad-l);background:var(--white)}
.intro-in{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.intro h2{font-size:clamp(28px,3vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.intro p{font-size:18px;line-height:1.65;color:var(--ink)}
.intro a{color:var(--teal);text-decoration:underline;text-underline-offset:4px}

/* MSH logo (SVG) */
.logo-img{display:block;height:46px;width:auto}
.m-top .logo-img{height:32px;width:auto;padding:0;background:none;border-radius:0}
.logo-foot{height:auto;width:min(560px,80vw);margin:0 auto}

/* Yellow call-to-action buttons: header and hero */
.hero .btn-primary,.nav-cta .btn-primary{background:#F5C518;color:#13324A;--chip:#13324A;--chip-ink:#F5C518}
.hero .btn-primary:hover,.nav-cta .btn-primary:hover{background:#E6B312}
.hero .btn{min-height:64px;padding:22px 40px;font-size:18px}

/* Header "Contact us" button: 25% smaller on desktop */
@media (min-width:521px){
.nav-cta .btn{min-height:39px;padding:12px 21px;font-size:12px;gap:9px}
.nav-cta .btn-arr{width:27px;height:27px;margin:-8px -15px -8px 0}
}


/* Header Contact button matches the burger button height where the burger shows */
@media (max-width:960px){
.nav-cta .btn{height:52px;min-height:52px;padding:0 20px;font-size:14px}
}

/* Trust bar across the bottom of the hero */
.hero{position:relative}
.trust-bar{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:-80px;display:flex;align-items:stretch;width:min(1040px,calc(100% - 2*var(--pad-r)));background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:14px;line-height:1.35;text-align:left;overflow:hidden}
.tb-item{display:flex;align-items:center;gap:14px;padding:14px 20px;min-width:0}
.tb-item+.tb-item{border-left:1px solid var(--ghost-line)}
.tb-item img{height:100px;width:auto;flex:0 0 auto}
.tb-item p{margin:0}
.tb-item strong{font-weight:700;color:var(--ink)}
.tb-stack{display:contents}
.tb-stack>.tb-item{flex:1 1 0;border-left:1px solid var(--ghost-line)}


.trust-bar>.tb-item{flex:1 1 0}
.trust-bar>.tb-item:last-child{flex:1.5 1 0;border-left:1px solid var(--ghost-line)}
/* keep hero text clear of the trust bar */
@media (min-width:761px){.hero-main{padding-top:16px;padding-bottom:150px;gap:22px}.hero-actions{margin-top:4px;justify-content:center;width:100%}}
@media (max-width:760px){.trust-bar{position:static;transform:none;flex-direction:column;width:auto;margin:0 16px 24px}.tb-item+.tb-item{border-left:0}.tb-stack{display:none}.nav-cta>.btn{display:none}.cards{padding-top:24px}}
#about{padding-top:clamp(16px,2vw,28px)}

/* =====================================================================
   Motion. One easing family; enter = opacity + small rise + 4px blur.
   Scroll reveals only apply once menu.js arms them (html.motion-ready),
   so content is never hidden if the script fails. The menu is not
   animated (owner rule). Everything is removed under reduced motion.
   ===================================================================== */
:root{--ease-out:cubic-bezier(.22,.7,.2,1);--ease-press:cubic-bezier(.3,.7,.4,1)}

/* Page-to-page: soft crossfade (browsers without view transitions just navigate). */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s var(--ease-out) both}
::view-transition-new(root){animation:vt-in .38s var(--ease-out) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

/* Hero copy settles in on load. The h1 is left still so it paints at once. */
@keyframes rise-in{from{opacity:0;translate:0 12px;filter:blur(4px)}}
.hero-main>:not(h1),.svc-hero-in>:not(h1),.trust-bar{animation:rise-in .7s var(--ease-out) both}
.hero-main>:nth-child(2),.svc-hero-in>:nth-child(2){animation-delay:.08s}
.hero-main>:nth-child(3),.svc-hero-in>:nth-child(3){animation-delay:.16s}
.hero-main>:nth-child(n+4),.svc-hero-in>:nth-child(n+4){animation-delay:.24s}
.trust-bar{animation-delay:.3s}

/* Scroll reveal, staggered within lists via --rv-i (set by menu.js). */
.motion-ready .rv{opacity:0;translate:0 16px;filter:blur(4px);transition:opacity .6s var(--ease-out),translate .75s var(--ease-out),filter .6s var(--ease-out);transition-delay:calc(min(var(--rv-i,0),6) * 70ms)}
.motion-ready .rv.in{opacity:1;translate:none;filter:none}

/* Tactile press on buttons; cards lift slightly on hover (pointer devices only). */
.btn,.btn-outline-light,.arrow{transition:background .2s,color .2s,border-color .2s,transform .16s var(--ease-press)}
.btn:active,.btn-outline-light:active,.arrow:active{transform:scale(.98)}
.rel a,.about-svc a{transition:border-color .25s,transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
@media (hover:hover){
  .rel a:hover,.about-svc a:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(19,50,74,.06),0 12px 28px -12px rgba(19,50,74,.22)}
}

/* FAQ answers open smoothly where the browser supports animating to auto height. */
@supports (interpolate-size:allow-keywords){
  .faq-l details{interpolate-size:allow-keywords}
  .faq-l details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease-out),content-visibility .35s allow-discrete}
  .faq-l details[open]::details-content{block-size:auto}
}
.faq-l details[open] p{animation:faq-in .35s var(--ease-out) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}}
.faq-l summary svg{transition:transform .3s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero-main>*,.svc-hero-in>*,.trust-bar,.faq-l details[open] p{animation:none}
  .faq-l details::details-content{transition:none}
  .btn,.btn-outline-light,.arrow,.rel a,.about-svc a{transition:none}
  .btn:active,.btn-outline-light:active,.arrow:active,.rel a:hover,.about-svc a:hover{transform:none}
}
@media print{.motion-ready .rv{opacity:1;translate:none;filter:none}}
/* Header crispness: the text-shadow that keeps white nav text legible over the
   hero photo must not reach dark text on light surfaces (dropdown links, the
   yellow Contact us button), and the dropdown gets a tight edge shadow rather
   than a wide soft one. Otherwise both read as blurry. */
.svc-top .hero-bar .dd-panel a,.svc-top .hero-bar .dd-panel a *,.svc-top .hero-bar .nav-cta .btn,.svc-top .hero-bar .nav-cta .btn *{text-shadow:none}
.hero .nav-cta .btn{box-shadow:none}
.dd-panel{box-shadow:0 0 0 1px rgba(19,50,74,.08),0 10px 24px -8px rgba(19,50,74,.22)}
/* Footer logo: a small, quiet sign-off above the legal line, not a full-width wordmark. */
.mark{width:auto;aspect-ratio:auto;margin:clamp(40px,5vw,64px) 0 0;place-items:start;border-radius:0}
.mark img,.mark .logo-foot{width:clamp(112px,12vw,160px);height:auto;margin:0;opacity:.6}
/* Footer call to action in brand yellow, matching the hero and header buttons. */
.foot .btn-primary{background:#F5C518;color:#13324A;--chip:#13324A;--chip-ink:#F5C518}
.foot .btn-primary:hover{background:#E6B312}
/* Homepage hero on laptop and desktop: taller, with the text block centred between
   the menu and the trust bar (which overlaps the hero's bottom edge by about 48px),
   so the space above the headline matches the space below the button. */
@media (min-width:961px){
  .hero{height:clamp(700px,90vh,900px)}
  .hero-main{justify-content:center;padding-top:0;padding-bottom:48px;gap:24px}
  .hero-actions{margin-top:16px}
}