/* Copper Line: a sample design from Brad's mockup library, rewritten by
   scripts/import-designs.py. Do not edit; re-run that instead. */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-normal-5963fe8e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-normal-5963fe8e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-normal-5963fe8e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/young-serif-normal-189cd402.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }
.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.short { display:none; }
@media (max-width:520px) { .full { display:none; } .short { display:inline; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

:root { --stone:#ECEEEB; --stone-2:#E1E4E0; --slate:#1D2B33; --slate-2:#42525B; --copper:#B5602C; --copper-text:#8E4A20; --white:#FFFFFF;
  --head:"Young Serif",Georgia,serif; --body:"Instrument Sans",Arial,sans-serif; --pad:clamp(18px,4vw,64px); }
body { background:var(--stone); color:var(--slate); font:400 17px/1.65 var(--body); }
:focus-visible { outline:3px solid var(--copper); outline-offset:3px; }
.wrap { max-width:1240px; margin:0 auto; padding:0 var(--pad); }
header .wrap { display:flex; align-items:center; gap:28px; padding-block:22px; }
.logo { font:400 27px/1 var(--head); text-decoration:none; margin-right:auto; white-space:nowrap; }
.logo span { color:var(--copper-text); }
nav { display:flex; gap:26px; font-size:16px; } nav a { text-decoration:none; } nav a:hover { color:var(--copper-text); }
.btn { display:inline-flex; align-items:center; min-height:48px; padding:12px 20px; border-radius:6px; text-decoration:none; font:500 16px/1 var(--body); background:var(--slate); color:#fff; }
.btn.light { background:transparent; color:var(--slate); box-shadow:inset 0 0 0 1px var(--slate); }
.hero .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; padding-block:40px 40px; align-items:center; }
h1 { font:400 clamp(46px,6vw,84px)/1.02 var(--head); margin:0; letter-spacing:-.01em; }
h1 span { color:var(--copper-text); }
.lead { margin:22px 0 0; font-size:20px; color:var(--slate-2); max-width:30em; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero figure { margin:0; position:relative; }
.hero figure img { border-radius:200px 200px 12px 12px; aspect-ratio:4/5; object-fit:cover; width:100%; }
.hero figcaption { position:absolute; left:16px; bottom:16px; background:rgba(255,255,255,.92); border-radius:6px; padding:8px 12px; font-size:14px; }
/* The copper line: one pipe drawn down the page as you read. */
.run { position:relative; }
.run svg.pipe { position:absolute; left:calc(var(--pad) + 20px); top:0; height:100%; width:44px; overflow:visible; pointer-events:none; }
.pipe path { fill:none; stroke:var(--copper); stroke-width:10; stroke-linecap:round; }
.pipe .back { stroke:var(--stone-2); }
.stop { position:relative; padding:clamp(56px,7vw,96px) var(--pad) clamp(56px,7vw,96px) calc(var(--pad) + 96px); max-width:1240px; margin:0 auto; }
.stop::before { content:""; position:absolute; left:calc(var(--pad) + 14px); top:clamp(64px,7.6vw,104px); width:22px; height:22px; border-radius:50%; background:var(--stone); border:6px solid var(--copper); }
.label { font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--copper-text); margin:0 0 12px; }
h2 { font:400 clamp(34px,4vw,54px)/1.08 var(--head); margin:0 0 18px; }
h2 span { color:var(--slate-2); }
.story { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.story img { border-radius:12px; aspect-ratio:3/2; object-fit:cover; width:100%; }
.story p { color:var(--slate-2); margin:0 0 14px; }
.svc { list-style:none; margin:24px 0 0; padding:0; border-top:1px solid #C9CEC9; }
.svc li { display:grid; grid-template-columns:220px minmax(0,1fr); gap:6px 28px; padding:20px 0; border-bottom:1px solid #C9CEC9; }
.svc b { font:400 24px/1.2 var(--head); }
.svc p { margin:0; color:var(--slate-2); }
.craft { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px; }
.craft figure { margin:0; background:#fff; border-radius:12px; overflow:hidden; }
.craft img { aspect-ratio:4/3; object-fit:cover; width:100%; }
.craft figcaption { padding:16px 18px 18px; }
.craft b { display:block; font:400 21px/1.2 var(--head); margin-bottom:4px; }
.craft span { color:var(--slate-2); font-size:15px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 24px; }
.contact dt { color:var(--copper-text); font-weight:600; }
.contact dd { margin:0; }
.demo-form { display:grid; gap:14px; background:#fff; padding:24px; border-radius:12px; }
.field { display:grid; gap:6px; } .field label { font-weight:500; font-size:15px; }
.field input, .field select, .field textarea { font:inherit; font-size:16px; padding:11px 12px; border:1px solid #87928C; border-radius:6px; background:#fff; color:var(--slate); }
.field button { justify-self:start; font:500 16px/1 var(--body); min-height:48px; padding:12px 22px; border:0; border-radius:6px; background:var(--copper-text); color:#fff; cursor:pointer; }
.form-out { margin:0; color:#2F6B3B; font-size:15px; min-height:1.4em; }
footer { background:var(--slate); color:rgba(255,255,255,.78); overflow:hidden; }
footer .wrap { padding-block:56px 28px; }
.mark { font:400 clamp(44px,12.2vw,178px)/.9 var(--head); color:#fff; margin:0 0 28px; letter-spacing:-.02em; white-space:nowrap; }
.mark span { color:#E19A6B; }
.fine { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; border-top:1px solid rgba(255,255,255,.16); padding-top:18px; font-size:15px; }
@media (max-width:860px) {
  nav { display:none; }
  .hero .wrap, .story, .contact { grid-template-columns:1fr; }
  .hero figure { max-width:420px; }
  .craft { grid-template-columns:1fr; }
  .svc li { grid-template-columns:1fr; }
  .run svg.pipe { left:12px; width:32px; }
  .stop { padding-left:56px; padding-right:var(--pad); }
  .stop::before { left:10px; }
}


/* ---------- Shift & Shine sample bar (scripts/import-designs.py) ---------- */
@font-face { font-family: "SSD Geist"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
:root { --ssd-bar: 53px; scroll-padding-top: var(--ssd-bar); }
.ssd-bar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px 14px; margin: 0; padding: 8px clamp(14px, 3vw, 28px); background: #0F1B1B; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.86); font: 400 13.5px/20px "SSD Geist", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-align: left; text-transform: none; }
.ssd-bar .ssd-bar-text { flex: 1; margin: 0; padding: 0; color: inherit; font: inherit; letter-spacing: 0; max-width: none; }
.ssd-bar a { color: #FFFFFF; text-decoration: none; }
.ssd-bar .ssd-bar-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 -8px 0 -10px; border-radius: 6px; }
.ssd-bar .ssd-bar-home svg { display: block; width: 15px; height: 16px; }
.ssd-bar .ssd-bar-back { display: inline-flex; flex: none; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px; font: 500 13.5px/1 "SSD Geist", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ssd-bar .ssd-bar-back:hover { background: #FFFFFF; color: #0F1B1B; }
.ssd-bar a:focus-visible { outline: 3px solid #5AD7D7; outline-offset: 2px; }
/* Fingers get the full 44px. */
@media (pointer: coarse) { .ssd-bar .ssd-bar-back { min-height: 44px; } .ssd-bar .ssd-bar-home { width: 44px; height: 44px; margin: 0 -12px 0 -14px; } }
/* Line heights in whole pixels, so the bar is too, and the sample under it
   doesn't land on half pixels. */
@media (max-width: 520px) { :root { --ssd-bar: 71px; } .ssd-bar { font-size: 12.5px; line-height: 18px; } }