/* Custom Stainless — shared styles for every page
   Ink #101c3f · Text #233058 · Blueprint blue #1f3d8c · Weld orange #e0731a · Paper #fbfcfe */

/* ---------- Base ---------- */
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:#fbfcfe;color:#233058;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#1f3d8c}
a:hover{color:#e0731a}
a:focus-visible,summary:focus-visible{outline:2px solid #e0731a;outline-offset:3px}
h1,h2,h3{text-wrap:balance}
img{max-width:100%}
figure{margin:0}
/* Decorative blueprint labels are drawn from data-text by CSS, so search engines don't read them as page content */
[data-text]::after{content:attr(data-text)}

.page{min-height:100vh;background-color:#fbfcfe;background-image:radial-gradient(circle at 0 0,rgba(31,61,140,.35) 1.2px,transparent 1.6px),linear-gradient(rgba(31,61,140,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(31,61,140,.075) 1px,transparent 1px);background-size:96px 96px,24px 24px,24px 24px;font-size:17px;line-height:1.6;overflow-x:clip}
main{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Keyframes ---------- */
@keyframes intro{to{clip-path:inset(0 0 0 100%)}}
@keyframes intro-line{from{transform:translateX(0)}to{transform:translateX(100vw)}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes weld-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes reveal{from{clip-path:polygon(0 0,0 0,-8% 100%,-8% 100%)}to{clip-path:polygon(0 0,108% 0,100% 100%,0 100%)}}
@keyframes cut{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cut-head{0%{left:0%;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}30%{opacity:.55;transform:scale(.8)}60%{opacity:1;transform:scale(1.3)}80%{opacity:.7;transform:scale(.9)}}
@keyframes weld-bead{0%{offset-distance:0%;opacity:1}97%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Blueprint effects layer ---------- */
.intro{position:fixed;inset:0;z-index:60;background:#fbfcfe;pointer-events:none;clip-path:inset(0 0 0 0);animation:intro 1s cubic-bezier(.7,0,.3,1) .1s both}
.intro-line{position:fixed;left:0;top:0;bottom:0;width:2px;background:#1f3d8c;z-index:61;pointer-events:none;box-shadow:0 0 14px 2px rgba(31,61,140,.35);animation:intro-line 1s cubic-bezier(.7,0,.3,1) .1s both}
.fx{position:fixed;inset:0;width:100%;height:100%;z-index:35;pointer-events:none}
.xh{position:fixed;inset:0;z-index:34;pointer-events:none;display:none}
.xh-v{position:absolute;top:0;bottom:0;left:0;width:1px;background:repeating-linear-gradient(180deg,rgba(31,61,140,.35) 0 6px,transparent 6px 10px)}
.xh-h{position:absolute;left:0;right:0;top:0;height:1px;background:repeating-linear-gradient(90deg,rgba(31,61,140,.35) 0 6px,transparent 6px 10px)}
.xh-l{position:absolute;left:0;top:0;padding:4px 7px;font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#1f3d8c;background:rgba(251,252,254,.9);border:1px solid rgba(31,61,140,.4);white-space:nowrap}

/* Title block, bottom right on wide screens */
.tb{position:fixed;right:20px;bottom:20px;z-index:30;display:none;grid-template-columns:auto auto;border:1px solid #1f3d8c;background:rgba(251,252,254,.92);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font:500 10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#1f3d8c}
.tb>div{padding:7px 12px}
.tb>div:nth-child(odd){border-right:1px solid #1f3d8c}
.tb>div:nth-child(even){color:#101c3f}
.tb>div:nth-child(-n+4){border-bottom:1px solid #1f3d8c}
.tb>div:nth-child(2){min-width:190px}
@media (min-width:960px){.tb{display:grid}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:rgba(251,252,254,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #1f3d8c}
.nav{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand,.brand:hover{font:400 22px/1 'Libre Baskerville',Georgia,serif;color:#101c3f;text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;gap:22px;flex-wrap:wrap;font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
.nav-links a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.nav-links a[aria-current="page"]{color:#101c3f;border-bottom-color:#e0731a}
.btn-phone{font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#fff;background:#1f3d8c;padding:12px 16px;text-decoration:none;white-space:nowrap;transition:background .25s}
.btn-phone:hover{background:#e0731a;color:#fff}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:#e0731a;transform:scaleX(0);transform-origin:left}
@media (max-width:640px){
  html{scroll-padding-top:110px}
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 16px}
  .brand,.brand:hover{font-size:19px}
  .btn-phone{grid-column:2;grid-row:1;font-size:12px;padding:10px 12px}
  .nav-links{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px}
}

/* ---------- Buttons and links ---------- */
.btn{display:inline-block;font:500 14px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;color:#fff;background:#1f3d8c;border:1px solid #1f3d8c;padding:16px 26px;text-decoration:none;transition:transform .5s cubic-bezier(.2,.7,.2,1),background .25s,border-color .25s,color .25s}
.btn:hover{background:#e0731a;border-color:#e0731a;color:#fff}
.btn-outline{color:#1f3d8c;background:#fbfcfe}
.btn-outline:hover{background:#fbfcfe;border-color:#e0731a;color:#e0731a}
.btn-lg{padding:17px 26px}
.link-arrow{display:inline-block;font:500 13px/1 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-bottom:6px;border-bottom:1px solid currentColor}
.link-arrow::after{content:" \2192"}
@media (max-width:480px){.btn{line-height:1.35;text-align:center}}

/* ---------- Heroes ---------- */
.hero{padding:64px 0 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:center;min-height:min(calc(100vh - 120px),820px)}
.page-hero{padding:64px 0 48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:center}
.page-hero-solo{grid-template-columns:minmax(0,860px)}
.dwg{font:500 12px/1.5 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#1f3d8c;margin:0 0 26px;text-transform:uppercase;animation:wipe .9s cubic-bezier(.6,0,.2,1) .5s both}
.hero-title{font:400 clamp(38px,5vw,66px)/1.06 'Libre Baskerville',Georgia,serif;color:#101c3f;margin:0 0 26px;letter-spacing:-.02em;animation:wipe 1.4s cubic-bezier(.6,0,.2,1) .6s both}
.lead{margin:0 0 34px;font-size:18px;max-width:56ch;animation:wipe 1.2s cubic-bezier(.6,0,.2,1) 1s both}
.lead strong{color:#101c3f}
.page-hero .lead{margin-bottom:0}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:22px;animation:fadeup 1s cubic-bezier(.2,.7,.2,1) 1.5s both}
.hero-note{margin:0;font-style:italic;color:#4a557d;font-size:15px;animation:fadeup 1s cubic-bezier(.2,.7,.2,1) 1.8s both}
.hero-art{position:relative;max-width:560px;width:100%;justify-self:end}
.hero-art-inner{position:relative;width:100%;aspect-ratio:1/1;animation:fadein .8s ease .9s both}
.hero-logo{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.js .hero-logo{animation:reveal 2s cubic-bezier(.4,0,.2,1) 1s both paused}

/* ---------- Photos with weld frame and zoom lens ---------- */
.fig-frame{position:relative}
.lens-box{position:relative;overflow:hidden}
.fig-img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.js .fig-img{animation:reveal var(--reveal,1.8s) cubic-bezier(.4,0,.2,1) var(--delay,0s) both paused}
.lens-ov{position:absolute;inset:0;pointer-events:none;opacity:0}
.lens-ov img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform:scale(2);transform-origin:50% 50%;will-change:transform}
.lens-ring{position:absolute;left:0;top:0;width:220px;height:220px;margin:-110px;border:1px solid rgba(255,255,255,.9);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .3s;box-shadow:0 0 0 1px rgba(31,61,140,.6)}
.weld-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.js .weld-svg rect{animation:weld-draw var(--dur,2.2s) linear var(--delay,0s) both paused}
.bead{display:none;position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px;offset-path:inset(0);offset-rotate:0deg;pointer-events:none}
.js .bead{display:block;animation:weld-bead var(--dur,2.2s) linear var(--delay,0s) both paused}
.bead>span{display:block;width:10px;height:10px;border-radius:50%;background:#fff6dd;box-shadow:0 0 6px 2px #ffb347,0 0 20px 7px rgba(255,138,31,.6);animation:flicker .2s steps(2) infinite}
.cap{font:400 11px/1.4 'IBM Plex Mono',monospace;color:#1f3d8c;letter-spacing:.08em;text-transform:uppercase;margin-top:12px}
.cap[data-dwg]::before{content:attr(data-dwg) " · "}
.fig-wide{margin:0 0 52px}
.fig-wide .fig-img{aspect-ratio:21/9;object-position:50% 55%}
.fig-wide .lens-ov img{object-position:50% 55%}
.side-fig{max-width:440px;justify-self:end;width:100%}

/* ---------- Plasma-cut section divider ---------- */
.cut{position:relative;height:28px;margin:0 0 72px}
.cut-first{margin-top:8px}
.cut-line{position:absolute;left:0;right:0;top:13px;height:2px;background:repeating-linear-gradient(90deg,#1f3d8c 0 12px,transparent 12px 18px)}
.js .cut-line{animation:cut 3s cubic-bezier(.45,0,.2,1) both paused}
.cut-head{display:none;position:absolute;top:0;left:0;width:28px;height:28px;margin-left:-14px}
.js .cut-head{display:block;animation:cut-head 3s cubic-bezier(.45,0,.2,1) both paused}
.cut-disc{width:28px;height:28px;border-radius:50%;border:3px dashed #1f3d8c;box-sizing:border-box;background:#fbfcfe;animation:spin .9s linear infinite paused}
.cut-hub{position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:50%;border:1px solid #1f3d8c;background:#fbfcfe}

/* ---------- Scroll reveal ---------- */
[data-rv]{transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.js [data-rv]{opacity:0;transform:translateY(28px)}

/* ---------- Sections ---------- */
.sheet{padding:0 0 100px}
.sec-head{margin-bottom:40px}
.sheet-label{display:flex;align-items:center;gap:14px;font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#1f3d8c;text-transform:uppercase;margin:0 0 18px}
.sheet-label::before{content:"";flex:none;width:40px;height:1px;background:#1f3d8c}
.sec-head h2{font:400 clamp(32px,4vw,52px)/1.08 'Libre Baskerville',Georgia,serif;color:#101c3f;margin:0;letter-spacing:-.015em}
.stack{display:grid;gap:48px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:56px;align-items:start}
.prose{max-width:68ch}
.prose p{margin:0 0 20px}
.prose p:last-child{margin-bottom:0}
.pull{font:italic 400 24px/1.4 'Libre Baskerville',Georgia,serif;color:#101c3f}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;align-items:start}

/* Who we build for */
/* Leftover cells in the last row show a light hatch, so any number of boxes looks deliberate */
.cards{counter-reset:card;position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:1px;padding:1px;background:repeating-linear-gradient(135deg,rgba(31,61,140,.14) 0 1px,transparent 1px 9px)}
.cards::after{content:"";position:absolute;inset:0;border:1px solid #1f3d8c;pointer-events:none}
.card{counter-increment:card;background:#fbfcfe;padding:30px 28px;box-shadow:0 0 0 1px #aeb9d6;transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),background .35s}
.card:hover{background:#f1f4fb}
.card h3{font:400 23px/1.25 'Libre Baskerville',Georgia,serif;margin:0 0 12px;color:#101c3f}
.card p{margin:0;font-size:16px}
.card .card-num{font:500 11px/1 'IBM Plex Mono',monospace;color:#1f3d8c;letter-spacing:.14em;margin:0 0 16px}
.card .card-num::before{content:"02." counter(card)}

/* Why laser welded */
.columns{columns:2 320px;column-gap:56px}
.columns p{margin:0 0 20px}
.note{border:1px solid #1f3d8c;padding:22px 24px;background:rgba(31,61,140,.04);break-inside:avoid;margin-top:8px}
.note p{margin:0;font-size:16px}
.note .note-label{margin:0 0 8px;font:500 12px/1.4 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#1f3d8c}

/* Materials and spec */
.spec{margin:0;border-top:1px solid #1f3d8c}
.spec-row{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr);gap:16px 32px;padding:22px 12px;margin:0 -12px;border-bottom:1px dashed rgba(31,61,140,.5);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),background .3s}
.spec-row:hover{background:rgba(31,61,140,.04)}
.spec-row:last-child{border-bottom:1px solid #1f3d8c}
.spec dt{font:500 13px/1.6 'IBM Plex Mono',monospace;color:#1f3d8c;letter-spacing:.06em}
.spec dd{margin:0}
@media (max-width:560px){.spec-row{grid-template-columns:minmax(0,1fr);gap:6px}}

/* How it works */
.steps-wrap{position:relative}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.timeline-line{position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:#1f3d8c;transform-origin:top;transition:transform 2.2s cubic-bezier(.4,0,.2,1)}
.js .timeline-line[data-rv]{opacity:1;transform:scaleY(0)}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:22px;align-items:start}
.step-num{width:44px;height:44px;border:1px solid #1f3d8c;border-radius:50%;display:grid;place-items:center;background:#fbfcfe;font:400 18px/1 'Libre Baskerville',Georgia,serif;color:#1f3d8c;position:relative;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.34,1.56,.64,1)}
.js .step-num[data-rv]{transform:scale(.5)}
.step p{margin:8px 0 0}
.step strong{color:#101c3f}

/* Why us */
.why-copy{max-width:60ch}
.why-copy p{margin:0 0 26px}
.why-copy p:last-child{margin-bottom:0}
.quote-block{margin:0;border-left:1px solid #1f3d8c;padding-left:28px}
.quote-block p{margin:0;font:italic 400 24px/1.4 'Libre Baskerville',Georgia,serif;color:#101c3f}

/* ---------- FAQ ---------- */
.faq{counter-reset:q;max-width:860px;border-bottom:1px solid #1f3d8c}
.faq details{counter-increment:q;border-top:1px solid rgba(31,61,140,.4)}
.faq details:first-child{border-top-color:#1f3d8c}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:16px;align-items:baseline;padding:22px 0;font:700 18px/1.4 'Libre Baskerville',Georgia,serif;color:#101c3f}
.faq summary::-webkit-details-marker{display:none}
.q-num{font:500 12px/1.6 'IBM Plex Mono',monospace;color:#1f3d8c;letter-spacing:.1em}
.q-num::before{content:"Q." counter(q,decimal-leading-zero)}
.plus{justify-self:end;width:14px;height:14px;position:relative;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.plus i{position:absolute;background:#1f3d8c}
.plus i:first-child{left:0;top:6px;width:14px;height:2px}
.plus i:last-child{left:6px;top:0;width:2px;height:14px}
details[open] .plus{transform:rotate(45deg)}
.answer{padding:0 44px 26px 68px;font-size:16px;max-width:68ch;animation:faqin .45s cubic-bezier(.2,.7,.2,1) both}
@media (max-width:560px){
  .faq summary{grid-template-columns:36px minmax(0,1fr) 18px;gap:10px;font-size:17px}
  .answer{padding:0 0 22px 46px}
}

/* ---------- Contact block (bottom of every page) ---------- */
.contact{padding:0 0 72px}
.contact-card{border:2px solid #1f3d8c;background:#fbfcfe}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-bottom:1px solid #1f3d8c}
.contact-grid>div{padding:16px 20px;border-right:1px solid rgba(31,61,140,.4)}
.contact-grid>div:last-child{border-right:0}
.contact .k{margin:0 0 6px;font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#1f3d8c;text-transform:uppercase}
.contact .v{margin:0;font-size:16px;overflow-wrap:anywhere}
.contact .v a{text-decoration:none}
.contact .v-brand{font:400 20px/1.2 'Libre Baskerville',Georgia,serif;color:#101c3f}
.contact-cta{padding:32px 24px;display:flex;flex-wrap:wrap;align-items:center;gap:28px}
.contact-cta img{width:150px;height:150px;mix-blend-mode:multiply;display:block;flex:none}
.contact-cta p{margin:0;flex:1 1 260px;font:400 clamp(24px,2.8vw,34px)/1.2 'Libre Baskerville',Georgia,serif;color:#101c3f}
@media (max-width:560px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-grid>div{border-right:0;border-bottom:1px solid rgba(31,61,140,.4)}
  .contact-grid>div:last-child{border-bottom:0}
  .contact-cta{padding:24px 20px}
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid #1f3d8c;background:#fbfcfe}
.footer-inner{max-width:1180px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 11px/1.6 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#1f3d8c}
.footer-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-links a{text-decoration:none}
/* keep footer links clear of the title block */
@media (min-width:960px){.footer-inner{justify-content:flex-start;column-gap:48px}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fx,.xh,.intro,.intro-line,.bead,.cut-head{display:none!important}
}