:root{
  --bg:#050b14;--panel:#0a1422;--panel2:#0d1b2d;--text:#f4f8ff;--muted:#9caec4;
  --blue:#1597ff;--cyan:#31d5ff;--line:rgba(99,166,255,.22);--max:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(5,11,20,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-wrap{min-height:78px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);font-family:Rajdhani,sans-serif;font-size:20px;font-weight:700;transform:skew(-6deg)}.brand strong{display:block;font-family:Rajdhani,sans-serif;letter-spacing:2px;font-size:22px}.brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:1.2px}
.nav{display:flex;gap:28px;font-size:13px;font-weight:600}.nav a{color:#c8d5e5}.nav a:hover{color:var(--cyan)}.menu-btn{display:none;background:none;border:0;color:white;font-size:25px}
.hero{position:relative;overflow:hidden;min-height:680px;display:flex;align-items:center;background:radial-gradient(circle at 75% 40%,rgba(0,140,255,.24),transparent 34%),linear-gradient(180deg,#071323,#050b14)}
.honeycomb{
position:absolute;
inset:0;
opacity:.16;
pointer-events:none;
background-color:transparent;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='86.6' viewBox='0 0 100 86.6'%3E%3Cg fill='none' stroke='%2331d5ff' stroke-width='1.5' opacity='.65'%3E%3Cpath d='M25 1 L75 1 L100 43.3 L75 85.6 L25 85.6 L0 43.3 Z'/%3E%3Cpath d='M75 1 L100 0 L100 43.3'/%3E%3Cpath d='M25 85.6 L0 86.6 L0 43.3'/%3E%3C/g%3E%3C/svg%3E");
background-size:100px 86.6px;
background-repeat:repeat;
}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.eyebrow{color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:2.5px;margin:0 0 12px}.hero h1{font-family:Rajdhani,sans-serif;font-size:clamp(50px,7vw,86px);line-height:.92;margin:0 0 25px;letter-spacing:-1px}.hero h1 span{color:var(--cyan)}.lead{font-size:18px;color:#bdcce0;max-width:620px}.hero-actions{display:flex;gap:14px;margin:32px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:4px;font-weight:800;font-size:13px;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--blue);box-shadow:0 10px 30px rgba(21,151,255,.2)}.btn-primary:hover{filter:brightness(1.12)}.btn-ghost{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.03)}.trust-row{display:flex;gap:25px;border-top:1px solid var(--line);padding-top:22px}.trust-row div{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:11px}.trust-row b{color:var(--cyan);font-family:Rajdhani,sans-serif}
.hero-card{height:430px;border:1px solid rgba(49,213,255,.35);background:linear-gradient(145deg,#0d2339,#050b14);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}.hero-card:before{content:"";position:absolute;inset:16px;border:1px solid rgba(255,255,255,.07)}
.helmet-art{width:280px;height:330px;position:relative;border-radius:42% 42% 24% 24%;background:linear-gradient(150deg,#27384c,#080d14 55%,#182536);box-shadow:inset 0 0 35px rgba(0,0,0,.8),0 25px 60px rgba(0,0,0,.5)}.visor{position:absolute;left:28px;right:28px;top:108px;height:92px;border:4px solid #22394d;border-radius:16px;background:linear-gradient(110deg,#07101b,#1e5f80 50%,#07101b);box-shadow:inset 0 0 25px #000}.helmet-line{position:absolute;left:45px;right:45px;bottom:62px;height:2px;background:var(--cyan);opacity:.45}.hero-card-caption{position:absolute;bottom:30px;left:35px;right:35px;display:flex;justify-content:space-between;color:#a9bbcf;font-size:9px;letter-spacing:1.5px}.hero-card-caption span:first-child{color:var(--cyan);font-weight:800}
.section{padding:100px 0}.intro{background:#07111e;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:80px}.section h2,.intro h2,.cta h2{font-family:Rajdhani,sans-serif;font-size:clamp(38px,5vw,58px);line-height:1;margin:0}.intro p{color:var(--muted);font-size:16px}.text-link{color:var(--cyan);font-weight:800;font-size:13px}
.services{background:linear-gradient(180deg,#07111e,#050b14)}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:45px}.section-heading>p{max-width:400px;color:var(--muted);margin:0}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service{background:linear-gradient(145deg,#0b1828,#08111d);border:1px solid var(--line);padding:30px;min-height:220px;transition:.25s}.service:hover{transform:translateY(-4px);border-color:rgba(49,213,255,.6)}.icon{color:var(--cyan);font-size:25px}.service h3{font-family:Rajdhani,sans-serif;font-size:24px;margin:22px 0 7px}.service p{color:var(--muted);font-size:13px;margin:0}
.work{background:#07111e}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.work-card{background:#0a1524;border:1px solid var(--line);overflow:hidden}..work-visual {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-radius: 4px;
}

.work-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}{height:260px;display:grid;place-items:center;font-family:Rajdhani,sans-serif;font-size:34px;letter-spacing:4px;color:rgba(255,255,255,.82);background:radial-gradient(circle at 50% 45%,rgba(49,213,255,.28),transparent 30%),linear-gradient(135deg,#14283c,#050a11)}.work-visual.frame{background:radial-gradient(circle at 60% 40%,rgba(0,120,255,.3),transparent 32%),linear-gradient(135deg,#101c2c,#050a11)}.work-visual.trailer{background:radial-gradient(circle at 45% 50%,rgba(49,213,255,.2),transparent 30%),linear-gradient(135deg,#17212b,#050a11)}.work-card>div:last-child{padding:20px}.work-card h3{margin:0;font-family:Rajdhani,sans-serif;font-size:23px}.work-card p{margin:5px 0 0;color:var(--muted);font-size:12px}
.process{background:#050b14}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:45px}.process-grid>div{border-top:1px solid var(--line);padding-top:20px}.process-grid b{color:var(--cyan);font-family:Rajdhani,sans-serif;font-size:25px}.process-grid h3{font-family:Rajdhani,sans-serif;font-size:20px;margin:10px 0 5px}.process-grid p{color:var(--muted);font-size:12px}
.cta{padding:65px 0;background:linear-gradient(90deg,#082443,#0b1727);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.cta h2{font-size:45px}
.contact{background:#07111e}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact p{color:var(--muted)}.contact-item{display:flex;gap:15px;align-items:center;margin-top:25px}.contact-item>span{width:42px;height:42px;border:1px solid var(--line);display:grid;place-items:center;color:var(--cyan)}.contact-item small{display:block;color:var(--muted);font-size:9px;letter-spacing:2px}.contact-item a,.contact-item strong{font-size:14px}
.quote-form{background:#0a1625;border:1px solid var(--line);padding:30px}.quote-form label{display:block;font-size:11px;font-weight:800;margin-bottom:18px;color:#c9d7e7}.quote-form input,.quote-form textarea{display:block;width:100%;margin-top:7px;background:#050c16;border:1px solid rgba(255,255,255,.12);color:white;padding:12px;font:inherit;outline:none}.quote-form input:focus,.quote-form textarea:focus{border-color:var(--cyan)}.quote-form small{display:block;color:var(--muted);font-size:10px;margin-top:13px}
footer{border-top:1px solid var(--line);padding:30px 0;background:#040910}.footer-wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}.footer-wrap p{color:var(--muted);font-size:11px}
@media(max-width:800px){.menu-btn{display:block}.nav{display:none;position:absolute;top:78px;left:0;right:0;background:#07111e;padding:20px;flex-direction:column;gap:15px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hero{min-height:auto;padding:80px 0}.hero-grid,.two-col,.contact-grid{grid-template-columns:1fr;gap:45px}.hero-card{height:330px}.service-grid,.work-grid{grid-template-columns:1fr 1fr}.process-grid{grid-template-columns:1fr 1fr}.section-heading,.cta-inner{align-items:start;flex-direction:column}.footer-wrap{flex-direction:column;align-items:flex-start}}
@media(max-width:520px){.container{width:min(calc(100% - 28px),var(--max))}.service-grid,.work-grid,.process-grid{grid-template-columns:1fr}.hero h1{font-size:52px}.trust-row{flex-direction:column;gap:10px}.hero-actions{flex-direction:column}.btn{width:100%}.section{padding:75px 0}.cta h2{font-size:38px}}
/* HSWeldz Our Work Gallery */
.work-card {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: #111820;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.work-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.work-visual {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.work-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.work-card:hover .work-visual img {
  transform: scale(1.06);
}

.work-card::after {
  content: "VIEW GALLERY";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.work-card:hover::after {
  opacity: 1;
}

@media (max-width: 700px) {
  .work-visual {
    height: 190px;
  }

  .work-card::after {
    opacity: 1;
    font-size: 11px;
    padding: 8px 14px;
  }
}/* FIX HERO LAYOUT */
.hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 28px !important;
  align-items: center !important;
}

.hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.hero-media {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.hero-info {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

/* Mobile */
@media (max-width: 800px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  .hero-copy,
  .hero-media,
  .hero-info {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}/* FIX HERO LAYOUT */
.hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 40px !important;
}

.hero-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.hero-media {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
}

.hero-media img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.hero-info {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
}/* =========================================================
   HSWELDZ MOBILE LAYOUT
   Mobile only - desktop remains unchanged
   ========================================================= */

@media (max-width: 700px) {

  /* Main hero section */
  .hero {
    min-height: auto;
    padding: 55px 18px 50px;
    overflow: hidden;
  }

  /* Put the hero content into one clean column */
  .hero-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: stretch;
  }

  /* Hero text */
  .hero h1 {
    font-size: clamp(48px, 14vw, 70px);
    line-height: 0.98;
    letter-spacing: -1px;
    margin: 10px 0 22px;
  }

  .hero h1 span {
    display: inline;
  }

  .hero p {
    font-size: 20px;
    line-height: 1.55;
    margin: 0 0 26px;
    max-width: 520px;
  }

  /* Small blue heading above main heading */
  .eyebrow {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 2px;
    margin-bottom: 10px;
  }

  /* Buttons */
  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0;
  }

  .hero-actions a,
  .hero-actions button,
  .btn {
    width: 100%;
    min-height: 62px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 20px;
    font-size: 17px;
  }

  /* Welding image */
  .hero-card {
    width: 100%;
    max-width: 100%;
    margin: 0;
    order: 2;
  }

  .hero-card img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: 4px;
  }

  /* Text/features area */
  .hero-copy {
    order: 1;
  }

  /* Feature list */
  .trust-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 10px 0 0;
  }

  .trust-row div {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Why choose section */
  .why,
  .why-choose,
  .quality {
    padding: 55px 18px;
  }

  .why h2,
  .why-choose h2,
  .quality h2 {
    font-size: clamp(42px, 11vw, 58px);
    line-height: 1.05;
    margin-bottom: 22px;
  }

  .why p,
  .why-choose p,
  .quality p {
    font-size: 18px;
    line-height: 1.6;
  }

  /* Keep numbered points tidy */
  .feature-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 25px;
  }

  .feature-list > * {
    font-size: 17px;
    line-height: 1.4;
  }

  /* Prevent long headings from creating awkward overflow */
  h1,
  h2,
  h3 {
    overflow-wrap: normal;
    word-break: normal;
  }

  /* General mobile spacing */
  section {
    max-width: 100%;
  }

  /* Keep images inside the phone screen */
  img {
    max-width: 100%;
  }

  /* Honeycomb background stays subtle */
  .honeycomb {
    opacity: 0.10;
    background-size: 90px 155px;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

  .hero {
    padding: 45px 18px 40px;
  }

  .hero h1 {
    font-size: 48px;
    line-height: 1;
  }

  .hero p {
    font-size: 18px;
    line-height: 1.5;
  }

  .hero-actions a,
  .hero-actions button,
  .btn {
    min-height: 58px;
    font-size: 16px;
  }

  .hero-card img {
    max-height: 300px;
  }

}/* =====================================================
   HSWELDZ - FORCE MOBILE HERO FIX
   ===================================================== */

@media screen and (max-width: 700px) {

  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 40px 18px 50px !important;
    overflow: hidden !important;
  }

  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
  }

  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    margin: 0 !important;
  }

  .hero-card img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover !important;
  }

  .hero h1 {
    font-size: 52px !important;
    line-height: 0.98 !important;
    margin: 10px 0 22px !important;
    max-width: 100% !important;
  }

  .hero h1 span {
    display: inline !important;
  }

  .hero p {
    font-size: 19px !important;
    line-height: 1.55 !important;
    margin-bottom: 25px !important;
    max-width: 100% !important;
  }

  .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  .hero-actions a,
  .hero-actions button {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Feature numbers below the image */
  .trust-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* Prevent the mobile page from creating horizontal overflow */
  body {
    overflow-x: hidden !important;
  }

  .hero,
  .hero-grid,
  .hero-copy,
  .hero-card {
    box-sizing: border-box !important;
  }
}


/* Smaller phones */
@media screen and (max-width: 420px) {

  .hero {
    padding: 35px 18px 45px !important;
  }

  .hero h1 {
    font-size: 46px !important;
  }

  .hero p {
    font-size: 18px !important;
  }

}