/* ========================================
   Laser Projector Repair UK - Main Stylesheet
   Hand-coded CSS3 | No frameworks | No jQuery
   ======================================== */

/* ---- CSS Custom Properties ---- */
:root {
  --cw: 1550px;
  --c1: #B91C1C;
  --c1h: #991B1B;
  --c2: #0F172A;
  --c3: #475569;
  --c4: #94A3B8;
  --c5: #E2E8F0;
  --c6: #F1F5F9;
  --c7: #F8F9FA;
  --c8: #ffffff;
  --c9: #22C55E;
  --c10: #F59E0B;
  --ff: "Geist Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fm: "Geist Mono", "SF Mono", "Fira Code", monospace;
  --fs-xs: 0.625rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.5rem;
  --fs-4xl: 3.5rem;
  --lh: 1.65;
  --rad: 0.75rem;
  --tr: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:var(--ff); font-size:var(--fs-sm); line-height:var(--lh);
  color:var(--c3); background:var(--c7);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--c1); text-decoration:none; transition:var(--tr); }
a:hover { color:var(--c1h); text-decoration:underline; }
a:focus-visible { outline:2px solid var(--c1); outline-offset:2px; border-radius:2px; }
button:focus-visible { outline:2px solid var(--c1); outline-offset:2px; border-radius:2px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--c1) !important; box-shadow:0 0 0 3px rgba(185,28,28,0.15); }
skip-link:focus { top:0; }
ul, ol { list-style:none; }

/* ---- Skip Link ---- */
.skip-link {
  position:absolute; top:-100%; left:0; z-index:9999;
  background:var(--c2); color:#fff; padding:8px 16px;
  font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em;
}
.skip-link:focus { top:0; text-decoration:none; }

/* ---- Container ---- */
.container { max-width:var(--cw); margin:0 auto; padding:0 24px; }

/* ---- Typography ---- */
h1, h2, h3, h4 { color:var(--c2); line-height:1.1; letter-spacing:-0.02em; }
h1 { font-size:var(--fs-4xl); }
h2 { font-size:var(--fs-3xl); }
h3 { font-size:var(--fs-xl); }
.label { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.15em; color:var(--c4); }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 36px;
  background:var(--c1); color:#fff !important; font-family:var(--fm); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:0.06em; border:none; border-radius:100px;
  cursor:pointer; transition:var(--tr); text-decoration:none;
}
.btn:hover { background:var(--c1h); transform:scale(1.03); text-decoration:none; color:#fff; }
.btn-white { background:#fff; color:var(--c1); }
.btn-white:hover { background:var(--c7); }
.btn-sm { padding:10px 24px; }

/* ---- Header ---- */
.header { position:sticky; top:0; z-index:100; }
.hr1 { background:var(--c2); color:#fff; height:32px; }
.hr1 .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.hr1-phones { display:flex; gap:20px; }
.hr1-phones a { color:rgba(255,255,255,0.7); font-family:var(--fm); font-size:var(--fs-xs); text-decoration:none; letter-spacing:0.04em; }
.hr1-phones a:hover { color:#fff; }
.hr1-phones svg { color:var(--c1); width:12px; height:12px; margin-right:4px; }
.hr1-links { display:flex; align-items:center; gap:12px; }
.hr1-links a { color:rgba(255,255,255,0.5); font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.04em; }
.hr1-links a:hover { color:#fff; text-decoration:none; }
.hr1-links span { color:rgba(255,255,255,0.15); }

.hr2 { background:var(--c6); border-bottom:1px solid var(--c5); height:30px; }
.hr2 .container { display:flex; align-items:center; justify-content:flex-end; height:100%; gap:12px; }
.hr2 a { color:var(--c3); font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.04em; }
.hr2 a:hover { color:var(--c1); text-decoration:none; }
.hr2 span { color:#CBD5E1; }

.hr3 { background:#fff; border-bottom:1px solid var(--c5); height:56px; }
.hr3 .container { display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo { display:flex; align-items:center; gap:8px; }
.logo-mark { font-size:1.25rem; font-weight:700; color:var(--c2); }
.logo-text { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--c3); }
.nav-main { display:flex; align-items:center; gap:28px; }
.nav-main a { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--c2); position:relative; padding:2px 0; text-decoration:none; }
.nav-main a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--c1); transition:var(--tr); }
.nav-main a:hover::after { width:100%; }
.nav-main a:hover { text-decoration:none; color:var(--c2); }

/* ---- Megamenu ---- */
.mega-wrap { position:relative; display:inline-flex; align-items:center; }
.mega-trigger { cursor:default; user-select:none; font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--c2); padding:2px 0; }
.mega-trigger::after { content:' ▾'; font-size:10px; opacity:0.5; margin-left:2px; }
.megamenu { display:none; position:absolute; top:100%; left:0; z-index:200; background:#fff; border:1px solid var(--c5); border-radius:0 0 var(--rad) var(--rad); box-shadow:0 16px 48px rgba(0,0,0,0.12); min-width:520px; padding:24px; margin-top:0; }
.mega-wrap:hover .megamenu, .mega-wrap:focus-within .megamenu { display:block; }
.megamenu-inner { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.megamenu-inner.two-col { grid-template-columns:repeat(2, 1fr); }
.megamenu-inner.one-col { grid-template-columns:1fr; }
.megamenu a { display:block; padding:6px 8px; border-radius:4px; font-family:var(--ff) !important; font-size:var(--fs-sm) !important; text-transform:none !important; letter-spacing:0 !important; color:var(--c3) !important; transition:var(--tr); }
.megamenu a::after { display:none !important; }
.megamenu a:hover { background:var(--c6); color:var(--c1) !important; text-decoration:none; }

/* ---- Hamburger ---- */
.hamburger { display:none; flex-direction:column; gap:4px; background:none; border:none; cursor:pointer; padding:6px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--c2); transition:var(--tr); }

/* ---- Hero ---- */
.hero { position:relative; min-height:400px; height:550px; overflow:hidden; background:#000; }
.hero-canvas { position:absolute; inset:0; z-index:0; }
.hero-canvas canvas { width:100%; height:100%; display:block; }
.hero .container { position:relative; z-index:1; height:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding-top:60px; }
.hero-left { padding-right:24px; }
.hero-label { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.15em; color:rgba(255,255,255,0.6); margin-bottom:16px; }
.hero-title { font-size:var(--fs-4xl); font-weight:700; color:#fff; line-height:1.1; letter-spacing:-0.02em; text-shadow:0 2px 30px rgba(0,0,0,0.6); max-width:600px; }
.hero-desc { font-size:var(--fs-lg); color:rgba(255,255,255,0.8); margin-top:16px; max-width:480px; text-shadow:0 2px 20px rgba(0,0,0,0.5); }
.hero .btn { margin-top:24px; }
.hero-right { display:flex; align-items:center; justify-content:center; height:100%; }
.hero-img { max-height:420px; width:auto; border-radius:var(--rad); box-shadow:0 20px 60px rgba(0,0,0,0.4); object-fit:contain; }

/* ---- Marquee ---- */
.marquee { background:var(--c2); padding:20px 0; overflow:hidden; }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 35s linear infinite; }
.marquee-track span { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.4); margin:0 40px; }
.marquee-track strong { color:rgba(255,255,255,0.7); }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ---- Section Base ---- */
.section { padding:100px 0; }
.section-alt { background:#fff; }
.section-heading { text-align:center; margin-bottom:60px; }
.section-heading h2 { margin-top:12px; }
.section-heading p { max-width:700px; margin:16px auto 0; font-size:var(--fs-base); }

/* ---- Grid Systems ---- */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

/* ---- Cards ---- */
.card { background:#fff; border:1px solid var(--c5); border-radius:var(--rad); padding:40px; transition:var(--tr); }
.card:hover { box-shadow:0 8px 30px rgba(0,0,0,0.06); border-color:rgba(185,28,28,0.15); }
.card-icon { width:40px; height:40px; border-radius:8px; background:rgba(185,28,28,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--c1); }
.card h3 { margin-bottom:8px; }
.card .label { margin-bottom:12px; display:block; }

/* ---- Diagnostic Panel ---- */
.diag-panel { background:var(--c2); border-radius:var(--rad); padding:36px; color:#fff; }
.diag-status { font-family:var(--fm); font-size:var(--fs-sm); color:var(--c9); }
.diag-metric { margin-top:16px; }
.diag-metric-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.diag-metric-header span:first-child { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em; color:var(--c4); }
.diag-metric-header span:last-child { font-family:var(--fm); font-size:var(--fs-sm); color:#fff; }
.diag-bar { height:2px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.diag-bar-fill { height:100%; border-radius:2px; transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }

/* ---- Testimonials ---- */
.testimonials { background:var(--c6); }
.testi-card { background:#fff; border-radius:var(--rad); padding:32px; }
.testi-stars { color:var(--c10); margin-bottom:12px; font-size:var(--fs-sm); }
.testi-text { font-style:italic; color:var(--c3); margin-bottom:16px; line-height:1.6; }
.testi-author { font-weight:600; color:var(--c2); font-size:var(--fs-sm); }
.testi-location { font-family:var(--fm); font-size:var(--fs-xs); color:var(--c4); }

/* ---- Coverage ---- */
.coverage-card { background:#fff; border-radius:var(--rad); padding:48px; text-align:center; }
.coverage-icon { width:48px; height:48px; border-radius:50%; background:rgba(185,28,28,0.08); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; color:var(--c1); }

/* ---- CTA Band ---- */
.cta-band { background:var(--c1); padding:80px 0; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,0.85); margin-top:16px; font-size:var(--fs-lg); }
.cta-band .btn { margin-top:24px; }
.cta-band .phone { font-family:var(--fm); font-size:var(--fs-sm); color:rgba(255,255,255,0.7); margin-top:16px; }

/* ---- Footer ---- */
.footer { background:var(--c2); padding:80px 0 32px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer-logo { font-size:1.25rem; font-weight:700; color:#fff; margin-bottom:4px; }
.footer-tag { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.5); margin-bottom:16px; }
.footer p { font-size:var(--fs-sm); color:rgba(255,255,255,0.5); margin-bottom:8px; }
.footer a { font-size:var(--fs-sm); color:rgba(255,255,255,0.6); text-decoration:none; display:block; padding:3px 0; }
.footer a:hover { color:#fff; text-decoration:none; }
.footer-heading { font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em; color:#fff; margin-bottom:16px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-bottom span { font-family:var(--fm); font-size:var(--fs-xs); color:rgba(255,255,255,0.4); }
.footer-admin { text-align:center; margin-top:16px; }
.footer-admin a { display:inline; font-family:var(--fm); font-size:var(--fs-xs); color:rgba(255,255,255,0.3); }
.footer-admin a:hover { color:rgba(255,255,255,0.6); }

/* ---- Breadcrumbs ---- */
.breadcrumbs { background:var(--c6); padding:12px 0; border-bottom:1px solid var(--c5); }
.breadcrumbs nav { font-size:var(--fs-xs); color:var(--c4); }
.breadcrumbs a { color:var(--c3); text-decoration:none; }
.breadcrumbs a:hover { color:var(--c1); text-decoration:underline; }
.breadcrumbs span[aria-current="page"] { color:var(--c2); font-weight:500; }
.breadcrumbs .sep { margin:0 6px; color:var(--c5); }

/* ---- Forms ---- */
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.1em; color:var(--c4); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:12px 16px; background:var(--c7); border:1px solid var(--c5); border-radius:var(--rad);
  font-family:var(--ff); font-size:var(--fs-sm); color:var(--c2); transition:var(--tr);
}
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.location-buttons { display:flex; gap:12px; }
.location-btn { flex:1; padding:12px; border-radius:var(--rad); font-family:var(--ff); font-size:var(--fs-sm); cursor:pointer; border:1px solid var(--c5); background:var(--c7); color:var(--c3); transition:var(--tr); }
.location-btn.active, .location-btn:hover { background:var(--c1); color:#fff; border-color:var(--c1); }
.honeypot { position:absolute; left:-9999px; opacity:0; }
.consent { display:flex; align-items:flex-start; gap:8px; margin:16px 0; }
.consent input { margin-top:3px; }
.consent label { font-size:var(--fs-xs); color:var(--c3); line-height:1.5; }

/* ---- Toast ---- */
.toast { position:fixed; top:120px; right:24px; padding:16px 24px; border-radius:var(--rad); font-size:var(--fs-sm); z-index:200; transform:translateX(150%); transition:transform 0.4s ease; max-width:400px; }
.toast.show { transform:translateX(0); }
.toast-success { background:#DCFCE7; color:#166534; border:1px solid #BBF7D0; }
.toast-error { background:#FEE2E2; color:#991B1B; border:1px solid #FECACA; }

/* ---- FAQ Accordion ---- */
.accordion-item { border-bottom:1px solid var(--c5); }
.accordion-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; padding:20px 0; background:none; border:none; cursor:pointer; text-align:left; font-family:var(--ff); font-size:var(--fs-base); color:var(--c2); font-weight:500; }
.accordion-trigger:hover { color:var(--c1); }
.accordion-trigger svg { transition:transform 0.3s ease; flex-shrink:0; margin-left:16px; }
.accordion-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.accordion-panel { max-height:0; overflow:hidden; transition:max-height 0.3s ease, opacity 0.3s ease; opacity:0; }
.accordion-panel.open { max-height:300px; opacity:1; }
.accordion-panel p { padding-bottom:20px; color:var(--c3); line-height:1.6; font-size:var(--fs-sm); }

/* ---- Accessibility Widget ---- */
.a11y-btn { position:fixed; bottom:24px; left:24px; z-index:100; width:48px; height:48px; border-radius:50%; background:var(--c2); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.15); transition:var(--tr); font-size:20px; }
.a11y-btn:hover { background:var(--c1); }
.a11y-panel { position:fixed; bottom:84px; left:24px; z-index:100; width:280px; background:#fff; border-radius:var(--rad); box-shadow:0 8px 32px rgba(0,0,0,0.12); border:1px solid var(--c5); overflow:hidden; }
.a11y-panel h4 { padding:16px; border-bottom:1px solid var(--c5); font-size:var(--fs-sm); display:flex; align-items:center; justify-content:space-between; margin:0; }
.a11y-panel h4 button { background:none; border:none; cursor:pointer; color:var(--c4); padding:4px; font-size:var(--fs-sm); }
.a11y-options { padding:16px; }
.a11y-opt { width:100%; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--rad); border:1px solid transparent; background:var(--c7); margin-bottom:8px; cursor:pointer; font-family:var(--ff); font-size:var(--fs-sm); color:var(--c3); transition:var(--tr); }
.a11y-opt:hover { border-color:var(--c5); }
.a11y-opt.active { background:rgba(185,28,28,0.08); border-color:rgba(185,28,28,0.2); color:var(--c1); font-weight:500; }

/* Accessibility modes */
body.high-contrast { filter:contrast(1.5); }
body.high-contrast * { background-color:#000 !important; color:#ff0 !important; border-color:#ff0 !important; }
body.high-contrast a { color:#0ff !important; text-decoration:underline !important; }
body.high-contrast img { filter:contrast(1.2) brightness(1.1); }
body.grayscale { filter:grayscale(100%); }
body.underline-links a { text-decoration:underline !important; }
body.underline-links a:hover { text-decoration:underline !important; }

/* ---- Cookie Banner ---- */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:90; background:#fff; border-top:1px solid var(--c5); box-shadow:0 -4px 20px rgba(0,0,0,0.08); }
.cookie-banner .container { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; gap:24px; }
.cookie-text p { font-size:var(--fs-sm); color:var(--c2); }
.cookie-text p small { font-size:var(--fs-xs); color:var(--c4); }
.cookie-text a { color:var(--c1); text-decoration:underline; cursor:pointer; }
.cookie-actions { display:flex; gap:8px; flex-shrink:0; }
.cookie-btn { padding:8px 16px; border-radius:100px; font-family:var(--fm); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.04em; cursor:pointer; border:1px solid var(--c5); background:var(--c7); color:var(--c3); transition:var(--tr); }
.cookie-btn:hover { border-color:var(--c1); color:var(--c1); }
.cookie-btn-primary { background:var(--c1); color:#fff; border-color:var(--c1); }
.cookie-btn-primary:hover { background:var(--c1h); color:#fff; }
.cookie-close { background:none; border:none; cursor:pointer; color:var(--c4); padding:4px; margin-left:4px; }

/* ---- Responsive: 900px breakpoint ---- */
@media (max-width:900px) {
  .hamburger { display:flex; }
  .nav-main { display:none; position:absolute; top:118px; left:0; right:0; background:#fff; border-bottom:1px solid var(--c5); box-shadow:0 8px 24px rgba(0,0,0,0.08); padding:16px 24px; flex-direction:column; gap:4px; }
  .nav-main.open { display:flex; }
  .nav-main a { padding:10px 0; font-size:var(--fs-sm); text-transform:none; letter-spacing:0; border-bottom:1px solid var(--c5); }
  .nav-main a::after { display:none; }
  .nav-main .btn { margin-top:8px; text-align:center; justify-content:center; }
  .mega-wrap { width:100%; }
  .megamenu { display:none; position:static; min-width:auto; box-shadow:none; border:none; border-left:3px solid var(--c5); border-radius:0; padding:8px 16px; margin:4px 0; background:var(--c7); }
  .mega-wrap.mega-open .megamenu { display:block; }
  .megamenu-inner, .megamenu-inner.two-col, .megamenu-inner.one-col { grid-template-columns:1fr 1fr; gap:4px; }
  .megamenu a { padding:6px 8px; font-size:var(--fs-xs) !important; border-bottom:none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .hero .container { grid-template-columns:1fr; }
  .hero-right { display:none; }
  .hero-title { font-size:var(--fs-3xl); }
  .section { padding:60px 0; }
  .form-row { grid-template-columns:1fr; }
  .cookie-banner .container { flex-direction:column; align-items:flex-start; }
  .hr1-links { display:none; }
  .hr2 { display:none; }
}

@media (max-width:600px) {
  h1 { font-size:var(--fs-3xl); }
  h2 { font-size:var(--fs-2xl); }
  .footer-grid { grid-template-columns:1fr; }
  .card { padding:24px; }
}

/* ---- High Contrast / Accessibility modes ---- */
body.high-contrast { filter:contrast(1.3); }
body.high-contrast img, body.high-contrast video { filter:contrast(1.3); }
body.grayscale { filter:grayscale(1); }
body.underline-links a { text-decoration:underline !important; }