/* ==========================================================================
   R-Tech Developments Ltd — Stylesheet
   Design tokens approved by Mike (mockup sign-off, 2026-07-22).
   Do not change palette/type without re-confirming with client.
   ========================================================================== */

:root{
  --graphite:#1B1A18;
  --panel:#242220;
  --panel-light:#2E2B27;
  --offwhite:#F3EFE6;
  --red:#D6222B;
  --red-dark:#A81A21;
  --amber:#F0A800;
  --steel:#8C8780;
  --steel-line: rgba(243,239,230,0.14);
  --chamfer: 14px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--graphite);
  color:var(--offwhite);
  font-family:'Barlow',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

.eyebrow{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--amber);
}
h1,h2,h3{
  font-family:'Anton',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.02;
  margin:0;
}
.chamfer{
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

.photo-slot{
  position:relative;
  width:100%;
  height:100%;
  background:
    repeating-linear-gradient(135deg, rgba(243,239,230,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #34312C, #201E1B);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--steel-line);
}
.photo-slot::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 30% 20%, rgba(214,34,43,0.10), transparent 55%);
}
.photo-slot .slot-icon{
  width:34px;height:34px;stroke:var(--steel);fill:none;stroke-width:1.4;opacity:.7;
}
.photo-slot .slot-label{
  position:absolute;
  bottom:10px; left:10px; right:10px;
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  letter-spacing:0.04em;
  color:var(--steel);
  display:flex; justify-content:space-between; gap:8px;
}
.photo-slot .slot-label span:last-child{color:var(--amber);}
.photo-slot .slot-tag{
  position:absolute; top:10px; left:10px;
  font-family:'Space Mono',monospace;
  font-size:10px; letter-spacing:.08em;
  background:rgba(0,0,0,0.45);
  padding:3px 8px;
  color:var(--offwhite);
  border:1px solid var(--steel-line);
}
.photo-slot-center{display:flex;flex-direction:column;align-items:center;gap:8px;}
.photo-slot-center span{
  font-family:'Space Mono',monospace;
  font-size:10.5px;
  color:var(--steel);
  text-align:center;
  max-width:70%;
  line-height:1.4;
}

/* ================= NAV ================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(27,26,24,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--steel-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 28px;
}
.nav-brand{display:flex; align-items:center; gap:10px;}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--offwhite);
  opacity:.85;
  position:relative;
  padding-bottom:4px;
}
.nav-links a:hover{opacity:1;}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px; background:var(--red);
  transition:right .25s ease;
}
.nav-links a:hover::after{right:0;}
.btn{
  font-family:'Space Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:11px 20px;
  display:inline-block;
  cursor:pointer;
  border:none;
}
.btn-primary{
  background:var(--red);
  color:var(--offwhite);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn-primary:hover{background:var(--red-dark);}
.btn-ghost{
  background:transparent;
  color:var(--offwhite);
  border:1px solid var(--steel-line);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.btn-ghost:hover{border-color:var(--amber); color:var(--amber);}
@media (max-width:860px){ .nav-links{display:none;} }

/* ================= HERO ================= */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  padding:0 28px 64px;
  overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-stripe{
  position:absolute; top:0; right:-10%;
  width:70%; height:100%;
  background:linear-gradient(100deg, transparent 42%, var(--red) 42.6%, var(--red) 44%, transparent 44.6%, transparent 55%, var(--amber) 55.4%, var(--amber) 56%, transparent 56.6%);
  opacity:.9;
  z-index:1;
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; max-width:760px;}
.hero h1{
  font-size:clamp(42px, 6.4vw, 88px);
  color:var(--offwhite);
  margin-top:14px;
}
.hero h1 em{ font-style:normal; color:var(--red); }
.hero p{
  font-size:18px; line-height:1.55; color:#D9D4C8;
  max-width:520px; margin:20px 0 30px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

/* ---- ticker ---- */
.ticker-wrap{
  border-top:1px solid var(--steel-line);
  border-bottom:1px solid var(--steel-line);
  background:var(--panel);
  overflow:hidden;
  white-space:nowrap;
}
.ticker{
  display:inline-block;
  padding:12px 0;
  font-family:'Space Mono',monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  color:var(--steel);
  animation: ticker 32s linear infinite;
}
.ticker span{margin:0 22px; color:var(--offwhite);}
.ticker span.amber{color:var(--amber);}
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ================= SECTION SHELL ================= */
section{padding:96px 28px;}
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(32px,4vw,52px); margin-top:10px; color:var(--offwhite);}
.section-head p{color:var(--steel); font-size:16px; margin-top:14px; line-height:1.6;}
.wrap{max-width:1200px; margin:0 auto;}

/* ================= BAYS ================= */
.bays{background:var(--graphite);}
.bay-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--steel-line);
  border:1px solid var(--steel-line);
}
.bay{
  background:var(--panel);
  padding:30px 24px 34px;
  position:relative;
  transition:background .25s ease;
}
.bay:hover{background:var(--panel-light);}
.bay-num{
  font-family:'Space Mono',monospace;
  font-size:12px; color:var(--amber); letter-spacing:.1em;
}
.bay h3{font-size:22px; margin:14px 0 12px; color:var(--offwhite); line-height:1.15;}
.bay p{font-size:14.5px; color:var(--steel); line-height:1.55; margin:0;}
.bay-mark{
  position:absolute; top:26px; right:22px;
  width:20px; height:20px; opacity:.5;
}
@media (max-width:900px){ .bay-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .bay-grid{grid-template-columns:1fr;} }

/* ================= SLIDER (signature) ================= */
.transform-section{background:var(--panel);}
.slider-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border:1px solid var(--steel-line);
  overflow:hidden;
  cursor:ew-resize;
  background:var(--panel);
}
.slider-layer{position:absolute; inset:0;}
.slider-after{clip-path: inset(0 0 0 50%);}
.slider-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(1.03) contrast(1.02);
}
.slider-before .slot-tag, .slider-after .slot-tag{font-size:11px;}
.slider-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:0; transform:translateX(-50%);
  pointer-events:none;
}
.slider-handle::before{
  content:"";
  position:absolute; top:0; bottom:0; left:-1px;
  width:2px; background:var(--offwhite);
}
.slider-grip{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:52px; height:52px;
  background:var(--red);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,0.45);
}
.slider-grip svg{width:24px; height:24px; stroke:var(--offwhite); fill:none; stroke-width:2;}
.slider-range{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:ew-resize; margin:0;
}
.slider-caption{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px; flex-wrap:wrap; gap:10px;
}
.plate{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em;
  color:var(--offwhite); border:1px solid var(--steel-line); padding:6px 12px;
  background:var(--graphite);
}
.slider-hint{font-family:'Space Mono',monospace; font-size:11.5px; color:var(--steel); letter-spacing:.06em;}

/* ================= GALLERY ================= */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.gallery-item{aspect-ratio:4/3;}
@media (max-width:900px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr;} }

/* ================= VAN CONVERSION FEATURE ================= */
.feature{
  background:var(--panel);
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:0;
  align-items:stretch;
}
.feature-media{min-height:460px;}
.feature-copy{
  padding:72px 56px;
  display:flex; flex-direction:column; justify-content:center;
}
.feature-copy h2{font-size:clamp(30px,3.6vw,46px); margin-top:12px;}
.feature-copy p{color:var(--steel); font-size:16px; line-height:1.65; margin:20px 0 26px; max-width:460px;}
.feature-list{display:flex; flex-direction:column; gap:12px;}
.feature-list li{
  font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.03em;
  color:var(--offwhite);
  display:flex; align-items:center; gap:10px;
}
.feature-list li::before{content:""; width:8px; height:8px; background:var(--red);}
@media (max-width:900px){
  .feature{grid-template-columns:1fr;}
  .feature-media{min-height:300px;}
  .feature-copy{padding:48px 26px;}
}

/* ================= SPRAY BOOTH ================= */
.booth{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center;
}
.booth-media{aspect-ratio:4/3;}
.booth-copy h2{font-size:clamp(30px,3.6vw,46px);}
.booth-copy p{color:var(--steel); font-size:16px; line-height:1.65; margin:18px 0 30px; max-width:480px;}
.spec-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 26px;
  border-top:1px solid var(--steel-line);
  padding-top:22px;
}
.spec-list div{
  font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.04em; color:var(--steel);
}
.spec-list div b{display:block; color:var(--offwhite); font-size:13.5px; margin-bottom:4px; letter-spacing:.02em;}
@media (max-width:860px){ .booth{grid-template-columns:1fr;} .spec-list{grid-template-columns:1fr 1fr;} }

/* ================= REVIEWS ================= */
.reviews{background:var(--panel);}
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.review-card{
  background:var(--graphite);
  border:1px solid var(--steel-line);
  padding:26px 24px;
  position:relative;
}
.review-card .stars{color:var(--amber); font-size:14px; letter-spacing:2px;}
.review-card p{
  font-size:15px; line-height:1.6; color:#D9D4C8; margin:14px 0 18px;
  min-height:72px;
}
.review-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Space Mono',monospace; font-size:11px; color:var(--steel); letter-spacing:.04em;
  border-top:1px solid var(--steel-line); padding-top:12px;
}
.review-placeholder-tag{
  position:absolute; top:12px; right:12px;
  font-family:'Space Mono',monospace; font-size:9.5px; color:var(--red);
  border:1px solid var(--red); padding:2px 6px; letter-spacing:.05em;
}
@media (max-width:860px){ .review-grid{grid-template-columns:1fr;} }

/* ================= CTA BAND ================= */
.cta-band{
  background:var(--red);
  padding:90px 28px;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(120deg, rgba(0,0,0,0.06) 0 24px, transparent 24px 48px);
  pointer-events:none;
}
.cta-inner{
  max-width:900px; margin:0 auto; text-align:left;
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-inner h2{font-size:clamp(30px,4vw,50px); color:var(--graphite);}
.cta-inner .eyebrow{color:var(--graphite); opacity:.65;}
.cta-inner p{color:rgba(27,26,24,0.75); margin-top:10px; font-size:16px;}
.cta-band .btn-primary{background:var(--graphite); color:var(--offwhite);}
.cta-band .btn-primary:hover{background:#000;}

/* ================= FOOTER ================= */
footer{
  padding:52px 28px 30px;
  border-top:1px solid var(--steel-line);
}
.footer-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:30px; margin-bottom:36px;
}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-cols{display:flex; gap:60px; flex-wrap:wrap;}
.footer-col h4{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.1em;
  color:var(--amber); text-transform:uppercase; margin:0 0 12px;
}
.footer-col a, .footer-col span{
  display:block; font-size:14px; color:var(--steel); margin-bottom:8px;
}
.footer-col a:hover{color:var(--offwhite);}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'Space Mono',monospace; font-size:11px; color:var(--steel);
  border-top:1px solid var(--steel-line); padding-top:20px;
}

::selection{ background:var(--red); color:var(--offwhite); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}