/*
Theme Name: Limitless Design MFG
Theme URI: https://limitlessdesignmfg.com
Author: Limitless Design MFG
Description: Custom theme for Limitless Design MFG — intent-first manufacturing studio site with instant quote, services, industries, case studies and local SEO pages.
Version: 4.4
License: GNU General Public License v2 or later
Text Domain: limitless
*/

:root{
  --violet-900:#2C0A52; --violet-700:#520F93; --violet-500:#7B2FBE; --violet-300:#9963C1;
  --violet-100:#EDE3F6; --ink:#15101C; --paper:#FBFAFC; --paper-2:#F4F0F8;
  --line:#E2D8EC; --mono:'JetBrains Mono',monospace; --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif;
  --steel:#6B6577;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

/* NAV */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,252,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-header nav{display:flex;align-items:center;justify-content:space-between;height:68px}

/* ---------- Sticky contact bar (sits above the nav, inside the sticky header) ---------- */
/* Selectors are scoped under .topbar deliberately: the shared .social-row rule
   is defined much further down this file, so an unscoped .tb-social would lose
   to it on source order alone. */
.topbar{background:linear-gradient(90deg,var(--violet-900),var(--violet-700));color:#d9c8f0;font-size:.78rem}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:38px;flex-wrap:nowrap}
.topbar .tb-left,.topbar .tb-right{display:flex;align-items:center;gap:20px;min-width:0;flex-wrap:nowrap}
.topbar .tb-left a{display:inline-flex;align-items:center;gap:7px;color:#d9c8f0;transition:color .18s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-left a:hover{color:#fff}
.topbar .tb-left svg{flex:none;opacity:.75}
.topbar .tb-quote{background:#fff;color:var(--violet-900);font-weight:600;font-size:.76rem;
  padding:6px 14px;border-radius:6px;white-space:nowrap;flex:none;transition:background .18s}
.topbar .tb-quote:hover{background:var(--violet-100)}
.topbar .tb-social{gap:2px;flex-wrap:nowrap}
.topbar .tb-social a{width:26px;height:26px;border-radius:6px;color:#c3aee0}
.topbar .tb-social a:hover{color:#fff;transform:none;background:rgba(255,255,255,.12)}
.topbar .tb-social svg{width:15px;height:15px}
/* Phone and the quote button are the two that matter on a small screen. The
   email address is the first thing to go because it is by far the longest, and
   a tap on the phone number is the likelier action anyway; the social icons
   follow, since they are duplicated in the footer. */
@media(max-width:980px){
  .topbar{font-size:.74rem}
  .topbar .tb-left,.topbar .tb-right{gap:12px}
  .topbar .tb-mail span{display:none}
  .topbar .tb-social a{width:24px;height:24px}
}
@media(max-width:620px){
  .topbar .wrap{padding:0 16px;gap:10px}
  .topbar .tb-social{display:none}
}
@media(max-width:380px){
  .topbar .tb-mail{display:none}
}

.logo{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo .dot{width:11px;height:11px;background:var(--violet-700);border-radius:50%;box-shadow:0 0 0 4px var(--violet-100)}
.logo img{height:40px;width:auto;display:block}
@media(max-width:880px){.logo img{height:34px}}
.navlinks{display:flex;gap:30px;align-items:center;list-style:none}
.navlinks a{font-size:.9rem;font-weight:500;color:var(--steel);transition:color .2s}
.navlinks a:hover{color:var(--violet-700)}
.nav-cta a,.nav-cta{background:var(--violet-700);color:#fff !important;padding:9px 18px;border-radius:7px;font-weight:600;font-size:.88rem}
.nav-cta a:hover{background:var(--violet-500)}

.crumb{padding:22px 0 0}
.crumb .mono{color:var(--steel)}
.crumb a:hover{color:var(--violet-700)}
.crumb span.cur{color:var(--violet-500)}

section.block{padding:64px 0}
.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.block .head{margin-bottom:36px;max-width:64ch}
.block .head .eyebrow{color:var(--violet-500);margin-bottom:12px}
.block .head h2{font-family:var(--display);font-size:clamp(1.7rem,3.2vw,2.3rem);font-weight:600;letter-spacing:-.02em}
.block .head p{color:var(--steel);margin-top:12px;font-size:1.02rem}

.btn-primary{background:var(--violet-700);color:#fff;padding:14px 24px;border-radius:9px;font-weight:600;font-size:.95rem;transition:background .2s;display:inline-block}
.btn-primary:hover{background:var(--violet-500)}
.btn-ghost{border:1px solid var(--line);padding:14px 24px;border-radius:9px;font-weight:600;font-size:.95rem;color:var(--ink);transition:border-color .2s;display:inline-block}
.btn-ghost:hover{border-color:var(--violet-300)}

.prose{max-width:68ch;font-size:1.05rem;color:#3a3344}
.prose p{margin-bottom:18px}
.prose strong{color:var(--ink)}
.prose h3{font-family:var(--display);font-size:1.3rem;margin:28px 0 12px}
.pill{font-family:var(--mono);font-size:.66rem;padding:3px 8px;border-radius:5px;background:var(--violet-100);color:var(--violet-700);white-space:nowrap}

/* HERO + INTENT SPLIT */
.hero{padding:46px 0 14px;position:relative;overflow:hidden}
.hero .eyebrow{color:var(--violet-500);margin-bottom:18px}
.hero h1{font-family:var(--display);font-size:clamp(2.4rem,5.4vw,4.1rem);line-height:1.02;font-weight:700;letter-spacing:-.03em;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--violet-700)}
.hero .sub{font-size:1.12rem;color:var(--steel);max-width:52ch;margin-top:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:42px;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 24px 60px -40px rgba(82,15,147,.45)}
.lane{padding:38px 34px 34px;position:relative;background:#fff;transition:background .25s;cursor:pointer;min-height:300px;display:flex;flex-direction:column}
.lane:first-child{border-right:1px solid var(--line)}
.lane:hover{background:var(--paper-2)}
.lane .tag{display:inline-flex;align-items:center;gap:8px;color:var(--violet-500);margin-bottom:auto}
.lane .tag .n{font-family:var(--mono);font-size:.72rem;background:var(--violet-100);color:var(--violet-700);padding:3px 8px;border-radius:5px}
.lane h2{font-family:var(--display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;margin:18px 0 10px}
.lane p{color:var(--steel);font-size:.97rem;margin-bottom:22px}
.lane .go{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--violet-700);font-size:.95rem}
.lane .go .arw{transition:transform .2s}
.lane:hover .go .arw{transform:translateX(6px)}
.lane .ribbon{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--violet-700),var(--violet-300))}
.lane.partner .ribbon{background:linear-gradient(90deg,var(--violet-900),var(--violet-500))}
.lane ul{list-style:none;margin:0 0 22px;display:flex;flex-wrap:wrap;gap:7px}
.lane ul li{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--steel);border:1px solid var(--line);padding:4px 9px;border-radius:5px}
.trustbar{display:flex;gap:34px;flex-wrap:wrap;align-items:center;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.trustbar .stat b{font-family:var(--display);font-size:1.5rem;color:var(--violet-700);display:block;line-height:1}
.trustbar .stat span{font-size:.8rem;color:var(--steel)}
.trustbar .aff{margin-left:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.trustbar .aff span{font-family:var(--mono);font-size:.72rem;color:var(--steel);border:1px solid var(--line);padding:6px 11px;border-radius:6px}

/* QUOTER */
.quoter{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.quoter .drop{padding:40px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.dropzone{border:2px dashed var(--violet-300);border-radius:12px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 20px;background:var(--violet-100);transition:background .2s,border-color .2s}
.dropzone:hover{background:#e6d6f3;border-color:var(--violet-500)}
.dropzone .ic{width:46px;height:46px;border-radius:11px;background:var(--violet-700);color:#fff;display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px}
.dropzone b{font-family:var(--display);font-size:1.1rem}
.dropzone span{color:var(--steel);font-size:.85rem;margin-top:6px}
.fmt{display:flex;gap:7px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.fmt span{font-family:var(--mono);font-size:.65rem;color:var(--violet-700);background:var(--violet-100);padding:3px 8px;border-radius:5px}
.quoter .panel{padding:40px;background:linear-gradient(160deg,#fff,var(--paper-2))}
.quoter .panel h3{font-family:var(--display);font-size:1.25rem;margin-bottom:8px}
.quoter .panel .lead{color:var(--steel);font-size:.92rem;margin-bottom:22px}
.row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.row span:first-child{color:var(--steel)}
.row span:last-child{font-family:var(--mono);font-weight:500}
.row.total{border-bottom:none;padding-top:18px;font-size:1.05rem}
.row.total span:last-child{color:var(--violet-700);font-weight:700;font-size:1.3rem}
.quoter .btn{margin-top:20px;width:100%;background:var(--violet-700);color:#fff;border:none;padding:14px;border-radius:9px;font-family:var(--body);font-weight:600;font-size:.95rem;cursor:pointer;transition:background .2s}
.quoter .btn:hover{background:var(--violet-500)}
.quoter .note{text-align:center;font-size:.78rem;color:var(--steel);margin-top:12px}

/* GRIDS / CARDS */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(82,15,147,.5);border-color:var(--violet-300)}
.card .ic{width:42px;height:42px;border-radius:10px;background:var(--violet-100);color:var(--violet-700);display:grid;place-items:center;font-size:1.2rem;margin-bottom:16px;font-family:var(--mono)}
.card h3{font-family:var(--display);font-size:1.18rem;font-weight:600;margin-bottom:8px}
.card p{color:var(--steel);font-size:.92rem;margin-bottom:14px}
.card a{color:var(--violet-700);font-weight:600;font-size:.86rem}
.card .specs{list-style:none;border-top:1px solid var(--line);padding-top:12px}
.card .specs li{font-size:.83rem;color:var(--steel);display:flex;justify-content:space-between;padding:3px 0}
.card .specs li b{font-family:var(--mono);font-size:.78rem;color:var(--ink);font-weight:500}

.inds{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ind{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:6px;transition:border-color .2s,background .2s}
.ind:hover{border-color:var(--violet-300);background:var(--paper-2)}
.ind .k{font-family:var(--mono);font-size:.68rem;color:var(--violet-500)}
.ind b{font-family:var(--display);font-size:1.05rem;font-weight:600}
.ind p{font-size:.84rem;color:var(--steel)}

/* TABLES */
.mtabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap}
.mtab{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;color:var(--steel)}
.mtab.active{background:var(--violet-700);color:#fff;border-color:var(--violet-700)}
.mtable{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.mtable table{width:100%;border-collapse:collapse}
.mtable th{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);padding:14px 18px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.mtable td{padding:14px 18px;border-bottom:1px solid var(--line);font-size:.9rem;vertical-align:top}
.mtable tr:last-child td{border-bottom:none}
.mtable td:first-child{font-weight:600}

/* CASES */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.case{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s}
.case:hover{transform:translateY(-3px);box-shadow:0 20px 40px -30px rgba(82,15,147,.5)}
.case .ph{height:200px;background:linear-gradient(135deg,var(--violet-700),var(--violet-300));position:relative;display:grid;place-items:center;overflow:hidden}
.case .ph.has-photo{background:var(--paper-2)}
.case .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case .ph .badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.65rem;background:rgba(0,0,0,.35);color:#fff;padding:4px 9px;border-radius:5px}
.case .body{padding:22px}
.case .body .k{font-family:var(--mono);font-size:.68rem;color:var(--violet-500);margin-bottom:8px}
.case .body h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin-bottom:8px;line-height:1.2}
.case .body p{font-size:.88rem;color:var(--steel);margin-bottom:14px}
.case .body .res{display:flex;gap:18px;border-top:1px solid var(--line);padding-top:14px}
.case .body .res div b{font-family:var(--display);color:var(--violet-700);font-size:1.15rem;display:block;line-height:1}
.case .body .res div span{font-size:.72rem;color:var(--steel)}
/* Process / material / turnaround is three values, not two, and a material
   name is longer than a figure — so the spec variant drops a type size and is
   allowed to wrap rather than squeezing three columns into the same space. */
.case .body .res.spec{gap:14px;flex-wrap:wrap}
.case .body .res.spec div{flex:1 1 auto;min-width:0}
.case .body .res.spec div b{font-size:.92rem;letter-spacing:-.01em;line-height:1.15}
.case .body .res.spec div span{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-top:3px}

/* AFFILIATIONS */
.afflist{display:flex;gap:14px;flex-wrap:wrap}
.afflist .a{border:1px solid var(--line);border-radius:10px;padding:16px 22px;background:#fff;font-family:var(--display);font-weight:600;color:var(--violet-700);display:flex;align-items:center;gap:10px}
.afflist .a .d{width:8px;height:8px;border-radius:50%;background:var(--violet-300)}
.localseo{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.localseo a{font-family:var(--mono);font-size:.74rem;color:var(--steel);border:1px solid var(--line);padding:7px 13px;border-radius:7px;background:#fff;transition:all .2s}
.localseo a:hover{color:var(--violet-700);border-color:var(--violet-300)}

/* SPEC BAR (service pages) */
.specbar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:14px}
.specbar .s{padding:22px;border-right:1px solid var(--line)}
.specbar .s:last-child{border-right:none}
.specbar .s b{font-family:var(--display);font-size:1.5rem;color:var(--violet-700);display:block;line-height:1}
.specbar .s span{font-size:.8rem;color:var(--steel);display:block;margin-top:5px}

/* STEPS */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border:1px solid var(--line);border-radius:13px;padding:24px;background:#fff}
.step .n{font-family:var(--mono);font-size:.72rem;color:var(--violet-700);background:var(--violet-100);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;margin-bottom:14px}
.step h3{font-family:var(--display);font-size:1.05rem;font-weight:600;margin-bottom:7px}
.step p{font-size:.86rem;color:var(--steel)}

/* FAQ */
.faq{max-width:80ch}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:12px;overflow:hidden}
.faq summary{padding:20px 24px;font-family:var(--display);font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--violet-500);font-size:1.3rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .ans{padding:18px 24px;color:#3a3344;font-size:.96rem}

/* SERVICE/DESIGN HERO */
.shero{padding:34px 0 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.shero .eyebrow{color:var(--violet-500);margin-bottom:16px}
.shero h1{font-family:var(--display);font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.04;font-weight:700;letter-spacing:-.03em}
.shero h1 em{font-style:normal;color:var(--violet-700)}
.shero p{font-size:1.08rem;color:var(--steel);margin-top:20px;max-width:48ch}
.shero .acts{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.shero .visual{aspect-ratio:1/1;border-radius:18px;background:linear-gradient(150deg,var(--violet-700),var(--violet-300));position:relative;overflow:hidden;display:grid;place-items:center;box-shadow:0 30px 70px -40px rgba(82,15,147,.7)}
.shero .visual .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:32px 32px}
.shero .visual .chip{position:absolute;bottom:20px;left:20px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);color:#fff;font-family:var(--mono);font-size:.7rem;padding:8px 12px;border-radius:7px}

/* FINAL CTA */
.finalcta{background:var(--violet-900);color:#fff;border-radius:20px;padding:52px;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.finalcta::before{content:"";position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--violet-500),transparent 70%);opacity:.5}
.finalcta h2{font-family:var(--display);font-size:2rem;font-weight:600;letter-spacing:-.02em;position:relative}
.finalcta p{color:#cdbce0;margin-top:12px;position:relative}
.finalcta .acts{display:flex;flex-direction:column;gap:12px;position:relative}
.finalcta .acts a{padding:15px 22px;border-radius:10px;font-weight:600;text-align:center;transition:.2s}
.finalcta .acts .p1{background:#fff;color:var(--violet-900)}
.finalcta .acts .p1:hover{background:var(--violet-100)}
.finalcta .acts .p2{border:1px solid rgba(255,255,255,.3);color:#fff}
.finalcta .acts .p2:hover{background:rgba(255,255,255,.1)}

/* FOOTER */
.site-footer{background:var(--ink);color:#b6acc4;padding:54px 0 30px;font-size:.88rem}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.site-footer h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#7d7390;margin-bottom:14px}
.site-footer a{display:block;color:#b6acc4;padding:4px 0;transition:color .2s}
.site-footer a:hover{color:#fff}
.site-footer .logo{color:#fff;margin-bottom:12px}
.site-footer .bottom{border-top:1px solid #2a2433;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#7d7390}

@media(max-width:880px){
  .navlinks{display:none}
  .split,.quoter,.grid3,.inds,.cases,.finalcta,.shero,.steps,.specbar{grid-template-columns:1fr}
  .lane:first-child{border-right:none;border-bottom:1px solid var(--line)}
  .quoter .drop{border-right:none;border-bottom:1px solid var(--line)}
  .finalcta{padding:36px}
}

/* ===== Incubator / affiliation logos ===== */
.afflogos{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.afflogo{border:1px solid var(--line);border-radius:12px;background:#fff;padding:22px 30px;display:flex;align-items:center;justify-content:center;flex:1;min-width:200px}
.afflogo img{max-height:54px;width:auto;max-width:100%;object-fit:contain}

/* ===== Nav dropdown menus ===== */
.navlinks li{position:relative}
.navlinks .sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:222px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 22px 44px -26px rgba(82,15,147,.55);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60;list-style:none;margin:0}
.navlinks li:hover>.sub-menu{display:flex}
.navlinks .sub-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}
.navlinks .sub-menu li{display:block}
.navlinks .sub-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:.86rem;white-space:nowrap;color:var(--steel)}
.navlinks .sub-menu a:hover{background:var(--violet-100);color:var(--violet-700)}
.navlinks .menu-item-has-children>a::after{content:"\25BE";font-size:.62em;margin-left:5px;opacity:.55;vertical-align:middle}

/* The homepage case-study carousel was removed — the section now shows three
   studies flat in .cases. Its styles are gone with it; the generic
   [data-scroll] handler in site.js stays available for any future track. */

/* ===== Happy-clients marquee ===== */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;gap:26px;width:max-content;animation:limitless-marquee 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes limitless-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.client-logo{flex:0 0 auto;width:180px;height:84px;border:1px solid var(--line);border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--steel);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* client logo images inside marquee tiles */
/* every logo is normalised to a 3:1 transparent canvas, so one rule sizes them all evenly */
.client-logo img{width:150px;height:50px;object-fit:contain;display:block}

/* ===== Hero video / shop reel ===== */
.hero-video{position:relative;aspect-ratio:16/9;width:100%;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,var(--violet-900),var(--violet-500));display:grid;place-items:center;box-shadow:0 30px 70px -40px rgba(82,15,147,.7)}
.hero-video .hv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:34px 34px}
.hero-video .hv-play{position:relative;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--violet-700);display:grid;place-items:center;font-size:2rem;padding-left:6px;box-shadow:0 12px 34px rgba(0,0,0,.32)}
.hero-video .hv-cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.85);font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;padding:0 16px}
video.hero-video{object-fit:cover}

/* industry card icons */
.ind .ic{width:42px;height:42px;border-radius:10px;background:var(--violet-100);color:var(--violet-700);display:grid;place-items:center;margin-bottom:10px}
.ind .ic svg{width:22px;height:22px}

/* ===== Picture slots / gallery / media split / comparison (service pages) ===== */
.photo-slot{position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(150deg,var(--violet-100),var(--paper-2));border:1.5px dashed var(--violet-300);display:grid;place-items:center;min-height:200px}
.photo-slot .ps-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--violet-500);line-height:1.6;padding:14px}
.photo-slot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery .photo-slot{aspect-ratio:4/3;min-height:0}
/* Square tiles, for a gallery mixing portrait phone shots with landscape ones —
   1:1 takes the same 25% off whichever axis is long, so neither orientation
   ends up letterboxed. Opt in per gallery; 4:3 stays the default. */
.gallery.sq .photo-slot{aspect-ratio:1/1}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare .col{border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff}
.compare .col.hi{border-color:var(--violet-300);box-shadow:0 20px 50px -40px rgba(82,15,147,.6)}
.compare .col h3{font-family:var(--display);font-size:1.2rem;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.compare .col h3 .tg{font-family:var(--mono);font-size:.62rem;background:var(--violet-700);color:#fff;padding:3px 8px;border-radius:5px}
.compare ul{list-style:none;margin:0}
.compare li{font-size:.9rem;color:var(--steel);padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:9px}
.compare li:last-child{border-bottom:none}
.compare li::before{content:"\203A";color:var(--violet-500);font-weight:700}
@media(max-width:880px){.media2,.compare{grid-template-columns:1fr}.gallery{grid-template-columns:1fr 1fr}}

/* ============================================================
   DISTINCT LAYOUTS for Design / Finishing / Batch pages
   ============================================================ */

/* CAD: two-doors callout */
.twodoors{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.twodoors .td{padding:30px 32px}
.twodoors .td:first-child{border-right:1px solid var(--line);background:var(--paper-2)}
.twodoors .td .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-500);margin-bottom:8px}
.twodoors .td h3{font-family:var(--display);font-size:1.2rem;font-weight:600;margin-bottom:8px}
.twodoors .td p{color:var(--steel);font-size:.92rem;margin-bottom:12px}
.twodoors .td a{color:var(--violet-700);font-weight:600;font-size:.9rem}
@media(max-width:880px){.twodoors{grid-template-columns:1fr}.twodoors .td:first-child{border-right:none;border-bottom:1px solid var(--line)}}

/* CAD: alternating feature rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:38px}
.feature-row:last-child{margin-bottom:0}
.feature-row:nth-child(even) .fr-text{order:2}
.feature-row .fr-text .frk{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-500);margin-bottom:10px;display:block}
.feature-row .fr-text h3{font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.feature-row .fr-text p{color:var(--steel);font-size:1rem}
.feature-row .photo-slot{aspect-ratio:4/3}
@media(max-width:880px){.feature-row{grid-template-columns:1fr;gap:22px}.feature-row:nth-child(even) .fr-text{order:0}}

/* CAD: process timeline */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:6px}
.flow .line{position:absolute;top:22px;left:10%;right:10%;height:2px;background:var(--violet-300);z-index:1}
.flow .st{padding:0 12px;text-align:center;position:relative;z-index:2}
.flow .st .n{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--violet-300);color:var(--violet-700);display:grid;place-items:center;font-family:var(--display);font-weight:700;margin:0 auto 14px}
.flow .st h3{font-family:var(--display);font-size:1rem;font-weight:600;margin-bottom:6px}
.flow .st p{font-size:.82rem;color:var(--steel)}
@media(max-width:880px){.flow{grid-template-columns:1fr 1fr;gap:24px 0}.flow .line{display:none}}

/* pull quote band */
.quoteband{border-left:4px solid var(--violet-500);padding:8px 0 8px 28px;max-width:66ch}
.quoteband p{font-family:var(--display);font-size:1.5rem;line-height:1.42;color:var(--ink);font-weight:500}
.quoteband span{display:block;margin-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--steel)}

/* Assembly: before / after */
.beforeafter{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.beforeafter .ba-panel{position:relative}
.beforeafter .ba-panel .photo-slot{aspect-ratio:4/3}
.beforeafter .ba-tag{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 10px;border-radius:6px;z-index:3}
.beforeafter .ba-arrow{font-size:2.2rem;color:var(--violet-500);line-height:1}
@media(max-width:880px){.beforeafter{grid-template-columns:1fr}.beforeafter .ba-arrow{transform:rotate(90deg);text-align:center;margin:0 auto}}

/* checklist (Assembly services) */
.checklist{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.checklist .ci{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.checklist .ci .ck{flex:0 0 26px;height:26px;border-radius:7px;background:var(--violet-100);color:var(--violet-700);display:grid;place-items:center;font-size:.82rem}
.checklist .ci b{font-family:var(--display);font-weight:600;display:block;margin-bottom:2px}
.checklist .ci p{font-size:.86rem;color:var(--steel)}
@media(max-width:880px){.checklist{grid-template-columns:1fr}}

/* tier cards (Assembly finish levels) */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tier{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;display:flex;flex-direction:column}
.tier.hi{border-color:var(--violet-300);box-shadow:0 20px 50px -40px rgba(82,15,147,.6)}
.tier .tname{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-500);margin-bottom:8px}
.tier h3{font-family:var(--display);font-size:1.15rem;font-weight:600;margin-bottom:6px}
.tier .tsub{font-size:.84rem;color:var(--steel);margin-bottom:14px}
.tier ul{list-style:none;margin:0;border-top:1px solid var(--line);padding-top:12px}
.tier li{font-size:.85rem;color:var(--steel);padding:5px 0;display:flex;gap:8px}
.tier li::before{content:"\2713";color:var(--violet-500);font-weight:700}
@media(max-width:880px){.tiers{grid-template-columns:1fr 1fr}}

/* Batch: volume ladder */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:end}
.ladder .rung{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px;text-align:center}
.ladder .rung .q{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--steel);margin-bottom:6px}
.ladder .rung b{font-family:var(--display);font-size:1.15rem;color:var(--ink);display:block;margin-bottom:4px}
.ladder .rung span{font-size:.82rem;color:var(--violet-700);font-weight:600}
.ladder .rung .bar{height:10px;border-radius:5px;background:linear-gradient(90deg,var(--violet-700),var(--violet-300));margin-top:14px}
@media(max-width:880px){.ladder{grid-template-columns:1fr 1fr}}

/* Batch: reorder cycle */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cycle .cy{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px;text-align:center}
.cycle .cy .n{width:42px;height:42px;border-radius:50%;background:var(--violet-100);color:var(--violet-700);display:grid;place-items:center;margin:0 auto 12px;font-size:1.3rem}
.cycle .cy h3{font-family:var(--display);font-size:1.02rem;font-weight:600;margin-bottom:6px}
.cycle .cy p{font-size:.84rem;color:var(--steel)}
@media(max-width:880px){.cycle{grid-template-columns:1fr 1fr}}

/* ===== Work / case studies page ===== */
.workfilter{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 30px}
.wf-chip{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--steel);cursor:pointer;transition:all .2s}
.wf-chip:hover{border-color:var(--violet-300);color:var(--violet-700)}
.wf-chip.active{background:var(--violet-700);color:#fff;border-color:var(--violet-700)}
.case[hidden]{display:none}
.featcase{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 24px 60px -44px rgba(82,15,147,.5);margin-bottom:40px}
.featcase .fc-media{position:relative;min-height:360px;background:linear-gradient(140deg,var(--violet-700),var(--violet-300))}
.featcase .fc-media.has-photo{background:var(--paper-2)}
.featcase .fc-media .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:32px 32px}
.featcase .fc-media .badge{position:absolute;top:16px;left:16px;font-family:var(--mono);font-size:.66rem;background:rgba(0,0,0,.4);color:#fff;padding:5px 11px;border-radius:6px;z-index:2}
.featcase .fc-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.featcase .fc-body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.featcase .fc-body .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--violet-500);margin-bottom:12px}
.featcase .fc-body h3{font-family:var(--display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin-bottom:14px}
.featcase .fc-body p{color:var(--steel);font-size:1rem;margin-bottom:22px}
.featcase .fc-body .res{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:18px}
.featcase .fc-body .res div b{font-family:var(--display);color:var(--violet-700);font-size:1.4rem;display:block;line-height:1}
.featcase .fc-body .res div span{font-size:.76rem;color:var(--steel)}
@media(max-width:880px){.featcase{grid-template-columns:1fr}.featcase .fc-media{min-height:240px}}

/* ===== Materials catalogue + local pages ===== */
.matcat{font-family:var(--display);font-size:1.25rem;font-weight:600;letter-spacing:-.01em;margin:34px 0 4px;display:flex;align-items:center;gap:8px}
.matcat .mono{color:var(--violet-500);font-size:1rem}
.tdslink{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.66rem;color:var(--violet-700);border:1px solid var(--line);padding:4px 9px;border-radius:6px;background:#fff;white-space:nowrap}
.tdslink:hover{border-color:var(--violet-300);background:var(--violet-100)}
.pill.order{background:var(--paper-2);color:var(--steel)}
.localmeta{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.localmeta .m{display:flex;gap:10px;align-items:center;font-size:.9rem;color:var(--steel)}
.localmeta .m b{color:var(--violet-700);font-family:var(--mono);font-size:.78rem}
.near{display:flex;gap:10px;flex-wrap:wrap}
.near a{font-family:var(--mono);font-size:.74rem;color:var(--steel);border:1px solid var(--line);padding:7px 13px;border-radius:7px;background:#fff;transition:all .2s}
.near a:hover{color:var(--violet-700);border-color:var(--violet-300)}
.lhero h1 em{font-style:normal;color:var(--violet-700)}

/* photo-slot showing a real image: drop the dashed placeholder look */
.photo-slot.has-photo{border:1px solid var(--line);background:var(--paper-2)}

/* ===== Hub landing pages (Services / Materials / Industries) ===== */
.hubgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hubgrid.two{grid-template-columns:repeat(2,1fr)}
.hubcard{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s;color:inherit}
.hubcard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(82,15,147,.55);border-color:var(--violet-300)}
.hubcard .hc-media{position:relative;aspect-ratio:16/10;background:linear-gradient(140deg,var(--violet-700),var(--violet-300));overflow:hidden}
.hubcard .hc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hubcard .hc-tag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(0,0,0,.45);color:#fff;padding:5px 10px;border-radius:6px}
.hubcard .hc-body{padding:24px;display:flex;flex-direction:column;flex:1}
.hubcard .hc-body h3{font-family:var(--display);font-size:1.2rem;font-weight:600;margin-bottom:8px}
.hubcard .hc-body p{color:var(--steel);font-size:.92rem;margin-bottom:16px;flex:1}
.hubcard .hc-go{color:var(--violet-700);font-weight:600;font-size:.88rem;display:inline-flex;align-items:center;gap:8px}
.hubcard:hover .hc-go .arw{transform:translateX(5px)}
.hubcard .hc-go .arw{transition:transform .2s}
@media(max-width:980px){.hubgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.hubgrid,.hubgrid.two{grid-template-columns:1fr}}

/* drawings / renders that must be shown whole (no crop) */
.photo-slot.fit-contain{background:#fff}
.photo-slot.fit-contain img{object-fit:contain;padding:10px}
.photo-slot.fit-contain.on-dark{background:#2f3237;border-color:#2f3237}
.photo-slot.fit-contain.on-light{background:#f7f7f7}
.photo-slot.fit-contain.flush img{padding:0}

/* hub cards that should show the whole image */
.hubcard .hc-media.contain{background:#2f3237}
.hubcard .hc-media.contain.light{background:#f7f7f7}
.hubcard .hc-media.contain img{object-fit:contain}

/* materials catalogue hero banner */
.matbanner{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin:6px 0 10px;line-height:0}
.matbanner img{width:100%;height:auto;display:block;max-height:340px;object-fit:cover}

/* ============================================================
   HERO MEDIA (video or photo in the hero picture slot)
   ============================================================ */
.photo-slot video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block}
.photo-slot.hero-media{background:var(--paper-2)}

/* Single-column hero (no picture) */
.shero.solo{grid-template-columns:1fr}
.shero.solo p{max-width:70ch}

/* ============================================================
   TECHNOLOGY SWITCHER (homepage 3D printing technologies)
   ============================================================ */
.tech-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.tech-tab{font-family:var(--body);font-size:.9rem;font-weight:600;color:var(--steel);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:11px 24px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;line-height:1.2}
.tech-tab:hover{border-color:var(--violet-300);color:var(--violet-700)}
.tech-tab.active{background:var(--violet-900);border-color:var(--violet-900);color:#fff}
.tech-tab:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}

.tech-panel{display:none;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  border:1px solid var(--line);border-radius:18px;background:#fff;padding:38px 40px}
.tech-panel.active{display:grid}
.tech-panel h3{font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:700;letter-spacing:-.02em;color:var(--violet-700);margin-bottom:14px}
.tech-panel .tech-blurb{color:var(--steel);font-size:.98rem;margin-bottom:26px}

.tech-specs{margin-bottom:28px}
.tech-specs .ts-title{color:var(--ink);font-weight:600;margin-bottom:12px}
.tech-specs ul{list-style:none}
.tech-specs li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.tech-specs li:last-child{border-bottom:0}
.tech-specs li span{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.tech-specs li b{font-family:var(--mono);font-size:.82rem;font-weight:500;color:var(--ink);text-align:right}

.tech-acts{display:flex;flex-direction:column;gap:12px}
.tech-acts .ta-wide{display:block;text-align:center;border:1.5px solid var(--line);border-radius:9px;
  padding:13px 20px;font-weight:600;font-size:.92rem;color:var(--violet-700);transition:border-color .2s,background .2s}
.tech-acts .ta-wide:hover{border-color:var(--violet-300);background:var(--violet-100)}
.tech-acts .ta-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tech-acts .ta-solid{display:block;text-align:center;background:var(--violet-900);color:#fff;border-radius:9px;
  padding:13px 18px;font-weight:600;font-size:.92rem;transition:background .2s}
.tech-acts .ta-solid:hover{background:var(--violet-700)}

.tech-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%, #fff 0%, var(--paper-2) 74%);aspect-ratio:1/1}
/* machine images are background-free cutouts — contain, don't crop */
.tech-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:22px 22px 30px;display:block}
.tech-badge{position:absolute;right:0;bottom:0;z-index:2;background:var(--violet-900);color:#fff;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;border-top-left-radius:12px}

@media(max-width:900px){
  .tech-panel{padding:28px 24px;gap:30px}
  .tech-panel.active{grid-template-columns:1fr}
  .tech-media{order:-1}
}
@media(max-width:480px){
  .tech-tab{padding:10px 16px;font-size:.84rem}
  .tech-acts .ta-row{grid-template-columns:1fr}
}

/* Material pages: give the hero photo more presence without changing the layout */
.shero.wide-media{grid-template-columns:1fr 1fr}
@media(max-width:900px){.shero.wide-media{grid-template-columns:1fr}}

/* FDM sub-lanes strip inside the technology panel */
.tech-lanes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:-8px 0 24px;
  padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:var(--paper-2)}
.tech-lanes .tl-label{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.tech-lanes .tl-links{display:flex;flex-wrap:wrap;gap:8px}
.tech-lanes .tl-links a{font-size:.82rem;font-weight:600;color:var(--violet-700);background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:6px 14px;transition:border-color .2s,background .2s}
.tech-lanes .tl-links a:hover{border-color:var(--violet-300);background:var(--violet-100)}

/* ============================================================
   INDUSTRIES SERVED — dark band, photo-left cards
   ============================================================ */
.indsx{background:var(--violet-900);padding:74px 0 84px}
.indsx-head{text-align:center;margin-bottom:40px}
.indsx-head .eyebrow{color:var(--violet-300);margin-bottom:12px}
.indsx-head h2{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:700;
  letter-spacing:-.02em;color:#fff}

.indgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.indcard{display:grid;grid-template-columns:220px 1fr;background:#fff;border-radius:14px;overflow:hidden;
  color:inherit;transition:transform .2s,box-shadow .2s}
.indcard:hover{transform:translateY(-3px);box-shadow:0 26px 50px -28px rgba(0,0,0,.55)}
.indcard .ic-media{position:relative;display:block;background:var(--paper-2);min-height:210px}
.indcard .ic-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.indcard .ic-body{display:flex;flex-direction:column;padding:26px 28px}
.indcard .ic-title{font-family:var(--display);font-size:1.22rem;font-weight:600;line-height:1.25;
  color:var(--violet-700);margin-bottom:10px}
.indcard .ic-desc{font-size:.92rem;color:var(--steel);margin-bottom:18px;flex:1}
.indcard .ic-go{font-size:.88rem;font-weight:600;color:var(--violet-700);display:inline-flex;align-items:center;gap:9px}
.indcard:hover .ic-go .arw{transform:translateX(5px)}
.indcard .ic-go .arw{transition:transform .2s}

@media(max-width:1000px){.indgrid{grid-template-columns:1fr}}
@media(max-width:560px){
  .indcard{grid-template-columns:1fr}
  .indcard .ic-media{min-height:0;aspect-ratio:16/9}
  .indcard .ic-body{padding:22px}
}

/* Machine credit line under the technology heading */
.tech-machine{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);margin:-6px 0 16px}
.tech-machine b{color:var(--violet-700);font-weight:600}

/* Hub card image cropped toward the top (keeps tall subjects in frame) */
.hubcard .hc-media.pos-top img{object-position:center 15%}

/* ============================================================
   BEYOND PRINTING — supporting services
   ============================================================ */
.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svccard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px 28px;color:inherit;position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.svccard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--violet-700);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.svccard:hover{transform:translateY(-3px);box-shadow:0 24px 46px -32px rgba(82,15,147,.5);border-color:var(--violet-300)}
.svccard:hover::before{transform:scaleX(1)}
.svccard .sv-num{font-size:.7rem;letter-spacing:.14em;color:var(--violet-300);margin-bottom:14px}
.svccard .sv-title{font-family:var(--display);font-size:1.22rem;font-weight:600;margin-bottom:10px}
.svccard .sv-desc{font-size:.92rem;color:var(--steel);margin-bottom:18px}
.svccard .sv-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;flex:1;align-content:flex-start}
.svccard .sv-tags span{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--violet-700);
  background:var(--violet-100);border-radius:999px;padding:5px 11px}
.svccard .sv-go{font-size:.88rem;font-weight:600;color:var(--violet-700);display:inline-flex;align-items:center;gap:8px}
.svccard:hover .sv-go .arw{transform:translateX(5px)}
.svccard .sv-go .arw{transition:transform .2s}
@media(max-width:900px){.svcgrid{grid-template-columns:1fr}}

/* ---------- Social links (footer + contact page) ---------- */
.social-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.social-row a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;
  border:1px solid transparent;transition:color .18s,background .18s,border-color .18s,transform .18s}
.social-row a:hover{transform:translateY(-2px)}
.social-row svg{display:block}

/* Footer: muted until hovered, so the icons don't compete with the nav columns */
.footer-social{margin-top:18px}
.footer-social a{color:#8d84a0;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.footer-social a:hover{color:#fff;background:var(--violet-700);border-color:var(--violet-700)}

/* Contact page: a full-width bar under the call/email/location cards */
.contact-social{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:26px;padding:18px 24px;background:#fff;border:1px solid var(--line);border-radius:14px}
.contact-social .mono{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.contact-social-row a{color:var(--violet-700);background:var(--violet-100);border-color:transparent}
.contact-social-row a:hover{color:#fff;background:var(--violet-700)}
@media(max-width:560px){.contact-social{justify-content:center;text-align:center}}

/* ---------- RFQ funnel (template-contact.php) ---------- */
.rfq{max-width:840px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:32px 34px 34px;box-shadow:0 30px 60px -46px rgba(82,15,147,.4)}
.rfq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Progress */
.rfq-progress{margin-bottom:28px}
.rfq-bar{height:4px;border-radius:99px;background:var(--violet-100);overflow:hidden}
.rfq-bar span{display:block;height:100%;background:var(--violet-700);border-radius:99px;transition:width .3s ease}
.rfq-steps{display:flex;gap:26px;list-style:none;margin:14px 0 0;padding:0;flex-wrap:wrap}
.rfq-steps li{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);display:flex;align-items:center;gap:8px}
.rfq-steps li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--violet-100);color:var(--violet-700);font-size:.7rem;font-weight:600}
.rfq-steps li.on{color:var(--violet-700)}
.rfq-steps li.on b{background:var(--violet-700);color:#fff}
.rfq-steps li.done b{background:var(--violet-300);color:#fff}

/* Panels: all visible without JS, one at a time with it */
.rfq-panel{border:0;padding:0;margin:0;min-width:0}
.rfq-panel + .rfq-panel{margin-top:38px;padding-top:32px;border-top:1px solid var(--line)}
.rfq.js .rfq-panel{display:none}
.rfq.js .rfq-panel.active{display:block;margin-top:0;padding-top:0;border-top:0}
.rfq-panel legend{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);padding:0;margin-bottom:20px}

/* Step 1 choices */
.rfq-choices{display:grid;gap:10px}
.rfq-choice input{position:absolute;opacity:0;width:0;height:0}
.rfq-choice .rc-box{display:block;padding:15px 18px;border:1.5px solid var(--line);border-radius:12px;
  cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.rfq-choice:hover .rc-box{border-color:var(--violet-300)}
.rfq-choice input:checked + .rc-box{border-color:var(--violet-700);background:var(--violet-100);
  box-shadow:0 0 0 3px rgba(123,47,190,.12)}
.rfq-choice input:focus-visible + .rc-box{outline:2px solid var(--violet-500);outline-offset:2px}
.rc-title{display:block;font-weight:600;font-size:1rem;color:var(--ink)}
.rc-help{display:block;font-size:.86rem;color:var(--steel);margin-top:3px}

/* The instant-quote shortcut on the "I have a file" branch */
.rfq-aside{margin-top:20px;padding:20px 22px;border-radius:12px;
  background:linear-gradient(140deg,var(--violet-900),var(--violet-700));color:#fff}
.rfq-aside p{margin:0 0 14px;font-size:.94rem;color:#e5dcf2}
.rfq-aside b{color:#fff}
.rfq-aside .btn-primary{background:#fff;color:var(--violet-900)}
.rfq-aside .rfq-aside-alt{margin:14px 0 0;font-size:.84rem;color:#b9a9d4}

/* Fields */
.rfq-field{margin-bottom:20px}
.rfq-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.rfq-field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--ink)}
.rfq-field .req{color:var(--violet-700)}
.rfq-field .hint{font-size:.84rem;color:var(--steel);margin:0 0 9px;line-height:1.5}
.rfq-field input[type=text],.rfq-field input[type=email],.rfq-field input[type=tel],
.rfq-field input[type=url],.rfq-field select,.rfq-field textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s}
.rfq-field textarea{resize:vertical;min-height:112px;line-height:1.6}
.rfq-field input:focus,.rfq-field select:focus,.rfq-field textarea:focus{
  outline:0;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(123,47,190,.12)}
.rfq-field .invalid{border-color:#c8324a;box-shadow:0 0 0 3px rgba(200,50,74,.1)}
.rfq-field input[type=file]{width:100%;font-size:.9rem;padding:14px;border:1.5px dashed var(--violet-300);
  border-radius:10px;background:var(--paper-2);cursor:pointer}
.rfq-filelist{list-style:none;margin:10px 0 0;padding:0;font-size:.86rem;color:var(--steel)}
.rfq-filelist li{padding:5px 0;border-bottom:1px solid var(--line)}
.rfq-filelist li.too-big{color:#c8324a}

/* Nav + fine print */
.rfq-nav{display:flex;gap:12px;align-items:center;margin-top:26px;flex-wrap:wrap}
.rfq-nav .btn-primary{margin-left:auto}
.rfq-nav .btn-primary:disabled{opacity:.6;cursor:default}
.rfq-fineprint{margin-top:18px;font-size:.82rem;color:var(--steel);line-height:1.6}

/* Result panels */
.rfq-result{max-width:840px;margin:0 auto;padding:38px 36px;border-radius:18px;text-align:center;
  border:1px solid var(--line);background:#fff}
.rfq-result .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;margin:0 auto 18px;
  font-size:1.5rem;font-weight:700}
.rfq-result.ok .ic{background:var(--violet-100);color:var(--violet-700)}
.rfq-result.bad .ic{background:#fdeaee;color:#c8324a}
.rfq-result h2{font-family:var(--display);font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.rfq-result p{color:var(--steel);max-width:56ch;margin:0 auto}
.rfq-result .acts{margin-top:22px}

@media(max-width:680px){
  .rfq{padding:24px 20px 26px}
  .rfq-row{grid-template-columns:1fr;gap:0}
  .rfq-steps{gap:14px}
  .rfq-nav .btn-primary{margin-left:0;width:100%;text-align:center}
  .rfq-nav .btn-ghost{width:100%;text-align:center}
}

/* ---------- Commission disclosure (template-injection-moulding.php) ---------- */
.disclosure{max-width:80ch;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--violet-700);border-radius:14px;padding:32px 34px}
.disclosure .eyebrow{color:var(--violet-500);margin-bottom:10px}
.disclosure h2{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:14px}
.disclosure p{color:#3a3344;font-size:.98rem;line-height:1.7;margin-bottom:13px}
.disclosure .d-foot{margin:0;padding-top:13px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--steel);font-style:italic}

/* ---------- "Next rung" cross-sell strip (template-batch.php) ---------- */
.nextrung{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  padding:30px 34px;border:1px solid var(--line);border-radius:16px;background:var(--paper-2)}
.nextrung h2{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.nextrung p{color:var(--steel);font-size:.96rem;max-width:66ch;margin:0}
.nextrung .btn-primary{flex-shrink:0}
@media(max-width:820px){.nextrung{flex-direction:column;align-items:flex-start}}

@media(max-width:900px){.disclosure{padding:24px 22px}}

/* ---------- Footer: responsive columns ----------
   The footer grid was a fixed 1.6fr 1fr 1fr 1fr at every width, with no mobile
   rule — which made the whole SITE scroll sideways on a phone, on every page.
   Collapsing it here fixes horizontal overflow everywhere at once. */
@media(max-width:880px){
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  .site-footer{padding:40px 0 26px}
  .site-footer .cols{grid-template-columns:1fr;gap:26px;margin-bottom:28px}
  .site-footer .bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

/* Four-up card row. Was an inline grid-template-columns on the instant-quote
   page, which beat the mobile media query and forced 4 columns at phone width. */
.grid3.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid3.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid3.four{grid-template-columns:1fr}}

/* ---------- Datasheet finder (template-sla-materials.php) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.dsfinder{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;
  box-shadow:0 24px 48px -42px rgba(82,15,147,.4)}
.dsf-head{margin-bottom:16px}
.dsf-head h2{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.dsf-controls select{width:100%;max-width:440px;padding:11px 14px;border:1.5px solid var(--line);
  border-radius:10px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff}
.dsf-controls select:focus{outline:0;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(123,47,190,.12)}

.dsf-result{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-top:20px;padding:20px 22px;border-radius:12px;background:var(--violet-100)}
.dsf-name{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.12rem;
  font-weight:600;color:var(--ink);margin-bottom:5px}
.dsf-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--violet-700);margin-bottom:7px}
.dsf-best{font-size:.9rem;color:var(--steel);max-width:56ch}
.dsf-dl{flex-shrink:0}
@media(max-width:640px){
  .dsfinder{padding:22px 20px}
  .dsf-result{flex-direction:column;align-items:flex-start;gap:14px}
  .dsf-dl{width:100%;text-align:center}
}

/* Quoter embed box — shared by both providers so swapping one for the other
   can't change the page's shape. .quoter-min holds height before a
   script-injected widget paints, so the page doesn't jump on load. */
.quoter-embed{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.quoter-min{min-height:760px}
@media(max-width:640px){.quoter-min{min-height:620px}}

/* ---------- Colour swatches (FDM filaments) ---------- */
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;background:var(--sw);
  border:1px solid rgba(0,0,0,.18);flex:0 0 auto;vertical-align:-2px}
.col-colour{white-space:nowrap}
.sw-single{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--steel)}

/* Multi-colour materials: one row, expandable. Native <details>, no JS. */
details.colours{display:inline-block}
details.colours summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:4px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;transition:border-color .18s}
details.colours summary::-webkit-details-marker{display:none}
details.colours summary:hover{border-color:var(--violet-300)}
details.colours summary::after{content:"▾";color:var(--violet-500);font-size:.7rem;line-height:1}
details.colours[open] summary::after{content:"▴"}
.sw-peek{display:inline-flex;gap:3px}
.sw-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
.sw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;margin-top:11px;
  padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--paper-2);min-width:230px}
.sw-item{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--steel);white-space:nowrap}
@media(max-width:900px){.sw-grid{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.err404{max-width:900px;margin:0 auto;text-align:center;padding:20px 0 10px}
.err404 h1{font-family:var(--display);font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;
  letter-spacing:-.03em;margin:8px 0 12px}
.err404 > p{color:var(--steel);font-size:1.05rem;max-width:56ch;margin:0 auto}
.err404-foot{margin-top:30px;font-size:.9rem;color:var(--steel)}
.err404-foot a{color:var(--violet-700);font-weight:600}

/* ---------- Capability strip + material chips (service pages) ---------- */
.capstrip{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:#fff;margin-bottom:22px}
.capstrip .s{padding:22px 24px;border-right:1px solid var(--line)}
.capstrip .s:last-child{border-right:none}
.capstrip .s b{font-family:var(--display);font-size:1.75rem;color:var(--violet-700);display:block;line-height:1}
.capstrip .s span{font-size:.84rem;color:var(--steel);display:block;margin-top:6px}

.chipwrap{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px 26px}
.chiplegend{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:16px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--steel)}
.chiplegend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;
  vertical-align:-1px;background:#fff;border:1px solid var(--line)}
.chiplegend i.on{background:var(--violet-700);border-color:var(--violet-700)}
.chipgroup{margin-bottom:16px}
.chipgroup:last-child{margin-bottom:0}
.chipgroup h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet-500);margin-bottom:9px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:.83rem;padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  color:var(--steel);background:#fff;white-space:nowrap}
.chip.now{background:var(--violet-700);border-color:var(--violet-700);color:#fff;font-weight:600}

/* ---------- Applications grid with hover preview ---------- */
.appgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.appcard{position:relative;border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:26px;overflow:hidden;min-height:196px;transition:transform .2s,box-shadow .2s,border-color .2s}
.appcard:hover{transform:translateY(-3px);border-color:var(--violet-300);
  box-shadow:0 24px 44px -30px rgba(82,15,147,.5)}
.appcard .ic{width:36px;height:36px;border-radius:9px;background:var(--violet-100);color:var(--violet-700);
  display:grid;place-items:center;margin-bottom:14px;position:relative;z-index:2;transition:opacity .25s}
.appcard h3{font-family:var(--display);font-size:1.03rem;font-weight:600;margin-bottom:7px;
  position:relative;z-index:2;transition:color .25s}
.appcard p{font-size:.88rem;color:var(--steel);position:relative;z-index:2;transition:opacity .25s}
/* The photos are pre-composited onto a matching 16:9 violet canvas with the
   subject contained inside a safe area (see the note on the app/ images), so
   `cover` here can only ever trim the violet surround — the part itself always
   stays whole, which is the point of the hover. */
.appcard .shot{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .3s;
  background-color:#2c0a52;background-size:cover;background-position:center}
/* Weighted toward the bottom where the caption sits, rather than an even wash
   across the frame — an even one flattened the part out of the picture. */
.appcard .shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,8,28,.16) 0%,rgba(16,8,28,.40) 54%,rgba(16,8,28,.88) 100%)}
.appcard .shot-ph{background:linear-gradient(150deg,var(--violet-100),var(--paper-2));
  display:grid;place-items:center;text-align:center}
.appcard .shot-ph span{position:relative;z-index:2;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:0 18px;line-height:1.6}
.appcard .shot-ph::after{background:linear-gradient(180deg,rgba(44,10,82,.72) 0%,rgba(16,8,28,.9) 100%)}
.appcard .peek{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;opacity:0;transition:opacity .25s;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#d9c8f0}
@media(hover:hover){
  .appcard:hover .shot{opacity:1}
  .appcard:hover h3{color:#fff;text-shadow:0 2px 12px rgba(10,4,20,.8)}
  .appcard:hover p,.appcard:hover .ic{opacity:0}
  .appcard:hover .peek{opacity:1}
}
/* Touch screens have no hover, so the photo becomes a permanent strip instead
   of a state nobody can reach. */
@media(hover:none){
  /* The photo becomes a real block at the top of the card in its own 16:9
     shape, so the part stays whole on a phone instead of being sliced to fit a
     fixed-height strip. Flex order puts the caption directly under it; the
     icon is dropped, since the photo already says what the card is. */
  .appcard{display:flex;flex-direction:column;padding-top:0;min-height:0}
  .appcard .shot{position:relative;inset:auto;opacity:1;order:1;aspect-ratio:16/9;
    margin:0 -26px 14px;border-radius:13px 13px 0 0}
  .appcard .shot::after{border-radius:13px 13px 0 0;
    background:linear-gradient(180deg,rgba(16,8,28,0) 45%,rgba(16,8,28,.5) 100%)}
  .appcard .shot-ph{display:grid}
  .appcard .peek{position:static;opacity:1;order:2;color:var(--violet-500);margin-bottom:9px}
  .appcard .ic{display:none}
  .appcard h3{order:3}
  .appcard p{order:4}
}

/* ---------- Three-way process chooser ---------- */
.compare3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.compare3 .col{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px 26px}
.compare3 .col.hi{border-color:var(--violet-700);box-shadow:0 0 0 3px rgba(123,47,190,.09)}
.compare3 h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.compare3 .tg{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;
  background:var(--violet-700);color:#fff;padding:3px 8px;border-radius:5px}
.compare3 ul{list-style:none;margin:0 0 16px;padding:0}
.compare3 li{padding:6px 0 6px 18px;position:relative;font-size:.88rem;color:var(--steel)}
.compare3 li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;
  border-radius:50%;background:var(--violet-300)}
.compare3 .go{font-size:.86rem;font-weight:600;color:var(--violet-700)}

/* ---------- Gallery ---------- */
.galfilters{margin-bottom:26px}
.galrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.galrow-lbl{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--steel);
  min-width:62px}
.galbtn{font:inherit;font-size:.84rem;padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--steel);cursor:pointer;transition:all .18s}
.galbtn:hover{border-color:var(--violet-300);color:var(--violet-700)}
.galbtn.on{background:var(--violet-700);border-color:var(--violet-700);color:#fff;font-weight:600}
.galcount{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--steel);margin:4px 0 0}
.galgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.galitem{margin:0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff;
  transition:transform .2s,box-shadow .2s}
.galitem:hover{transform:translateY(-3px);box-shadow:0 22px 40px -30px rgba(82,15,147,.5)}
.galmedia{aspect-ratio:4/3;background:var(--paper-2);position:relative;overflow:hidden}
.galmedia img{width:100%;height:100%;object-fit:cover;display:block}
.galitem figcaption{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.galcap{font-size:.86rem;font-weight:600;line-height:1.35}
.galempty{color:var(--steel);text-align:center;padding:40px 0}
@media(max-width:1000px){.galgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.galgrid{grid-template-columns:repeat(2,1fr)}
  .appgrid,.compare3,.capstrip{grid-template-columns:1fr}}
@media(max-width:460px){.galgrid{grid-template-columns:1fr}}

/* ---------- Consultation booking band ---------- */
.consultband{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  padding:32px 36px;border-radius:16px;background:linear-gradient(140deg,var(--violet-900),var(--violet-700));color:#fff}
.consultband .eyebrow{color:var(--violet-300);margin-bottom:10px}
.consultband h2{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.consultband p{color:#e0d5f0;font-size:.96rem;max-width:60ch;margin:0}
.cb-acts{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.consultband .btn-primary{background:#fff;color:var(--violet-900)}
.consultband .btn-primary:hover{background:var(--violet-100)}
.consultband .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.consultband .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}
@media(max-width:860px){.consultband{padding:26px 24px}.cb-acts{width:100%}.cb-acts a{flex:1;text-align:center}}

/* Process flow: column count now follows the number of stages, so adding a
   sixth (the tooling transition) doesn't overflow a hard-coded five. */
.flow{grid-template-columns:repeat(var(--steps,5),1fr)}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:20px}.flow .line{display:none}}

/* ---------- Client trust row (CAD page) ---------- */
.trustlead{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  text-align:center;margin-bottom:18px}
.trustlogos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px 40px}
.trustlogos .client-logo{width:132px;height:44px;display:grid;place-items:center;opacity:.72;
  transition:opacity .2s}
.trustlogos .client-logo:hover{opacity:1}
.trustlogos .client-logo img{width:100%;height:100%;object-fit:contain}

/* ---------- Flagship industry examples (industries hub) ---------- */
.card.flagship{display:flex;flex-direction:column}
.fl-sector{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet-500);
  margin-bottom:10px}
.card.flagship h3{font-family:var(--display);font-size:1.08rem;font-weight:600;margin-bottom:8px}
.fl-note{margin-top:18px;font-size:.78rem;color:var(--steel);max-width:80ch;font-style:italic}

/* ---------- Per-industry flagship example ---------- */
.flagband{max-width:80ch;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--violet-700);border-radius:14px;padding:28px 32px}
.flagband .eyebrow{color:var(--violet-500);margin-bottom:9px}
.flagband h2{font-family:var(--display);font-size:1.35rem;font-weight:700;letter-spacing:-.02em;margin-bottom:11px}
.flagband p{color:#3a3344;font-size:.98rem;line-height:1.7;margin-bottom:12px}
.flagband .fl-note{margin:0;padding-top:12px;border-top:1px solid var(--line);
  font-size:.8rem;color:var(--steel);font-style:italic}
@media(max-width:700px){.flagband{padding:22px 20px}}

/* ---------- Nav parent that is a label, not a link ---------- */
.navlinks > li > .navparent{font-size:.9rem;font-weight:500;color:var(--steel);cursor:default;
  display:inline-block;padding:0;transition:color .2s}
.navlinks > li:hover > .navparent,.navlinks > li > .navparent:focus{color:var(--violet-700);outline:none}

/* ---------- Section separator stripe ---------- */
.block.stripe-top{position:relative}
.block.stripe-top::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--violet-700),var(--violet-300))}

/* ---------- Four-up service grid (homepage "beyond printing") ---------- */
.svcgrid.four{grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px){.svcgrid.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svcgrid.four{grid-template-columns:1fr}}

/* ---------- Hub grid that centres an incomplete last row ---------- */
.hubgrid.flexcenter{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.hubgrid.flexcenter > .hubcard{flex:0 1 calc(33.333% - 14px);min-width:280px}
@media(max-width:980px){.hubgrid.flexcenter > .hubcard{flex:0 1 calc(50% - 10px)}}
@media(max-width:640px){.hubgrid.flexcenter > .hubcard{flex:1 1 100%;min-width:0}}

/* ---------- CAD: expertise / process pairs ---------- */
.expair{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;margin-bottom:34px}
.expair:last-child{margin-bottom:0}
.expair.rev .ex-text{order:2}
.expair.rev .ex-media{order:1}
.ex-ic{width:40px;height:40px;border-radius:10px;background:var(--violet-100);color:var(--violet-700);
  display:grid;place-items:center;font-family:var(--display);font-weight:700;margin-bottom:14px}
.ex-text h3{font-family:var(--display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.ex-text > p{color:var(--steel);font-size:.98rem;margin-bottom:18px;max-width:62ch}
.exlist{list-style:none;margin:0;padding:0}
.exlist li{position:relative;padding:9px 0 9px 26px;font-size:.92rem;color:var(--steel);
  border-bottom:1px solid var(--line);line-height:1.6}
.exlist li:last-child{border-bottom:none}
.exlist li b{color:var(--ink);font-weight:600}
.exlist li::before{content:"";position:absolute;left:4px;top:17px;width:7px;height:7px;
  border-radius:2px;background:var(--violet-500)}
.ex-media .photo-slot{aspect-ratio:4/3}
@media(max-width:900px){
  .expair{grid-template-columns:1fr;gap:22px}
  .expair.rev .ex-text,.expair.rev .ex-media{order:initial}
}

/* ---------- CAD: sector strip ---------- */
.sectorstrip{display:grid;grid-template-columns:repeat(5,1fr);margin-top:8px}
/* Four across, for the eight-sector industries hub — two clean rows. */
.sectorstrip.four{grid-template-columns:repeat(4,1fr)}
.sector{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--ink);color:#fff}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease,filter .3s}
.sector::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,8,28,.15) 0%,rgba(16,8,28,.82) 100%);transition:background .3s}
.sec-name{position:absolute;left:0;right:0;bottom:22px;z-index:2;text-align:center;
  font-family:var(--display);font-size:1.12rem;font-weight:700;padding:0 14px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);transition:bottom .3s,opacity .3s}
.sec-reveal{position:absolute;inset:auto 0 0;z-index:2;padding:0 20px 22px;text-align:center;
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s}
.sec-desc{display:block;font-size:.85rem;color:#e2d7f2;line-height:1.55;margin-bottom:14px}
.sec-btn{display:inline-block;background:#fff;color:var(--violet-900);font-size:.8rem;font-weight:600;
  padding:9px 15px;border-radius:8px}
@media(hover:hover){
  .sector:hover img{transform:scale(1.06)}
  .sector:hover::after{background:linear-gradient(180deg,rgba(44,10,82,.45) 0%,rgba(16,8,28,.92) 100%)}
  .sector:hover .sec-name{bottom:calc(100% - 96px)}
  .sector:hover .sec-reveal,.sector:focus-visible .sec-reveal{opacity:1;transform:translateY(0)}
}
/* No hover on touch — show the description permanently instead of hiding it
   behind a state that device can never reach. */
@media(hover:none){
  .sectorstrip,.sectorstrip.four{grid-template-columns:repeat(2,1fr)}
  .sector{aspect-ratio:4/3}
  .sec-name{bottom:auto;top:18px}
  .sec-reveal{opacity:1;transform:none}
}
@media(max-width:1100px) and (hover:hover){.sectorstrip,.sectorstrip.four{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.sectorstrip,.sectorstrip.four{grid-template-columns:1fr}.sector{aspect-ratio:16/9}}

/* ============================================================
   SPEC-SHEET PAGE VOCABULARY  (large-format page)
   A darker, image-led, centre-aligned language borrowed from industrial
   machine spec sheets. Deliberately different from the rest of the site's
   light, left-aligned service pages — it is meant to read like a datasheet
   you scan, not a services page you read.
   ============================================================ */

/* ---- Full-bleed media hero ---- */
.vhero{position:relative;min-height:clamp(440px,62vh,660px);display:grid;align-items:center;
  overflow:hidden;background:var(--violet-900)}
.vhero .vh-bg{position:absolute;inset:0;z-index:0}
.vhero .vh-bg video,.vhero .vh-bg img{width:100%;height:100%;object-fit:cover;display:block}
/* Two overlays: a flat wash for overall legibility, and a left-weighted ramp
   so the headline column always has something solid behind it whatever the
   footage is doing at that moment. */
.vhero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(20,6,38,.94) 0%,rgba(20,6,38,.86) 38%,rgba(20,6,38,.5) 78%,rgba(20,6,38,.38) 100%)}
.vhero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:60px}
.vhero .vh-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#c9a6ec;margin-bottom:16px;text-shadow:0 2px 10px rgba(10,4,20,.7)}
.vhero h1{font-family:var(--display);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.02;
  font-weight:700;letter-spacing:-.03em;color:#fff;max-width:17ch;
  text-shadow:0 3px 22px rgba(10,4,20,.6)}
.vhero h1 em{font-style:normal;color:#c9a6ec}
.vhero .vh-sub{font-size:1.06rem;color:#e4d8f4;margin-top:20px;max-width:52ch;
  text-shadow:0 2px 14px rgba(10,4,20,.7)}
.vhero .acts{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.vhero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.vhero .btn-ghost:hover{border-color:#fff}
/* Footage credit — small, low-contrast, out of the way, but present. The faint
   dark pill is what keeps it legible over a bright frame without making it
   loud over a dark one. */
/* Positioning context for the homepage reel's footage credit — .vh-credit is
   absolute, and without this it would anchor to the page instead of the video. */
.reelwrap{position:relative}
.vh-credit{position:absolute;right:10px;bottom:8px;z-index:3;font-family:var(--mono);
  font-size:.58rem;letter-spacing:.06em;color:rgba(255,255,255,.55);
  background:rgba(16,8,28,.42);padding:3px 7px;border-radius:4px;pointer-events:none}
@media(max-width:880px){.vhero::after{background:linear-gradient(180deg,rgba(20,6,38,.72) 0%,rgba(20,6,38,.93) 100%)}}

/* ---- Dark full-bleed section ---- */
section.block.dark{background:var(--violet-900);border-top:none;border-bottom:none;color:#fff}
section.block.dark h2,section.block.dark h3{color:#fff}
section.block.dark p{color:#c8b8de}
section.block.dark .eyebrow{color:var(--violet-300)}

/* ---- Centred section head (this page centres everything the reference does) ---- */
.headc{text-align:center;max-width:78ch;margin:0 auto 40px}
.headc .eyebrow{color:var(--violet-500);margin-bottom:12px}
.headc h2{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.12}
.headc h2 em{font-style:normal;color:var(--violet-500)}
.headc p{font-size:1rem;color:var(--steel);margin-top:14px}
section.block.dark .headc h2 em{color:var(--violet-300)}

/* ---- Two big image tiles with the label sitting on the picture ---- */
.tiletwo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tile{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:var(--violet-900)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,8,28,.15) 0%,rgba(16,8,28,.85) 100%)}
.tile .t-label{position:absolute;left:26px;right:26px;bottom:22px;z-index:2}
.tile .t-label b{display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;
  color:var(--violet-300);letter-spacing:-.02em;line-height:1.15}
.tile .t-label span{display:block;font-size:.88rem;color:#e2d7f2;margin-top:6px}
@media(hover:hover){.tile:hover img{transform:scale(1.04)}}
@media(max-width:780px){.tiletwo{grid-template-columns:1fr}}

/* ---- Borderless application columns: photo, title, bullets ---- */
.appcols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
/* 3:2 rather than 4:3 — the source photos in this row are wide shots of wide
   parts, and a 4:3 frame letterboxed them. */
.appcol .ac-media{border-radius:12px;overflow:hidden;aspect-ratio:3/2;margin-bottom:16px;
  background:var(--paper-2)}
.appcol .ac-media img{width:100%;height:100%;object-fit:cover;display:block}
.appcol h3{font-family:var(--display);font-size:.92rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;text-align:center;margin-bottom:12px}
.appcol ul{list-style:none;margin:0}
.appcol li{font-size:.86rem;color:var(--steel);line-height:1.5;padding:5px 0 5px 15px;position:relative}
.appcol li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50%;
  background:var(--violet-500)}
section.block.dark .appcol li{color:#c8b8de}
@media(max-width:1000px){.appcols{grid-template-columns:repeat(2,1fr);gap:24px}}
@media(max-width:540px){.appcols{grid-template-columns:1fr}}

/* ---- Proof strip: a row of real parts, no captions, no chrome ---- */
.proofstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.proofstrip .ps{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.proofstrip .ps img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:820px){.proofstrip{grid-template-columns:repeat(2,1fr)}}

/* ---- Headline capability row on the dark band: icon over a short label ---- */
.advrow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;text-align:center}
.advrow .av{padding:6px 8px}
.advrow .av-ic{font-size:1.9rem;line-height:1;color:#c9a6ec;margin-bottom:14px}
.advrow .av b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:700;color:#fff;
  line-height:1.2;letter-spacing:-.01em}
.advrow .av span{display:block;font-size:.76rem;color:#a996c4;margin-top:6px;line-height:1.45}
@media(max-width:1000px){.advrow{grid-template-columns:repeat(3,1fr);gap:22px}}
@media(max-width:520px){.advrow{grid-template-columns:repeat(2,1fr)}}

/* ---- Feature tiles: image on top, title, paragraph. No borders. ---- */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feat .ft-media{border-radius:12px;overflow:hidden;aspect-ratio:16/10;margin-bottom:16px;
  background:var(--violet-900)}
.feat .ft-media img{width:100%;height:100%;object-fit:cover;display:block}
.feat h3{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin-bottom:9px}
.feat p{font-size:.9rem;color:var(--steel);line-height:1.6}
section.block.dark .feat p{color:#c8b8de}
@media(max-width:940px){.featgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.featgrid{grid-template-columns:1fr}}

/* ---- Dark zebra spec table ---- */
.spectable{border-radius:14px;overflow:hidden;background:#1B0A33}
.spectable table{width:100%;border-collapse:collapse}
.spectable td{padding:14px 22px;font-size:.9rem;color:#e7dcf5;vertical-align:top}
.spectable td:first-child{width:34%;color:#a996c4;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;padding-top:17px}
.spectable tr:nth-child(odd){background:rgba(255,255,255,.045)}
.spectable a{color:var(--violet-300);text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .spectable td{display:block;padding:4px 18px}
  .spectable td:first-child{width:auto;padding-top:14px}
  .spectable td:last-child{padding-bottom:14px}
}

/* Labelled photo placeholders, so an unshot slot reads as a shot list entry
   rather than a broken image — same convention as the application cards. */
.ac-media.ph,.ft-media.ph{display:grid;place-items:center;text-align:center;padding:14px;
  background:linear-gradient(150deg,var(--violet-700),var(--violet-900))}
.ac-media.ph span,.ft-media.ph span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#c3aee0;line-height:1.7}
.proofstrip.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.proofstrip.three{grid-template-columns:repeat(2,1fr)}}

/* ---------- Filament comparison table (spec-sheet pages) ---------- */
.cmp{margin-top:6px}
.cmp-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.cmp-filter{position:relative}
.cmp-filter summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:#e7dcf5;
  font-size:.84rem;font-weight:500;padding:9px 16px;border-radius:9px;transition:background .18s}
.cmp-filter summary::-webkit-details-marker{display:none}
.cmp-filter summary::after{content:"\25BE";font-size:.66em;opacity:.7}
.cmp-filter[open] summary::after{content:"\25B4"}
.cmp-filter summary:hover{background:rgba(255,255,255,.12)}
.cmp-opts{position:absolute;top:calc(100% + 6px);left:0;z-index:8;min-width:220px;
  background:#1B0A33;border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:8px;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.7);max-height:320px;overflow-y:auto}
.cmp-opts label{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;
  font-size:.86rem;color:#e7dcf5;cursor:pointer}
.cmp-opts label:hover{background:rgba(255,255,255,.07)}
.cmp-opts input{accent-color:#c9a6ec;width:15px;height:15px;flex:none}
.cmp-all{border-bottom:1px solid rgba(255,255,255,.12);border-radius:7px 7px 0 0;margin-bottom:4px;
  padding-bottom:10px !important;font-weight:600}
.cmp-lib{font-size:.84rem;font-weight:600;color:#c9a6ec}
.cmp-lib:hover{color:#fff}

/* The table itself. Wider than a phone by nature, so it scrolls in its own
   box rather than pushing the page sideways. */
.cmp-scroll{overflow-x:auto;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#1B0A33}
.cmp-table{width:100%;border-collapse:collapse;min-width:680px}
.cmp-table th,.cmp-table td{padding:16px 18px;text-align:center;vertical-align:middle}
.cmp-table thead th{border-bottom:1px solid rgba(255,255,255,.12)}
.cmp-table thead th b{display:block;font-family:var(--display);font-size:1rem;font-weight:700;color:#fff}
.cmp-table thead th span{display:block;font-size:.72rem;color:#a996c4;margin-top:4px;font-weight:400}
.cmp-rowhead{text-align:left !important;min-width:170px}
.cmp-rowhead b{display:block;font-size:.92rem;font-weight:600;color:#fff}
.cmp-rowhead span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;
  color:#9f8fbb;margin-top:4px}
.cmp-group td{text-align:left;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#c9a6ec;background:rgba(255,255,255,.045);padding:11px 18px}
.cmp-table tbody tr:not(.cmp-group){border-top:1px solid rgba(255,255,255,.07)}
.cmp-table td em{display:block;font-style:normal;font-size:.84rem;color:#e7dcf5;margin-top:9px}

/* Five segments, filled proportionally. Scaled per row against the highest
   value on show, so a row reads as a ranking, not an absolute scale. */
.meter{display:inline-flex;gap:3px}
.meter i{width:17px;height:9px;border-radius:2px;background:rgba(255,255,255,.13)}
.meter i.on{background:#c9a6ec}

.cmp-tds{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.06em;color:#c9a6ec;border:1px solid rgba(201,166,236,.4);
  padding:6px 11px;border-radius:7px;transition:background .18s,color .18s}
.cmp-tds:hover{background:#c9a6ec;color:var(--violet-900)}
.cmp-table tfoot td,.cmp-table tfoot th{border-top:1px solid rgba(255,255,255,.12)}

.cmp-foot{font-size:.8rem;color:#a996c4;margin-top:14px;max-width:80ch}
.cmp-more{font-size:.86rem;color:#c8b8de;margin-top:10px}
.cmp-more a{color:#c9a6ec;font-weight:600;white-space:nowrap}
.cmp-more a:hover{color:#fff}
[data-cmp][hidden]{display:none}
@media(max-width:640px){
  .cmp-table th,.cmp-table td{padding:13px 14px}
  .meter i{width:13px}
}

/* A one-material stand-in for the chip grid: a sentence and a link, sized so
   it reads as a note rather than a section. */
.matline{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px 28px}
.matline .eyebrow{color:var(--violet-500);margin-bottom:8px}
.matline p{font-size:.95rem;color:var(--steel);max-width:72ch}
.matline .btn-ghost{flex:none;white-space:nowrap}

/* Per-tile framing for sector photos whose subject isn't dead centre. */
.sector img[src*="robotics"]{object-position:50% 38%}
@media(max-width:700px){.matline{padding:22px}.matline .btn-ghost{width:100%;text-align:center}}

/* ---------- Technology trio (industry pages + printing hub) ----------
   The homepage tab panel's content, laid out as three columns. Tabs suit
   browsing; a visitor on an industry page is comparing, so all three are
   visible at once. */
.techtrio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 24px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.tt:hover{transform:translateY(-3px);border-color:var(--violet-300);
  box-shadow:0 24px 46px -32px rgba(82,15,147,.5)}
/* Machine photo at the head of the card — same treatment as the homepage tech
   panel, just shorter, so the trio reads as the same three machines. The
   images are background-free cutouts, so contain rather than crop. */
.tt-media{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 45%, #fff 0%, var(--paper-2) 74%);
  aspect-ratio:4/3;margin-bottom:18px}
.tt-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  padding:16px 16px 22px;display:block}
.tt-badge{position:absolute;right:0;bottom:0;z-index:2;background:var(--violet-900);color:#fff;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;border-top-left-radius:10px}
.tt-tag{display:inline-block;align-self:flex-start;font-size:.64rem;letter-spacing:.1em;
  background:var(--violet-100);color:var(--violet-700);padding:5px 10px;border-radius:6px;margin-bottom:14px}
.tt h3{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.tt-machine{font-size:.66rem;color:var(--steel);letter-spacing:.06em;margin-bottom:12px}
.tt-machine b{color:var(--violet-700)}
.tt p{font-size:.86rem;color:var(--steel);line-height:1.6;margin-bottom:16px}
.tt-specs{list-style:none;margin:0 0 18px;border-top:1px solid var(--line);flex:1}
.tt-specs li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--line)}
.tt-specs li:last-child{border-bottom:none}
.tt-specs span{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--steel);flex:none}
.tt-specs b{font-size:.78rem;font-weight:600;text-align:right}
.tt-go{font-size:.85rem;font-weight:600;color:var(--violet-700);display:inline-flex;align-items:center;gap:8px;
  margin-top:auto}
.tt:hover .tt-go .arw{transform:translateX(5px)}
.tt-go .arw{transition:transform .2s}
@media(max-width:980px){.techtrio{grid-template-columns:1fr}}

/* A quiet rule to separate a hero from the section that follows it. */
.secsplit{border:0;border-top:1px solid var(--line);max-width:1200px;margin:0 auto}

/* ---------- Process picker (3D printing hub) ----------
   A requirement on the left, the process it points to on the right. Rows
   rather than cards, because the visitor is scanning for the line that
   describes their part, not comparing six options. */
.picker{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.pick{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px;
  padding:18px 24px;border-bottom:1px solid var(--line);color:inherit;transition:background .18s}
.pick:last-child{border-bottom:none}
.pick:hover{background:var(--violet-100)}
.pk-need{font-size:.98rem}
.pk-arrow{color:var(--violet-300);font-size:1.1rem;transition:transform .2s,color .2s}
.pick:hover .pk-arrow{transform:translateX(4px);color:var(--violet-700)}
.pk-proc{font-family:var(--display);font-size:.92rem;font-weight:700;color:var(--violet-700);
  text-align:right;min-width:170px}
.pickfoot{font-size:.9rem;color:var(--steel);margin-top:16px}
@media(max-width:640px){
  .pick{grid-template-columns:1fr;gap:6px;padding:16px 20px}
  .pk-arrow{display:none}
  .pk-proc{text-align:left;min-width:0}
}

/* =====================================================================
   v4.4 — launch additions
   ===================================================================== */

/* ---------- Mobile navigation ----------
   Under 880px the link row used to be display:none with nothing in its
   place. The toggle opens the same list as a panel under the header;
   dropdowns become accordions (the chevron buttons are added by site.js). */
.nav-toggle{display:none;align-items:center;gap:9px;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px 13px;font:600 .88rem var(--body);color:var(--ink);cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid var(--violet-500);outline-offset:2px}
.nt-bars{display:grid;gap:4px;width:18px}
.nt-bars span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav-open .nt-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nt-bars span:nth-child(2){opacity:0}
.nav-open .nt-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sub-toggle{display:none}

@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .site-header .navlinks{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(44,10,82,.45);
    padding:8px 20px 20px;max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);overflow-y:auto}
  .site-header.nav-open .navlinks{display:flex}
  .navlinks > li{border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center}
  .navlinks > li > a,.navlinks > li > .navparent{flex:1;padding:14px 2px;font-size:1rem;color:var(--ink)}
  .navlinks .menu-item-has-children>a::after{display:none}
  .sub-toggle{display:inline-grid;place-items:center;width:44px;height:44px;border:0;background:none;
    color:var(--violet-700);font-size:.9rem;cursor:pointer;transition:transform .2s}
  .navlinks li.sub-open > .sub-toggle{transform:rotate(180deg)}
  .navlinks li:hover>.sub-menu{display:none}
  .navlinks .sub-menu{position:static;box-shadow:none;border:0;padding:0 0 10px 10px;min-width:0;width:100%;background:none}
  .navlinks .sub-menu::before{display:none}
  .navlinks li.sub-open>.sub-menu{display:flex}
  .navlinks .sub-menu a{white-space:normal;padding:10px 12px;font-size:.95rem}
  .navlinks > li.nav-cta{border-bottom:0;background:none;padding:16px 0 0}
  .navlinks > li.nav-cta > a{text-align:center;padding:14px;border-radius:9px;background:var(--violet-700);color:#fff}
  body.nav-locked{overflow:hidden}
}

/* ---------- Phone action bar ---------- */
.mobilebar{display:none}
@media(max-width:880px){
  .mobilebar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(251,250,252,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mobilebar a{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:10px;font-weight:600;font-size:.95rem}
  .mobilebar .mb-call{border:1px solid var(--line);color:var(--violet-900);flex:0 0 auto;background:#fff}
  .mobilebar .mb-quote{flex:1;background:var(--violet-700);color:#fff}
  body:has(.mobilebar) .site-footer{padding-bottom:96px}
}

/* ---------- Placeholders hidden from visitors ----------
   body.hide-ph is set from Customize → Launch & Tracking. Empty slots stay
   visible to you while logged in, as a reminder of which photos to shoot. */
.hide-ph .photo-slot:not(.has-photo){display:none}
.hide-ph .shot-ph{display:none}
.hide-ph .media2:has(> .photo-slot:not(.has-photo)){grid-template-columns:1fr}
.hide-ph .shero:has(> .photo-slot:not(.has-photo)){grid-template-columns:1fr}
.hide-ph .galitem:has(.photo-slot:not(.has-photo)){display:none}
.hide-ph section.block:has(.gallery):not(:has(.gallery .has-photo)){display:none}

/* ---------- Quote tool loading state ----------
   The Layers3D widget paints a second or two after the page; without this
   the visitor stares at an empty dark box. */
.quoter-min{position:relative}
.quoter-min::before{content:"Loading the quote tool\2026";position:absolute;inset:0;display:grid;place-items:start center;padding-top:140px;
  font:500 .9rem var(--body);color:var(--steel);z-index:0;pointer-events:none}
.quoter-min > *{position:relative;z-index:1}

/* ---------- Reply promise / trust line under CTAs ---------- */
.promise{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--steel);margin-top:14px}
.promise b{color:var(--violet-700);font-weight:600}
.promise .dot{width:6px;height:6px;border-radius:50%;background:#2fa36b;flex:none}
.finalcta .promise{color:inherit;opacity:.85}

/* ---------- Testimonials ---------- */
.quotes{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.quotes-1{grid-template-columns:1fr;max-width:760px}
.quotes-2{grid-template-columns:1fr 1fr}
.quote{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:18px;margin:0}
.quote blockquote p{font-size:1.02rem;line-height:1.6;color:#2b2433}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;font-size:.88rem}
.quote figcaption img{height:30px;width:auto;max-width:90px;object-fit:contain}
.quote figcaption b{display:block}
.quote figcaption em{font-style:normal;color:var(--steel)}
@media(max-width:880px){.quotes,.quotes-2{grid-template-columns:1fr}}

/* ---------- Footer legal ---------- */
.site-footer .bottom .legal a{display:inline;padding:0;color:#9d93ad}
.site-footer .bottom .legal a:hover{color:#fff}

/* ---------- Simple content pages (legal, thank-you, about) ---------- */
.docpage{padding:34px 0 70px}
.docpage h1{font-family:var(--display);font-size:clamp(2rem,4.2vw,2.8rem);font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
.docpage .updated{color:var(--steel);font-size:.9rem;margin-bottom:30px}
.docpage .prose h2{font-family:var(--display);font-size:1.35rem;margin:34px 0 12px}
.docpage .prose ul{margin:0 0 18px 1.2em}
.docpage .prose li{margin-bottom:6px}
.docpage .prose a{color:var(--violet-700);text-decoration:underline}
.draftnote{border:1.5px dashed var(--violet-300);background:var(--violet-100);border-radius:12px;padding:14px 18px;
  font-size:.9rem;color:var(--violet-900);margin-bottom:26px}
.tyhero{text-align:center;max-width:640px;margin:0 auto;padding:60px 0 40px}
.tyhero .tick{width:64px;height:64px;border-radius:50%;background:var(--violet-100);color:var(--violet-700);
  display:grid;place-items:center;font-size:1.8rem;margin:0 auto 20px}
.tyhero h1{font-family:var(--display);font-size:clamp(2rem,4.4vw,2.8rem);font-weight:700;letter-spacing:-.03em}
.tyhero p{color:var(--steel);font-size:1.06rem;margin-top:14px}
.tysteps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:10px}
.tysteps .card{text-align:left}
@media(max-width:760px){.tysteps{grid-template-columns:1fr}}
body.nav-locked .mobilebar{display:none}

/* ---------- Gallery: photo-first (v4.4) ----------
   The gallery is a wall of photos; captions sit on the image and show on
   hover (always on touch screens). Click a photo to see it large. */
.galgrid{grid-template-columns:repeat(3,1fr);gap:14px}
.galitem{position:relative;border:0;border-radius:12px;cursor:zoom-in}
.galmedia{aspect-ratio:1/1}
.galmedia img{transition:transform .35s ease}
.galitem:hover .galmedia img{transform:scale(1.04)}
.galitem figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;
  background:linear-gradient(180deg,rgba(20,6,38,0) 0%,rgba(20,6,38,.82) 100%);color:#fff;
  opacity:0;transition:opacity .2s}
.galitem:hover figcaption,.galitem:focus-visible figcaption{opacity:1}
@media(hover:none){.galitem figcaption{opacity:1}}
.galitem .galcap{color:#fff}
.galitem .pill{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
.galitem:focus-visible{outline:3px solid var(--violet-500);outline-offset:3px}
@media(max-width:1000px){.galgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.galgrid{grid-template-columns:repeat(2,1fr)}}
.gal-lightbox{margin:auto;border:0;padding:0;background:transparent;max-width:min(92vw,1200px);max-height:92vh;overflow:visible}
.gal-lightbox::backdrop{background:rgba(12,4,24,.88)}
.gal-lightbox img{display:block;max-width:min(92vw,1200px);max-height:84vh;width:auto;height:auto;border-radius:10px}
.gal-lightbox p{color:#fff;font-size:.95rem;margin-top:10px;text-align:center}
.gal-lightbox button{position:absolute;top:-44px;right:0;background:none;border:0;color:#fff;font-size:1.9rem;cursor:pointer;line-height:1}

/* ---------- Case studies: portfolio card grid (v4.4) ----------
   Photo on top, sector tag, title, one-line summary. Hover swaps the photo
   for a second photo or a muted clip; clicking opens the full story. */
.csfilter{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.csf-lbl{color:var(--steel)}
.csf-chips{display:flex;gap:8px;flex-wrap:wrap}
.csf-chip{font:600 .78rem var(--body);letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border-radius:8px;
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.csf-chip:hover{border-color:var(--violet-300)}
.csf-chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.csgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cscard{display:flex}
.cscard[hidden]{display:none}
.cs-open{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;cursor:pointer;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.cs-open:hover{transform:translateY(-3px);box-shadow:0 24px 44px -32px rgba(44,10,82,.55)}
.cs-open:focus-visible{outline:3px solid var(--violet-500);outline-offset:3px}
.cs-media{position:relative;display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.cs-media img,.cs-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-img{transition:transform .4s ease}
.cs-hover{opacity:0;transition:opacity .35s ease}
.cs-open:hover .cs-media.has-hover .cs-hover,.cs-open:focus-visible .cs-media.has-hover .cs-hover,.cs-media.playing .cs-hover{opacity:1}
.cs-open:hover .cs-media:not(.has-hover) .cs-img{transform:scale(1.04)}
.cs-tag{position:absolute;top:12px;left:12px;z-index:2;font:500 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;
  background:rgba(20,6,38,.62);color:#fff;padding:5px 9px;border-radius:5px;backdrop-filter:blur(4px)}
.cs-play{position:absolute;right:12px;bottom:12px;z-index:2;font:600 .7rem var(--body);background:rgba(255,255,255,.9);color:var(--violet-900);
  padding:5px 9px;border-radius:999px;transition:opacity .2s}
.cs-open:hover .cs-play{opacity:0}
.cs-body{display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;flex:1}
.cs-sector{font-size:.66rem;color:var(--steel);letter-spacing:.1em}
.cs-title{font-family:var(--display);font-weight:700;font-size:1.12rem;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.cs-sum{font-size:.92rem;color:var(--steel);line-height:1.55}
.cs-more{margin-top:auto;padding-top:6px;font-size:.85rem;font-weight:600;color:var(--violet-700)}
.cs-open:hover .arw{display:inline-block;transform:translateX(4px)}
.cs-more .arw{transition:transform .2s;display:inline-block}
.csempty{color:var(--steel);margin-top:18px}
@media(max-width:1100px){.csgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.csgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:520px){.csgrid{grid-template-columns:1fr}}

/* Detail panel */
.cs-dialog{margin:auto;border:0;padding:0;border-radius:18px;max-width:min(980px,94vw);width:100%;background:#fff;overflow:hidden}
.cs-dialog::backdrop{background:rgba(12,4,24,.72)}
.cs-dialog .csd-wrap{display:grid;grid-template-columns:1.05fr 1fr;max-height:88vh}
.csd-media{background:var(--paper-2);min-height:320px}
.csd-media img,.csd-media video{width:100%;height:100%;object-fit:cover;display:block}
.csd-body{padding:34px 34px 30px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.csd-body h3{font-family:var(--display);font-size:1.5rem;line-height:1.2;letter-spacing:-.02em}
.csd-body p{color:#3a3344;line-height:1.65}
.csd-stats{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px}
.csd-stats b{display:block;font-family:var(--display);font-size:1.15rem;color:var(--violet-700)}
.csd-stats span{font:500 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.csd-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.cs-close{position:absolute;top:12px;right:12px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);
  font-size:1.4rem;line-height:1;cursor:pointer;color:var(--ink)}
@media(max-width:760px){.cs-dialog .csd-wrap{grid-template-columns:1fr;max-height:90vh;overflow-y:auto}.csd-media{min-height:220px;max-height:260px}.csd-body{padding:24px}}