:root{
  --inverse-primary:#485f85;
  --on-tertiary-container:#a98742;
  --surface-container-high:#282a2c;
  --error:#ffb4ab;
  --on-tertiary-fixed-variant:#5d4201;
  --on-primary-container:#758db6;
  --secondary-container:#47494d;
  --surface-container-lowest:#0c0e10;
  --primary-fixed-dim:#afc7f3;
  --on-error:#690005;
  --tertiary-fixed:#ffdea5;
  --on-secondary-fixed:#1a1c1f;
  --tertiary-container:#322200;
  --on-secondary:#2e3034;
  --on-secondary-fixed-variant:#45474a;
  --primary-container:#082548;
  --outline-variant:#44474e;
  --on-background:#e2e2e5;
  --primary-fixed:#d5e3ff;
  --surface-dim:#121416;
  --surface-container-low:#1a1c1e;
  --secondary-fixed:#e2e2e6;
  --background:#121416;
  --surface-tint:#afc7f3;
  --inverse-on-surface:#2f3133;
  --surface-bright:#38393c;
  --tertiary-fixed-dim:#e9c176;
  --error-container:#93000a;
  --secondary-fixed-dim:#c5c6ca;
  --outline:#8e9099;
  --on-surface:#e2e2e5;
  --on-secondary-container:#b7b8bc;
  --on-primary:#173154;
  --tertiary:#e9c176;
  --on-primary-fixed:#001b3c;
  --surface-container:#1e2022;
  --on-tertiary:#412d00;
  --inverse-surface:#e2e2e5;
  --primary:#afc7f3;
  --surface-container-highest:#333537;
  --on-surface-variant:#c4c6cf;
  --on-primary-fixed-variant:#2f476c;
  --on-error-container:#ffdad6;
  --on-tertiary-fixed:#261900;
  --surface-variant:#333537;
  --secondary:#c5c6ca;
  --surface:#121416;
}
@font-face {font-family: 'Space Grotesk'; src: url('/assets/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 500 700 900; font-style: normal; font-display: swap}
@font-face {font-family: 'Inter'; src: url('/assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'); font-weight: 300 500 700 900; font-style: normal; font-display: swap;}

*{box-sizing:border-box;}
html {scroll-behavior:smooth;}
body {margin:0; min-height:max(884px,100dvh); background:var(--background); color:var(--on-background); font-family:Inter,sans-serif;}
img {display:block; max-width:100%;}
a {text-decoration:none; color:inherit;}
button, input, textarea {font:inherit;}
.page {background:var(--background); color:var(--on-background);}
.main {padding-top:5rem;}
.content-fixed {max-width: 100%; margin: 0 auto;}

.topbar {position:fixed; top:0; left:0; width:100%; z-index:50; background:rgba(18,20,22,.8); backdrop-filter:blur(12px);}
.topbar-nav {display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; width:80%; margin: 0 auto; }

.brand {display:flex; align-items:center; gap:.75rem;}
.brand__name {color:var(--primary); font-family:"Space Grotesk",sans-serif; font-weight:900; font-size:1.25rem; letter-spacing:-.05em;}
.brand__name--small {font-size:1.125rem;}
.navlinks--desktop{display:none;align-items:center;gap:2rem;}
.navlink{color:var(--secondary); font-family:"Space Grotesk",sans-serif; font-weight:500; letter-spacing:-.025em; transition:.3s;}
.navlink:hover{color:var(--tertiary);}
.navlink--active{color:var(--tertiary); font-weight:700; border-bottom:2px solid var(--tertiary); padding-bottom:.25rem;}

.menu-button{background:none; border:0; color:var(--primary); padding:0; display:flex;}

.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; border-radius:.5rem; transition:.3s; cursor:pointer; text-align:center;}
.wa-button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; border-radius:.5rem; transition:.3s; cursor:pointer; text-align:center; background: var(--primary); color:var(--on-primary); font-family:"Space Grotesk", sans-serif; font-weight: 700; padding:.5rem 1.25rem; font-size:1rem; letter-spacing: -0.05em;
}
.button--small { padding:.5rem 1.25rem; font-size:.875rem; }
.button--large { padding:1rem 2rem; font-size:1.125rem; }
.button--block { width:100%; }
.button--primary {background: var(--primary); color: var(--on-primary); font-family:"Space Grotesk", sans-serif; font-weight:700;}
.button--surface {background: var(--surface-container-high); color:var(--on-surface); font-family:"Space Grotesk",sans-serif; font-weight:700;}
.button--tertiary {background: var(--tertiary); color: var(--on-tertiary); font-family:"Space Grotesk",sans-serif; font-weight:700;}
.button--submit {width:100%; padding:1rem 2rem; background:var(--primary); color:var(--on-primary); font-family:"Space Grotesk",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.1em; border-radius:.125rem;}
.btn:active { transform: translateY(3px); }
.button:hover {filter:brightness(1.1)}
.button--surface:hover {background:var(--surface-container-highest);}
.button--submit:hover {box-shadow:0 10px 25px rgba(175,199,243,.2)}
.hero { position:relative; height: 95vh; display:flex; align-items:center; overflow:hidden;}
.hero__media,.hero__overlay,.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero__image{
  object-fit:cover;
  filter:grayscale(1) brightness(.5);
}
.hero__overlay{
  z-index:10;
  background:linear-gradient(to bottom,var(--background),rgba(18,20,22,.6),transparent);
}
.hero__content,.hero__inner{position:relative;z-index:20}
.hero__content{
  max-width:80rem;
  margin:0 auto;
  padding:0 1.5rem;
  width:100%;
}
.hero__inner{max-width:48rem}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
  padding:.25rem .75rem;
  background:var(--surface-container-high);
  border-radius:.25rem;
  border-left:2px solid var(--tertiary);
}
.badge__text{
  color:var(--tertiary);
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.hero__title{
  margin:0 0 2rem;
  font-family:"Space Grotesk",sans-serif;
  font-size:3rem;
  line-height:.9;
  letter-spacing:-.05em;
  font-weight:900;
}
.gradient-text{
  color:transparent;
  background:linear-gradient(to right,var(--primary),var(--secondary));
  -webkit-background-clip:text;
  background-clip:text;
}
.text-primary{color:var(--primary)}
.text-strong{color:var(--on-background);font-weight:500}
.hero__lead{
  margin:0 0 3rem;
  max-width:42rem;
  color:var(--on-surface-variant);
  font-size:1.25rem;
  line-height:1.75;
  font-weight:300;
}
.hero__actions{display:flex;flex-direction:column;gap:1rem}
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:2.5rem;
  transform:translateX(-50%);
  animation:bounce 1s infinite;
  z-index:20;
  opacity:.5;
 
}
@keyframes bounce{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-10px)}
}

.section{padding:6rem 0}
.section--texture{position:relative;background:var(--surface-container-low)}
.section__inner{max-width:80rem;margin:0 auto;padding:0 1.5rem;position:relative;z-index:1}
.section--texture::before{
  content:"";
  position:absolute;inset:0;
  opacity:.03;
  background-image:
    linear-gradient(30deg,#121416 12%,transparent 12.5%,transparent 87%,#121416 87.5%,#121416),
    linear-gradient(150deg,#121416 12%,transparent 12.5%,transparent 87%,#121416 87.5%,#121416),
    linear-gradient(30deg,#121416 12%,transparent 12.5%,transparent 87%,#121416 87.5%,#121416),
    linear-gradient(150deg,#121416 12%,transparent 12.5%,transparent 87%,#121416 87.5%,#121416),
    linear-gradient(60deg,#1a1c1e 25%,transparent 25.5%,transparent 75%,#1a1c1e 75%,#1a1c1e),
    linear-gradient(60deg,#1a1c1e 25%,transparent 25.5%,transparent 75%,#1a1c1e 75%,#1a1c1e);
  background-size:80px 140px;
  background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px;
}
.section__heading{margin-bottom:4rem}
.section__title,.quality__title,.contact__title{
  margin:0;
  font-family:"Space Grotesk",sans-serif;
  font-weight:900;
  letter-spacing:-.05em;
}
.section__title{font-size:2.5rem;margin-bottom:1rem}
.section__rule{width:6rem;height:.25rem;background:var(--tertiary)}
.grid{display:grid;gap:1.5rem}
.grid--services{grid-template-columns:1fr}

.card{ background:var(--surface-container-high); border-radius:.5rem; padding:2rem; position:relative; overflow:hidden; }
.card--large{min-height:320px; }
.card--image{background:var(--surface-container-highest); }
.card__content{position:relative;z-index:10;height:100%;display:flex;flex-direction:column; }
.card__content--bottom{justify-content:flex-end; }
.card__icon{font-size:2.5rem;margin-bottom:1rem; }
.card__icon--tertiary{color:var(--tertiary); }
.card__icon--primary{color:var(--primary); }
.card__icon--secondary{color:var(--secondary); }
.card__title{
  margin:0 0 1rem;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:1.5rem;
}
.card__title--large{font-size:2rem}
.card__text{margin:0;color:var(--on-surface-variant);line-height:1.6}
.card__text--large{font-size:1.125rem;max-width:28rem}
.card__image{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.2;transition:opacity .3s;
}
.card--image:hover .card__image{opacity:.3}
.card--accent-left{border-left:2px solid var(--primary)}
.card--accent-top{border-top:2px solid var(--secondary)}
.card--wide{display:flex; flex-direction:column; gap:2rem; align-items: center; background:var(--surface-container-highest);}
.location-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; width:100%;}
.location-pill{padding:.5rem 1rem; color:var(--primary); background:var(--surface); font-size: 0.75rem; font-weight:700; border:1px solid rgba(68,71,78,.2); border-radius:.125rem; overflow-wrap: break-word word-wrap: break-word; text-align:center;}
.quality{ background:var(--background); overflow:hidden; }
.quality__layout{ display:flex; flex-direction:column; gap:4rem; align-items:center;}
.quality__visual{position:relative}
.quality__frame{position:relative; border-radius:1rem; overflow:hidden; box-shadow:0 25px 50px rgba(0,0,0,.55)}
.quality__image{ width:100%;  object-fit: scale-down; filter: brightness(0.5); transition: filter 0.7s ease; }
.quality__image:hover { filter: brightness(0.8);  }
.quality__fade{position:absolute; inset:0;background: linear-gradient(to top,rgba(18,20,22,.8),transparent)}
.quality__quote{position:absolute; left:1.5rem; right:1.5rem;bottom:1.5rem; background:rgba(56,57,60,.9); backdrop-filter:blur(12px); padding:1rem; border-radius:.125rem; border-left:4px solid var(--tertiary);}
.quality__label{margin:0 0 .25rem; color:var(--tertiary); font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;}
.quality__caption{margin:0;color:var(--on-surface);font-style:italic;font-weight:500}
.quality__copy{max-width:42rem}
.quality__title{font-size:3rem;line-height:1.1;margin-bottom:2rem}
.quality__text{margin:0 0 2rem;font-size:1.25rem;line-height:1.75;color:var(--on-surface-variant)}

.feature-list{display:grid;gap:1.5rem}
.feature{display:flex;gap:1rem}
.feature__iconbox{
  flex:0 0 auto;
  width:3rem;height:3rem;
  background:var(--surface-container-high);
  border-radius:.125rem;
  display:flex;align-items:center;justify-content:center;
}
/* == ICONS == */
.cal_icon, .contact_icon, .down_icon, .hq_icon, .logo_icon, .mail_icon, .location_icon, .settings_icon, .weld_icon, .xray_icon {
 -webkit-mask-size: contain; mask-size: contain; display: inline-block; }

.cal_icon {
	height: 30px;
	width: 30px;
    background-color: var(--tertiary);
    -webkit-mask: url('/assets/icons/calendar.svg') no-repeat center;
    mask: url('/assets/icons/calendar.svg') no-repeat center;
}
.contact_icon {
	height: 30px;
	width: 30px;
    background-color: var(--on-primary);
    -webkit-mask: url('/assets/icons/contact.svg') no-repeat center;
    mask: url('/assets/icons/contact.svg') no-repeat center;
}
.down_icon {
	height: 30px;
	width: 30px;
    background-color: var(--secondary);
    -webkit-mask: url('/assets/icons/arrow_down.svg') no-repeat center;
    mask: url('/assets/icons/arrow_down.svg') no-repeat center;
}
.hq_icon {
	height: 30px;
	width: 30px;
    background-color: var(--primary);
    -webkit-mask: url('/assets/icons/hq.svg') no-repeat center;
    mask: url('/assets/icons/hq.svg') no-repeat center;
}
.logo_icon {
	height: 30px;
	width: 30px;
    background-color: var(--tertiary);
    -webkit-mask: url('/assets/icons/precision_manufacturing.svg') no-repeat center;
    mask: url('/assets/icons/precision_manufacturing.svg') no-repeat center;
}
.mail_icon {
	height: 20px;
	width: 20px;
    background-color: var(--tertiary);
    -webkit-mask: url('/assets/icons/mail.svg') no-repeat center;
    mask: url('/assets/icons/mail.svg') no-repeat center;
}
.location_icon {
    background-color: var(--tertiary);
    -webkit-mask: url('/assets/icons/settings.svg') no-repeat center;
    mask: url('/assets/icons/settings.svg') no-repeat center;
	border: 1px dashed white;
}
.settings_icon {
    background-color: var(--tertiary);
    -webkit-mask: url('/assets/icons/settings.svg') no-repeat center;
    mask: url('/assets/icons/settings.svg') no-repeat center;
}
.weld_icon {
	height: 30px;
	width: 30px;
    background-color: var(--primary); 
    -webkit-mask: url('/assets/icons/verified.svg') no-repeat center;
    mask: url('/assets/icons/verified.svg') no-repeat center;
}
.xray_icon {
	height: 30px;
	width: 30px;
    background-color: var(--primary);
    -webkit-mask: url('/assets/icons/inf.svg') no-repeat center;
    mask: url('/assets/icons/inf.svg') no-repeat center;
}
.feature__title{margin:0 0 .5rem;font-family:"Space Grotesk",sans-serif;font-size:1.125rem;font-weight:700;}
.feature__text{margin:0;color:var(--on-surface-variant);line-height:1.6;}
.tag-list{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:3rem;}
.tag{
  display:flex;align-items:center;gap:.5rem;
  padding:.25rem .75rem;
  background:var(--surface-container-lowest);
  border-radius:.125rem;
  border-left:2px solid var(--primary);
}
.tag span{
  font-family:"Space Grotesk",sans-serif;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.section--contact{background:var(--surface-container-lowest)}
.contact__grid{display:grid;gap:4rem}
.contact__title{font-size:2.5rem;margin-bottom:1.5rem}
.contact__text{margin:0 0 2rem;font-size:1.125rem;line-height:1.75;color:var(--on-surface-variant)}
.contact__details{display:grid;gap:1rem;margin-bottom:2.5rem}
.contact__row{display:flex;align-items:center;gap:1rem;color:var(--on-surface)}
.form-card{
  background:var(--surface-container-high);
  padding:2rem;
  border-radius:.5rem;
  border:1px solid rgba(68,71,78,.1);
  box-shadow:0 25px 50px rgba(0,0,0,.45);}
.form{display:grid;gap:1.5rem}
.form__row{ display: grid; gap:1.5rem }
.field { display:grid; gap: .5rem } 
.field__label{font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.2em; color:var(--on-surface-variant); }
.field__input{width:100%; background:var(--background); border:0; border-bottom:1px solid var(--outline-variant); color:var(--on-surface); padding: .8rem 0; outline:none; transition:border-color .2s; }

.field__input::placeholder{color:rgba(196,198,207,.7)}
.field__input:focus{border-bottom-color:var(--tertiary)}
.field__input--textarea{resize:vertical;min-height:120px;}
.footer{background:#121416;width:100%;padding:3rem 2rem 0}
.footer__inner{display:grid; grid-template-columns:1fr; gap:2rem; max-width:80rem; margin:0 auto;}
.footer__heading{margin:0 0 1.5rem; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.875rem; text-transform:uppercase; letter-spacing:.2em; color:var(--on-background);}
.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:.75rem}
.footer__list a{color:var(--secondary); opacity:.7; font-size:1rem; transition:.3s}
.footer__list a:hover{color:var(--tertiary); text-decoration:underline}
.footer__brand,.footer__text{display:grid;gap:1rem}
.footer__text{margin:0; color:var(--secondary); opacity:.7; font-size:1rem; line-height:1.6}
.footer__bottom{ max-width:80rem; margin:3rem auto 0; padding:2rem 0; border-top:1px solid rgba(68,71,78,.1); text-align:center; }
.footer__bottom p{ margin:0; color:var(--secondary); opacity:.75; font-size:.8rem; font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.footer__bottom a{color:var(--secondary); opacity:.7; font-size:.8rem; transition:.3s}
.footer__bottom a:hover{color:var(--tertiary); text-decoration:underline}

/* Responsive */
@media (min-width:640px){
  .hero__actions{flex-direction:row}
  .button--block{width:auto}
}
@media (min-width:768px){
  .navlinks--desktop{display:flex}
  .menu-button{display:none}
  .grid--services{grid-template-columns:repeat(12,minmax(0,1fr))}
  .card--large{grid-column:span 8/span 8}
  .card--accent-left,.card--accent-top{grid-column:span 4/span 4}
  .card--wide{grid-column:span 8/span 8;flex-direction:row}
  .location-grid{width:auto}
  .quality__title,.contact__title{font-size:3rem}
  .form__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .hero__title{font-size:4.5rem}
  .hero__lead{font-size:1.5rem}
  .quality__layout{flex-direction:row;gap:4rem}
  .quality__visual,.quality__copy{width:50%}
  .contact__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__inner{grid-template-columns:repeat(4,minmax(0,1fr))}
}