/* ==========================================================================
   PrecisionLaserClean.ie — site styles
   ========================================================================== */

:root {
  --ink: #0d1620;
  --ink-2: #16222f;
  --ink-3: #1f2e3d;
  --text: #1c2733;
  --muted: #5b6876;
  --line: #e2e7ec;
  --bg: #ffffff;
  --bg-soft: #f4f6f8;
  --accent: #e8a33d;        /* laser gold, from the logo (on dark and as button fill) */
  --accent-strong: #9a6512; /* dark gold: text and links on white */
  --accent-soft: #fbf1de;
  --hot: #ff6a3d;           /* beam highlight */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(13, 22, 32, .06), 0 8px 24px rgba(13, 22, 32, .07);
  --max: 1160px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 750; }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 100;
}
.skip-link:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.4em; border-radius: 999px;
  font: inherit; font-weight: 650; font-size: .98rem; line-height: 1;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: #f2b85c; }
.btn-ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-outline { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-outline:hover { border-color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13, 22, 32, .92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand img { height: 56px; width: auto; }
.site-footer .brand img { height: 96px; }

.nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: block; padding: 8px 14px; border-radius: 999px;
  color: rgba(255,255,255,.78); font-weight: 550; font-size: .95rem;
}
.nav-links a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,.06); }
.nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
.nav-links .btn { margin-left: 8px; color: var(--ink); padding: .7em 1.2em; }
.nav-links .btn:hover { color: var(--ink); background: #f2b85c; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: #fff;
}
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px 16px 20px; background: var(--ink);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 14px; border-radius: var(--radius-sm); }
  .nav-links .btn { margin: 8px 0 0; justify-content: center; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 85% 20%, rgba(232,163,61,.18), transparent 60%),
    radial-gradient(600px 400px at 10% 110%, rgba(255,106,61,.10), transparent 60%),
    var(--ink);
  color: rgba(255,255,255,.82);
  padding: 96px 0 104px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--accent); }
.hero .lead { font-size: 1.18rem; max-width: 34em; margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--accent); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

.hero-points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 36px 0 0; padding: 0; list-style: none; font-size: .95rem; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.hero-points svg { width: 18px; height: 18px; color: var(--accent); flex: none; }

.hero-visual { position: relative; }


@media (max-width: 920px) {
  .hero { padding: 64px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 520px; }
}

/* Page hero (inner pages) */
.page-hero {
  background:
    radial-gradient(700px 360px at 90% 0%, rgba(232,163,61,.16), transparent 60%),
    var(--ink);
  color: rgba(255,255,255,.8);
  padding: 72px 0 64px;
}
.page-hero h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3rem); }
.page-hero p { font-size: 1.12rem; max-width: 40em; margin: 0; }

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.section .eyebrow { color: var(--accent-strong); }

@media (max-width: 700px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; }
}

/* ---------- Trust bar ---------- */
.trust { border-bottom: 1px solid var(--line); background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { padding: 28px 20px; text-align: center; border-right: 1px solid var(--line); }
.trust-item:last-child { border-right: 0; }
.trust-item strong { display: block; font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.2; }
.trust-item span { font-size: .9rem; color: var(--muted); }
@media (max-width: 700px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(2) { border-right: 0; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- Cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 920px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: transparent; }
.card p { color: var(--muted); margin-bottom: 0; }
.card .link { display: inline-block; margin-top: 16px; font-weight: 650; font-size: .95rem; }

.icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 20px;
}
.icon svg { width: 24px; height: 24px; }

/* ---------- Split / features ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .split { grid-template-columns: 1fr; gap: 40px; } }

.check-list { list-style: none; padding: 0; margin: 0 0 1.5em; }
.check-list li { position: relative; padding-left: 34px; margin-bottom: 14px; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a6512' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.check-list strong { color: var(--ink); }

.compare {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.compare table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: var(--ink); color: #fff; font-weight: 650; font-size: .85rem; letter-spacing: .02em; }
.compare thead th:nth-child(2) { color: var(--accent); }
.compare td:first-child { color: var(--muted); }
.compare td:nth-child(2) { color: var(--ink); font-weight: 600; }
.compare td:nth-child(3) { color: var(--muted); }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.step { position: relative; padding-top: 56px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-weight: 800; font-size: 1.05rem; color: var(--accent-strong);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--accent);
}
.step p { color: var(--muted); margin: 0; }
@media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Industries / tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: .92rem; font-weight: 550; color: var(--ink);
}

/* ---------- Services detail ---------- */
.service {
  display: grid; grid-template-columns: 280px 1fr; gap: 48px;
  padding: 56px 0; border-bottom: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.service:last-child { border-bottom: 0; }
.service-aside .icon { width: 56px; height: 56px; }
.service-aside h2 { font-size: 1.55rem; }
.service-aside .kicker { font-size: .85rem; font-weight: 700; color: var(--accent-strong); text-transform: uppercase; letter-spacing: .1em; }
.service-body > p { font-size: 1.05rem; }
.service-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
.service-cols h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 12px; }
.service-cols ul { margin: 0; padding-left: 1.1em; }
.service-cols li { margin-bottom: 6px; }
@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: 16px; padding: 44px 0; }
  .service-cols { grid-template-columns: 1fr; }
}

.service-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.service-nav a {
  padding: 8px 14px; border-radius: 999px; font-size: .9rem; font-weight: 600;
  color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.18);
}
.service-nav a:hover { border-color: var(--accent); color: #fff; text-decoration: none; }

/* ---------- About ---------- */
.stat-panel {
  background: var(--ink); color: rgba(255,255,255,.8); border-radius: var(--radius);
  padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  position: relative; overflow: hidden;
}
.stat-panel::after {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(232,163,61,.35), transparent 65%);
}
.stat-panel strong { display: block; font-size: 2.2rem; color: #fff; letter-spacing: -.03em; line-height: 1.1; }
.stat-panel span { font-size: .92rem; }

.values .card h3 { display: flex; align-items: center; gap: 10px; }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(232,163,61,.28), transparent 60%),
    var(--ink-2);
  color: rgba(255,255,255,.82); border-radius: 20px; padding: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { margin: 0; max-width: 36em; }
.cta-band > div { flex: 1 1 320px; }
.cta-badge { width: 120px; height: 120px; flex: none; }
@media (max-width: 640px) { .cta-band { padding: 36px 24px; } .cta-badge { width: 88px; height: 88px; } }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 20px 0;
}
.faq summary {
  cursor: pointer; list-style: none; font-weight: 650; color: var(--ink); font-size: 1.05rem;
  display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-strong); font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: 12px 0 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: 1fr; } }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 36px; box-shadow: var(--shadow); }
@media (max-width: 560px) { .form-card { padding: 24px 20px; } }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: 12px 14px; border: 1px solid #cfd6dd; border-radius: var(--radius-sm); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232,163,61,.15);
}
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #d64545; }
.field .error { display: none; color: #c53030; font-size: .85rem; margin-top: 6px; }
.field.invalid .error { display: block; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); margin-bottom: 22px; }
.consent input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.hp { position: absolute; left: -9999px; }

.form-status { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: .95rem; }
.form-status.success { display: block; background: var(--accent-soft); color: #6b4508; }
.form-status.error { display: block; background: #fdecec; color: #a12a2a; }

.contact-info { display: grid; gap: 16px; }
.info-item { display: flex; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.info-item .icon { margin: 0; flex: none; }
.info-item h3 { font-size: 1rem; margin-bottom: 2px; }
.info-item p { margin: 0; color: var(--muted); font-size: .95rem; }
.info-item a { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.65); padding: 64px 0 28px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 16px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Motion ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Hero laser: a vertical laser line sweeps left to right. The rust layer is clipped from the
   left edge to the line, so the logo underneath is revealed behind it. The beam and the clip
   share one duration and one set of keyframe percentages, so the cleaned edge stays under the line.
   Cycle: 0-4% rusted, 4-58% sweep, 58-86% logo shown, 86-97% rust returns. */
.laser-plate { position: relative; aspect-ratio: 1.3; border-radius: 22px; overflow: hidden; background: #16222f; box-shadow: 0 30px 60px rgba(0,0,0,.35); isolation: isolate; }
.laser-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-rust { animation: lp-rust 11s linear infinite; }
.lp-beam { position: absolute; top: 0; bottom: 0; left: 0; width: 0; animation: lp-beam 11s linear infinite; }
.lp-head { position: absolute; top: 0; left: -22px; width: 44px; height: 14px; border-radius: 0 0 8px 8px; background: #1f2e3d; border: 2px solid var(--accent); border-top: 0; box-shadow: 0 0 14px rgba(255,106,61,.7); }
.lp-line { position: absolute; top: 12px; bottom: 0; left: -2px; width: 4px; border-radius: 2px;
  background: linear-gradient(#ffd9a0, #fff 12%, #fff 88%, #ffd9a0);
  box-shadow: 0 0 6px 2px #fff, 0 0 18px 6px var(--hot), 0 0 48px 16px rgba(255,106,61,.55); animation: lp-flicker .15s linear infinite; }
.lp-spark { position: absolute; left: -2px; width: 5px; height: 5px; border-radius: 50%; background: #ffc27a; box-shadow: 0 0 8px 2px var(--hot); opacity: 0; animation: lp-spark .9s ease-out infinite; }
.lp-spark.s1 { top: 14%; animation-delay: -.1s; --dx: 26px; --dy: -22px; }
.lp-spark.s2 { top: 30%; animation-delay: -.5s; --dx: 34px; --dy: 18px; }
.lp-spark.s3 { top: 46%; animation-delay: -.3s; --dx: 22px; --dy: -30px; }
.lp-spark.s4 { top: 60%; animation-delay: -.7s; --dx: 38px; --dy: 24px; }
.lp-spark.s5 { top: 76%; animation-delay: -.2s; --dx: 28px; --dy: -16px; }
.lp-spark.s6 { top: 90%; animation-delay: -.6s; --dx: 20px; --dy: 12px; }
@keyframes lp-rust {
  0%, 4%      { clip-path: inset(0 0 0 0); opacity: 1; }
  58%, 84.9%  { clip-path: inset(0 0 0 100%); opacity: 1; }
  85%         { clip-path: inset(0 0 0 0); opacity: 0; }
  97%, 100%   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes lp-beam {
  0%, 4%      { left: 0; opacity: 1; }
  58%         { left: 100%; opacity: 1; }
  60%, 100%   { left: 100%; opacity: 0; }
}
@keyframes lp-flicker { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes lp-spark { 0% { opacity: 0; transform: translate(0,0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .lp-rust, .lp-beam, .lp-line, .lp-spark { animation: none; }
  .lp-rust, .lp-beam { display: none; } /* static pose: fully cleaned, logo shown */
  .btn, .card { transition: none; }
}

@media (max-width: 480px) {
  .brand { font-size: 1rem; gap: 8px; }
  .brand img { height: 46px; }
  .stat-panel { padding: 28px 24px; gap: 24px 20px; }
  .stat-panel strong { font-size: 1.6rem; }
}