/* ==========================================================================
   Laser Fume Solutions - site stylesheet
   A Profile Cutting Systems Group company
   No external dependencies. Safe to edit.
   ========================================================================== */

:root{
  --ink:#0e1319;
  --ink-2:#18212b;
  --ink-3:#243140;
  --slate:#5a6875;
  --slate-2:#8a97a3;
  --line:#dde3e9;
  --line-dk:#2c3947;
  --mist:#f4f7f9;
  --paper:#ffffff;
  --accent:#e35205;
  --accent-dk:#b84104;
  --accent-soft:#fff2ea;
  --teal:#0f7d8c;
  --warn:#fdf6e3;
  --warn-line:#e8d9a8;
  --maxw:1140px;
  --radius:6px;
  --shadow:0 1px 2px rgba(14,19,25,.06), 0 6px 20px rgba(14,19,25,.06);
  --font:-apple-system,BlinkMacSystemFont,"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); color:var(--ink);
  background:var(--paper); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:2px}
a:hover{color:var(--accent)}
h1,h2,h3,h4{line-height:1.2; margin:0 0 .5em; font-weight:700; letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.4vw,3.05rem)}
h2{font-size:clamp(1.5rem,2.9vw,2.05rem); margin-top:0}
h3{font-size:1.18rem}
h4{font-size:1rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate)}
p,ul,ol{margin:0 0 1.1em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
small{font-size:.85rem}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:800px; margin:0 auto; padding:0 22px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:8px; top:8px; z-index:999; background:#fff; padding:10px 16px; border:2px solid var(--accent)}

/* ---------- Header ---------- */
.topbar{background:var(--ink); color:#c3ced9; font-size:.83rem}
.topbar .wrap{display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; justify-content:space-between; padding-top:7px; padding-bottom:7px}
.topbar a{color:#fff; text-decoration:none; font-weight:600}
.topbar a:hover{color:var(--accent)}
.topbar .parent{color:var(--slate-2)}

.masthead{background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{flex:0 0 auto}
.brand .name{font-weight:800; font-size:1.16rem; letter-spacing:-.03em; line-height:1.1; text-transform:uppercase}
.brand .name span{display:block; font-size:.6rem; font-weight:600; letter-spacing:.05em; color:var(--slate); text-transform:uppercase; margin-top:3px}

nav.main{flex:0 0 auto}
nav.main ul{display:flex; gap:1px; list-style:none; margin:0; padding:0; flex-wrap:wrap}
nav.main a{
  display:block; padding:9px 10px; text-decoration:none; color:var(--ink-2);
  font-weight:600; font-size:.885rem; border-radius:var(--radius);
}
nav.main a:hover{background:var(--mist); color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--accent-dk); background:var(--accent-soft)}
nav.main .cta{background:var(--accent); color:#fff !important; margin-left:5px; padding-left:13px; padding-right:13px}
nav.main .cta:hover{background:var(--accent-dk); color:#fff !important}

.navtoggle{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:9px 12px; font-size:1rem; cursor:pointer; font-weight:600}

/* ---------- Independence notice (must stay above the fold) ---------- */
.independence{background:var(--mist); border-bottom:1px solid var(--line); font-size:.795rem; color:var(--slate); line-height:1.5}
.independence .wrap{padding-top:8px; padding-bottom:8px}
.independence a{color:var(--slate); text-decoration:underline; text-underline-offset:2px; white-space:nowrap}
.independence a:hover{color:var(--accent-dk)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(160deg,var(--ink) 0%,var(--ink-3) 100%); color:#eef3f7; padding:64px 0 70px; position:relative; overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(760px 320px at 82% 12%, rgba(227,82,5,.19), transparent 62%);
}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:17ch}
.hero .lede{font-size:1.16rem; max-width:60ch; color:#c9d5e0; margin-bottom:1.8em}
.hero .eyebrow{text-transform:uppercase; letter-spacing:.14em; font-size:.76rem; font-weight:700; color:var(--accent); margin-bottom:14px}
.hero-sub{padding:44px 0 46px}
.hero-sub h1{max-width:26ch}
.hero-sub .lede{margin-bottom:0}

.btnrow{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{
  display:inline-block; padding:13px 24px; border-radius:var(--radius); font-weight:700;
  text-decoration:none; font-size:.98rem; border:2px solid transparent; cursor:pointer; text-align:center;
}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-dk); color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.34); color:#fff}
.btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.09); color:#fff}
.btn-dark{background:var(--ink-2); color:#fff}
.btn-dark:hover{background:var(--ink); color:#fff}
.btn-outline{border-color:var(--line-dk); color:var(--ink)}
.btn-outline:hover{border-color:var(--accent); color:var(--accent-dk)}

/* ---------- Sections ---------- */
section{padding:56px 0}
section.tight{padding:38px 0}
.bg-mist{background:var(--mist)}
.bg-ink{background:var(--ink); color:#dbe3ea}
.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink a{color:#ffb98c}
.section-head{max-width:64ch; margin-bottom:34px}
.section-head p{color:var(--slate); font-size:1.05rem; margin-bottom:0}
.bg-ink .section-head p{color:#a9b8c6}

/* ---------- Grid + cards ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.card h3{margin-bottom:.4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card .num{font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--accent); text-transform:uppercase; display:block; margin-bottom:10px}
.card-link{display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s}
.card-link:hover{border-color:var(--accent); color:inherit; transform:translateY(-2px)}
.card-link .more{color:var(--accent-dk); font-weight:700; font-size:.92rem; margin-top:12px; display:inline-block}
.bg-ink .card{background:var(--ink-2); border-color:var(--line-dk); box-shadow:none}
.bg-ink .card p{color:#b6c4d1}

.stat{border-left:3px solid var(--accent); padding-left:16px}
.stat .big{display:block; font-size:1.9rem; font-weight:800; letter-spacing:-.03em; line-height:1.1}
.stat .lbl{font-size:.87rem; color:var(--slate)}
.bg-ink .stat .lbl{color:#9fb0be}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:1.4em}
table{border-collapse:collapse; width:100%; font-size:.93rem; min-width:540px}
caption{text-align:left; font-size:.87rem; color:var(--slate); padding:12px 14px; border-bottom:1px solid var(--line); background:var(--mist)}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
thead th{background:var(--mist); font-size:.79rem; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); font-weight:700; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafcfd}
code{background:var(--mist); padding:2px 6px; border-radius:3px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em}

/* ---------- Callouts ---------- */
.note{background:var(--mist); border-left:3px solid var(--teal); padding:18px 22px; border-radius:0 var(--radius) var(--radius) 0; margin:0 0 1.4em}
.note.accent{border-left-color:var(--accent); background:var(--accent-soft)}
.note p:last-child{margin-bottom:0}
.note h4{margin-bottom:.5em; color:var(--ink)}

.pill{display:inline-block; background:var(--mist); border:1px solid var(--line); border-radius:100px; padding:5px 14px; font-size:.86rem; font-weight:600; margin:0 6px 8px 0; color:var(--ink-2)}

.checks{list-style:none; padding:0}
.checks li{padding-left:28px; position:relative}
.checks li::before{
  content:""; position:absolute; left:0; top:.55em; width:13px; height:7px;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:rotate(-45deg);
}

/* ---------- FAQ ---------- */
details.faq{border:1px solid var(--line); border-radius:var(--radius); margin-bottom:10px; background:var(--paper)}
details.faq summary{padding:16px 20px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--accent); font-size:1.35rem; line-height:1; font-weight:400; flex:0 0 auto}
details.faq[open] summary::after{content:"\2212"}
details.faq .body{padding:0 20px 18px; color:var(--ink-2)}
details.faq .body p:last-child{margin-bottom:0}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.85rem; color:var(--slate); padding:14px 0 0}
.crumbs a{color:var(--slate); text-decoration:none}
.crumbs a:hover{color:var(--accent-dk); text-decoration:underline}
.crumbs span{margin:0 7px; color:var(--line-dk); opacity:.5}

/* ---------- Article body ---------- */
.article{max-width:74ch}
.article h2{margin-top:2.2em; padding-top:.2em}
.article h3{margin-top:1.8em}
.article > p:first-of-type{font-size:1.1rem; color:var(--ink-2)}
.toc{background:var(--mist); border:1px solid var(--line); border-radius:var(--radius); padding:20px 24px; margin-bottom:2em}
.toc h4{margin-bottom:.6em}
.toc ul{margin-bottom:0; padding-left:1.1em}
.toc li{margin-bottom:.25em}

/* ---------- Contact / forms ---------- */
.form-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.field{display:flex; flex-direction:column}
.field.full{grid-column:1/-1}
label{font-weight:600; font-size:.9rem; margin-bottom:6px}
label .req{color:var(--accent)}
input,select,textarea{
  font:inherit; font-size:.97rem; padding:11px 13px; border:1px solid var(--line-dk);
  border-radius:var(--radius); background:#fff; color:var(--ink); width:100%;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
textarea{min-height:130px; resize:vertical}
.hp{position:absolute; left:-9999px}
.form-note{font-size:.86rem; color:var(--slate)}

.contact-line{display:flex; gap:14px; align-items:flex-start; margin-bottom:18px}
.contact-line .ico{flex:0 0 38px; height:38px; border-radius:var(--radius); background:var(--accent-soft); display:flex; align-items:center; justify-content:center}
.contact-line .lbl{font-size:.78rem; text-transform:uppercase; letter-spacing:.07em; color:var(--slate); font-weight:700}
.contact-line .val{font-size:1.06rem; font-weight:600}
.contact-line .val a{text-decoration:none; color:var(--ink)}
.contact-line .val a:hover{color:var(--accent-dk)}

/* ---------- CTA strip ---------- */
.ctastrip{background:var(--accent); color:#fff; padding:44px 0}
.ctastrip .wrap{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.ctastrip h2{color:#fff; margin-bottom:.25em}
.ctastrip p{margin-bottom:0; color:#ffe6d8; max-width:52ch}
.ctastrip .btn{background:#fff; color:var(--accent-dk)}
.ctastrip .btn:hover{background:var(--ink); color:#fff}

/* ---------- Footer ---------- */
footer.site{background:var(--ink); color:#94a5b4; font-size:.92rem; padding:52px 0 26px}
footer.site h4{color:#fff; font-size:.79rem; margin-bottom:1em}
footer.site a{color:#c9d5e0; text-decoration:none}
footer.site a:hover{color:var(--accent); text-decoration:underline}
footer.site ul{list-style:none; padding:0}
footer.site li{margin-bottom:.5em}
.foot-grid{display:grid; gap:34px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-bottom:36px}
.foot-brand .name{color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; font-size:1.05rem}
.foot-brand .parent{font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--slate-2); margin-top:4px}
.legal{border-top:1px solid var(--line-dk); padding-top:22px; font-size:.83rem; color:#7b8b99; line-height:1.6}
.legal p{margin-bottom:.8em}
.legal strong{color:#b9c7d3}

/* ---------- 404 ---------- */
.err{text-align:center; padding:84px 0}
.err .code{font-size:4.5rem; font-weight:800; color:var(--accent); line-height:1; letter-spacing:-.04em}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .navtoggle{display:block}
  nav.main{display:none; width:100%; order:3; padding-bottom:10px; flex:1 1 100%}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column; gap:2px}
  nav.main a{padding:12px 13px}
  nav.main .cta{margin-left:0; margin-top:6px; text-align:center}
  .masthead .wrap{flex-wrap:wrap}
  .masthead{position:static}
  .hero{padding:48px 0 52px}
  section{padding:44px 0}
}
@media (max-width:520px){
  body{font-size:16px}
  .brand .name{font-size:1rem}
  .btn{width:100%}
  .btnrow{flex-direction:column; align-items:stretch}
  .ctastrip .btn{width:auto}
}

/* ---------- Print ---------- */
@media print{
  .masthead,.topbar,nav.main,.ctastrip,.hero::after{display:none !important}
  body{font-size:11pt; color:#000}
  .independence{border:1px solid #000; background:#fff}
}

/* ---------- Photos / figures ---------- */
figure.shot{
  margin:0 0 1.6em; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--mist);
}
figure.shot img{width:100%; height:auto; display:block}
figure.shot figcaption{
  padding:12px 18px; font-size:.85rem; color:var(--slate);
  border-top:1px solid var(--line); background:var(--paper); line-height:1.5;
}
.bg-mist figure.shot figcaption{background:var(--mist)}
.bg-ink figure.shot{border-color:var(--line-dk)}
.bg-ink figure.shot figcaption{background:var(--ink-2); border-top-color:var(--line-dk); color:#a9b8c6}

.feature-split{
  display:grid; gap:36px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:center;
}
.feature-split figure.shot{margin-bottom:0}
.feature-split h2{margin-top:0}

/* ---------- Parent company links ---------- */
.topbar .parent a{color:inherit; font-weight:600; text-decoration:none; border-bottom:1px dotted rgba(255,255,255,.32)}
.topbar .parent a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.foot-brand .parent a{color:inherit; text-decoration:none}
.foot-brand .parent a:hover{color:var(--accent); text-decoration:underline}
.foot-brand .grouplink{margin-top:10px; font-size:.88rem}
.foot-brand .grouplink a{color:#c9d5e0; text-decoration:none; border-bottom:1px solid rgba(201,213,224,.3)}
.foot-brand .grouplink a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- Brand name grid (nominative reference only) ---------- */
.brandgrid{
  display:grid; gap:10px; list-style:none; padding:0; margin:0 0 26px;
  grid-template-columns:repeat(auto-fill,minmax(185px,1fr));
}
.brandgrid li{
  background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:13px 16px; margin:0;
  font-weight:600; font-size:.97rem; color:var(--ink);
}
.tm-note{
  border-top:1px solid var(--line); padding-top:18px; margin:26px 0 0;
  font-size:.85rem; color:var(--slate); line-height:1.65;
}
.tm-note strong{color:var(--ink-2)}
.tm-note p{margin-bottom:.7em}
.tm-note p:last-child{margin-bottom:0}

/* ---------- 5-across stat band (home page) ---------- */
.g5{grid-template-columns:repeat(5,1fr)}
.g5 .stat .big{font-size:1.5rem}
.g5 .stat .lbl{font-size:.84rem}
@media (max-width:1050px){ .g5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .g5{grid-template-columns:repeat(2,1fr)} }
@media (max-width:430px){ .g5{grid-template-columns:1fr} }

/* Link inside a stat tile label */
.stat .lbl a{color:var(--accent-dk); text-decoration:underline; text-underline-offset:2px; font-weight:600; white-space:nowrap}
.stat .lbl a:hover{color:var(--accent)}

/* NOTE: the .independence header strip is no longer used in the markup.
   Styles retained so the notice can be pasted back under </header> if wanted. */

/* Lead photo at the top of a guide page */
.shot-lead figcaption{font-size:.9rem; padding:14px 20px}

/* ---------- Hero with video ---------- */
.hero-split{
  display:grid; gap:40px; align-items:center;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
}
.hero-split h1,
.hero-split .lede{max-width:none}
.hero-video{order:-1}            /* video sits left of the copy on desktop */
.hero-video .frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.16); background:#0a0e12;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.hero-video video,
.hero-video .frame img{display:block; width:100%; height:auto}
.hero-video .cap{
  margin:12px 0 0; font-size:.8rem; color:#93a5b5; line-height:1.5;
}

@media (max-width:860px){
  .hero-split{grid-template-columns:1fr; gap:28px}
  .hero-video{order:0}           /* copy first, video below, on phones */
}
@media (prefers-reduced-motion:reduce){
  .hero-video video{animation:none}
}

/* Hero video pause / play control (added by site.js) */
.vidtoggle{
  position:absolute; right:10px; bottom:10px; z-index:2;
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(10,14,18,.6);
  color:#fff; font-size:.72rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:.55; transition:opacity .15s, background .15s, border-color .15s;
}
.hero-video:hover .vidtoggle{opacity:1}
.vidtoggle:hover{background:rgba(10,14,18,.9); border-color:#fff; opacity:1}
.vidtoggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px; opacity:1}