/* SpoolHop: Practical Edit-inspired palette, editorial monochrome photograph. */
:root{--ink:#292a2c;--muted:#636466;--paper:#f7f6ef;--line:#d7d8da;--lime:#cdced0;--sage:#e7e8ea;--orange:#f26736;--denim:#646567}
body{background:var(--paper);color:var(--ink)}
.demo-bar{background:#232426;color:#f7f6ef}
header{background:var(--paper);border-color:var(--line)}
.logo,nav a,.text-button{color:var(--ink)} .logo .dot{color:#f26736}
.mark{border-color:#f26736;background:#f6ebe2}.mark:before{border-color:#f26736}.mark:after{background:#f26736}
nav a:hover,.link-button,.bp-external-grid a{color:#656668}
.button.dark,.dark{background:#292a2c;color:#fffefa;box-shadow:0 7px 22px #292a2c18;border:1px solid #292a2c}
.button.dark:hover,.dark:hover{background:#3f4042;color:#fffefa}.button.outline,.outline{background:transparent;border-color:#bfc0c2;color:#292a2c}.button.light{background:#cdced0;color:#232426;border-color:#cdced0}
.hero{background:radial-gradient(ellipse at 12% 5%,#f4e8d9 0,transparent 48%),radial-gradient(ellipse at 88% 5%,#e1e2e4 0,transparent 50%),linear-gradient(#f7f6ef,#fffefa);padding:76px 24px 50px;gap:54px}
.hero-copy{max-width:1100px}.hero .eyebrow{background:#fffefaad;border-color:#d7d8da;color:#616264}.hero h1{color:#292a2c;letter-spacing:-.065em}.hero h1 em{font-family:Georgia,serif;font-weight:400;font-style:italic;background:none;-webkit-text-fill-color:initial;color:#6f7072}.hero-copy>p{color:#636466}.hero-note{color:#797a7c}
.status-dot{background:#f26736;box-shadow:0 0 0 4px #f5e7db}.text-button span{background:#e5e6e8}
/* Only the photo is desaturated; its movement remains enabled where appropriate. */
.hero-art{width:min(1170px,100%);height:540px;background:#17181a;border:0;border-radius:18px;padding:0;box-shadow:0 20px 55px #292a2c14;isolation:isolate}
.hero-art:before{content:'';inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.05) 75%),linear-gradient(0deg,rgba(0,0,0,.42),transparent 40%);position:absolute}
.hero-art>img{position:absolute;display:block;top:-13%;left:0;right:auto;bottom:auto;width:100%;height:126%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.08) brightness(.82);mix-blend-mode:normal;will-change:transform}
.panel-kicker{z-index:2;color:#f7f6ef;top:27px;left:32px;right:32px;font-size:9px}.panel-kicker>span:last-child{color:#eee}.art-label{z-index:2;left:6%;bottom:15%;width:min(450px,80%);padding:0;background:transparent;border:0;color:white;border-radius:0;box-shadow:none}.art-label strong{font:italic 34px/1.13 Georgia,serif;letter-spacing:-.04em}.art-label small{display:block;margin-top:12px;color:#eee;font:12px/1.6 Arial,sans-serif}.mini-icon{display:none}.art-tag{z-index:2;bottom:22px;color:#eee;left:6%;width:auto;text-align:left}
.ticker{background:#fffefa;color:#292a2c;border-color:#d7d8da}.ticker i{color:#f26736}
.section-head p,.fine,.guide p,.bp-discover p{color:#636466}.eyebrow{color:#737476}.pill,.chips span{background:#ecedef;color:#5d5e60;border-color:#d5d6d8}.filters,.bp-intro{background:#ecedef;border-color:#d6d7d9;color:#292a2c}.filters input,.filters select,.knowledge input,.knowledge select,.bp-controls input,.bp-controls select{background:#fffefa;color:#292a2c;border-color:#cecfd1}.maker,.job,.bp-card,.knowledge-article{border-color:#d7d8da;box-shadow:0 8px 24px #292a2c08}.maker-cover{filter:none}.how{background:linear-gradient(125deg,#232426,#414244);color:#fffefa}.how .eyebrow,.steps span{color:#c5c6c8}.steps article{border-color:#c3c4c650}.steps p{color:#d7d8da}
.guide-art,.bp-art{filter:none}.green{background:#e4e5e7}.sand{background:#f4e5d9}.blue{background:#e8e9eb}.guide-art span{border-color:#afb0b2}.bp-art{background:linear-gradient(145deg,#f4e6d8,#e6e7e9)}.bp-controls label,.bp-meta,.bp-art-label,.bp-art-foot,.bp-controls #blueprintCount{color:#696a6c}.bp-copy p{color:#636466}.bp-discover{background:#e5e6e8}.knowledge{background:linear-gradient(130deg,#e8e9eb,#f3f4f6);border-color:#d9dadc}.knowledge-article h3{color:#292a2c}.expand-mark{color:#7f8082}.article-copy p,.handbook-note p,.handbook-note li{color:#636466}.handbook-note{background:#e3e4e6}.quality-symbol{background:radial-gradient(circle,#f7e3d4,#e9eaec);color:#d57d5a}.cta{background:linear-gradient(115deg,#e5e6e8,#f8e8d8);border-color:#d6d7d9}.notice,.empty{background:#ecedef;border-left-color:#969799}.upload{background:#f0f1f3;border-color:#afb0b2}.estimate{background:#292a2c}.estimate p{color:#d9dadc}dialog{border-color:#d6d7d9;box-shadow:0 30px 100px #292a2c40}dialog::backdrop{background:#232426b3}dialog p,dialog li{color:#636466}.field input,.field select,.field textarea{border-color:#cecfd1}.section h2{letter-spacing:-.045em}.section-head h2{max-width:800px}
:focus-visible{outline:3px solid #f26736;outline-offset:3px}
@media(max-width:850px){.hero-art{height:470px}.hero-art>img{width:100%;height:126%;left:0;right:auto}.art-label{left:6%;width:80%}}
@media(max-width:600px){.hero{padding:48px 20px 35px;gap:35px}.hero h1{font-size:clamp(43px,12vw,66px);line-height:1.02}.hero-art{height:460px;border-radius:14px}.hero-art>img{width:100%;height:126%;left:0;right:auto;top:-13%;bottom:auto;object-position:45% center}.panel-kicker{left:20px;right:20px;top:20px}.art-label{left:20px;right:20px;bottom:70px;width:auto}.art-label strong{font-size:29px}.art-label small{font-size:11px}.art-tag{left:20px;bottom:22px}nav{gap:8px;overflow-x:auto;justify-content:flex-start}nav a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-art>img{transform:none!important;will-change:auto}}

/* Parallax edition — three independently layered scroll scenes. */
.parallax-scene{position:relative;isolation:isolate;overflow:hidden;min-height:650px;display:flex;align-items:center;margin:20px 0 32px;background:#292a2c;color:#fffefa}
.parallax-photo{position:absolute;z-index:-3;inset:-35% 0;width:100%;height:170%;max-width:none;object-fit:cover;object-position:50% 55%;filter:grayscale(1) contrast(1.12) brightness(.75);will-change:transform}
.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(9,30,24,.88),rgba(9,30,24,.38) 58%,rgba(9,30,24,.12))}
.scene-grid{position:absolute;inset:-30%;z-index:-1;opacity:.13;background-image:linear-gradient(#fffefa 1px,transparent 1px),linear-gradient(90deg,#fffefa 1px,transparent 1px);background-size:85px 85px;mask-image:linear-gradient(90deg,transparent 35%,#000)}
.scene-copy{width:100%;padding:100px 48px;position:relative;z-index:2;will-change:transform}
.scene-eyebrow{display:block;font:700 10px/1.5 Arial,sans-serif;letter-spacing:.2em;margin-bottom:28px;color:#cdced0}
.scene-copy h2{font:700 clamp(42px,5.3vw,78px)/1.02 Arial,sans-serif;letter-spacing:-.055em;margin:0 0 26px;max-width:900px;color:inherit}
.scene-copy h2 em{font-family:Georgia,serif;font-weight:400;color:#cdced0;letter-spacing:-.045em}
.scene-copy p{font-size:16px;line-height:1.8;color:#e2e3e5;max-width:520px;margin:0 0 32px}
.scene-caption,.scene-scroll{position:absolute;z-index:3;bottom:28px;font:700 9px/1.5 Arial,sans-serif;letter-spacing:.16em;color:#e2e3e5}
.scene-caption{left:40px}.scene-scroll{right:40px}
.blueprint-scene{background:#e5e6e8;color:#292a2c;min-height:620px}
.blueprint-scene .scene-copy{padding-left:48px}
.blueprint-scene .scene-eyebrow{color:#6a6b6d}.blueprint-scene h2 em{color:#6f7072}.blueprint-scene p{color:#5d5e60}.blueprint-scene .scene-caption,.blueprint-scene .scene-scroll{color:#696a6c}
.blueprint-grid{position:absolute;inset:-40%;z-index:-3;background-image:linear-gradient(#292a2c0b 1px,transparent 1px),linear-gradient(90deg,#292a2c0b 1px,transparent 1px);background-size:46px 46px;transform-origin:center}
.blueprint-orbit{position:absolute;z-index:-1;border:1px solid #959698;border-radius:50%;width:510px;height:510px;right:4%;top:5%;will-change:transform}.orbit-two{width:360px;height:360px;right:9%;top:18%;border-color:#e77d5360}
.scene-number{position:absolute;z-index:-2;right:5%;top:15%;font:700 clamp(200px,28vw,390px)/1 Arial,sans-serif;letter-spacing:-.09em;color:#a8a9ab60;will-change:transform}
@media(max-width:850px){.parallax-scene{min-height:600px}.scene-copy{padding:100px 32px}.blueprint-scene .scene-copy{padding-left:32px}.scene-number{right:-5%;top:26%}.blueprint-orbit{right:-30%}.orbit-two{right:-15%}.scene-copy h2{font-size:clamp(40px,7.3vw,63px)}}
@media(max-width:600px){.parallax-scene{min-height:590px;margin:10px 0 20px}.scene-copy,.blueprint-scene .scene-copy{padding:95px 24px}.scene-copy h2{font-size:clamp(36px,10.3vw,56px)}.scene-copy p{font-size:14px;max-width:290px}.scene-copy p br{display:none}.scene-caption{left:24px;bottom:25px;font-size:8px}.scene-scroll{right:24px;bottom:45px;font-size:8px}.scene-eyebrow{font-size:9px}.parallax-photo{object-position:60% center}.blueprint-orbit{right:-75%;opacity:.6}.orbit-two{right:-40%}.scene-number{right:-15%;top:35%;opacity:.6}.scene-shade{background:linear-gradient(90deg,rgba(9,30,24,.88),rgba(9,30,24,.52))}}
@media(prefers-reduced-motion:reduce){[data-parallax]{transform:none!important;will-change:auto!important}}