:root {
  --ink: #0a0d10;
  --ink-2: #12171c;
  --steel: #7e8b95;
  --mist: #e7ebee;
  --paper: #f5f7f8;
  --white: #fff;
  --accent: #f84848;
  --line: rgba(10,13,16,.14);
  --display: "Barlow Condensed", sans-serif;
  --body: "Inter", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; transform: translateY(-160%); padding: 10px 16px; background: var(--white); color: var(--ink); }
.skip-link:focus { transform: translateY(0); }
.site-header { height: 80px; display: grid; grid-template-columns: minmax(230px,1fr) auto minmax(230px,1fr); align-items: center; gap: 28px; position: absolute; z-index: 20; inset: 0 0 auto; padding: 0 clamp(22px,4vw,70px); color: var(--white); border-bottom: 1px solid rgba(255,255,255,.16); }
.brand { display: flex; align-items: center; }
.brand-logo { display:block; width:clamp(210px,18vw,280px); height:auto; }
.brand-mark { font-family: var(--display); font-weight: 700; font-size: 2rem; letter-spacing: -.03em; color: var(--white); }
.brand-line { color: rgba(255,255,255,.62); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
nav { display: flex; gap: clamp(18px,2.4vw,38px); align-items: center; font-size: .85rem; font-weight: 500; }
nav a { position: relative; padding: 29px 0 27px; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; background:var(--accent); transition:right .25s ease; }
nav a:hover::after, nav a:focus-visible::after { right:0; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 22px; }
.language-switch { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,.35); }
.lang { border: 0; padding: 5px 0; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; font-size: .72rem; font-weight: 600; }
.lang.active { color: var(--white); }
.header-cta { padding: 11px 16px; border: 1px solid rgba(255,255,255,.34); font-size: .77rem; font-weight: 600; transition:.25s ease; }
.header-cta:hover { background:var(--white); color:var(--ink); }
.hero { min-height: 800px; height: 100vh; max-height: 980px; position: relative; overflow: hidden; display: grid; align-items: end; color: var(--white); background: var(--ink); }
.hero-image, .hero-shade, .hero-grid { position:absolute; inset:0; }
.hero-image { background-image: url("assets/mtr-welding-hero.png"); background-position:center; background-size:cover; filter:saturate(.75) contrast(1.08); transform:scale(1.01); }
.hero-shade { background: linear-gradient(90deg, rgba(5,8,10,.97) 0%, rgba(5,8,10,.84) 38%, rgba(5,8,10,.24) 70%, rgba(5,8,10,.32) 100%), linear-gradient(0deg, rgba(5,8,10,.76), transparent 45%); }
.hero-grid { opacity:.11; background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.hero-content { position:relative; z-index:2; width:min(780px,80%); margin-left:clamp(22px,8vw,150px); margin-bottom:175px; }
.eyebrow { margin:0 0 22px; color:var(--accent); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3 { font-family:var(--display); margin:0; line-height:.94; }
h1 { font-size:clamp(4.4rem,8.8vw,9rem); letter-spacing:-.045em; text-transform:uppercase; max-width:900px; }
.hero-lead { max-width:630px; margin:28px 0 0; color:rgba(255,255,255,.72); font-size:clamp(1rem,1.2vw,1.17rem); }
.hero-actions { margin-top:38px; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:26px; min-width:230px; padding:17px 20px; border:1px solid transparent; font-size:.85rem; font-weight:600; transition:.25s ease; }
.button-primary { background:var(--accent); color:var(--white); }
.button-primary:hover { background:#e51d1d; transform:translateY(-2px); }
.text-link { font-size:.84rem; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.35); }
.text-link span { margin-left:18px; }
.hero-meta { position:absolute; z-index:2; bottom:0; left:0; right:0; height:100px; display:grid; grid-template-columns:repeat(3,1fr); margin:0 clamp(22px,4vw,70px); border-top:1px solid rgba(255,255,255,.18); }
.hero-meta div { display:flex; align-items:center; gap:18px; color:rgba(255,255,255,.7); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
.hero-meta div+div { border-left:1px solid rgba(255,255,255,.16); padding-left:34px; }
.meta-no { color:var(--accent); font-family:var(--display); font-weight:600; }
.section-shell { padding-left:clamp(22px,8vw,150px); padding-right:clamp(22px,8vw,150px); }
.intro { display:grid; grid-template-columns:1fr 2.1fr; gap:8vw; padding-top:140px; padding-bottom:140px; background:var(--paper); }
.section-label { display:flex; gap:16px; align-items:center; color:#59636b; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; }
.section-label span:first-child { color:var(--accent); font-family:var(--display); }
.section-label.light { color:rgba(255,255,255,.5); }
.intro-copy h2,.network-copy h2,.process h2 { font-size:clamp(3.3rem,6vw,6.4rem); letter-spacing:-.04em; text-transform:uppercase; max-width:1050px; }
.intro-copy p { max-width:720px; margin:34px 0 0; color:#5d6870; font-size:1.08rem; }
.services { background:var(--ink); color:var(--white); padding-top:110px; padding-bottom:130px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:58px; }
.section-heading h2 { font-size:clamp(3.1rem,5vw,5.5rem); text-transform:uppercase; letter-spacing:-.035em; text-align:right; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14); }
.service-card { min-height:330px; position:relative; padding:35px; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); background:var(--ink); transition:background .25s ease, transform .25s ease; }
.service-card:hover { background:#151c22; }
.service-card.featured { background:#111a21; }
.service-card.accent-card { background:var(--accent); }
.service-index { color:rgba(255,255,255,.34); font:600 .78rem var(--display); }
.service-card svg { position:absolute; top:34px; right:34px; width:48px; height:48px; stroke:var(--accent); fill:none; stroke-width:1.25; }
.accent-card svg { stroke:var(--white); }
.service-card h3 { margin-top:110px; font-size:2.4rem; text-transform:uppercase; }
.service-card p { color:rgba(255,255,255,.56); max-width:350px; margin:18px 0 0; font-size:.92rem; }
.accent-card p { color:rgba(255,255,255,.82); }
.network { padding-top:140px; padding-bottom:145px; display:grid; grid-template-columns:.95fr 1.15fr; gap:10vw; background:var(--mist); }
.network-copy h2 { margin-top:40px; font-size:clamp(3.3rem,5vw,5.8rem); }
.network-copy p { color:#5d6870; max-width:610px; margin-top:32px; }
.network-list { border-top:1px solid var(--line); }
.network-list>div { display:grid; grid-template-columns:45px 1fr auto; align-items:center; gap:14px; min-height:90px; border-bottom:1px solid var(--line); }
.network-list span { color:var(--accent); font:600 .75rem var(--display); }
.network-list strong { font-family:var(--display); font-size:1.5rem; text-transform:uppercase; }
.network-list small { color:#6c767e; font-size:.76rem; text-align:right; }
.engineering { min-height:720px; display:grid; grid-template-columns:1fr 1fr; background:var(--ink-2); color:var(--white); overflow:hidden; }
.engineering-diagram { position:relative; min-height:600px; background-image:linear-gradient(rgba(248,72,72,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(248,72,72,.08) 1px,transparent 1px); background-size:40px 40px; border-right:1px solid rgba(255,255,255,.1); }
.wireframe-box { position:absolute; width:43%; aspect-ratio:1.25; top:30%; left:28%; border:1px solid rgba(248,72,72,.65); transform:skewY(-18deg); box-shadow:80px 52px 0 -79px var(--accent), -80px 52px 0 -79px var(--accent); }
.wireframe-box::before,.wireframe-box::after { content:""; position:absolute; inset:16%; border:1px solid rgba(255,255,255,.28); }
.wireframe-box::after { inset:32%; }
.axis { position:absolute; background:rgba(248,72,72,.45); }
.axis-x { width:70%; height:1px; top:66%; left:15%; }
.axis-y { height:65%; width:1px; left:21%; top:18%; }
.dimension { position:absolute; color:rgba(255,255,255,.4); font:500 .7rem var(--body); letter-spacing:.1em; }
.dim-1 { left:48%; top:68%; }.dim-2 { left:18%; top:48%; transform:rotate(-90deg); }
.engineering-copy { padding:120px clamp(38px,8vw,145px); display:flex; flex-direction:column; justify-content:center; }
.engineering-copy h2 { margin-top:38px; font-size:clamp(3.4rem,5.3vw,6.3rem); text-transform:uppercase; letter-spacing:-.04em; }
.engineering-copy>p { margin:30px 0 32px; color:rgba(255,255,255,.62); max-width:600px; }
.engineering-copy ul { list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.12); }
.engineering-copy li { padding:15px 0 15px 24px; position:relative; border-bottom:1px solid rgba(255,255,255,.12); font-size:.88rem; }
.engineering-copy li::before { content:""; position:absolute; left:0; top:23px; width:7px; height:7px; border:1px solid var(--accent); }
.process { padding-top:140px; padding-bottom:150px; }
.process-heading { align-items:start; margin-bottom:70px; }
.process-heading h2 { text-align:left; max-width:880px; }
.process-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.process-list li { padding:34px 36px 0 0; min-height:230px; display:grid; grid-template-columns:45px 1fr; border-right:1px solid var(--line); }
.process-list li+li { padding-left:36px; }
.process-list li:last-child { border-right:0; }
.process-list>li>span { color:var(--accent); font:600 .8rem var(--display); }
.process-list strong { display:block; font:600 1.65rem var(--display); text-transform:uppercase; }
.process-list p { color:#68727a; margin-top:15px; font-size:.9rem; }
.contact { background:var(--accent); color:var(--white); padding:110px 22px; text-align:center; }
.contact-inner { max-width:950px; margin:auto; }
.contact .eyebrow { color:rgba(255,255,255,.68); }
.contact h2 { font-size:clamp(4.8rem,10vw,10rem); text-transform:uppercase; letter-spacing:-.05em; }
.contact p:not(.eyebrow) { max-width:630px; margin:25px auto 35px; color:rgba(255,255,255,.82); }
.button-light { background:var(--white); color:var(--ink); margin:auto; }
.button-light:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.14); }
footer { background:var(--ink); color:rgba(255,255,255,.55); display:grid; grid-template-columns:1.15fr 1.4fr 1fr auto; align-items:start; gap:38px; padding:55px clamp(22px,4vw,70px); font-size:.78rem; }
.footer-brand { display:flex; flex-direction:column; gap:12px; color:rgba(255,255,255,.6); }
.footer-brand img { width:215px; height:auto; }
.footer-brand p { margin:0; }
.footer-company,.footer-contact { display:flex; flex-direction:column; gap:7px; }
.footer-company strong { color:var(--white); font-size:.86rem; }
.footer-contact a:hover { color:var(--white); }
.copyright { text-align:right; }
@media (max-width:1050px) {
  .site-header { grid-template-columns:1fr auto; } nav { display:none; }
  .service-grid { grid-template-columns:repeat(2,1fr); }
  .network { gap:6vw; }
  .engineering-copy { padding:90px 55px; }
  footer { grid-template-columns:1fr 1fr; }.copyright { text-align:left; }.footer-brand img { width:220px; }
}
@media (max-width:760px) {
  .site-header { height:70px; padding:0 20px; }.brand-logo { width:178px; }.header-cta { display:none; }.header-actions { gap:0; }
  .hero { min-height:760px; max-height:none; height:100svh; }.hero-image { background-position:62% center; }.hero-shade { background:linear-gradient(90deg,rgba(5,8,10,.94),rgba(5,8,10,.42)),linear-gradient(0deg,rgba(5,8,10,.82),transparent 60%); }
  .hero-content { width:auto; margin:0 22px 165px; }.hero-content h1 { font-size:clamp(4rem,20vw,6.7rem); }.hero-lead { font-size:.95rem; }.hero-actions { margin-top:28px; gap:18px; }.text-link { display:none; }
  .hero-meta { height:110px; margin:0 22px; grid-template-columns:1fr; align-content:center; gap:7px; }.hero-meta div { font-size:.68rem; }.hero-meta div+div { border:0; padding-left:0; }.meta-no { width:25px; }
  .intro,.network { grid-template-columns:1fr; padding-top:90px; padding-bottom:90px; gap:45px; }.intro-copy h2,.network-copy h2,.process h2 { font-size:3.5rem; }
  .services { padding-top:85px; padding-bottom:85px; }.section-heading { display:block; }.section-heading h2 { text-align:left; margin-top:32px; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:285px; }.service-card h3 { margin-top:90px; }
  .network-list>div { grid-template-columns:35px 1fr; padding:16px 0; }.network-list small { grid-column:2; text-align:left; margin-top:-10px; }
  .engineering { grid-template-columns:1fr; }.engineering-diagram { min-height:420px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }.engineering-copy { padding:80px 22px 95px; }
  .process { padding-top:90px; padding-bottom:90px; }.process-heading { display:block; }.process-heading h2 { margin-top:32px; }.process-list { grid-template-columns:1fr; }.process-list li,.process-list li+li { padding:28px 0; min-height:0; border-right:0; border-bottom:1px solid var(--line); }
  .contact { padding:90px 22px; }.contact h2 { font-size:4.8rem; }.button { min-width:0; width:100%; }
  footer { grid-template-columns:1fr; text-align:left; gap:28px; }.footer-contact { flex-direction:column; gap:10px; }.copyright { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }