:root{
  --molten:#ff7a1a; --hot:#ffd27a; --arc:#9fd8ff; --steel:#8a949e;
  --dark:#0b0907; --ink:#f4efe8; --muted:#b9b0a5;
  --glass:rgba(20,16,13,.55); --line:rgba(255,190,120,.18);
  --navh:76px; --pbh:0px; --hudh:0px;
  --padx:clamp(20px,7vw,120px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:auto}
body{background:var(--dark);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:4px}

/* Preview banner (app-injected) */
.jaws-preview{position:fixed;top:0;left:0;right:0;z-index:60}
.jaws-preview:empty{display:none}

/* Layers */
#bg,#fx{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#bg{z-index:0}
#fx{z-index:2;pointer-events:none}
#fallback{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 70%,#3a1a08,#0b0907 70%)}
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
main{position:relative;z-index:4}

/* Nav */
nav{position:fixed;top:var(--pbh);left:0;right:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
  padding:16px clamp(18px,4vw,48px);background:linear-gradient(to bottom,rgba(11,9,7,.85),rgba(11,9,7,0));transition:background .35s,box-shadow .35s}
nav.scrolled{background:linear-gradient(to bottom,rgba(11,9,7,.94),rgba(11,9,7,.78));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 rgba(255,190,120,.14)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0;max-width:100%}
.logo svg{width:40px;height:40px;flex:0 0 40px}
.wm{display:block;min-width:0}
.logo b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:22px;line-height:1.15;padding-top:.08em;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.logo small{display:block;font:600 10px/1.3 "JetBrains Mono",monospace;letter-spacing:.3em;color:var(--molten);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small:empty{display:none}
.nav-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nav-links>a{text-decoration:none;font-size:14px;color:var(--muted);transition:color .2s}
.nav-links>a:hover{color:var(--ink)}

/* Buttons */
.btn,.q :is(a,button){display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  background:linear-gradient(135deg,var(--hot),var(--molten) 55%,#d4410a) !important;color:#1a0d04 !important;font:700 14px/1.1 Inter,sans-serif;text-decoration:none;
  box-shadow:0 0 0 1px rgba(255,210,122,.4),0 10px 40px -10px rgba(255,122,26,.8);transition:transform .2s,box-shadow .2s}
.btn:hover,.q :is(a,button):hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,210,122,.7),0 16px 50px -8px rgba(255,122,26,1)}
.q{display:contents}
.btn.ghost{background:transparent !important;color:var(--ink) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--hot)}

/* CTA rows (app-injected <span class="cta-row"><a class="btn btn-call" data-cta="call" href="tel:+27846119840">Call</a><a class="btn btn-wa" data-cta="whatsapp" href="https://wa.me/27846119840?text=Hello%2C%20I%20would%20like%20a%20quote%20for%20welding%20work." target="_blank" rel="noopener">WhatsApp</a><a class="btn btn-quote" data-cta="quote" href="#contact">Get a free quote</a></span>) */
.hdr-cta,.contact-cta,.hdr-cta .cta-row,.contact-cta .cta-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.contact-cta{margin-bottom:8px}
.hdr-cta:empty,.contact-cta:empty{display:none}
:is(.hdr-cta,.contact-cta,.cta-row) :is(a,button){display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;padding:11px 18px;border-radius:999px;
  font:700 13px/1.1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;
  background:rgba(27,22,18,.94) !important;border:1px solid rgba(255,190,120,.3) !important;box-shadow:none;transition:transform .2s,border-color .2s,box-shadow .2s}
:is(.hdr-cta,.contact-cta,.cta-row) :is(a,button):hover{border-color:var(--hot) !important;transform:translateY(-1px)}
:is(.hdr-cta,.contact-cta,.cta-row) :is(a,button):last-of-type{background:linear-gradient(135deg,var(--hot),var(--molten) 55%,#d4410a) !important;
  color:#1a0d04 !important;-webkit-text-fill-color:#1a0d04 !important;border-color:transparent !important;box-shadow:0 8px 28px -10px rgba(255,122,26,.9)}
@media (max-width:560px){:is(.hdr-cta,.contact-cta,.cta-row) :is(a,button){padding:9px 12px;font-size:12px}}

/* HUD */
.hud{position:fixed;right:clamp(14px,3vw,36px);top:50%;transform:translateY(-50%);z-index:15;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--muted);text-align:right;display:flex;gap:16px;align-items:center}
.hud-data div{margin:6px 0}
.hud-data b{display:block;color:var(--ink);font-size:15px;font-weight:600;letter-spacing:.05em}
#temp{color:var(--hot)}
.gauge{width:3px;height:220px;background:rgba(255,255,255,.1);border-radius:3px;position:relative;overflow:hidden}
.gauge i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(to top,var(--arc),var(--hot),var(--molten));box-shadow:0 0 12px var(--molten)}

/* Sections */
section{min-height:100vh;padding:max(clamp(90px,14vh,160px),calc(var(--navh) + var(--pbh) + 24px)) var(--padx) clamp(90px,14vh,160px);position:relative;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font:600 12px/1.3 "JetBrains Mono",monospace;letter-spacing:.35em;color:var(--molten);text-transform:uppercase;margin-bottom:22px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";flex:0 0 34px;height:1px;background:var(--molten)}
h1,h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.01em;padding-block:.08em;overflow-wrap:break-word;max-width:100%}
h1{font-size:clamp(64px,13vw,210px)}
h2{font-size:clamp(46px,8vw,124px)}
h1 em,h2 em{font-style:normal}
.hot{background:linear-gradient(180deg,#fff6d8 0%,var(--hot) 30%,var(--molten) 70%,#a52a05 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 30px rgba(255,122,26,.45))}
.cold{background:linear-gradient(180deg,#e9f2fb,#8fa3b5 60%,#4b5966);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:560px;font-size:clamp(16px,1.4vw,19px);color:var(--muted);margin-top:28px}
.lead:empty{display:none}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tags span{font:500 12px "JetBrains Mono",monospace;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,122,26,.06);color:#f1d9c0}

#hero{align-items:flex-start;justify-content:flex-end;padding-bottom:16vh}
#hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.scrollhint{position:absolute;bottom:12vh;left:50%;transform:translateX(-50%);font:600 10px "JetBrains Mono",monospace;letter-spacing:.4em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scrollhint i{width:1px;height:46px;background:linear-gradient(var(--molten),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.right{align-items:flex-end;text-align:right}
.right .lead{margin-left:auto}.right .tags{justify-content:flex-end}.right .eyebrow{flex-direction:row-reverse}
.right .eyebrow::before{display:none}.right .eyebrow::after{content:"";flex:0 0 34px;height:1px;background:var(--molten)}

#statement{min-height:200vh;justify-content:flex-start}
#statement .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}
#statement h2{font-size:clamp(54px,11vw,180px)}

/* Glass grids */
.grid{display:grid;gap:18px;margin-top:56px;width:100%}
.steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.svc-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));counter-reset:svc}
.card{position:relative;padding:30px 26px;border-radius:18px;background:var(--glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);overflow:hidden}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,122,26,.18),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card.done{transition:transform .35s,border-color .35s,box-shadow .35s}
.card.done:hover{transform:translateY(-6px);border-color:rgba(255,160,80,.5);box-shadow:0 30px 60px -30px rgba(255,122,26,.6)}
.card:hover::after{opacity:1}
.card .num{font:600 12px "JetBrains Mono",monospace;color:var(--molten);letter-spacing:.2em}
.card h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:28px;line-height:1.1;text-transform:uppercase;margin:14px 0 10px;letter-spacing:.02em;overflow-wrap:break-word}
.card p{color:var(--muted);font-size:15px}
.card p:empty{display:none}
.svc{counter-increment:svc}
.svc .num::before{content:counter(svc,decimal-leading-zero)}
.svc:nth-child(2):nth-last-child(n+2){border-color:rgba(255,160,80,.55);background:linear-gradient(160deg,rgba(255,122,26,.16),var(--glass))}

/* Stats (trust) */
.stats{display:flex;gap:clamp(24px,6vw,90px);margin-top:56px;flex-wrap:wrap}
.stat{min-width:0}
.stat b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(44px,6vw,84px);display:block;line-height:1;padding-top:.08em;overflow-wrap:break-word}
.stat span{font:500 12px "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}

/* Contact */
#contact{min-height:110vh}
.contact-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;margin-top:50px;width:100%}
.enquiry{background:rgba(16,12,9,.9);border:1px solid var(--line);border-radius:18px;padding:clamp(18px,3vw,30px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);min-height:120px;min-width:0}
.info{min-width:0}
.info .row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.info .row>span{font:600 11px "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--molten);min-width:90px;padding-top:3px}
.info .v{min-width:0;overflow-wrap:anywhere}
.areas span+span::before{content:", "}
.areas-intro{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.areas-intro:empty{display:none}
.map{margin-top:20px;border-radius:16px;overflow:hidden;border:1px solid var(--line);height:220px;filter:grayscale(1) invert(.92) sepia(.4) hue-rotate(-15deg) contrast(.9)}
.map iframe{width:100%;height:100%;border:0}
.maplink{margin-top:12px}
.maplink a{color:var(--hot);font-size:14px}
footer{position:relative;z-index:4;padding:40px var(--padx);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:12px "JetBrains Mono",monospace;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* Reveal */
.rv{opacity:0;transform:translateY(40px);filter:blur(10px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter 1s}
.rv.in{opacity:1;transform:none;filter:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* Torch cursor */
@media (pointer:fine){body{cursor:none}a,button,input,select,textarea{cursor:none}}
#cursor{position:fixed;top:0;left:0;z-index:50;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 30%,var(--arc) 55%,transparent 72%);box-shadow:0 0 18px 6px rgba(159,216,255,.55),0 0 60px 18px rgba(255,122,26,.25);mix-blend-mode:screen}
@media (pointer:coarse){#cursor{display:none}}

/* Side HUD reserves space on the right */
@media (min-width:901px){
  section,footer{padding-right:max(var(--padx),180px)}
}
@media (max-width:980px){
  .contact-wrap{grid-template-columns:minmax(0,1fr)}
  .nav-links>a{display:none}
}
/* HUD becomes a compact bottom bar */
@media (max-width:900px){
  .hud{top:auto;bottom:0;left:0;right:0;transform:none;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,9,7,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .hud-data{display:flex;gap:18px;text-align:left}.hud-data div{margin:0}.hud-data b{font-size:13px}
  .gauge{display:none}
  footer{padding-bottom:calc(var(--hudh) + 28px)}
}
@media (max-width:640px){
  .right{align-items:flex-start;text-align:left}.right .lead{margin-left:0}.right .tags{justify-content:flex-start}
  .right .eyebrow{flex-direction:row}.right .eyebrow::before{display:block}.right .eyebrow::after{display:none}
  .scrollhint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;filter:none;transition:none}.grain,.scrollhint i{animation:none}
}

/* Injected enquiry form: readable in this palette whatever the app ships */
html body .enquiry.enquiry :is(form,fieldset,div,section,article){background:transparent !important;background-color:transparent !important;background-image:none !important}
html body .enquiry.enquiry fieldset{border:1px solid rgba(255,255,255,.12) !important;border-radius:14px !important;padding:14px !important}
html body .enquiry.enquiry form{display:grid;gap:14px}
html body .enquiry.enquiry :is(label,legend,p,span,small,strong,em,h1,h2,h3,h4,h5,li,div,td,th,dt,dd){color:#e8ded3 !important;-webkit-text-fill-color:#e8ded3 !important}
html body .enquiry.enquiry :is(label,legend){font:600 11px/1.5 "JetBrains Mono",ui-monospace,monospace !important;letter-spacing:.18em !important;text-transform:uppercase !important}
html body .enquiry.enquiry a{color:#ffd27a !important;-webkit-text-fill-color:#ffd27a !important}
html body .enquiry.enquiry :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=range]),textarea,select){width:100%;max-width:100%;background:#1a1511 !important;background-color:#1a1511 !important;background-image:none !important;color:#f4efe8 !important;-webkit-text-fill-color:#f4efe8 !important;caret-color:#ffd27a !important;border:1px solid rgba(255,255,255,.22) !important;border-radius:12px !important;padding:13px 15px !important;font:15px/1.4 Inter,system-ui,sans-serif !important;box-shadow:none !important;outline:none !important;opacity:1 !important}
html body .enquiry.enquiry textarea{min-height:130px;resize:vertical}
html body .enquiry.enquiry :is(input,textarea,select):focus{border-color:#ff7a1a !important;box-shadow:0 0 0 4px rgba(255,122,26,.22) !important}
html body .enquiry.enquiry :is(input,textarea)::placeholder{color:#a89d92 !important;-webkit-text-fill-color:#a89d92 !important;opacity:1 !important}
html body .enquiry.enquiry option{background:#1a1511 !important;color:#f4efe8 !important}
html body .enquiry.enquiry :is(input,textarea,select):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #1a1511 inset !important;box-shadow:0 0 0 1000px #1a1511 inset !important;-webkit-text-fill-color:#f4efe8 !important;caret-color:#ffd27a !important}
html body .enquiry.enquiry :is(input[type=checkbox],input[type=radio]){accent-color:#ff7a1a}
html body .enquiry.enquiry :is(button,[type=submit],[type=button]){background:linear-gradient(135deg,#ffd27a,#ff7a1a 55%,#d4410a) !important;background-color:#ff7a1a !important;color:#1a0d04 !important;-webkit-text-fill-color:#1a0d04 !important;border:0 !important;border-radius:999px !important;padding:13px 24px !important;font:700 14px/1.1 Inter,system-ui,sans-serif !important;cursor:pointer;box-shadow:0 10px 30px -10px rgba(255,122,26,.8) !important;justify-self:start;opacity:1 !important}
html body .enquiry.enquiry :is(button,[type=submit],[type=button]) *{color:inherit !important;-webkit-text-fill-color:inherit !important}
html body .enquiry.enquiry :is(button,[type=submit],[type=button]):hover{filter:brightness(1.08)}
html body .enquiry.enquiry :is(button,[type=submit],[type=button]):focus-visible{outline:2px solid #ffd27a !important;outline-offset:3px}
html body .enquiry.enquiry iframe{width:100%;border:0;min-height:420px;background:transparent}