@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');

  :root{
    --orange:#ff7a18;
    --hot:#ffd7a1;
    --bg:#020202;
  }

  *{box-sizing:border-box}
  html,body{width:100%;height:100%;margin:0}
  body{
    overflow:hidden;
    background:
      radial-gradient(circle at 50% 48%, rgba(255,105,20,.055), transparent 38%),
      #020202;
    color:#fff;
    font-family:Arial,Helvetica,sans-serif;
  }

  .page{
    position:relative;
    width:100vw;
    height:100vh;
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
  }

  .smoke{
    position:absolute;
    inset:-20%;
    pointer-events:none;
    background:
      radial-gradient(ellipse at 52% 48%, rgba(255,102,0,.07), transparent 30%),
      radial-gradient(ellipse at 35% 55%, rgba(255,70,0,.035), transparent 25%);
    filter:blur(35px);
    animation:smoke 9s ease-in-out infinite alternate;
  }

  .grain{
    position:absolute;
    inset:0;
    opacity:.12;
    pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
    mix-blend-mode:screen;
  }

  .hero{
    position:relative;
    width:min(94vw,1500px);
    text-align:center;
    z-index:2;
    transform:translateY(-3.5vh);
  }

  .logo-wrap{
    position:relative;
    width:100%;
    aspect-ratio:3.4/1;
    min-height:220px;
  }

  svg.logo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
  }

  .logo-text{
    font-family:"Cinzel", Georgia, "Times New Roman", serif;
    font-size:250px;
    font-weight:600;
    letter-spacing:-.030em;
  }

  .base{
    fill:#080808;
    stroke:#151515;
    stroke-width:1.2;
  }

  .engraved{
    fill:url(#metal);
    stroke:#ff7b1a;
    stroke-width:1.5;
    filter:url(#glow);
    opacity:.98;
    clip-path:url(#engraveClip);
  }

  .inner{
    fill:none;
    stroke:#2b160b;
    stroke-width:2;
    opacity:.8;
  }

  .laser{
    filter:url(#laserGlow);
  }

  .laser-beam{
    stroke:#ff7a18;
    stroke-width:2.2;
    stroke-linecap:round;
  }

  .laser-core{
    stroke:#fff4df;
    stroke-width:.8;
    stroke-linecap:round;
  }

  .dot{
    fill:#fff0d2;
    filter:url(#laserGlow);
  }


  .service-marquee{
    width:100%;
    overflow:hidden;
    margin-top:-1.0%;
    position:relative;
    white-space:nowrap;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 90%,transparent 100%);
  }

  .service-track{
    display:inline-flex;
    align-items:center;
    gap:1.25em;
    padding-left:100%;
    animation:serviceMarquee 18s linear infinite;
    color:#8f8f8f;
    font-family:"Cinzel", Georgia, "Times New Roman", serif;
    font-size:clamp(14px,1.35vw,20px);
    font-weight:500;
    letter-spacing:.18em;
    text-shadow:0 0 10px rgba(255,110,20,.07);
  }

  .service-track b{
    color:#6b2b0b;
    font-size:.7em;
    font-weight:400;
  }

  @keyframes serviceMarquee{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
  }

  .caption{
    margin-top:30px;
    font-size:clamp(11px,1.05vw,17px);
    letter-spacing:.58em;
    color:#9b9b9b;
    text-transform:uppercase;
    padding-left:.58em;
  }

  .line{
    width:min(340px,48vw);
    height:1px;
    margin:24px auto 0;
    background:linear-gradient(90deg,transparent,#ff7a18,transparent);
    box-shadow:0 0 14px rgba(255,100,20,.35);
  }

  .sub{
    margin-top:18px;
    color:#555;
    font-size:clamp(9px,.75vw,13px);
    letter-spacing:.38em;
    text-transform:uppercase;
    padding-left:.38em;
  }

  .footer{
    position:absolute;
    bottom:28px;
    left:0;
    right:0;
    text-align:center;
    color:#383838;
    font-size:10px;
    letter-spacing:.35em;
    text-transform:uppercase;
  }

  .footer span{color:#6b2b0b}

  @keyframes smoke{
    from{transform:translate(-2%,-1%) scale(1)}
    to{transform:translate(2%,1%) scale(1.08)}
  }

  /* Tablet */
  @media (min-width:701px) and (max-width:1100px){
    .hero{width:94vw}
    .logo-wrap{aspect-ratio:2.8/1; min-height:190px}
    .logo-text{font-size:220px}
    .caption{font-size:13px;letter-spacing:.48em}
    .sub{font-size:10px;letter-spacing:.30em}
  }

  /* Phones */
  @media (max-width:700px){
    .page{
      min-height:100svh;
      height:100svh;
      padding:0 12px;
    }

    .hero{
      width:100%;
      max-width:100%;
      transform:translateY(-4vh);
    }

    .logo-wrap{
      width:100%;
      aspect-ratio:1.35/1;
      min-height:0;
      height:auto;
    }

    .logo-text{
      font-size:120px;
      letter-spacing:-.06em;
    }

    .laser-title{
      margin-top:-1%;
      font-size:16px;
      letter-spacing:.16em;
      padding-left:.16em;
    }

    .service-marquee{
      margin-top:-1%;
    }
	.bottom-content{
    margin-top:180px;
}
	

    .service-track{
      gap:1em;
      font-size:11px;
      letter-spacing:.12em;
      animation-duration:16s;
    }

    .caption{
      margin-top:2%;
      font-size:10px;
      line-height:1.4;
      letter-spacing:.30em;
      padding-left:.30em;
    }

    .line{
      width:min(260px,65vw);
      margin-top:18px;
    }

    .sub{
      margin-top:13px;
      font-size:8px;
      letter-spacing:.20em;
      padding-left:.20em;
    }

    .footer{
      bottom:max(14px, env(safe-area-inset-bottom));
      padding:0 12px;
      font-size:7px;
      line-height:1.6;
      letter-spacing:.22em;
    }

    .smoke{filter:blur(24px)}
    .grain{opacity:.07}
  }

  /* Very small phones */
  @media (max-width:380px){
    .hero{transform:translateY(-3vh)}
    .logo-wrap{aspect-ratio:1.2/1}
    .logo-text{font-size:100px}
    .laser-title{font-size:14px;letter-spacing:.12em;padding-left:.12em}
    .caption{font-size:8px;letter-spacing:.24em;padding-left:.24em}
    .line{margin-top:14px}
    .sub{font-size:7px;letter-spacing:.16em;padding-left:.16em}
    .footer{font-size:6px;letter-spacing:.17em}
  }

  /* Landscape phones */
  @media (max-height:520px) and (orientation:landscape){
    .page{min-height:100svh;height:100svh}
    .hero{width:90vw;transform:translateY(-1vh)}
    .logo-wrap{aspect-ratio:3.4/1;min-height:150px}
    .logo-text{font-size:155px}
    .caption{font-size:9px;margin-top:-2%;letter-spacing:.30em}
    .line{margin-top:12px}
    .sub{margin-top:9px;font-size:7px}
    .footer{bottom:8px;font-size:6px}
  }

  /* Respect reduced-motion accessibility settings. */
  @media (prefers-reduced-motion:reduce){
    .smoke{animation:none}
    .service-track{animation:none}
  }

  /* Premium engraved-metal treatment + strictly local welding sparks */
  .engraved{
    fill:url(#metal);
    stroke:#e46d18;
    stroke-width:1.15;
    filter:url(#glow);
  }

  #impactSparks{
    pointer-events:none;
    opacity:.95;
    filter:none;
  }

  .impact-spark{
    stroke:#ffcf8a;
    stroke-width:.7;
    stroke-linecap:round;
    opacity:0;
  }

  .impact-spark.s2,
  .impact-spark.s6{
    stroke:#fff1d4;
    stroke-width:.55;
  }

  @media (max-width:700px){
    .impact-spark{stroke-width:.55}
  }


  .caption{
    color:#8b8b8b;
    text-shadow:0 0 8px rgba(255,110,20,.06);
  }
  .sub{
    color:#4b4b4b;
  }

/* Seamless services marquee */
.service-marquee{
  width:100%;
  overflow:hidden;
  margin-top:-1%;
  position:relative;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}

.service-track{
  display:flex;
  width:max-content;
  align-items:center;
  gap:1.25em;
  animation:serviceMarquee 24s linear infinite;
  will-change:transform;
  color:#8f8f8f;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:clamp(14px,1.35vw,20px);
  font-weight:500;
  letter-spacing:.18em;
  text-shadow:0 0 10px rgba(255,110,20,.07);
}

.service-group{
  display:flex;
  align-items:center;
  gap:1.25em;
  flex:none;
}

.service-track b{
  color:#6b2b0b;
  font-size:.7em;
  font-weight:400;
}

@keyframes serviceMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Contact button */
.contact-trigger{
  display:block;
  margin:22px auto 0;
  border:1px solid rgba(255,122,24,.65);
  background:rgba(3,3,3,.72);
  color:#cfcfcf;
  padding:10px 24px;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:10px;
  letter-spacing:.28em;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.contact-trigger:hover{
  color:#fff;
  border-color:#ff7a18;
  background:rgba(15,8,4,.82);
  box-shadow:0 0 22px rgba(255,100,20,.14);
}

/* Contact popup */
.contact-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.contact-modal.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.contact-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.contact-panel{
  position:relative;
  width:min(92vw,520px);
  max-height:min(88vh,720px);
  overflow:auto;
  padding:38px 38px 34px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,105,20,.07),transparent 38%),
    linear-gradient(145deg,#11100f,#050505 62%,#0b0704);
  border:1px solid rgba(255,122,24,.30);
  box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 35px rgba(255,100,20,.07);
  transform:translateY(12px) scale(.985);
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.contact-modal.is-open .contact-panel{transform:translateY(0) scale(1)}
.contact-panel::before{
  content:"";
  position:absolute;
  left:12%;right:12%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,#ff7a18,transparent);
  box-shadow:0 0 12px rgba(255,100,20,.35);
}
.contact-close{
  position:absolute;top:12px;right:16px;width:32px;height:32px;
  border:0;background:transparent;color:#777;font-size:28px;line-height:1;cursor:pointer;
  transition:color .2s ease,transform .2s ease;
}
.contact-close:hover{color:#ff9a50;transform:rotate(90deg)}
.contact-kicker{color:#6f2e0c;font-size:9px;letter-spacing:.42em;padding-left:.42em;margin-bottom:10px}
.contact-panel h2{
  margin:0;color:#e8e4df;font-family:"Cinzel",Georgia,"Times New Roman",serif;
  font-size:32px;font-weight:500;letter-spacing:.12em;
}
.contact-intro{margin:12px 0 26px;color:#777;font-size:12px;line-height:1.65}
.contact-form{display:grid;gap:15px}
.contact-form label{display:grid;gap:7px}
.contact-form label span{color:#8d8d8d;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.contact-form label em{color:#4f4f4f;font-style:normal;letter-spacing:0;text-transform:none}
.contact-form input,.contact-form textarea{
  width:100%;border:1px solid #272727;outline:none;background:#080808;color:#ddd;
  padding:11px 12px;font:13px Arial,Helvetica,sans-serif;border-radius:0;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.contact-form textarea{resize:vertical;min-height:105px}
.contact-form input:focus,.contact-form textarea:focus{
  border-color:rgba(255,122,24,.65);box-shadow:0 0 0 2px rgba(255,122,24,.06);
}
.contact-submit{
  margin-top:5px;border:1px solid rgba(255,122,24,.7);
  background:linear-gradient(180deg,#17100b,#0b0806);color:#d9d9d9;padding:13px 18px;
  font-family:"Cinzel",Georgia,"Times New Roman",serif;font-size:10px;letter-spacing:.22em;cursor:pointer;
}
body.modal-open{overflow:hidden}

@media (max-width:700px){
  .service-marquee{margin-top:-1%}
  .service-track{gap:1em;font-size:11px;letter-spacing:.12em;animation-duration:20s}
  .contact-trigger{margin-top:18px;padding:9px 20px;font-size:9px}
  .contact-modal{padding:14px}
  .contact-panel{width:100%;max-height:92svh;padding:32px 22px 24px}
  .contact-panel h2{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  .smoke{animation:none}
  .service-track{animation:none}
}