/* STIM Canada — UI/UX polish layer. Loaded after premium.css on every finished page. */

/* ---------- Typography: no orphaned words or line-leading dashes ---------- */
main p,main li,main dd,main figcaption{text-wrap:pretty}
main h3{text-wrap:balance}

/* ---------- Navigation: show where you are inside dropdown sections ---------- */
.nav-link.is-section-current::after{right:0}
.dropdown a[aria-current=page]{color:var(--green);font-weight:500}
.dropdown a[aria-current=page] span{color:var(--green);opacity:1}
.mobile-nav a[aria-current=page],.mobile-nav-heading a.is-section-current{color:var(--green)}

/* ---------- Home: hero step list keeps all three stages on phones ---------- */
@media(max-width:900px){
  .hero-bottom-left{flex-wrap:wrap;row-gap:8px}
  .hero-bottom-left>span:nth-child(3){display:inline}
}

/* ---------- Inset photographs: image, corner marks and caption share one edge ---------- */
#quality .quality-detail>img[src='assets/home-quality.webp'],
body.pcb-concept .inspection-layout figure img{position:absolute;inset:4%;width:92%;height:92%;margin:0;object-fit:cover}
#quality .quality-detail .inspection-overlay{inset:calc(4% + 16px)}
#quality .quality-detail figcaption{z-index:2}
#quality .quality-detail figcaption,
body.pcb-concept .inspection-layout figcaption{left:4%;right:4%;bottom:4%}
body.pcb-concept .inspection-layout figure{position:relative}
body.pcb-concept .inspection-layout figcaption{padding:18px 20px}
@media(max-width:600px){
  #quality .quality-detail figcaption{gap:4px 12px;padding:12px 14px}
  body.pcb-concept .inspection-layout figcaption{padding:14px 16px}
}

/* ---------- Capability hero (PCB Assembly, NPI): green accents on the dark side ---------- */
.pcb-concept .capability-hero{background:#04100b}
.pcb-concept .capability-hero-image:after{background:
  radial-gradient(ellipse 52% 115% at 0% 100%,rgba(12,138,76,.34),rgba(12,138,76,0) 70%),
  linear-gradient(90deg,#04100b 0%,rgba(4,16,11,.97) 24%,rgba(5,20,13,.87) 42%,rgba(6,24,16,.48) 62%,rgba(6,24,16,.12) 82%,rgba(6,24,16,.04) 100%)}
/* Fine engineering dot grid, fading out before it reaches the photograph. */
.pcb-concept .capability-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(110,205,150,.20) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 55%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.55) 30%,transparent 55%)}
/* Brand-green signal line along the bottom edge. */
.pcb-concept .capability-hero::before{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#087844 0%,#2fb569 38%,rgba(47,181,105,.35) 68%,rgba(47,181,105,0) 92%)}
.pcb-concept .capability-hero-inner>p.capability-hero-eyebrow{display:flex;align-items:center;gap:11px;max-width:none;margin:0 0 24px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93dcb0}
.pcb-concept .capability-hero-eyebrow i{flex:none;width:7px;height:7px;border-radius:50%;background:#34c474;box-shadow:0 0 0 4px rgba(52,196,116,.16),0 0 14px rgba(52,196,116,.75)}
.pcb-concept .capability-hero-eyebrow span{color:rgba(232,244,236,.58)}
.pcb-concept .capability-hero-rule{width:150px;height:2px;background:linear-gradient(90deg,#3cc77a 0%,#2fb569 55%,rgba(47,181,105,0) 100%)}
@media(max-width:600px){
  .pcb-concept .capability-hero-inner>p.capability-hero-eyebrow{font-size:10px;margin-bottom:16px;gap:9px}
  .pcb-concept .capability-hero-image:after{background:
    radial-gradient(ellipse 85% 80% at 0% 100%,rgba(12,138,76,.32),rgba(12,138,76,0) 70%),
    linear-gradient(90deg,rgba(4,16,11,.97) 0%,rgba(4,16,11,.9) 40%,rgba(6,24,16,.5) 75%,rgba(6,24,16,.24) 100%)}
  .pcb-concept .capability-hero::after{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 80%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 80%)}
}

/* ---------- Capability introduction: balanced on desktop, readable on phones ---------- */
.pcb-concept .capability-introduction-copy{text-wrap:balance}
@media(max-width:600px){
  .pcb-concept .capability-introduction{text-align:left}
  .pcb-concept .capability-introduction-copy{font-size:20px;line-height:1.55;text-wrap:pretty}
}

/* ---------- NPI: give the process link the same breathing room as PCB ---------- */
body.npi-page .process-heading>div:last-child>p{margin:0 0 22px}

/* ---------- Contact: section label matches every other eyebrow on the site ---------- */
body .contact-guidance p.eyebrow{font-size:11px;line-height:1.5;letter-spacing:.065em;color:var(--green);margin-bottom:18px}

/* ---------- Hero photo credit (CC BY images must be attributed) ---------- */
.hero-credit{position:absolute;right:16px;bottom:10px;z-index:3;margin:0;font:400 10px/1.4 var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:#ffffff8c}
.hero-credit a{color:inherit;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:2px}
.hero-credit a:hover{color:#fff}

/* ---------- NPI hero: studio-lit prototype module, kept bright on the right ---------- */
.npi-page .capability-hero-image img{filter:none;object-position:62% center}
.npi-page .capability-hero-image:after{background:
  radial-gradient(ellipse 52% 115% at 0% 100%,rgba(12,138,76,.30),rgba(12,138,76,0) 70%),
  linear-gradient(90deg,#04100b 0%,rgba(4,16,11,.96) 22%,rgba(5,20,13,.8) 38%,rgba(6,24,16,.3) 54%,rgba(6,24,16,0) 68%)}
@media(max-width:600px){
  .npi-page .capability-hero-image img{object-position:72% center}
  .npi-page .capability-hero-image:after{background:
    radial-gradient(ellipse 85% 80% at 0% 100%,rgba(12,138,76,.3),rgba(12,138,76,0) 70%),
    linear-gradient(90deg,rgba(4,16,11,.96) 0%,rgba(4,16,11,.9) 50%,rgba(6,24,16,.6) 82%,rgba(6,24,16,.38) 100%)}
}

/* ---------- Capability introduction: signature line under the copy (universal across capability pages) ---------- */
.pcb-concept main section[id]{scroll-margin-top:calc(var(--header-height,80px) + 24px)}
/* Section padding +7% top and bottom when the signature is present (78px/72px → 84px/77px). */
.pcb-concept .capability-introduction:has(.intro-signature){padding-top:84px;padding-bottom:77px}
.intro-signature{display:flex;align-items:center;justify-content:center;gap:18px;margin:40px auto 0}
.intro-signature p{display:flex;align-items:center;gap:14px;margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.intro-signature i{width:5px;height:5px;background:var(--green);border-radius:1px}
/* Short static trace with a via at its outer end. */
.sig-trace{position:relative;flex:none;width:56px;height:1px;background:#b3c8b8}
.sig-trace::before{content:'';position:absolute;top:50%;left:-4px;width:9px;height:9px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle,var(--green) 0 1.6px,#fff 2.2px);border:1.5px solid #7f9c8a;box-sizing:border-box}
.sig-trace+p+.sig-trace::before{left:auto;right:-4px}
@media(max-width:1000px){.pcb-concept .capability-introduction:has(.intro-signature){padding-top:66px;padding-bottom:54px}}
@media(max-width:700px){.intro-signature{margin-top:30px;gap:12px}.intro-signature p{gap:10px;font-size:10px;letter-spacing:.12em}.sig-trace{width:36px}}
@media(max-width:600px){.pcb-concept .capability-introduction:has(.intro-signature){padding-top:51px;padding-bottom:45px}.intro-signature{justify-content:flex-start}.intro-signature .sig-trace:first-child{display:none}}

/* ---------- Contact: structured request-a-quote intake (section labels, checkbox and radio choices) ---------- */
.inquiry-panel .form-section{grid-column:1/-1;margin:8px 0 -8px;padding-top:22px;border-top:1px solid #dbe5de;font:500 11px/1.4 var(--mono);letter-spacing:.12em;color:var(--green)}
.inquiry-panel .form-section:first-child{margin-top:0;padding-top:0;border-top:0}
.inquiry-panel fieldset.field{margin:0;padding:0;border:0;min-width:0}
.inquiry-panel fieldset.field legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:500;color:var(--ink)}
.inquiry-panel .choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inquiry-panel .choice-grid.stack{grid-template-columns:1fr}
.inquiry-panel .choice{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid #c5d6cc;border-radius:3px;background:#f8faf8;font-size:15px;font-weight:400;line-height:1.45;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s}
.inquiry-panel .choice:hover{border-color:#94b4a0}
.inquiry-panel .choice:has(input:checked){border-color:var(--green);background:#fff}
.inquiry-panel .choice input,.inquiry-panel .choice input:focus{width:16px;height:16px;flex:0 0 16px;margin:3px 0 0;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--green)}
.inquiry-panel .choice input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:700px){.inquiry-panel .choice-grid{grid-template-columns:1fr}}
/* The request form is long; keep the contact details beside it while it scrolls. */
@media(min-width:901px){.contact-intro{position:sticky;top:110px}}

/* Mobile: reliable touch swiping for the capabilities strip */
@media (max-width:1000px){
  .journey:not(.is-pinned){overflow:visible;overflow-x:hidden}
  .journey:not(.is-pinned) .journey-window{overflow-x:auto!important;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
  .journey:not(.is-pinned) .cap-card{scroll-snap-align:center}
}
/* Mobile: hide hero step strip and scroll cue */
@media (max-width:700px){
  .hero-bottom{display:none}
}

/* ---------- Home hero: live 3D module (the photo is only a no-WebGL fallback) ---------- */
.hero--precision .hero-pcb-3d{position:absolute;z-index:1;display:block;opacity:0;transform:translateY(14px) scale(.985);pointer-events:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.hero--precision .hero-image.is-3d .hero-pcb-3d{opacity:1;transform:none}
.hero-3d-pending .hero--precision .hero-image img{visibility:hidden}
.hero--precision .hero-image::after{transition:opacity 1.2s ease .2s}
.hero-3d-pending .hero--precision .hero-image:not(.is-3d)::after{opacity:0}

.hero--precision .hero-image img{visibility:hidden}
.hero--precision .hero-image:not(.is-3d)::after{opacity:0}