/* ═══ INFRASTRUCTURE page CSS ═══ */
/* shared heading system — matched to index/about for cohesion */
.sec-tag{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:1rem;display:flex;align-items:center;gap:.7rem}
.sec-tag::before{content:'';width:22px;height:1px;background:var(--accent-lt);opacity:.45}
h2.sec-h{font-size:clamp(1.35rem,1rem + 1.7vw,2.4rem);font-weight:800;letter-spacing:-.028em;line-height:1.12;color:var(--text);margin-bottom:1rem;text-wrap:balance}
h2.sec-h em{font-style:normal;color:var(--accent-lt)}
p.sec-b{font-size:clamp(.87rem,.82rem + .2vw,.96rem);line-height:1.75;color:var(--text-dim)}
p.sec-b strong{color:var(--text);font-weight:600}

#hero{position:relative;min-height:min(82vh,760px);display:flex;align-items:center;overflow:hidden;padding:clamp(6rem,12vw,8rem) 0 clamp(3.5rem,8vw,5rem);background:var(--bg)}
#hero::after{display:none}
/* mobile: drop the tall min-height so content sits just under the nav, not centred in a full-screen hero */
@media(max-width:860px){#hero{min-height:auto;padding:6.5rem 0 4rem}}
#threadCanvas{position:absolute;inset:0;width:100%;height:100%}
.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 30% 45%,var(--accent-glow),transparent 68%);pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:880px}
.hero-eye{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;display:flex;align-items:center;gap:.75rem;opacity:0;animation:fup .65s var(--ease) .15s forwards}
.hero-eye::before{content:'';width:28px;height:1px;background:var(--gold);opacity:.45}
h1.hero-h{font-size:clamp(1.8rem,5.2vw,3.5rem);font-weight:800;letter-spacing:-.033em;line-height:1.04;margin-bottom:1.4rem;opacity:0;animation:fup .72s var(--ease) .3s forwards}
h1.hero-h span{color:var(--accent-lt)}
.hero-sub{font-size:clamp(.92rem,2vw,1.05rem);line-height:1.75;color:var(--text-dim);max-width:560px;margin-bottom:2.2rem;opacity:0;animation:fup .72s var(--ease) .45s forwards}
.hero-sub strong{color:var(--text)}
.hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1.2rem 2rem;max-width:640px;opacity:0;animation:fup .72s var(--ease) .6s forwards}
.hmeta{border-left:1px solid var(--line);padding-left:1rem}
.hmeta-v{font-family:var(--mono);font-size:clamp(1rem,2.2vw,1.15rem);color:var(--text)}
.hmeta-l{font-size:.72rem;color:var(--text-faint);margin-top:.2rem}
@keyframes fup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* S02 operating layer diagram */
#oslayer{background:var(--bg)}
.os-diagram{border:1px solid var(--line);border-radius:7px;background:var(--bg);padding:clamp(1.2rem,3vw,2.2rem);margin-top:2.4rem;overflow:hidden}
.os-svg{display:block;width:100%;height:auto}
@keyframes flowdash{to{stroke-dashoffset:-40}}
.os-flow{stroke-dasharray:3 6;animation:flowdash 2.6s linear infinite}
.os-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.os-col{font-size:.78rem;color:var(--text-dim);line-height:1.6}
.os-col strong{display:block;color:var(--text);font-size:.84rem;margin-bottom:.25rem}
@media(max-width:700px){.os-cols{grid-template-columns:1fr}}

/* S03 what we make */
#range{background:var(--panel)}
.range-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.range-card{background:var(--panel);padding:1.5rem 1.4rem;position:relative;overflow:hidden;transition:background .25s;cursor:default}
.range-card:hover{background:var(--panel-2)}
.range-card::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 5px,rgba(201,185,154,.03) 5px,rgba(201,185,154,.03) 6px),repeating-linear-gradient(90deg,transparent 0,transparent 5px,rgba(201,185,154,.03) 5px,rgba(201,185,154,.03) 6px);opacity:0;transition:opacity .4s;pointer-events:none}
.range-card:hover::before{opacity:1}
.range-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:.5rem}
.range-name{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:.25rem}
.range-spec{font-size:.74rem;color:var(--text-faint)}

/* S04 facilities */
#facilities{background:var(--bg)}
.fac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.fac-card{background:var(--bg);padding:2rem 1.8rem;position:relative;overflow:hidden;transition:background .25s}
.fac-card:hover{background:var(--panel-2)}
.fac-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 5px,transparent 5px,transparent 12px);opacity:0;transform:scaleX(0);transform-origin:left;transition:opacity .2s,transform .55s var(--ease)}
.fac-card:hover::after{opacity:.8;transform:scaleX(1)}
.fac-type{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.fac-name{font-size:1.02rem;font-weight:700;color:var(--text);margin-bottom:.3rem}
.fac-cap{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--accent-lt);margin-bottom:.8rem}
.fac-body{font-size:.82rem;line-height:1.65;color:var(--text-dim)}

/* S06 interactive pipeline */
#pipeline{background:var(--panel)}
.pipe-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:2.2rem 0 1.4rem}
.pipe-tab{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;padding:.55rem .95rem;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--text-dim);cursor:pointer;transition:all .2s}
.pipe-tab:hover{border-color:var(--text-faint);color:var(--text)}
.pipe-tab.act{background:var(--panel-2);border-color:var(--accent-lt);color:var(--accent-lt)}
.pipe-panel{border:1px solid var(--line);border-radius:7px;background:var(--bg);padding:clamp(1.4rem,3.5vw,2.2rem);position:relative;overflow:hidden}
.pipe-stage{display:none;animation:fup .45s var(--ease)}
.pipe-stage.act{display:grid;grid-template-columns:1.2fr 1fr;gap:2.4rem;align-items:start}
.pipe-k{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.pipe-h{font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:800;letter-spacing:-.02em;color:var(--text);line-height:1.25;margin-bottom:.7rem}
.pipe-b{font-size:.86rem;line-height:1.7;color:var(--text-dim)}
.pipe-list{display:flex;flex-direction:column;gap:.7rem}
.pipe-li{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--text-dim);line-height:1.55}
.pipe-li svg{width:13px;height:13px;color:var(--verify);flex-shrink:0;margin-top:.2rem}
.pipe-time{margin-top:1.1rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--text-faint)}
.pipe-time strong{color:var(--accent-lt);font-weight:500}
.pipe-thread{height:3px;background:var(--line-soft);border-radius:2px;margin-top:1.6rem;position:relative;overflow:hidden}
.pipe-thread span{position:absolute;left:0;top:0;bottom:0;background:var(--accent-lt);border-radius:2px;transition:width .6s var(--ease)}
@media(max-width:760px){.pipe-stage.act{grid-template-columns:1fr;gap:1.4rem}}

/* S11 certifications */
#certs{background:var(--bg)}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.cert{background:var(--panel);padding:1.5rem 1.3rem;text-align:center;transition:background .2s}
.cert:hover{background:var(--panel-2)}
.cert-n{font-family:var(--mono);font-size:.92rem;color:var(--text);margin-bottom:.35rem}
.cert-d{font-size:.7rem;color:var(--text-faint);line-height:1.5}

/* CTA */
#cta{background:var(--bg);text-align:center;padding:clamp(5rem,10vw,7.5rem) 0;position:relative;overflow:hidden}
#cta::after{display:none}
.cta-glow{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 50% 60%,var(--gold-glow),transparent 70%);pointer-events:none}
.cta-eye{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1.5rem}
.cta-h{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;letter-spacing:-.028em;line-height:1.14;max-width:760px;margin:0 auto 1.3rem}
.cta-h em{font-style:normal;color:var(--accent-lt)}
.cta-sub{font-size:.95rem;line-height:1.75;color:var(--text-dim);max-width:540px;margin:0 auto 2.4rem}
.cta-note{margin-top:1.5rem;font-size:.76rem;color:var(--text-faint)}
.cta-note strong{color:var(--text-dim)}
#cta .cta-row{justify-content:center}

/* OS diagram responsive restructure */
.os-mobile{display:none}
@media(max-width:680px){
  .os-desktop{display:none}
  .os-mobile{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .osm-node{border:1px solid var(--line);border-radius:7px;background:var(--panel);padding:1rem 1.2rem;font-size:.86rem;color:var(--text-dim);text-align:center}
  .osm-node .osm-t{font-weight:700;color:var(--text);font-size:.95rem}
  .osm-node .osm-s{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--text-faint);margin-top:.3rem}
  .osm-tibo{border-color:rgba(201,185,154,.5)}
  .osm-tibo .osm-t{font-family:var(--mono);letter-spacing:.2em;color:var(--gold)}
  .osm-link{width:1px;height:22px;margin:0 auto;background:repeating-linear-gradient(to bottom,var(--accent-lt) 0,var(--accent-lt) 4px,transparent 4px,transparent 9px);opacity:.6}
  .osm-branches{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .osm-return{margin-top:.9rem;text-align:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--verify)}
}
/* pipeline tabs: no wrap on mobile (chip-row snaps) */
.pipe-tabs{margin:var(--sp-3) 0 var(--sp-2)}

/* film (shared look) */
#film{background:var(--panel)}
.film-frame{position:relative;aspect-ratio:16/8;border:1px dashed var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-faint);background:repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(95,168,211,.03) 12px,rgba(95,168,211,.03) 13px),var(--bg)}
.film-play{width:64px;height:64px;border-radius:50%;border:1px solid var(--line);background:rgba(16,20,26,.8);color:var(--accent-lt);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),border-color .25s}
.film-play:hover{transform:scale(1.08);border-color:var(--accent-lt)}
.film-play svg{width:26px;height:26px}
.film-note{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase}
/* stills gallery continuation under the film */
.film-gal-lead{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:2rem 0 1rem}
#film .gal-nav{margin-bottom:1rem}
/* portfolio drag carousel */
.pf-nav{display:flex;align-items:center;gap:.8rem;margin:1.6rem 0 1.2rem}
.slide-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text-dim);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.slide-arrow:hover{border-color:var(--accent-lt);color:var(--accent-lt)}
.slide-arrow svg{width:16px;height:16px}
.pf-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-left:.4rem}
.pf-track{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:7px;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pf-track.drag{cursor:grabbing;scroll-snap-type:none}
.pf-card{flex:0 0 clamp(220px,26vw,280px);scroll-snap-align:start;background:var(--panel);padding:1.4rem;transition:background .2s;user-select:none}
.pf-card:hover{background:var(--panel-2)}
.pf-cat{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-lt);margin-bottom:.4rem}
.pf-name{font-size:.9rem;font-weight:700;color:var(--text)}
.pf-spec{font-size:.74rem;color:var(--text-faint);margin-top:.15rem}
.pf-track:focus-visible{outline:2px solid var(--accent-lt);outline-offset:2px}