/* ============================================================
   BOYAL — Surface Science. Industrial Art.
   A Panaf Group company · Powder coating · Algeria
   ============================================================ */

:root{
  --bg:        #070B14;   /* deep navy-black            */
  --bg-2:      #0B1322;   /* section panel              */
  --bg-3:      #0F1A2D;   /* raised surface             */
  --navy:      #113954;   /* BOYAL navy (logo)          */
  --navy-lit:  #1E5E84;   /* lighter navy               */
  --red:       #E30613;   /* BOYAL red (logo)           */
  --yellow:    #F9BE1E;   /* BOYAL yellow (logo)        */
  --gold:      #D4A245;   /* shared Panaf gold          */
  --text:      #ECE9E2;   /* warm off-white             */
  --muted:     #8A94A6;   /* steel grey                 */
  --line:      rgba(255,255,255,.09);
  --glass:     rgba(255,255,255,.035);

  --ff-disp: "Space Grotesk", "Inter", sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; height:100vh; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
::selection{ background:var(--yellow); color:#1a1205; }

/* ---------- Lenis ---------- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ============================================================
   CUSTOM CURSOR — red crosshair
   ============================================================ */
.cursor{ position:fixed; left:0; top:0; z-index:9000; pointer-events:none;
  mix-blend-mode:screen; transform:translate(-50%,-50%);
  width:34px; height:34px; opacity:0; transition:opacity .3s; }
.cursor::before,.cursor::after{ content:""; position:absolute; background:var(--cur,var(--red));
  transition:transform .25s var(--ease), background .25s; }
.cursor::before{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.cursor::after{ top:50%; left:0; height:1.5px; width:100%; transform:translateY(-50%); }
.cursor i{ position:absolute; inset:50% auto auto 50%; width:4px; height:4px; border-radius:50%;
  background:var(--cur,var(--red)); transform:translate(-50%,-50%); transition:transform .25s var(--ease), background .25s; }
.cursor.is-hover{ width:54px; height:54px; }
.cursor.is-hover::before,.cursor.is-hover::after{ background:var(--yellow); }
.cursor.is-hover i{ transform:translate(-50%,-50%) scale(2.4); background:var(--yellow); }
.cursor.is-down i{ transform:translate(-50%,-50%) scale(3.6); }
@media (pointer:coarse){ .cursor{ display:none; } }

/* ============================================================
   LOADER
   ============================================================ */
#loader{ position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px;
  transition:opacity .8s var(--ease), visibility .8s; }
#loader.done{ opacity:0; visibility:hidden; }
#loader .l-logo{ width:min(260px,52vw); opacity:0; transform:translateY(14px);
  animation:lIn 1s var(--ease) .15s forwards; }
#loader .l-bar{ width:min(240px,46vw); height:2px; background:rgba(255,255,255,.12); overflow:hidden; border-radius:2px; }
#loader .l-bar span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--red),var(--yellow)); }
#loader .l-pct{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.25em; color:var(--muted); }
.l-dust{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.l-dust b{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--yellow);
  opacity:.0; animation:dust linear infinite; }
@keyframes lIn{ to{ opacity:1; transform:none; } }
@keyframes dust{ 0%{ transform:translateY(20px); opacity:0; } 20%{ opacity:.7; } 100%{ transform:translateY(-120px); opacity:0; } }

/* ============================================================
   WEBGL CANVAS (fixed, behind DOM)
   ============================================================ */
/* full-page powder-explosion video background (unfiltered — colours pop) */
.site-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background:#04060a; overflow:hidden; }
.site-bg video{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-mode{ position:fixed; right:16px; bottom:16px; z-index:70; cursor:pointer;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; color:var(--text);
  background:rgba(7,11,20,.7); border:1px solid var(--line); border-radius:30px; padding:9px 16px;
  backdrop-filter:blur(8px); transition:border-color .3s, transform .3s; }
.bg-mode:hover{ border-color:var(--yellow); transform:translateY(-2px); }

/* the 3D canvas is CONTAINED inside the process section (.proc-sticky), never a full-page overlay */
#webgl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; }
.page{ position:relative; z-index:2; }
/* home page: text sits over the bright video — give it readable backing/shadow under the text only */
.home .hero-content, .home .manifesto, .home .stat, .home .cap-head,
.home .footer, .home .footer *, .home .cap h3, .home .cap p, .home .cap .ci{
  text-shadow:0 2px 16px rgba(0,0,0,.9), 0 1px 4px rgba(0,0,0,.85); }
.home .cap{ background:rgba(7,11,20,.62); border-color:rgba(255,255,255,.14); }
.home .footer{ background:linear-gradient(180deg, transparent, rgba(7,11,20,.8) 55%); }
/* brighten the small/secondary (muted) text on home + stronger shadow so it reads over the bright video */
.home .stat .t, .home .sub, .home .cap p, .home .lead, .home .manifesto .big .w,
.home .footer p, .home .footer .fcol a, .home .footer-bottom, .home .footer .fcol h4{ color:#e3e7ee; }
.home .stat .t, .home .sub, .home .cap p, .home .footer p, .home .footer .fcol a, .home .footer-bottom{
  text-shadow:0 1px 10px rgba(0,0,0,.98), 0 1px 3px rgba(0,0,0,.92), 0 0 2px rgba(0,0,0,.9); }
/* readability: a soft dark card UNDER text blocks only (not a filter over the video) */
.hero-content, .manifesto .big, .cap-head > .rv, .colours-head, .about-grid > .rv, .contact-grid > .rv{
  text-shadow:0 2px 22px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.6); }

/* ============================================================
   NAV
   ============================================================ */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,56px);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent; }
.nav.scrolled{ background:rgba(7,11,20,.72); backdrop-filter:blur(18px);
  border-bottom-color:var(--line); padding-top:14px; padding-bottom:14px; }
.nav .brand{ display:flex; align-items:center; gap:12px; }
.nav .brand img{ height:30px; width:auto; }
.nav .brand small{ font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.22em;
  color:var(--muted); text-transform:uppercase; border-left:1px solid var(--line); padding-left:12px;
  white-space:nowrap; display:none; }
@media (min-width:1320px){ .nav .brand small{ display:inline; } }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; align-items:center; gap:2px; }
.lang-link{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted);
  text-decoration:none; padding:6px 9px; border-radius:7px; line-height:1; transition:color .25s, background .25s; }
.lang-link:hover{ color:var(--text); }
.lang-link.active{ color:#0b0f17; background:var(--yellow); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ font-size:13px; letter-spacing:.04em; color:var(--muted); position:relative;
  text-transform:uppercase; transition:color .3s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0;
  background:var(--yellow); transition:width .35s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.btn{ display:inline-flex; align-items:center; gap:9px; font-size:13px; letter-spacing:.05em;
  font-weight:600; padding:12px 22px; border-radius:40px; text-transform:uppercase;
  background:var(--red); color:#fff; transition:transform .3s var(--ease), box-shadow .3s, background .3s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(227,6,19,.6); }
.btn.ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn.ghost:hover{ border-color:var(--yellow); box-shadow:none; }
.nav-burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
.nav-burger span{ width:24px; height:2px; background:var(--text); transition:.3s; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px); }
section{ position:relative; }
.klabel{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--yellow); display:inline-flex; align-items:center; gap:10px; }
.klabel::before{ content:""; width:26px; height:1px; background:var(--yellow); opacity:.7; }
h1,h2,h3{ font-family:var(--ff-disp); font-weight:600; line-height:1.04; letter-spacing:-.01em; }
.h-sec{ font-size:clamp(2rem,5vw,3.6rem); margin:18px 0 22px; }
.lead{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); max-width:60ch; }

/* reveal */
.rv{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ height:100vh; min-height:640px; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center; position:relative; isolation:isolate; }
.hero-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:48px 40px; }
/* hero: no dark backing — the video shows fully; text reads via strong shadows only */
.hero .tag, .hero .sub{ text-shadow:0 2px 16px rgba(0,0,0,.96), 0 1px 5px rgba(0,0,0,.94), 0 0 4px rgba(0,0,0,.9); }
.hero .sub{ color:#eef1f6; }
.hero .klabel{ text-shadow:0 1px 8px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.85); }
.hero-hint{ z-index:2; }
.hero .klabel{ color:var(--gold); }
.hero .klabel::before{ background:var(--gold); }
.hero h1{ font-size:clamp(4.2rem,17vw,15rem); line-height:.9; letter-spacing:-.03em;
  margin:18px 0 4px; }
.hero h1 .pet{ color:var(--red); } /* unused accent hook */
.hero h1.hero-logo{ margin:14px 0 6px; line-height:1; }
.hero-logo img{ display:block; width:clamp(240px,58vw,760px); height:auto;
  filter:drop-shadow(0 4px 26px rgba(0,0,0,.92)) drop-shadow(0 2px 8px rgba(0,0,0,.88)) drop-shadow(0 0 3px rgba(0,0,0,.85)); }
.hero .tag{ font-family:var(--ff-disp); font-size:clamp(1.1rem,2.6vw,1.9rem); font-weight:500;
  color:var(--text); }
.hero .sub{ color:#eef1f6; margin-top:16px; max-width:46ch; }
.hero-hint{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.25em; color:var(--muted); text-transform:uppercase; }
.hero-hint .line{ width:1px; height:42px; background:linear-gradient(var(--red),transparent); }
.spray-tip{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; color:var(--yellow);
  text-transform:uppercase; margin-top:26px; opacity:.0; animation:blink 3s var(--ease) 2s infinite; }
@keyframes blink{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ padding:clamp(110px,16vh,200px) 0; text-align:center; position:relative; }
.manifesto::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 100% 82% at 50% 47%, rgba(7,11,20,.78) 0%, rgba(7,11,20,.52) 54%, rgba(7,11,20,0) 90%); }
.manifesto > *{ position:relative; z-index:1; }
.manifesto .big{ font-family:var(--ff-disp); font-weight:600;
  font-size:clamp(2.1rem,6.2vw,5rem); line-height:1.05; letter-spacing:-.02em; max-width:16ch; margin:0 auto; }
.manifesto .big .w{ display:inline-block; opacity:.12; transition:opacity .5s var(--ease),color .5s; }
.manifesto .big .w.lit{ opacity:1; }
.manifesto .big em{ font-style:italic; color:var(--yellow); }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:84px; }
.stat .n{ font-family:var(--ff-disp); font-size:clamp(2.2rem,4.6vw,3.6rem); font-weight:600;
  color:var(--text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .n b{ color:var(--red); font-weight:600; }
.stat .t{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:8px; }
.stat{ border-top:1px solid var(--line); padding-top:18px; }

/* ============================================================
   PROCESS — sticky scroll, 4 stages synced to 3D
   ============================================================ */
.process{ position:relative; }
.process .sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; }
.process .stages{ height:400vh; } /* scroll track length */
.proc-inner{ width:100%; }
.proc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; min-height:60vh; }
.proc-num{ font-family:var(--ff-mono); font-size:13px; letter-spacing:.3em; color:var(--yellow); }
.proc-stage{ position:relative; }
.proc-step{ display:none; }
.proc-step.active{ display:block; position:relative; animation:stepIn .55s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.proc-step h3{ font-size:clamp(1.8rem,3.6vw,2.9rem); margin:14px 0 16px; }
.proc-step p{ color:var(--muted); max-width:42ch; }
.proc-progress{ display:flex; gap:8px; margin-top:34px; }
.proc-progress b{ height:3px; flex:1; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; position:relative; }
.proc-progress b.on::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--red),var(--yellow)); }
.proc-spacer-r{ } /* right column is the 3D panel, transparent */

/* ============================================================
   CAPABILITIES — glass cards
   ============================================================ */
.section-pad{ padding:clamp(90px,13vh,150px) 0; }
.cap-head{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:54px; }
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cap{ position:relative; background:var(--glass); border:1px solid var(--line); border-radius:16px;
  padding:32px 30px 36px; overflow:hidden; transition:transform .4s var(--ease), border-color .4s, background .4s;
  transform-style:preserve-3d; }
.cap::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background:linear-gradient(var(--red),transparent); opacity:0; transition:opacity .4s; }
.cap:hover{ border-color:rgba(227,6,19,.4); background:rgba(227,6,19,.04); }
.cap:hover::before{ opacity:1; }
.cap .ci{ font-family:var(--ff-mono); font-size:12px; color:var(--yellow); letter-spacing:.2em; }
.cap h3{ font-size:1.35rem; margin:18px 0 12px; }
.cap p{ color:var(--muted); font-size:.96rem; }

/* ============================================================
   APPLICATIONS — grid w/ coating-color hover
   ============================================================ */
.apps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.cgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px){ .cgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .cgrid{ grid-template-columns:1fr; } }
.app{ position:relative; aspect-ratio:1/1.15; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-3);
  display:flex; flex-direction:column; justify-content:flex-end; padding:22px;
  text-decoration:none; color:inherit;
  transition:transform .45s var(--ease), box-shadow .45s; cursor:pointer; }
.app .app-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; filter:brightness(.92) saturate(1.03); transform:scale(1.02);
  transition:transform .7s var(--ease), filter .5s var(--ease); }
.app::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(7,11,20,0) 44%, rgba(7,11,20,.42) 70%, rgba(7,11,20,.92) 100%); }
.app .swatch{ position:absolute; inset:0; z-index:1; opacity:0; mix-blend-mode:soft-light;
  transition:opacity .5s var(--ease);
  background:radial-gradient(circle at 50% 35%, var(--c,#113954), transparent 78%); }
.app:hover{ transform:translateY(-6px); box-shadow:0 20px 50px -20px rgba(0,0,0,.7); }
.app:hover .app-photo{ transform:scale(1.08); filter:brightness(1.04) saturate(1.1); }
.app:hover .swatch{ opacity:.85; }
.app .an{ position:relative; z-index:2; font-family:var(--ff-disp); font-size:1.15rem; font-weight:600; }
.app .ad{ position:relative; z-index:2; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#c8d0dc; margin-top:6px; transition:color .4s; }
.app:hover .ad{ color:var(--text); }

/* ============================================================
   ABOUT band
   ============================================================ */
.about{ background:linear-gradient(180deg,transparent,var(--bg-2) 30%,var(--bg-2) 70%,transparent);
  padding:clamp(100px,15vh,180px) 0; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about p+p{ margin-top:18px; }
.about .badge{ display:inline-flex; align-items:center; gap:10px; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:30px; padding:8px 16px; margin-top:26px; }
.about .badge b{ color:var(--gold); font-weight:600; }
.about-visual{ aspect-ratio:4/5; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  position:relative; }
.about-visual img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.03); }
.about-visual::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg,transparent,rgba(7,11,20,.6)); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(100px,14vh,170px) 0; position:relative; }
.contact::before{ content:""; position:absolute; left:0; top:10%; width:40%; height:80%;
  background:radial-gradient(circle at left, rgba(227,6,19,.14), transparent 70%); pointer-events:none; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; position:relative; }
.contact h2{ font-size:clamp(2.2rem,5vw,4rem); }
.contact .lead{ margin-top:18px; }
.cinfo{ margin-top:40px; display:flex; flex-direction:column; gap:20px; }
.cinfo div{ }
.cinfo .ct{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.cinfo .cv{ font-size:1.05rem; margin-top:3px; }
.form{ display:grid; gap:18px; }
.field{ position:relative; }
.field input,.field textarea{ width:100%; background:var(--bg-3); border:1px solid var(--line);
  border-radius:10px; padding:16px 16px; color:var(--text); font-family:var(--ff-body); font-size:.98rem;
  transition:border-color .3s, box-shadow .3s; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,162,69,.14); }
.field label{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; display:block; }
.form .btn{ justify-content:center; padding:16px; font-size:14px; border:none; cursor:pointer; }
.form-note{ font-size:12px; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:60px 0 40px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:30px; }
.footer img{ height:34px; }
.footer .fcol h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px; }
.footer .fcol a{ display:block; color:var(--muted); font-size:.95rem; margin-bottom:10px; transition:color .3s; }
.footer .fcol a:hover{ color:var(--text); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-top:50px; padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; color:var(--muted); }
.footer-bottom a{ color:var(--gold); }

/* ---- inner-page header (clears the fixed nav) ---- */
.page-head{ padding:128px 0 22px; }
.page-title{ font-family:var(--ff-disp); font-weight:600; line-height:1.02; letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,4.4rem); margin:14px 0 16px; }
.page-head .lead{ max-width:60ch; }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ width:100%; }
a.cap{ text-decoration:none; }   /* explore cards on Home reuse .cap as links */

/* ---- merged Colours page: process section (the fixed, paintable 3D lives only here) ---- */
.proc2{ position:relative; min-height:165vh; }   /* sticky travel so the panel pins while you scroll through */
.proc-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:11vh 20px 7vh; text-align:center; }
/* step label ABOVE the panel · colour swatches BELOW it · panel centred behind — text can never cover it */
.proc-now{ position:relative; z-index:2; font-family:var(--ff-disp); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.8vw,2.1rem); line-height:1.12; max-width:18ch;
  text-shadow:0 2px 22px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.6); transition:opacity .4s; }
.proc-coat{ position:relative; z-index:2; max-width:540px; }
.proc-coat .spray-label{ text-align:center; }
.proc-coat .spray-swatches{ justify-content:center; }

/* ---- spray-gun palette (lives in the stages section) ---- */
.spray-ui{ margin-top:32px; }
.spray-label{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.spray-dot{ width:13px; height:13px; border-radius:50%; background:var(--cur,var(--red));
  box-shadow:0 0 12px var(--cur,var(--red)); transition:background .25s, box-shadow .25s; flex:none; }
.spray-swatches{ display:flex; flex-wrap:wrap; gap:9px; max-width:420px; }
.spray-swatches button{ width:30px; height:30px; border-radius:7px; border:2px solid transparent; cursor:pointer;
  padding:0; transition:transform .2s var(--ease), border-color .2s; }
.spray-swatches button:hover{ transform:translateY(-3px) scale(1.07); }
.spray-swatches button.active{ border-color:#fff; transform:translateY(-2px); }

/* ============================================================
   COLOURS — RAL K7 Classic
   ============================================================ */
.colours{ position:relative; padding:clamp(100px,15vh,180px) 0; overflow:hidden; isolation:isolate; }
.colours-bg{ position:absolute; inset:0; z-index:0; background:url('../assets/colours-bg.webp') center/cover no-repeat; opacity:.42; }
.colours::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, var(--bg) 2%, rgba(7,11,20,.74) 24%, rgba(7,11,20,.5) 54%, rgba(7,11,20,.74) 84%, var(--bg)); }
.colours-inner{ position:relative; z-index:2; }
.colours-head{ max-width:720px; margin-bottom:46px; }
.ral-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(94px,1fr)); gap:10px; }
.ral{ aspect-ratio:1/1; border-radius:10px; position:relative; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); transition:transform .3s var(--ease), box-shadow .3s; }
.ral:hover{ transform:translateY(-4px) scale(1.05); box-shadow:0 14px 34px -12px rgba(0,0,0,.75); z-index:3; }
.ral span{ position:absolute; left:0; right:0; bottom:0; padding:5px 7px; font-family:var(--ff-mono);
  font-size:9.5px; letter-spacing:.03em; color:#fff; opacity:0; transition:opacity .3s;
  background:linear-gradient(transparent, rgba(0,0,0,.62)); }
.ral:hover span{ opacity:1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .caps{ grid-template-columns:repeat(2,1fr); }
  .apps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
}
@media (max-width:760px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav .brand small{ display:none; }
  .proc-grid{ grid-template-columns:1fr; }
  .about-grid,.contact-grid{ grid-template-columns:1fr; gap:40px; }
  .about-visual{ order:-1; }
  .caps{ grid-template-columns:1fr; }
  .apps{ grid-template-columns:repeat(2,1fr); }
  .hero h1{ font-size:clamp(3.6rem,26vw,8rem); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.18s !important; }
  .rv{ opacity:1; transform:none; }
}

/* ============================================================
   Applications — detailed technical sections
   ============================================================ */
.sec-head{ max-width:780px; margin:0 0 52px; }
.sec-head .klabel{ display:block; margin-bottom:16px; }
.sec-head h2{ font-family:var(--ff-disp); font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.04; letter-spacing:-.01em; margin:0 0 .4em; }
.sec-head .lead{ color:var(--muted); font-size:1.05rem; max-width:62ch; }

/* per-sector detail rows */
.appdetail .ad-row{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:50px; align-items:center;
  padding:48px 0; border-top:1px solid var(--line); scroll-margin-top:96px; }
.appdetail .ad-row:first-of-type{ border-top:none; padding-top:0; }
.ad-row--rev .ad-media{ order:2; }
.ad-row.ad-flash{ animation:adflash 1.7s var(--ease); }
@keyframes adflash{ 0%,12%{ background:rgba(249,190,30,.09); } 100%{ background:transparent; } }
.ad-media{ border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:var(--bg-3); }
.ad-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ad-row:hover .ad-media img{ transform:scale(1.05); }
.ad-kicker{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); }
.ad-lead{ font-family:var(--ff-disp); font-size:clamp(1.35rem,2.4vw,1.85rem); line-height:1.18;
  margin:.5em 0 1.1em; color:var(--text); max-width:24ch; }
.ad-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:24px; }
.ad-cols h4{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); margin:0 0 9px; padding-bottom:9px; border-bottom:2px solid var(--yellow); display:inline-block; }
.ad-cols p{ font-size:.92rem; color:var(--muted); line-height:1.58; }
.ad-cols b{ color:var(--text); font-weight:600; }
.ad-specs{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0; }
.ad-specs li{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.03em; color:var(--text);
  background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }

/* powder systems */
.psys{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.psys-card{ background:var(--bg-3); border:1px solid var(--line); border-radius:14px; padding:26px 24px;
  border-top:3px solid var(--c); transition:transform .4s var(--ease); }
.psys-card:hover{ transform:translateY(-5px); }
.psys-card .pc-share{ font-family:var(--ff-disp); font-size:2.1rem; font-weight:700; color:var(--c); line-height:1; filter:brightness(1.25); }
.psys-card h3{ font-size:1.08rem; margin:.45em 0 .5em; }
.psys-card p{ font-size:.88rem; color:var(--muted); line-height:1.5; }
.psys-card .pc-use{ margin-top:14px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text); }

/* QC table */
.qc-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); }
table.qc{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:660px; }
table.qc th, table.qc td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); }
table.qc thead th{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
table.qc tbody tr:last-child td{ border-bottom:none; }
table.qc tbody tr{ transition:background .25s; }
table.qc tbody tr:hover{ background:var(--glass); }
table.qc td{ color:var(--muted); }
table.qc td:first-child{ font-family:var(--ff-mono); color:var(--text); white-space:nowrap; }
table.qc td:last-child{ font-family:var(--ff-mono); color:var(--yellow); white-space:nowrap; }

/* spec chips + cert row */
.spec-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.spec-grid .chip{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.03em; color:var(--muted);
  background:var(--glass); border:1px solid var(--line); border-radius:10px; padding:12px 16px; }
.spec-grid .chip b{ color:var(--yellow); font-weight:600; }
.cert-row{ display:flex; flex-wrap:wrap; gap:12px; }
.cert-row .cert{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); border-radius:10px; padding:15px 18px; background:var(--bg-3); }
.cert-row .cert b{ color:var(--text); font-weight:600; margin-right:4px; }

@media (max-width: 860px){
  .appdetail .ad-row{ grid-template-columns:1fr; gap:24px; padding:36px 0; }
  .ad-row--rev .ad-media{ order:0; }
  .ad-cols{ grid-template-columns:1fr; gap:18px; }
  .psys{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   Contact — form rows, select, and How-it-works step cards
   ============================================================ */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field select{ width:100%; background:var(--bg-3); border:1px solid var(--line); border-radius:10px;
  padding:16px 16px; color:var(--text); font-family:var(--ff-body); font-size:.98rem; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A94A6' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; padding-right:42px;
  transition:border-color .3s, box-shadow .3s; }
.field select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,162,69,.14); }
.field select option{ background:var(--bg-2); color:var(--text); }

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step{ position:relative; }
.step-media{ aspect-ratio:4/3; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.step-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.step:hover .step-media img{ transform:scale(1.06); }
.step-n{ display:inline-block; margin-top:18px; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.2em; color:var(--yellow); }
.step h3{ font-size:1.12rem; margin:.35em 0 .45em; }
.step p{ font-size:.9rem; color:var(--muted); line-height:1.55; }

@media (max-width: 860px){
  .field-row{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:24px; }
}
@media (max-width: 480px){
  .steps{ grid-template-columns:1fr; }
}