/* Industries page (2026-10-06), on top of home.css + products.css (same cards, first screen and sections). */

/* first screen: heading and the four industry cards fill one screen on computers */
@media (min-width:56rem){.first-screen .p-head{border-bottom:0}}
.ind-ph{display:flex;align-items:center;justify-content:center;background:var(--page-alt)}
.ind-ph svg,.ind-icon svg{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ind-ph svg{width:44%;height:auto;max-height:70%}

/* one section per industry: big icon panel, text, and the parts that go into that engine */
.ind{scroll-margin-top:4.5rem}
.ind-grid{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.ind-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--btn-radius);background:var(--page)}
.sec-alt .ind-icon{background:#fff}
.ind-icon svg{width:46%;height:auto}
.ind .lead{margin:0 0 1.75rem}
.pt-h{margin:0 0 .8rem;font:700 1.05rem var(--display);font-stretch:112%;color:var(--ink)}
.pt-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none}
.pt-list a{display:flex;align-items:center;gap:.75rem;padding:.45rem .6rem .45rem .45rem;border:1px solid var(--line);border-radius:var(--btn-radius);background:#fff;color:var(--ink);text-decoration:none;font:600 .98rem var(--display);transition:border-color .2s}
.pt-list a:hover{border-color:var(--accent)}
.pt-list a:hover .arrow{transform:translateX(3px)}
.pt-list .arrow{display:inline-block;color:var(--accent);transition:transform .2s var(--ease)}
.pt-img{flex:none;width:3.6rem;height:2.6rem;display:flex;align-items:center;justify-content:center;background:#fff}
.pt-img img{width:100%;height:100%;object-fit:contain}
.pt-list .shield{display:none}

/* which part for which engine */
.match-wrap{margin-top:2rem;overflow-x:auto;border:1px solid var(--line);border-radius:var(--btn-radius)}
.match{width:100%;min-width:38rem;border-collapse:collapse;font-size:1rem}
.match th,.match td{padding:1rem 1.1rem;border-bottom:1px solid var(--line);text-align:center}
.match thead th{background:var(--page-alt);font:700 .98rem var(--display);color:var(--ink)}
.match thead th a{color:var(--ink);text-decoration:none}
.match thead th a:hover{color:var(--accent)}
.match tbody th{text-align:start;font:700 1.05rem var(--display);color:var(--ink)}
.match th:first-child{text-align:start}
.match tr:last-child th,.match tr:last-child td{border-bottom:0}
.tick{color:var(--accent);font-size:1.3rem;font-weight:700}
.dash{color:var(--line-strong)}

.who-list{margin-top:2.5rem}

@media (min-width:56rem){
  .ind{display:flex;align-items:center;min-height:calc(100svh - 4.5rem)}
  .ind .ind-grid{width:100%;grid-template-columns:5fr 7fr}
  .ind:nth-of-type(odd) .ind-grid{grid-template-columns:7fr 5fr}
  .ind:nth-of-type(odd) .ind-icon{order:2}
  .ind-icon{max-height:62svh}
}
@media (max-width:30rem){.pt-list{grid-template-columns:1fr}}

/* Manufacturing & Quality page: five step cards on the first screen, and a one-line promise under the heading */
.mfg-lede{margin:.6rem 0 0;max-width:42rem;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--muted)}
@media (min-width:56rem){.range.range-5{grid-template-columns:repeat(5,1fr)}}
@media (min-width:36rem) and (max-width:55.99rem){.range-5 li:last-child{grid-column:1/-1}}

/* F/E (layer-cake) reading: text always on the left, picture always on the right; short bullets that start with the key words */
.ind .ind-grid,.ind:nth-of-type(odd) .ind-grid{grid-template-columns:1fr}
.ind-grid>.ind-icon,.ind:nth-of-type(odd) .ind-icon{order:2}
@media (min-width:56rem){.ind .ind-grid,.ind:nth-of-type(odd) .ind-grid{grid-template-columns:7fr 5fr}}
/* step photos (Manufacturing page): fill the panel and the card picture area */
.ind-photo{margin:0;overflow:hidden;aspect-ratio:3/2;padding:0}
.ind-photo img{width:100%;height:100%;object-fit:cover}
.ind-ph img{width:100%;height:100%;object-fit:cover}
/* Melt card: keep both the furnace and the worker in the square crop */
.ind-ph img[src*="step-melt"]{object-position:100% 50%}

/* ---------- Manufacturing: scrolling process (2026-10-06) ----------
   Text steps on the left (F/E reading), one sticky picture on the right that changes as you scroll,
   with a 5-part progress bar. Only opacity changes, so it stays smooth on slow computers. */
.process{padding-block:clamp(2rem,6vw,4rem);background:var(--page)}
.proc-steps{margin:0;padding:0;list-style:none}
.proc-step{scroll-margin-top:4.5rem;padding-block:2.5rem}
.proc-step .h2{margin:0}
.proc-inline{margin:1.25rem 0 0;border:1px solid var(--line);border-radius:var(--btn-radius);overflow:hidden;aspect-ratio:3/2;background:#fff;display:flex;align-items:center;justify-content:center}
.proc-inline img{width:100%;height:100%;object-fit:cover}
.proc-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--page-alt)}
.proc-icon svg{width:34%;height:auto;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.proc-stage{display:none}
.proc-step .shield,.proc-frame .shield{display:none}
@media (min-width:56rem){
  .proc-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4.5rem)}
  .proc-step{min-height:calc(100svh - 4.5rem);display:flex;flex-direction:column;justify-content:center;padding-block:0;opacity:.28;transition:opacity .5s var(--ease)}
  .proc-step.is-on{opacity:1}
  /* snap: while the steps fill the screen, every scroll ends with one step exactly in place (process.js adds .proc-snap) */
  html.proc-snap{scroll-snap-type:y mandatory}
  .proc-step{scroll-snap-align:start;scroll-snap-stop:always}
  .proc-inline{display:none}
  .proc-stage{display:block}
  .proc-sticky{position:sticky;top:4.5rem;height:calc(100svh - 4.5rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
  .proc-frames{position:relative;aspect-ratio:3/2;max-height:68svh;border:1px solid var(--line);border-radius:var(--btn-radius);overflow:hidden;background:#fff}
  .proc-frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s var(--ease)}
  .proc-frame.is-on{opacity:1}
  .proc-frame img{width:100%;height:100%;object-fit:cover}
  .proc-bar{display:flex;align-items:center;gap:1.25rem}
  .proc-num{font:700 1rem var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
  .proc-num b{color:var(--ink)}
  .proc-segs{flex:1;display:flex;gap:.35rem}
  .proc-segs i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .4s}
  .proc-segs i.on{background:var(--accent)}
  .proc-segs i{position:relative;cursor:pointer}
  .proc-segs i::before{content:"";position:absolute;inset:-14px 0}
  .proc-segs i:not(.on):hover{background:var(--line-strong)}
  .proc-segs i.on:hover{background:#0B5A54}
}
@media (prefers-reduced-motion:reduce){.proc-step,.proc-frame,.proc-segs i{transition:none}}
/* six step cards: 3 x 2 on mid screens, one row of 6 on wide screens */
@media (min-width:36rem){.range.range-6{grid-template-columns:repeat(3,1fr)}}
@media (min-width:72rem){.range.range-6{grid-template-columns:repeat(6,1fr)}}
.range-6 .card h2{font-size:1.25rem}

/* ---------- Manufacturing cards: line drawings + scroll button (2026-10-08) ---------- */
.ind-ph.ph-art{background:var(--page-alt)}
.ind-ph.ph-art svg{width:80%;max-height:84%;stroke:var(--ink);stroke-width:1.1}
.ind-ph.ph-art .hot{stroke:var(--accent);stroke-width:2}
.ind-icon.ph-art svg{width:84%;max-height:84%;stroke:var(--ink);stroke-width:1}
.ind-icon.ph-art .hot{stroke:var(--accent);stroke-width:1.8}
.ind-card:hover .ph-art svg{stroke:var(--accent)}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:max-content;margin:0 auto;padding:.5rem 1rem 1.5rem;color:var(--ink);text-decoration:none;font:700 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase}
.cue-mouse{position:relative;width:1.6rem;height:2.6rem;border:2px solid var(--accent);border-radius:1rem;transition:background .2s}
.cue-mouse i{position:absolute;left:50%;top:.45rem;width:4px;height:.55rem;margin-left:-2px;border-radius:2px;background:var(--accent);animation:cue 1.6s var(--ease) infinite}
.scroll-cue:hover .cue-mouse,.scroll-cue:focus-visible .cue-mouse{background:var(--accent)}
.scroll-cue:hover .cue-mouse i,.scroll-cue:focus-visible .cue-mouse i{background:#fff}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(.8rem);opacity:0}100%{transform:translateY(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.cue-mouse i{animation:none}}

@media (min-width:56rem){.first-screen{scroll-snap-align:start;scroll-margin-top:4.5rem}}