:root{--paper:#F5F1E6;--steel:#C9CFD3;--forest:#1E3D31;--copper:#B65F2C;--blk:#141414;--ink:#2C2C2C;
 --f:"Helvetica Neue","Arial",system-ui,sans-serif;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--blk);font-family:var(--f);font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
::selection{background:var(--copper);color:#fff}
:focus-visible{outline:3px solid var(--copper);outline-offset:3px}
button{font:inherit;cursor:pointer}

/* top bar: a thin ruler */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--blk);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:0 24px;height:58px}
.top .brand{font-weight:700;letter-spacing:-.02em;font-size:20px}
.top .brand b{color:var(--copper)}
.top nav{display:flex;gap:2px;justify-content:center}
.top nav a{padding:6px 14px;border-radius:2px;font-size:14px;transition:.25s}
.top nav a:hover{background:var(--steel)}
.top nav a.on{background:var(--blk);color:var(--paper)}
.top .tel{font-size:14px;font-variant-numeric:tabular-nums}
.ruler{height:14px;background:repeating-linear-gradient(90deg,var(--blk) 0 1px,transparent 1px 10px) bottom/100% 6px no-repeat,repeating-linear-gradient(90deg,var(--blk) 0 1px,transparent 1px 50px) bottom/100% 14px no-repeat}
@media(max-width:820px){.top{grid-template-columns:1fr auto}.top nav{grid-column:1/-1;overflow-x:auto;justify-content:flex-start;padding-bottom:10px}.top{height:auto;padding-top:12px}.top .tel{display:none}}

/* grid page */
.page{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:40px 24px;max-width:1500px;margin:0 auto}
.c6{grid-column:span 6}.c4{grid-column:span 4}.c8{grid-column:span 8}.c12{grid-column:1/-1}.c3{grid-column:span 3}
@media(max-width:900px){.c6,.c4,.c8,.c3,.frm,[style*="span 5"]{grid-column:1/-1!important}}

h1{font-weight:700;font-size:clamp(40px,7vw,112px);line-height:.95;letter-spacing:-.035em}
h2{font-weight:700;font-size:clamp(28px,4vw,56px);line-height:1;letter-spacing:-.03em}
h3{font-weight:700;font-size:20px;letter-spacing:-.01em}
p.big{font-size:clamp(18px,1.6vw,22px);max-width:52ch;line-height:1.45}
.muted{color:#6A6A6A}
hr{border:0;border-top:2px solid var(--blk);margin:24px 0}
.stamp{display:inline-block;padding:6px 12px;border:2px solid var(--copper);color:var(--copper);border-radius:3px;font-weight:700;font-size:13px;transform:rotate(-3deg);letter-spacing:.02em}

/* hero: split page with a giant chain rendered as strokes + a rolling counter of feet produced */
.hero{background:var(--forest);color:var(--paper);padding:60px 24px 40px}
.hero .in{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
.hero h1{max-width:12ch}
.hero .odo{font-variant-numeric:tabular-nums;font-size:clamp(48px,6vw,100px);font-weight:700;line-height:1;letter-spacing:-.04em;display:flex}
.hero .odo .d{width:.62em;height:1em;overflow:hidden;position:relative;background:rgba(0,0,0,.25);margin-right:2px;border-radius:2px}
.hero .odo .d i{position:absolute;left:0;top:0;width:100%;font-style:normal;text-align:center;transition:transform .5s var(--ease)}
.hero .odo .d i span{display:block;height:1em}
.hero .odo .sep{width:.3em}
.hero small{display:block;margin-top:10px;opacity:.75;font-size:14px}
.hero .links{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.b{display:inline-block;padding:14px 22px;border-radius:3px;font-weight:700;font-size:15px;background:var(--copper);color:#fff;transition:.25s;border:2px solid var(--copper)}
.b:hover{background:transparent;color:var(--copper)}
.b.o{background:transparent;color:inherit;border-color:currentColor}
.b.o:hover{background:var(--paper);color:var(--forest);border-color:var(--paper)}
.hero .strip{grid-column:1/-1;margin-top:40px;height:120px;overflow:hidden;border-top:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25)}
.hero .strip svg{width:100%;height:100%}
@media(max-width:900px){.hero .in{grid-template-columns:1fr}}

/* ticker replaced by a "shift board": rows flip */
.board{background:var(--blk);color:var(--paper);font-size:14px;padding:10px 24px;display:flex;gap:40px;overflow:hidden;white-space:nowrap}
.board span b{color:var(--copper);margin-right:6px}

/* cards as index cards with a hole punch */
.card{background:#fff;border:1px solid #D9D5CB;border-radius:3px;padding:24px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card::before{content:"";position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--forest)}
.card h3{margin-bottom:8px}
.card .n{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1}

/* configurator */
.cfg{background:#fff;border:2px solid var(--blk);border-radius:4px;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr}
.cfg .ctrl{padding:28px;border-right:2px solid var(--blk)}
.cfg .grp{margin-bottom:22px}
.cfg .grp h4{font-size:13px;color:#6A6A6A;margin-bottom:10px;font-weight:400}
.cfg .opts{display:flex;flex-wrap:wrap;gap:6px}
.cfg .opts button{padding:9px 14px;border:1.5px solid var(--blk);background:#fff;border-radius:3px;font-size:14px;transition:.2s}
.cfg .opts button.on{background:var(--blk);color:#fff}
.cfg .opts button:hover:not(.on){background:var(--steel)}
.cfg input[type=range]{width:100%;accent-color:var(--copper)}
.cfg .prev{padding:28px;display:flex;flex-direction:column;background:linear-gradient(180deg,#fff,#F0EDE4)}
.cfg .prev svg{width:100%;flex:1;min-height:240px}
.cfg .out{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;border-top:1px solid #D9D5CB;padding-top:16px;margin-top:16px}
.cfg .out b{display:block;font-size:28px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cfg .out span{font-size:13px;color:#6A6A6A}
@media(max-width:900px){.cfg{grid-template-columns:1fr}.cfg .ctrl{border-right:0;border-bottom:2px solid var(--blk)}}

/* spec table with expanding rows */
.spec{width:100%;border-collapse:collapse;font-size:15px}
.spec th{text-align:left;font-weight:400;color:#6A6A6A;padding:10px 12px;border-bottom:2px solid var(--blk)}
.spec td{padding:14px 12px;border-bottom:1px solid #D9D5CB;vertical-align:top}
.spec tr.r{cursor:pointer;transition:background .2s}
.spec tr.r:hover{background:#fff}
.spec tr.r td:first-child{font-weight:700;font-size:18px;letter-spacing:-.02em}
.spec tr.x td{padding:0 12px;background:#fff}
.spec tr.x .ex{max-height:0;overflow:hidden;transition:max-height .5s var(--ease),padding .3s}
.spec tr.x.open .ex{max-height:300px;padding:16px 0 20px}
.spec .ex p{max-width:60ch;color:#444}
.spec .tag{display:inline-block;font-size:12px;padding:2px 8px;background:var(--steel);border-radius:2px;margin-right:4px}
.spec .tri{display:inline-block;transition:transform .3s;margin-left:8px;font-size:12px}
.spec tr.r.open .tri{transform:rotate(180deg)}
@media(max-width:700px){.spec .hide{display:none}}

/* photo-like plates built from gradients */
.plate{aspect-ratio:4/3;border-radius:3px;position:relative;overflow:hidden;background:#333}
.plate::after{content:attr(data-cap);position:absolute;left:12px;bottom:10px;color:#fff;font-size:13px;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:2px}
.plate.p1{background:radial-gradient(circle at 30% 30%,#E8C46A,#8C6A18 45%,#2b2b2b 100%)}
.plate.p2{background:linear-gradient(135deg,#F0F0F0,#A9AEB4 40%,#5B6168 70%,#2b2b2b)}
.plate.p3{background:conic-gradient(from 200deg at 60% 40%,#1E3D31,#3C6B58,#1E3D31 60%,#0f201a)}
.plate.p4{background:repeating-linear-gradient(45deg,#B65F2C 0 8px,#8E4720 8px 16px)}

/* visit: a shipping label / receipt */
.label{background:#fff;border:2px solid var(--blk);border-radius:4px;max-width:900px;margin:0 auto;position:relative;overflow:hidden}
.label .row{display:grid;grid-template-columns:150px 1fr;border-bottom:2px solid var(--blk)}
.label .row:last-child{border-bottom:0}
.label .k{padding:18px;border-right:2px solid var(--blk);color:#6A6A6A;font-size:14px;background:var(--paper)}
.label .v{padding:18px;font-size:18px}
.label .v.huge{font-size:clamp(34px,5.5vw,72px);font-weight:700;letter-spacing:-.04em;line-height:1}
.label .bar{height:60px;background:repeating-linear-gradient(90deg,var(--blk) 0 2px,transparent 2px 5px,var(--blk) 5px 6px,transparent 6px 10px,var(--blk) 10px 14px,transparent 14px 17px)}
.label .st{position:absolute;right:30px;top:30px;padding:10px 16px;border:3px solid var(--copper);color:var(--copper);font-weight:700;font-size:22px;border-radius:4px;opacity:0;transform:rotate(-12deg) scale(2.2);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.label.in .st{opacity:.9;transform:rotate(-12deg) scale(1)}
@media(max-width:600px){.label .row{grid-template-columns:1fr}.label .k{border-right:0;border-bottom:1px solid #D9D5CB}.label .st{font-size:14px;right:12px;top:12px}}

/* directions steps */
.dir{counter-reset:s;list-style:none;margin-top:20px}
.dir li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid #D9D5CB;align-items:start}
.dir li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}

/* fade-in on scroll: only ONE sequence, on the visit label; elsewhere content is just there */

/* order form */
.frm{background:#fff;border:2px solid var(--blk);border-radius:4px;padding:28px;display:grid;gap:16px}
.frm label{display:grid;gap:6px;font-size:14px;color:#6A6A6A}
.frm input,.frm select,.frm textarea{font:inherit;font-size:16px;padding:12px;border:1.5px solid var(--blk);border-radius:3px;background:var(--paper);color:var(--blk)}
.frm input:focus,.frm textarea:focus,.frm select:focus{outline:0;border-color:var(--copper);box-shadow:0 0 0 3px rgba(182,95,44,.25)}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frm .ok{display:none;padding:18px;background:var(--forest);color:#fff;border-radius:3px}
.frm.sent .ok{display:block}.frm.sent .fields{display:none}
@media(max-width:600px){.frm .two{grid-template-columns:1fr}}

footer{border-top:2px solid var(--blk);padding:24px;font-size:14px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1500px;margin:40px auto 0}
footer nav{display:flex;gap:18px}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001s!important;animation:none!important}}