/* Warranty page + claim form — styled to match zlmservices.com (Squarespace / Halstead design):
   Jost, light uppercase headings with wide tracking, burnt orange #DC5F2B, charcoal #2E2F2F, square buttons, angled section edges. */
:root { --o:#DC5F2B; --o2:#c24f1f; --char:#2E2F2F; --ink:#000; --text:#2E2F2F; --muted:#6a6b6b; --line:#e3e3e3; --soft:#f5f5f4;
  --f:"Jost", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font:300 17.9px/1.5 var(--f); letter-spacing:.016em; color:var(--text); background:#fff; -webkit-font-smoothing:antialiased; }
a { color:var(--o); }
img { max-width:100%; }
.hidden { display:none !important; }
.wrap { max-width:1140px; margin:0 auto; padding:0 6vw; }
@media (min-width:1300px) { .wrap { padding:0 3vw; } }
b, strong { font-weight:600; }

/* ---------- sections ---------- */
section.block { padding:70px 0; }
section.block.tint { background:var(--soft); }
section.block.dark { background:var(--char); color:#eef2f4; clip-path:polygon(0 50px,100% 0,100% calc(100% - 50px),0 100%); padding:120px 0; margin:-20px 0; }
.eyebrow { font:300 17px/1.3 var(--f); text-transform:uppercase; letter-spacing:.5px; margin:0 0 6px; color:inherit; }
h2.title { font:300 clamp(28px,3.2vw,40px)/1.1 var(--f); text-transform:uppercase; letter-spacing:2px; margin:0 0 26px; color:var(--ink); }
h2.title b { font-weight:700; }
.dark h2.title { color:#eef2f4; }
.orange-rule { width:90px; height:4px; background:var(--o); margin:0 0 26px; }
.lead { font-size:19px; max-width:760px; }
.muted { color:var(--muted); font-size:15px; }
.dark .muted { color:#c9cccd; }
.center { text-align:center; }

/* at-a-glance table */
table.glance { width:100%; border-collapse:collapse; font-size:16px; background:#fff; }
.glance th { text-align:left; font:600 13px/1.3 var(--f); letter-spacing:1.5px; text-transform:uppercase; color:#fff; background:var(--char); padding:14px 16px; }
.glance td { padding:16px; border-bottom:1px solid var(--line); vertical-align:top; }
.glance td:first-child { font-weight:500; text-transform:uppercase; letter-spacing:1px; font-size:15px; color:var(--ink); }
.glance .big { display:block; font:700 24px/1.1 var(--f); color:var(--o); letter-spacing:.5px; text-transform:uppercase; }

/* accordions */
.acc details { border-top:1px solid var(--line); }
.acc details:last-child { border-bottom:1px solid var(--line); }
.acc summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px; padding:20px 4px; font:400 20px/1.25 var(--f); text-transform:uppercase; letter-spacing:1.5px; color:var(--ink); }
.acc summary::-webkit-details-marker { display:none; }
.acc summary span { margin-left:auto; font-size:14px; font-weight:600; letter-spacing:1px; color:var(--o); white-space:nowrap; }
.acc summary::after { content:"+"; font-size:28px; font-weight:300; color:var(--o); width:22px; text-align:center; }
.acc summary:not(:has(span))::after { margin-left:auto; }
.acc details[open] summary::after { content:"–"; }
.acc details > :not(summary) { margin-left:4px; margin-right:4px; }
.acc details > :last-child { margin-bottom:24px; }
.acc h4 { font:600 15px/1.3 var(--f); text-transform:uppercase; letter-spacing:1.5px; margin:18px 0 6px; color:var(--ink); }
.acc li { margin-bottom:8px; }
.acc p { margin:0 0 12px; }
.dark .acc details { border-color:rgba(255,255,255,.18); }
.dark .acc summary { color:#eef2f4; }

.cols { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.dark ul li, .dark ol li { margin-bottom:10px; }
.steps-list { counter-reset:s; list-style:none; padding:0; margin:0 0 28px; }
.steps-list li { counter-increment:s; position:relative; padding-left:58px; margin-bottom:20px; }
.steps-list li::before { content:counter(s,decimal-leading-zero); position:absolute; left:0; top:-4px; font:700 30px/1 var(--f); color:var(--o); }
.note { border-left:4px solid var(--o); padding:10px 16px; background:rgba(220,95,43,.08); font-size:16px; }
.dark .note { background:rgba(255,255,255,.06); }

/* buttons (square, like the site) */
.btn, button.primary { display:inline-block; background:var(--o); color:#fff; border:0; border-radius:0; font:300 17.9px/1.2 var(--f); text-transform:uppercase;
  letter-spacing:1px; padding:14px 30px; text-decoration:none; cursor:pointer; transition:background .15s; }
.btn:hover, button.primary:hover { background:var(--o2); }
button.primary { width:100%; margin-top:24px; padding:16px; font-size:19px; }
button.primary[disabled] { opacity:.55; cursor:default; }

/* ---------- claim form ---------- */
.form-shell { background:#fff; max-width:820px; margin:-60px auto 0; position:relative; z-index:2; padding:44px 48px 40px; box-shadow:0 18px 50px -20px rgba(0,0,0,.35); }
@media (max-width:640px) { .form-shell { padding:28px 20px; margin-top:-40px; } }
.sect { font:600 15px/1.3 var(--f); text-transform:uppercase; letter-spacing:2px; color:var(--o); margin:34px 0 4px; }
.sect:first-child { margin-top:0; }
label { display:block; font-size:15px; font-weight:400; margin:16px 0 6px; color:var(--text); letter-spacing:.3px; }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  width:100%; padding:13px 14px; font:300 17px var(--f); color:var(--ink); background:#fafafa; border:1px solid #cfd0d0; border-radius:0; margin-bottom:6px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--o); background:#fff; box-shadow:inset 0 -2px 0 var(--o); }
select { appearance:auto; }
.row { display:flex; gap:14px; } .row > div { flex:1; min-width:0; }
@media (max-width:560px) { .row { flex-wrap:wrap; } .row > div { flex-basis:100%; } .row.addr > div { flex-basis:auto; } }
.req { color:var(--o); }
.hint { font-size:14px; color:var(--muted); margin:0 0 8px; }
.inline-check { display:flex; align-items:center; gap:8px; font-size:14px; margin:2px 0 0; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:15px; margin-top:26px; }
.check input, .inline-check input { width:18px; height:18px; accent-color:var(--o); flex:none; margin-top:3px; }
.hp { position:absolute; left:-5000px; width:1px; height:1px; opacity:0; }
.err { color:#9f1d12; background:#fdf1ef; border-left:4px solid #c0392b; padding:12px 14px; margin-top:18px; display:none; font-size:15px; }
.drop { display:flex; align-items:center; justify-content:center; gap:10px; border:1px dashed #b9baba; padding:22px; cursor:pointer;
  font:400 15px var(--f); text-transform:uppercase; letter-spacing:1.5px; color:var(--text); background:#fafafa; text-align:center; transition:.15s; margin:0; }
.drop:hover, .drop.over { border-color:var(--o); color:var(--o); background:#fff; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; margin-top:12px; }
.thumb { position:relative; overflow:hidden; border:1px solid var(--line); background:#f1f1f0; aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12px; text-align:center; padding:4px; }
.thumb img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.thumb .rm { position:absolute; top:4px; right:4px; width:24px; height:24px; border:0; background:rgba(0,0,0,.7); color:#fff; cursor:pointer; font-size:15px; line-height:1; z-index:2; }
.thumb .st { position:absolute; left:0; right:0; bottom:0; font-size:11px; letter-spacing:.5px; background:rgba(46,47,47,.85); color:#fff; padding:3px 4px; z-index:2; }
.thumb.bad { outline:2px solid #c0392b; }
.thumb .doc { font-size:30px; display:block; }
.done-box { text-align:center; }
.done-box h2 { font:700 34px/1.1 var(--f); text-transform:uppercase; letter-spacing:2px; margin:0 0 10px; color:var(--ink); }
.done-box .num { font:700 26px var(--f); color:var(--o); letter-spacing:2px; }

@media (max-width:760px) {
  .cols { grid-template-columns:1fr; gap:30px; }
  .glance thead { display:none; }
  .glance tr { display:block; border-bottom:1px solid var(--line); padding:10px 0; }
  .glance td { display:flex; gap:10px; border:0; padding:4px 10px; }
  .glance td::before { content:attr(data-l); flex:0 0 110px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; padding-top:4px; font-weight:400; }
  .glance td .big { display:inline; font-size:19px; }
  .acc summary span { display:none; }
  .acc summary::after { margin-left:auto; }
}