/* Service page template (MSH). Header sits on the same blue band as the hero. */
/* Original note:  Loaded only by service pages; colours come from styles.css. */
.svc-hero{background:var(--teal);color:var(--white);padding:clamp(40px,6vw,88px) var(--pad-r) clamp(48px,6vw,88px) var(--pad-l)}
.svc-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;max-width:1200px;margin:0 auto}
.svc-hero-pic{margin:0}
.svc-hero-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;display:block}
.svc-hero-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.svc-hero h1{font-size:clamp(36px,5.4vw,68px);line-height:1.04;font-weight:800;letter-spacing:-.035em;max-width:14em;text-wrap:balance;color:var(--white)}
.svc-hero .lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:36em;color:rgba(255,255,255,.92)}
.svc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn-outline-light{display:inline-flex;align-items:center;justify-content:center;min-height:64px;padding:22px 38px;border:2px solid var(--white);border-radius:var(--btn-r);color:var(--white);font-weight:700;font-size:18px;transition:background .2s,color .2s}
.btn-outline-light:hover{background:var(--white);color:var(--ink)}
.heroproof{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:16px;color:rgba(255,255,255,.92)}
.heroproof li{display:flex;align-items:center;gap:10px}
.heroproof svg{width:22px;height:22px;flex:0 0 auto;color:var(--mint)}
.crumbs{max-width:calc(1200px + var(--pad-l) + var(--pad-r));margin:0 auto;padding:20px var(--pad-r) 24px var(--pad-l);font-size:14px;color:var(--quiet)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 10px}
.crumbs li+li::before{content:"/";margin-right:10px;color:rgba(19,50,74,.35)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.sec{padding:clamp(48px,6vw,80px) var(--pad-r) 0 var(--pad-l);max-width:calc(1200px + var(--pad-l) + var(--pad-r));margin:0 auto;scroll-margin-top:24px}
.sec h2{font-size:clamp(26px,3vw,36px);line-height:1.12;font-weight:800;letter-spacing:-.025em;margin-bottom:20px}
.sec .lead{max-width:44em;font-size:18px;line-height:1.65}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{padding:24px;border:1px solid var(--ghost-line);border-radius:20px;background:var(--white)}
.steps .n{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:50%;background:var(--ink);color:var(--white);font-weight:800;font-size:18px}
.steps h3{font-size:18px;font-weight:800;margin-bottom:6px;line-height:1.25}
.steps p{font-size:15px;line-height:1.55;color:var(--quiet)}
.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px}
.incl li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:14px;padding:20px 0;border-top:1px solid var(--ghost-line);align-items:start}
.incl svg{width:32px;height:32px;padding:6px;border-radius:50%;background:var(--mint);color:var(--ink)}
.incl b{display:block;font-size:18px;font-weight:800;margin-bottom:4px}
.incl span{font-size:16px;line-height:1.55;color:var(--quiet)}
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.proof .pic{border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.proof .pic img{width:100%;height:100%;object-fit:cover}
.proof .pic-tall{aspect-ratio:1200/1615}
.proof p{font-size:18px;line-height:1.65;max-width:36em}
.proof p+p{margin-top:14px}
.specs{margin:0;display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,2fr);border:1px solid var(--ghost-line);border-radius:16px;overflow:hidden}
.specs dt,.specs dd{margin:0;padding:15px 20px;font-size:16px;line-height:1.5;border-top:1px solid var(--ghost-line)}
.specs dt:first-of-type,.specs dd:first-of-type{border-top:0}
.specs dt{font-weight:800;background:var(--ghost)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.panel{padding:clamp(22px,3vw,32px);border-radius:20px;background:var(--ghost)}
.panel h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.plist li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5}
.plist svg{width:24px;height:24px;color:var(--teal);margin-top:1px}
.faq-l{display:flex;flex-direction:column;gap:12px;max-width:920px}
.faq-l details{background:var(--white);border:1px solid var(--ghost-line);border-radius:16px;padding:0 24px}
.faq-l summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:800;line-height:1.3}
.faq-l summary::-webkit-details-marker{display:none}
.faq-l summary svg{width:22px;height:22px;flex:0 0 auto;color:var(--teal);transition:transform .2s}
.faq-l details[open] summary svg{transform:rotate(180deg)}
.faq-l p{padding:0 0 20px;font-size:17px;line-height:1.6;max-width:42em}
.rel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rel a{display:flex;flex-direction:column;gap:10px;height:100%;padding:24px;border:1px solid var(--ghost-line);border-radius:20px;background:var(--white);transition:border-color .2s}
.rel a:hover{border-color:var(--teal)}
.rel h3{font-size:18px;font-weight:800;line-height:1.25}
.rel p{font-size:15px;color:var(--quiet);line-height:1.5}
.rel .more{margin-top:auto;font-weight:700;color:var(--teal)}
.endcta{margin-top:clamp(56px,7vw,96px);background:var(--ghost);padding:clamp(48px,6vw,80px) var(--pad-r) clamp(48px,6vw,80px) var(--pad-l)}
.endcta-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px}
.endcta h2{font-size:clamp(28px,3.4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-.025em;max-width:16em;text-wrap:balance}
.endcta p{margin-top:12px;font-size:18px;line-height:1.55;max-width:34em}
@media (max-width:960px){.svc-hero-grid{grid-template-columns:1fr}.two{grid-template-columns:1fr}.rel{grid-template-columns:1fr 1fr}.proof{grid-template-columns:1fr}}
@media (max-width:760px){
  .steps{grid-template-columns:1fr 1fr}
  .incl{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr}
  .specs dt{border-top:1px solid var(--ghost-line);padding-bottom:4px}
  .specs dd{border-top:0;padding-top:4px}
  .specs dt:first-of-type{border-top:0}
  .rel{grid-template-columns:1fr}
}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* Contact page */
.contact{padding:clamp(48px,6vw,80px) var(--pad-r) clamp(48px,6vw,80px) var(--pad-l);max-width:calc(1200px + var(--pad-l) + var(--pad-r));margin:0 auto}
.contact-in{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:start}
.form-card{background:var(--white);border:1px solid var(--ghost-line);border-radius:24px;padding:clamp(24px,4vw,48px)}
.form-card h2,.details h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15;font-weight:800;letter-spacing:-.025em}
.form-card .sub{margin-top:8px;color:var(--quiet);font-size:17px;line-height:1.5}
.addr{margin-top:28px;font-size:clamp(22px,3vw,36px);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--teal);overflow-wrap:anywhere}
.mail-actions{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.include{margin-top:36px;padding-top:32px;border-top:1px solid var(--ghost-line)}
.include h3{font-size:20px;font-weight:800;letter-spacing:-.01em}
.include ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.include li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;font-size:17px;line-height:1.55}
.include svg{width:28px;height:28px;padding:4px;border-radius:50%;background:var(--mint);color:var(--ink);margin-top:-1px}
.details{position:sticky;top:24px;background:var(--ghost);border-radius:24px;padding:clamp(24px,3.5vw,40px);display:flex;flex-direction:column;gap:28px}
.d-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.d-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.d-list svg{width:36px;height:36px;color:var(--teal);margin-top:2px}
.d-list h3{font-size:16px;font-weight:800;line-height:1.3}
.d-list p,.d-list a{font-size:16px;line-height:1.55;overflow-wrap:anywhere}
.d-list a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.next{background:var(--white);padding:clamp(56px,7vw,96px) var(--pad-r) clamp(56px,7vw,96px) var(--pad-l)}
.next-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}
.next h2{font-size:clamp(32px,4vw,48px);line-height:1.08;font-weight:700;letter-spacing:-.025em}
.next .steps li{background:var(--white);border:0;border-top:2px solid var(--teal);border-radius:0;padding:24px 0 0}
.next .steps b{display:block;font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--teal);margin-bottom:10px}
@media (max-width:960px){.contact-in{grid-template-columns:1fr}.details{position:static}}

@media (max-width:520px){.addr{font-size:19px}}

/* About page */
.about-sec{padding:clamp(56px,7vw,96px) var(--pad-r) clamp(56px,7vw,96px) var(--pad-l)}
.about-alt{background:var(--ghost)}
.about-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(32px,4vw,48px)}
.about-in.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.about-in h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.025em}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.about-copy{display:flex;flex-direction:column;gap:18px;font-size:18px;line-height:1.65}
.about-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.about-grid li{background:var(--white);border:1px solid var(--ghost-line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
.about-ico{width:52px;height:52px;border-radius:14px;background:var(--mint);color:var(--ink);display:grid;place-items:center}
.about-ico svg{width:26px;height:26px}
.about-grid h3,.about-svc h3{font-size:20px;line-height:1.25;font-weight:800}
.about-grid p,.about-svc p{font-size:16px;line-height:1.55;color:var(--quiet)}
.about-svc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.about-svc a{display:flex;flex-direction:column;gap:10px;height:100%;padding:28px;background:var(--white);border:1px solid var(--ghost-line);border-radius:20px}
.about-svc a:hover{border-color:var(--teal)}
.about-svc .more{margin-top:auto;padding-top:8px;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.about-note{margin-top:20px;font-size:14px;color:var(--quiet)}
.fact-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}
.fact-list li{padding-top:16px;border-top:1px solid var(--ghost-line)}
.fact-list h3{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.fact-list p{font-size:17px;line-height:1.55;color:var(--ink)}
@media (max-width:520px){.fact-list{grid-template-columns:1fr}}
.about-cta{background:var(--teal);color:var(--white);padding:clamp(56px,7vw,88px) var(--pad-r) clamp(56px,7vw,88px) var(--pad-l);text-align:left}
.about-cta .about-in{align-items:flex-start;gap:16px}
.about-cta h2{color:var(--white)}
.about-cta p{font-size:18px}
.about-cta .btn-primary{background:#F5C518;color:#13324A;--chip:#13324A;--chip-ink:#F5C518;margin-top:8px}
.about-cta .btn-primary:hover{background:#E6B312}
@media (max-width:900px){.about-in.two{grid-template-columns:1fr}}
@media (max-width:640px){.about-grid,.about-svc{grid-template-columns:1fr}}

/* Header and hero buttons: no dark chip or photo bleed on hover */
.nav-cta .btn:hover .btn-arr,.svc-top .btn:hover .btn-arr{background:transparent;color:inherit}
.svc-top .btn-outline-light{background:#0A4068}
.svc-top .btn-outline-light:hover{background:#155E8C;color:var(--white)}

/* Sectors page */
.sec-grid-sec{padding:clamp(56px,7vw,96px) var(--pad-r) clamp(56px,7vw,96px) var(--pad-l);background:var(--ghost)}
.sec-in{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.sec-in h2{font-size:clamp(30px,3.6vw,46px);line-height:1.1;font-weight:700;letter-spacing:-.025em}
.sec-intro{font-size:18px;line-height:1.6;color:var(--quiet);max-width:40em}
.sec-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px)}
.sec-card{background:var(--white);border:1px solid var(--ghost-line);border-radius:24px;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.sec-ico{width:60px;height:60px;border-radius:16px;background:var(--mint);color:var(--ink);display:grid;place-items:center}
.sec-ico svg{width:30px;height:30px}
.sec-card h3{font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.01em}
.sec-card p{font-size:16px;line-height:1.6;color:var(--quiet)}
.sec-link{margin-top:auto;padding-top:8px;font-weight:700;color:var(--teal);display:inline-flex;align-items:center;gap:8px}
.sec-link:hover{text-decoration:underline}
.sec-note{margin-top:12px;font-size:14px;color:var(--quiet)}
@media (max-width:640px){.sec-grid{grid-template-columns:1fr}}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.steps li{border-top:2px solid var(--teal);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.steps b{font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--teal)}
.steps h3{font-size:19px;line-height:1.25;font-weight:800}
.steps p{font-size:16px;line-height:1.55;color:var(--quiet)}
.incl-list{display:flex;flex-direction:column;gap:16px;list-style:none;padding:clamp(24px,3.5vw,40px)}
.incl-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;font-size:17px;line-height:1.5}
.incl-list svg{width:28px;height:28px;padding:4px;border-radius:50%;background:var(--mint);color:var(--ink)}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* Cable assemblies page */
.pic-wrap{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--ghost)}
.pic-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.about-copy-p{font-size:18px;line-height:1.65;color:var(--ink)}
.sec-card-link{background:var(--ghost)}

/* Inner-page heroes on laptop and desktop: one shared height (About's height, plus room for the three-line contract manufacturing headline) on
   every page, with the text centred vertically inside it. The service pages' text
   uses the full width like About (their right-hand grid column was always empty,
   which squeezed the headline onto four lines and made those heroes much taller).
   .svc-top .svc-hero beats the per-page <style id="svc-bg"> rules. */
@media (min-width:961px){
  /* Grows a little with the window so photos are cropped less, but stays well short of a full screen:
     about 70% of the screen height, never under 560px or over 720px. Taller text still grows it. */
  .svc-top{min-height:clamp(560px,min(42vw,70vh),720px);display:flex;flex-direction:column}
  .svc-top .svc-hero{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding-top:48px;padding-bottom:48px}
  .svc-top .svc-hero-grid{display:block;width:100%}
  .svc-top .svc-hero-in{width:100%}
}
/* Inner-page heroes (not the homepage). A subtle deep petrol blue glow (nudged bluer from the sampled teal) to sit with the teal
   workbench mats in the photos, hugs the text area only and fades out by three-quarters of the way,
   so the rest of the photo is untouched. Crisp white text, no shadows.
   "body" lifts these rules above the per-page <style id="svc-bg"> blocks, which load later. */
body .svc-top{background-image:radial-gradient(circle at 18% 35%,rgba(18,42,70,.75) 0%,rgba(18,42,70,.45) 45%,rgba(18,42,70,0) 75%),var(--hero-img)}
/* Phones: the copy spans the full width, so the same petrol tint runs top to bottom instead. */
@media (max-width:760px){body .svc-top{background-image:linear-gradient(180deg,rgba(18,42,70,.75) 0%,rgba(18,42,70,.55) 60%,rgba(18,42,70,.3) 100%),var(--hero-img)}}
body .svc-top h1,body .svc-top .lede,body .svc-top .heroproof li{color:#fff}
/* No text shadows anywhere in the hero: headline, paragraph, bullets, menu, logo, buttons. */
body .svc-top h1,body .svc-top .lede,body .svc-top .heroproof li,body .svc-top .hero-bar a,body .svc-top .nav-link,body .svc-top .logo,body .svc-top .btn{text-shadow:none}
/* Accessibility checklist: medium-to-bold weights and slight positive tracking. */
.svc-top .svc-hero h1{letter-spacing:.01em}
.svc-top .svc-hero .lede{font-weight:300;line-height:1.6;letter-spacing:.015em}
.svc-top .svc-hero .heroproof li{font-weight:500;letter-spacing:.015em}
/* ISO badge: a clean white card with even padding, square corners (the LR/UKAS mark is shown exactly as their official artwork) and a soft lift, so it reads as
   a deliberate badge rather than a clipped sticker on the photo. */
.svc-top .hero-badge{box-sizing:content-box;padding:8px 10px;border-radius:0;background:#fff;box-shadow:0 6px 18px rgba(12,22,36,.35),0 0 0 1px rgba(255,255,255,.6)}