@font-face{font-family:"Anton";src:url("assets/fonts/anton-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/fonts/dm-sans-latin-standard-normal.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}
/* Shared resets + structural rules for the modal, FAQ and legal pages.
   Each site's own stylesheet (appended after this) sets the look via these variables. */
:root { --bg:#fff; --fg:#111; --muted:#555; --accent:#000; --accent-fg:#fff; --line:#ddd; --panel:#fff; --panel-fg:#111; --radius:6px; --font-body:system-ui, sans-serif; --font-display:var(--font-body); }
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); line-height:1.6; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }
img, picture { display:block; max-width:100%; height:auto; }
picture img { width:100%; height:100%; object-fit:cover; }
a { color:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; padding:.6rem 1rem; background:var(--accent); color:var(--accent-fg); }
.skip:focus { left:8px; }

/* FAQ (details/summary) */
.faq-item summary { cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }

/* Quote modal */
html.qm-open { overflow:hidden; }
.qm { border:0; padding:0; max-width:min(560px, calc(100vw - 24px)); width:100%; background:transparent; color:var(--panel-fg); }
.qm::backdrop { background:rgba(0,0,0,.6); }
.qm__panel { position:relative; background:var(--panel); color:var(--panel-fg); border-radius:var(--radius); padding:clamp(1.25rem, 4vw, 2.25rem); }
.qm__close { position:absolute; top:.5rem; right:.6rem; width:44px; height:44px; border:0; background:transparent; color:inherit; font-size:2rem; line-height:1; cursor:pointer; }
.qm__title { margin:0 2.5rem .4rem 0; font-family:var(--font-display); line-height:1.15; }
.qm__intro { margin:0 0 1.2rem; color:var(--muted); }
.qm__field { display:block; margin:0 0 .9rem; }
.qm__field span { display:block; font-size:.85rem; font-weight:600; margin-bottom:.3rem; }
.qm__field input, .qm__field textarea { width:100%; font:inherit; font-size:16px; padding:.75rem .85rem; border:1px solid var(--line); border-radius:calc(var(--radius) * .6); background:var(--bg); color:var(--fg); }
.qm__field textarea { resize:vertical; min-height:110px; }
.qm__submit { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:48px; padding:.8rem 1.2rem; border:0; border-radius:var(--radius); background:var(--accent); color:var(--accent-fg); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }
.qm__submit:disabled { opacity:.6; cursor:wait; }
.qm__small { margin:.8rem 0 0; font-size:.85rem; color:var(--muted); text-align:center; }
.qm__error { margin:0 0 .8rem; color:#b00020; font-weight:600; }
.qm__hp { position:absolute; left:-5000px; width:1px; height:1px; opacity:0; }
.qm__thanks:focus { outline:none; }
.qm__thanks p { margin:0 0 1.2rem; }
.qm__sink { position:absolute; width:0; height:0; border:0; visibility:hidden; }

/* Legal / 404 pages */
.legal { background:var(--bg); color:var(--fg); }
.legal__main { max-width:720px; margin:0 auto; padding:clamp(2rem, 6vw, 5rem) 16px; }
.legal__main h1, .legal__main h2 { font-family:var(--font-display); line-height:1.2; }
.legal__home { display:inline-block; margin-bottom:2rem; text-decoration:none; font-weight:600; }
.legal__contact { margin-top:2.5rem; font-weight:600; }
/* Belper: "The Mill Spec Sheet". Caldera-derived: forge fire on warm limestone, ember orange, condensed display, 40px radius. */
:root {
  --bg:#f7f6f2; --fg:#070607; --muted:#5d5a55; --accent:#fc5000; --accent-fg:#fff;
  --ember:#fc5000; --violet:#524ae9; --sulfur:#f5f28e; --obsidian:#070607; --pumice:#e2e2df; --limestone:#f7f6f2; --chalk:#fff; --line:#d4d3ce;
  --panel:#f7f6f2; --panel-fg:#070607; --radius:40px;
  --font-display:"Anton", Impact, "Arial Narrow", sans-serif; --font-body:"DM Sans", system-ui, sans-serif;
}
body { font-size:1.04rem; }
h1, h2, h3 { font-family:var(--font-display); font-weight:400; text-transform:uppercase; line-height:.92; letter-spacing:.005em; margin:0 0 1rem; }
h1 { font-size:clamp(3rem, 9vw, 8.4rem); }
h2 { font-size:clamp(2.2rem, 5vw, 4.2rem); }
h3 { font-size:1.6rem; margin-top:1.6rem; }
p { margin:0 0 1rem; }
.code { font-family:var(--font-body); font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ember); margin-bottom:1rem; }
.code--soft { color:rgba(247,246,242,.7); margin-top:1.2rem; }
.lede { font-size:clamp(1.15rem, 1.9vw, 1.4rem); line-height:1.45; font-weight:500; }

/* header */
.hd { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:18px; padding:12px 16px; background:var(--obsidian); color:var(--limestone); }
@media (min-width:700px){ .hd { padding:14px 40px; } }
.hd a { color:var(--limestone); text-decoration:none; }
.hd__brand { font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; letter-spacing:.02em; }
.hd__brand span { color:var(--ember); }
.hd__nav { display:none; gap:24px; margin-left:auto; }
.hd__nav a { font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.hd__nav a:hover { color:var(--ember); }
.hd__tel { margin-left:auto; background:var(--ember); color:#fff!important; padding:9px 18px; border-radius:var(--radius); font-weight:700; white-space:nowrap; }
@media (min-width:1080px){ .hd__nav { display:flex; } .hd__tel { margin-left:24px; } }

/* hero */
.hero { position:relative; min-height:calc(100svh - 58px); display:grid; align-items:end; overflow:hidden; background:var(--obsidian); }
.hero__img { position:absolute; inset:0; }
.hero__img img { filter:grayscale(.3) contrast(1.05) brightness(.75); }
.hero__glow { position:absolute; inset:0; background:radial-gradient(ellipse 70% 50% at 20% 100%, rgba(252,80,0,.75), transparent 70%), linear-gradient(to top, rgba(7,6,7,.92) 10%, rgba(7,6,7,.3) 60%, rgba(7,6,7,.15)); }
.hero__copy { position:relative; z-index:2; padding:120px 16px 56px; max-width:1300px; width:100%; margin:0 auto; color:var(--limestone); }
@media (min-width:700px){ .hero__copy { padding:140px 40px 80px; } }
.hero__copy h1, .hero__copy p { color:var(--limestone); }
.hero__sub { font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.4rem, 3vw, 2.4rem); color:var(--ember)!important; letter-spacing:.01em; }
.hero__body { max-width:52ch; font-size:1.12rem; }
.lanes-toggle { display:flex; gap:10px; flex-wrap:wrap; margin:1.4rem 0; }
.lanes-toggle a { font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; padding:10px 20px; border:2px solid var(--limestone); border-radius:var(--radius); color:var(--limestone); text-decoration:none; }
.lanes-toggle a:hover { background:var(--limestone); color:var(--obsidian); }
.ctas { display:flex; flex-wrap:wrap; gap:12px; }
.ctas--c { justify-content:center; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 30px; border-radius:var(--radius); font:inherit; font-weight:700; letter-spacing:.04em; text-decoration:none; cursor:pointer; border:2px solid transparent; }
.btn--ember { background:var(--ember); color:#fff; box-shadow:0 10px 30px -8px rgba(252,80,0,.6); }
.btn--ember:hover { background:#e04600; }
.btn--chalk { background:var(--chalk); color:var(--obsidian); }

/* spec sheets */
.sheet { display:grid; gap:24px; padding:clamp(56px, 8vw, 120px) 16px; border-bottom:3px solid var(--ember); }
@media (min-width:700px){ .sheet { padding-left:40px; padding-right:40px; } }
@media (min-width:1000px){ .sheet { grid-template-columns:380px 1fr; gap:64px; } .sheet__head h2 { position:sticky; top:100px; } }
.sheet__body { max-width:780px; }
.sheet--dark { background:var(--obsidian); color:var(--limestone); }
.sheet--dark h2, .sheet--dark h3, .sheet--dark p, .sheet--dark li, .sheet--dark b { color:var(--limestone); }
.sheet--stone { background:var(--pumice); }
.spec { list-style:none; padding:0; margin:1.4rem 0; border-top:2px solid var(--obsidian); }
.spec li { display:grid; grid-template-columns:64px 1fr; gap:4px 12px; padding:1rem 0; border-bottom:1px solid var(--line); }
.spec li span { font-family:var(--font-display); font-size:1.4rem; color:var(--ember); grid-row:span 2; line-height:1; padding-top:.15rem; }
.spec--dark { border-color:var(--ember); }
.spec--dark li { border-color:rgba(247,246,242,.18); }
.pair { display:grid; gap:24px; margin-top:1.4rem; }
@media (min-width:700px){ .pair { grid-template-columns:1fr 1fr; } }
.pair > div { border:1.5px solid rgba(247,246,242,.25); border-radius:28px; padding:22px 24px 8px; }
.pair h3 { margin-top:0; color:var(--ember)!important; }
.ticks { list-style:none; padding:0; margin:0 0 1.2rem; }
.ticks li { position:relative; padding:.6rem 0 .6rem 1.8rem; border-bottom:1px solid var(--line); }
.ticks li::before { content:""; position:absolute; left:0; top:1.05rem; width:12px; height:12px; border-radius:50%; background:var(--ember); }
.ticks--dark li { border-color:rgba(247,246,242,.18); }

/* lanes */
.lanes { padding:clamp(56px, 8vw, 120px) 16px; border-bottom:3px solid var(--ember); }
@media (min-width:700px){ .lanes { padding-left:40px; padding-right:40px; } }
.lanes__head { max-width:900px; margin-bottom:2rem; }
.lanes__grid { display:grid; gap:20px; }
@media (min-width:900px){ .lanes__grid { grid-template-columns:1fr 1fr; } }
.lane { background:var(--chalk); border-radius:var(--radius); padding:16px 16px 28px; border:2px solid var(--obsidian); scroll-margin-top:80px; }
.lane > *:not(.lane__img) { margin-left:12px; margin-right:12px; }
.lane__img { margin:0 0 1.2rem; border-radius:calc(var(--radius) - 12px); overflow:hidden; }
.lane__img picture { aspect-ratio:16/10; }
.lane--ember { background:var(--obsidian); color:var(--limestone); border-color:var(--ember); }
.lane--ember h3, .lane--ember p, .lane--ember li { color:var(--limestone); }
.lane--ember .ticks li { border-color:rgba(247,246,242,.18); }
.lanes__foot { font-family:var(--font-display); text-transform:uppercase; font-size:clamp(1.4rem, 2.6vw, 2.2rem); line-height:1.05; max-width:32ch; margin:2.4rem 0; }
.reel { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:12px; }
.reel figure { flex:0 0 80vw; margin:0; scroll-snap-align:start; }
@media (min-width:900px){ .reel figure { flex-basis:30%; } }
.reel picture { aspect-ratio:4/3; border-radius:28px; overflow:hidden; }
.reel figcaption { font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.6rem; }

/* table */
.table-wrap { overflow-x:auto; margin:1.2rem 0; }
.systems { width:100%; min-width:600px; border-collapse:separate; border-spacing:0; background:var(--chalk); border-radius:24px; overflow:hidden; }
.systems th, .systems td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--pumice); vertical-align:top; }
.systems th { background:var(--obsidian); color:var(--limestone); font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:1rem; }
.systems td:first-child { font-weight:700; }
.systems tr:last-child td { border-bottom:0; }

/* faq */
.faq-list { border-top:2px solid var(--obsidian); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { padding:18px 52px 18px 0; font-weight:700; font-size:1.08rem; position:relative; }
.faq-item summary::after { content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:var(--obsidian); color:var(--ember); display:grid; place-items:center; font-weight:700; font-size:1.2rem; }
.faq-item[open] summary::after { content:"–"; background:var(--ember); color:#fff; }

/* close */
.close { text-align:center; padding:clamp(72px, 10vw, 140px) 16px; background:radial-gradient(ellipse 60% 80% at 50% 120%, rgba(252,80,0,.55), transparent 70%), var(--obsidian); color:var(--limestone); }
.close h2 { font-size:clamp(3rem, 9vw, 7rem); color:var(--limestone); }
.close p { color:var(--limestone); max-width:52ch; margin-left:auto; margin-right:auto; }

.ft { background:var(--obsidian); color:#9a968e; padding:24px 16px 100px; font-size:.88rem; border-top:1px solid #222; }
@media (min-width:700px){ .ft { padding:24px 40px; } }
.ft p { color:#9a968e; max-width:90ch; }
.ft b, .ft a { color:var(--limestone); }

.callbar { position:fixed; left:12px; right:12px; bottom:12px; z-index:30; display:flex; justify-content:center; align-items:center; min-height:54px; border-radius:var(--radius); background:var(--ember); color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; letter-spacing:.04em; text-decoration:none; box-shadow:0 10px 30px rgba(252,80,0,.4); }
@media (min-width:700px){ .callbar { display:none; } }

/* modal skin */
.qm__panel { border-radius:32px; border-top:6px solid var(--ember); }
.qm__title { text-transform:uppercase; font-size:2.4rem; }
.qm__field input, .qm__field textarea { border-radius:16px; border-color:var(--line); background:#fff; }
.qm__submit { border-radius:var(--radius); background:var(--ember); }