/* Saw Time storefront — home page (2026-09-19).
   Loaded by index.html. Same brand as the live site: Barlow /
   Barlow Condensed, brand red #c62828, charcoal, concrete ground. */
:root{
  --ground:#f4f2ef; --ground-2:#ebe7e2; --ink:#1d1a19; --mut:#655e5b; --line:#dcd7d3;
  --red:#c62828; --red-dark:#a31f1f; --red-hi:#ff5a4f; --dark:#1b1817; --dark-2:#262120;
  --dark-ink:#efeae6; --dark-mut:#b3aaa6; --card:#fff; --go:#2e7d32;
  --r:14px; --shadow:0 1px 2px rgba(29,26,25,.06),0 12px 32px rgba(29,26,25,.12);
  --shadow-lg:0 2px 4px rgba(29,26,25,.08),0 28px 60px rgba(29,26,25,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--ground);color:var(--ink);font-family:'Barlow',-apple-system,'Segoe UI',Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.cond,h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1}
h2{font-size:clamp(2rem,4.2vw,3rem);text-wrap:balance}
.kicker{font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:28px;height:3px;background:currentColor;flex:none}
.sub{color:var(--mut);max-width:62ch;font-size:1.08rem;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:1rem;padding:13px 24px;border-radius:8px;text-decoration:none;letter-spacing:.02em;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:background .15s,transform .15s}
.btn:active{transform:translateY(1px)}
.btn.red{background:var(--red);color:#fff}
.btn.red:hover{background:var(--red-dark)}
.btn.ghost{border-color:currentColor}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.light{border-color:rgba(255,255,255,.6);color:#fff}
.btn.light:hover{background:#fff;color:var(--ink)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
section{padding:var(--st-s5,96px) 0}
@media (max-width:700px){section{padding:var(--st-s4,64px) 0}}

/* ---------------- header (all three share the same nav) ---------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(27,24,23,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);color:#fff;border-bottom:3px solid var(--red)}
.nav .wrap{display:flex;align-items:center;gap:22px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none}
.brand svg{width:52px;height:52px;overflow:visible}
.brand .wm{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;line-height:.9}
.brand .wm b{color:var(--red-hi)}
.brand .wm small{display:block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.42em;color:var(--dark-mut);margin-top:4px}
.nav ul{display:flex;gap:4px;list-style:none;margin-left:auto}
.nav ul a{display:block;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:600;font-size:.95rem;color:#e7e1dd}
.nav ul a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav .btn{padding:9px 18px;font-size:.92rem}
.nav .signin{color:#e7e1dd;text-decoration:none;font-weight:600;font-size:.92rem}
.nav .burger{display:none;margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;border-radius:8px}
.nav .burger svg{width:26px;height:26px}
@media (max-width:980px){
  .nav ul,.nav .signin,.nav .btn{display:none}
  .nav .burger{display:inline-flex;align-items:center;justify-content:center}
  /* SIGN IN AND THE CALL TO ACTION GO IN THE MENU (owner 2026-09-21: "put it
     in the menus button area"). They are siblings of the <ul>, not inside
     it, so the old absolutely-positioned dropdown could only ever reveal the
     <ul> - .signin and .btn stayed display:none, and anyone on a phone had
     no way into the app at all. Wrapping the flex row is what lets all three
     stack; the bar has to give up its fixed 72px height to do it. */
  .nav.open .wrap{flex-wrap:wrap;height:auto;padding-bottom:16px}
  /* order keeps the burger on the top line beside the brand. Without it the
     three full-width items wrap first and the button ends up under the menu
     it opened, which is exactly as daft as it sounds. */
  .nav.open ul{order:1;display:flex;flex-direction:column;width:100%;margin:6px 0 0}
  .nav.open ul a{padding:14px 12px;font-size:1.1rem}
  .nav.open .signin{order:2;display:block;width:100%;padding:14px 12px;font-size:1.1rem;
    border-top:1px solid rgba(255,255,255,.16);margin-top:4px}
  .nav.open .btn{order:3;display:block;width:100%;margin-top:12px;text-align:center;font-size:1rem}
}
.brand .spin{transform-box:fill-box;transform-origin:50% 50%;animation:spin 5s cubic-bezier(.55,.06,.45,.94) infinite}
@keyframes spin{0%{transform:rotate(0)}40%,100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.brand .spin{animation:none}}

/* concrete wall strip (option 1 keeps the owner's cast-concrete look under the nav) */
.wallstrip{height:14px;background:#cfc9c0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .8 0 0 0 0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.25'/></svg>");box-shadow:inset 0 -4px 6px rgba(0,0,0,.12)}

/* ---------------- proof badges ---------------- */
.proof{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.proof span{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-weight:600;font-size:.9rem;color:var(--ink)}
.proof span::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--red) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.3l2.6 2.5L12 5.4' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;flex:none}
.dark .proof span,.hero-dark .proof span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}

/* ---------------- stacked-screens collage ---------------- */
.stack{position:relative;aspect-ratio:1/1;max-width:600px;margin-left:auto;width:100%}
.stack img{position:absolute;border-radius:12px;box-shadow:var(--shadow-lg);background:#fff}
.stack .s-ticket{width:76%;left:0;top:2%;transform:rotate(-3deg)}
.stack .s-map{width:64%;right:0;top:34%;transform:rotate(2.5deg);border-radius:16px}
.stack .s-phone{width:40%;left:28%;top:30%;border-radius:28px;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.stack .tag{position:absolute;z-index:3;background:var(--ink);color:#fff;font-weight:600;font-size:.8rem;padding:6px 12px;border-radius:999px;box-shadow:var(--shadow);white-space:nowrap}
.stack .tag b{color:var(--red-hi)}
.stack .t1{left:-2%;top:62%}.stack .t2{right:2%;top:24%}.stack .t3{right:10%;bottom:4%}
@media (max-width:900px){.stack{max-width:520px;margin:40px auto 0}}
@media (prefers-reduced-motion:no-preference){
  .stack img,.stack .tag{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .stack .s-map{animation-delay:.12s}.stack .s-phone{animation-delay:.24s}.stack .tag{animation-delay:.5s}
  @keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
}

/* ---------------- example showcase: tiles ---------------- */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:44px}
.tile{grid-column:span 2;position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile.wide{grid-column:span 3}
.tile .pic{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ground-2)}
.tile .pic img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s}
.tile:hover .pic img{transform:scale(1.04)}
.tile .pic .badge{position:absolute;left:14px;top:14px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.tile .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.tile h3{font-size:1.55rem}
.tile .one{color:var(--red);font-weight:600}
.tile p{color:var(--mut);font-size:.96rem}
.tile .go{margin-top:auto;padding-top:10px;font-weight:700;color:var(--red);display:inline-flex;gap:6px;align-items:center}
.tile .go::after{content:"\2192";transition:transform .2s}
.tile:hover .go::after{transform:translateX(4px)}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,1fr)}.tile,.tile.wide{grid-column:span 1}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}}

/* ---------------- example showcase: tour rows (option 2) ---------------- */
.tour{display:flex;flex-direction:column;gap:88px;margin-top:56px}
.row{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.row.flip .shot{order:2}
.row .shot{position:relative}
.row .shot .frame{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff;border:1px solid var(--line)}
.row .shot .frame img{width:100%}
.row .shot .phone-float{position:absolute;width:34%;right:-4%;bottom:-10%;border-radius:22px;box-shadow:0 24px 50px rgba(0,0,0,.35)}
.row.flip .shot .phone-float{right:auto;left:-4%}
.row .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1rem;color:var(--red);letter-spacing:.14em}
.row h3{font-size:clamp(2rem,3.6vw,2.8rem);margin:6px 0 12px}
.row .one{font-size:1.2rem;font-weight:600;color:var(--red);margin-bottom:10px}
.row p{color:var(--mut)}
.row ul{list-style:none;margin:16px 0 22px;display:grid;gap:8px}
.row li{padding-left:22px;position:relative}
.row li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--red)}
.dark .row p,.dark .row li{color:var(--dark-mut)}
.dark .row h3{color:#fff}
.dark .row .shot .frame{border-color:#3a3230}
/* On a phone the floating phone stopped being a composition and started
   being an obstruction - it was covering 11-21% of the document behind it,
   and on the quote it sat right over the description column. Below 900px it
   comes out of the overlap and sits UNDER the document, centred, so both are
   fully visible. The overlap stays on desktop, where there is room for it. */
@media (max-width:900px){
  .row{grid-template-columns:1fr;gap:28px}
  .row.flip .shot{order:0}
  .row .shot .phone-float,.row.flip .shot .phone-float{
    position:static;width:58%;max-width:230px;margin:16px auto 0;
    right:auto;left:auto;bottom:auto;display:block}
}

/* ---------------- example showcase: carousel strip (option 3) ---------------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,380px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 22px 26px;margin:40px -22px 0;scrollbar-width:thin}
.strip .tile{scroll-snap-align:start}
.strip .tile .pic{aspect-ratio:4/5}
.strip-hint{color:var(--mut);font-size:.9rem;margin-top:-4px}

/* ---------------- suite (the full feature list) ---------------- */
.suite{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media (max-width:980px){.suite{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.suite{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
.card h3{font-size:1.4rem;display:flex;justify-content:space-between;align-items:center;gap:8px}
.chip{font-family:'Barlow',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
.chip.live{background:var(--go);color:#fff}
.chip.soon{color:var(--mut);border:1px solid var(--line)}
.card .one{color:var(--red);font-weight:600}
.card ul{list-style:none;display:grid;gap:6px;font-size:.94rem;color:var(--mut)}
.card li{padding-left:16px;position:relative}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--red)}
.card .go{margin-top:auto;padding-top:8px;color:var(--red);font-weight:700;text-decoration:none}
.card .go:hover{text-decoration:underline}

/* ---------------- numbers strip ---------------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:44px}
.nums div{background:var(--card);padding:22px}
.nums b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.3rem;line-height:1;color:var(--ink)}
.nums span{color:var(--mut);font-size:.92rem}
@media (max-width:800px){.nums{grid-template-columns:repeat(2,1fr)}}

/* ---------------- dark band ---------------- */
.dark{background:var(--dark);color:var(--dark-ink)}
.dark h2{color:#fff}.dark .sub{color:var(--dark-mut)}
.dark .kicker{color:var(--red-hi)}
.walls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media (max-width:840px){.walls{grid-template-columns:1fr}}
.wall{border:1px solid #3a3230;border-top:4px solid var(--red);border-radius:var(--r);padding:24px;background:var(--dark-2)}
.wall h3{font-size:1.3rem;color:#fff;margin-bottom:10px}
.wall p{color:var(--dark-mut);font-size:.96rem}
.dark a.more{color:var(--red-hi);font-weight:700;text-decoration:none}

/* ---------------- field quote ---------------- */
.field .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.field .wrap{grid-template-columns:1fr}}
.bigquote{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.22;margin-top:16px}
.bigquote b{color:var(--red)}
.fieldlist{list-style:none;display:grid;gap:14px}
.fieldlist li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:14px 16px}

/* ---------------- FAQ ---------------- */
.faq{max-width:860px;margin-top:36px;display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:0 20px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.4rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--mut)}

/* ---------------- early access ---------------- */
.lead{max-width:780px;margin-top:30px}
.lead label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-mut);margin-bottom:6px}
/* The fields were --dark-2 on a dark section with a #3a3230 border - close
   enough to the ground that they read as panels rather than as things you
   type in, and the texture pass made that worse. Lighter fill, brighter
   edge, a lit top line so each one has a visible lip.
   (Outside review by Justin W., 2026-09-20.) */
.lead input,.lead textarea{width:100%;background:#312926;border:1.5px solid #5b4f4a;
  border-radius:8px;color:#fff;padding:13px;font:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.lead input::placeholder,.lead textarea::placeholder{color:#a79d98}
/* focus was `outline:none` plus a border colour change - the weakest state
   on the site, and the one that matters most, because it is the only path
   that brings work in. It gets the same ring every other control has. */
.lead input:focus-visible,.lead textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:2px;border-color:var(--red);background:#3a312d}
.lead input:focus,.lead textarea:focus{border-color:var(--red)}
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:760px){.lead-grid{grid-template-columns:1fr}}

/* ---------------- footer ---------------- */
footer{background:#141110;color:var(--dark-mut);padding:56px 0 40px;font-size:.92rem}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:800px){footer .cols{grid-template-columns:1fr 1fr}}
footer h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-size:1rem;margin-bottom:12px}
footer ul{list-style:none;display:grid;gap:7px}
footer a{color:var(--dark-mut);text-decoration:none}
footer a:hover{color:#fff}
footer .owned{display:block;margin-top:10px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
footer .owned b{color:#fff;letter-spacing:.1em}
footer .legal{border-top:1px solid #2c2624;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.84rem}

/* the parent company, right under the wordmark (owner 2026-09-19) */
.brand .wm .st-own{display:block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:#8d8480;margin-top:5px;line-height:1.4}
.brand .wm .st-own b{color:#c8c0bc;font-weight:800}
@media (max-width:560px){.nav .brand .wm .st-own{font-size:.46rem;letter-spacing:.06em;margin-top:4px}}
footer .brand .wm .st-own{color:#9a908b}

/* the owner's line, back where people see it (2026-09-19) */
.slogan{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:clamp(1.15rem,2.1vw,1.6rem);color:#fff;margin-bottom:14px}
.slogan b{color:var(--red-hi)}

/* P3 accessibility: skip link and thumb-sized targets on a phone */
.st-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;
  font:600 1rem 'Barlow',sans-serif;padding:12px 20px;border-radius:0 0 8px 0;text-decoration:none}
.st-skip:focus{left:0}
@media (max-width:980px){.nav.open ul a{min-height:44px;display:flex;align-items:center}}
@media (max-width:760px){
  .tile .go,.card .go,.jump a{min-height:44px;display:inline-flex;align-items:center}
  .faq summary{min-height:44px}
  footer ul a{display:inline-flex;align-items:center;min-height:38px}
}
/* :where() keeps this at ZERO specificity so it is only a DEFAULT. Written
   plainly it was (0,2,1) and beat every page rule that sets an image height -
   it blew the office wall clock mascot up to its natural 900px inside a 150px
   dial, and pushed the Red Hawk logo out of its panel. Owner caught both on a
   phone 2026-09-20. Never drop the :where(). */
:where(img[width][height]){height:auto}

/* ---------------- the chain: the whole day as one unbroken line ----------------
   Owner 2026-09-19: "everything works completely together, this is a complete
   unit - how do we flagship that". Each link is a real stop on a real job and
   goes to the example that proves it. The sweep runs once on load. */
.chain{background:#141110;color:#efeae6;border-top:3px solid var(--red);padding:30px 0 34px;overflow:hidden}
.chain .lead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.chain .lead b{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:.02em;color:#fff}
.chain .lead span{color:var(--dark-mut);font-size:.98rem}
.chain .lead span em{font-style:normal;color:var(--red-hi);font-weight:700}
.chain ol{list-style:none;display:flex;align-items:stretch;gap:0;margin:0;padding:0;overflow-x:auto;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chain li{flex:1 0 auto;position:relative}
.chain ol a,.chain ol span.stopx{display:flex;flex-direction:column;justify-content:center;gap:3px;
  text-decoration:none;color:#efeae6;padding:11px 10px 11px 22px;min-width:96px;min-height:62px;
  background:#211c1b;border:1px solid #332c2a;border-left:0;position:relative;transition:background .2s,color .2s}
.chain li:first-child a{border-left:1px solid #332c2a;border-radius:8px 0 0 8px;padding-left:18px}
.chain li:last-child a,.chain li:last-child span.stopx{border-radius:0 8px 8px 0}
.chain ol a::before,.chain ol span.stopx::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:14px;
  background:#141110;clip-path:polygon(0 0,100% 50%,0 100%)}
.chain li:first-child a::before{display:none}
.chain ol a::after{content:"";position:absolute;right:-13px;top:0;bottom:0;width:14px;z-index:2;
  background:#211c1b;clip-path:polygon(0 0,100% 50%,0 100%);transition:background .2s}
.chain li:last-child a::after{display:none}
.chain ol b{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:.95rem;letter-spacing:.03em;line-height:1}
.chain ol em{font-style:normal;color:var(--dark-mut);font-size:.72rem;letter-spacing:.02em}
.chain ol a:hover{background:#2d2523;color:#fff}
.chain ol a:hover::after{background:#2d2523}
.chain ol a:hover em{color:#e7ded9}
.chain .one-rec{margin-top:16px;color:var(--dark-mut);font-size:.95rem}
.chain .one-rec b{font-family:'Barlow',sans-serif;font-weight:700;color:#fff;text-transform:none;font-size:.95rem;letter-spacing:0}
.chain .one-rec .job{color:var(--red-hi);font-weight:800}
@media (prefers-reduced-motion:no-preference){
  .chain li{opacity:0;animation:chainIn .5s ease-out forwards}
  @keyframes chainIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
}
@media (max-width:820px){
  .chain ol{margin:0 -22px;padding:0 22px 10px}
  .chain li{flex:0 0 auto}
}

/* ============ the cut edge (2026-09-20) ============
   Sections used to butt together on a straight line. The mark on this site is
   a saw blade, so a dark section now BREAKS off the one above it: scored, then
   snapped, with a couple of chips out of it. Drawn as an inline SVG mask in a
   pseudo-element so it costs no request and takes whatever colour the section
   under it is.
   Use .st-cut on the DARK section. It reaches UP over the light section above,
   which is why the light one needs no class at all. */
.st-cut{position:relative}
.st-cut::before{
  content:"";position:absolute;left:0;right:0;top:-22px;height:23px;
  background:inherit;
  -webkit-mask-image:var(--st-cut);mask-image:var(--st-cut);
  -webkit-mask-size:1200px 23px;mask-size:1200px 23px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  pointer-events:none;
}
:root{
  /* 1200 wide, starts and ends at the same height so it repeats with no seam */
  --st-cut:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='23' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 9 L34 9 L76 12 L126 7 L184 14 L221 10 L266 6 L319 13 L380 8 L420 11 L468 15 L524 7 L559 12 L602 9 L653 14 L712 6 L750 11 L796 13 L850 8 L912 10 L953 12 L1002 7 L1059 9 L1095 14 L1139 11 L1191 9 L1200 9 L1200 23 L0 23 Z'/%3E%3C/svg%3E");
}
/* the score line: a thin bright rule right where the blade went in */
.st-cut::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:linear-gradient(90deg,rgba(198,40,40,0),rgba(198,40,40,.9) 18%,rgba(198,40,40,.9) 82%,rgba(198,40,40,0));
  pointer-events:none;
}
@media (max-width:700px){
  .st-cut::before{top:-13px;height:14px;-webkit-mask-size:700px 14px;mask-size:700px 14px}
}

/* ============ the scale (Phase 1, 2026-09-20) ============
   Before this, every page invented its own: three different h1 sizes across
   nine pages, h2 doing four jobs on one page, container widths of 1060, 1080,
   1120 and 1180 so the logo and the content did not share a left edge, and
   section padding drawn from eight unrelated numbers.

   These are the only sizes the site uses. A page may choose WHICH step it
   wants; it may not invent a new one. --st-display is the home hero and
   nothing else. */
:root{
  --st-maxw:1180px;          /* one container width, header to footer */
  --st-gut:22px;

  --st-s1:14px;              /* five steps, nothing between them */
  --st-s2:28px;
  --st-s3:40px;              /* the step rhythm inside a page */
  --st-s4:64px;
  --st-s5:96px;              /* between major sections */

  --st-display:clamp(3.1rem,7.6vw,6rem);   /* home hero only */
  --st-h1:clamp(2.5rem,5vw,3.9rem);        /* every other page */
  --st-h2:clamp(1.7rem,3.1vw,2.5rem);      /* section head */
  --st-h3:clamp(1.15rem,1.6vw,1.35rem);    /* sub-head */
  --st-cap:.88rem;                         /* captions, meta, kickers */
}

/* ---- the figure (Phase 2, 2026-09-20) ----
   Every screenshot on the site sat in a slightly different frame: radii of
   8, 10, 12, 14, 16 and 26, and four different shadows. Same job, seven
   implementations. These are the only two frames the site has - a DOCUMENT
   (paper, boards, maps, reports) and a PHONE, which stays rounder because a
   phone is a phone. */
:root{
  --st-fig-r:12px;
  --st-fig-r-phone:26px;
  --st-fig-bg:#fff;
  --st-fig-shadow:0 16px 44px rgba(29,26,25,.13);
  --st-fig-shadow-lift:0 26px 64px rgba(29,26,25,.20);
}

/* ---- tap targets (Phase 3, 2026-09-20) ---- see st-chrome.css for the why */
footer .cols ul a{display:inline-block;padding:7px 0;min-height:32px}
footer .cols ul{gap:2px}
.jump a{min-height:44px;display:inline-flex;align-items:center}

/* ===================================================================
   THE TOUR — bands, framed documents, chapter numerals (2026-09-20)
   Owner: "visually not there yet." Three changes, no restructure:
   the rows alternate onto a dark slab, every screenshot gets a caption
   bar so it reads as a document, and each chapter carries a big ghosted
   numeral. Layout, copy, order and links are untouched.
   =================================================================== */

/* the bands are full-bleed, so the page must not scroll sideways.
   `clip` and not `hidden` on purpose - `hidden` would turn <html> into a
   scroll container and break the sticky nav. */
html{overflow-x:clip}

.tour .row{position:relative}
.tour .row > *{position:relative;z-index:1}

/* --- 1. every other row sits on graphite ---
   The tour was ~3000px of one off-white ground with white paperwork on it,
   so nothing had anything to sit against. On a dark slab a job ticket
   reads as the object it is. */
.tour .row.band::before{
  content:"";position:absolute;z-index:0;
  left:50%;transform:translateX(-50%);width:100vw;
  top:-46px;bottom:-46px;background:var(--dark)}
.tour .row.band::after{
  content:"";position:absolute;z-index:0;
  left:50%;transform:translateX(-50%);width:100vw;
  top:-46px;height:3px;background:var(--red)}
.tour .row.band h3{color:#fff}
.tour .row.band p,.tour .row.band li,.tour .row.band .stat{color:var(--dark-mut)}
.tour .row.band .stat{font-weight:600;color:var(--dark-ink)}
.tour .row.band .one,.tour .row.band .num{color:var(--red-hi)}
.tour .row.band .shot .frame{border-color:#3a3230}
@media (max-width:700px){
  .tour .row.band::before{top:-30px;bottom:-30px}
  .tour .row.band::after{top:-30px}
}

/* --- 2. a caption bar under every screenshot ---
   Unframed, a white phone on a white page disappears. Named, the same
   picture reads as a document that came out of a real system. */
/* both parts align LEFT: the floating phone hangs over the bottom-RIGHT of a
   frame, which is exactly where a right-aligned detail would have sat. */
.tour .cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;
  padding:9px 14px;border-top:1px solid var(--line);background:#faf8f6}
.tour .cap .l{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--red);white-space:nowrap}
.tour .cap em{font-style:normal;font-size:.84rem;color:var(--mut)}
.tour .row.band .cap{background:#221e1d;border-top-color:#3a3230}
.tour .row.band .cap .l{color:var(--red-hi)}
.tour .row.band .cap em{color:var(--dark-mut)}
/* a phone is not paperwork - it keeps its own shape and just gets named */
.tour .shot .phonewrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.tour .shot .phonewrap .cap{border:1px solid var(--line);border-radius:8px;
  background:#faf8f6;padding:8px 14px;align-self:center}
.tour .row.band .phonewrap .cap{background:#221e1d;border-color:#3a3230}

/* --- 3. the chapter numeral ---
   "01 · FIELD OPS" was 11px of red. The ghost numeral gives the eye
   something to land on at the top of every chapter. Decorative only:
   it is a ::before on the text column, so screen readers never see it.
   It sits IN FLOW above the chapter label, not floating behind the heading:
   floated, a long title like "One truck's day, from above" ran straight
   through the numeral and both became hard to read. */
.tour .say::before{
  content:attr(data-n);display:block;
  font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;
  font-size:78px;line-height:.74;letter-spacing:-.03em;
  color:var(--ink);opacity:.16;margin-bottom:8px;
  pointer-events:none;user-select:none}
.tour .row.band .say::before{color:#fff;opacity:.2}
@media (max-width:900px){.tour .say::before{font-size:58px}}

/* ---- 4/5/6 on the tour (2026-09-20) ----
   4. Red is spent twice down the page instead of seven times. Every tour row
      had the same solid red button, so by row three red had stopped meaning
      "do this". First row and last row keep it; the five between are outlined
      - ghost on the light rows, light on the dark bands. Nothing was removed:
      the same links go to the same pages.
   5. A second real screen overlapping the first, so a row is a composition
      and not a picture beside a paragraph. Only where a TRUE second screen
      exists for that department - see the note on Fuel in index.html.
   6. A meta line carrying the actual data in that picture. */

/* 5 - NOT DONE, and deliberately so. The idea was a second screen
   overlapping the first in every row. Rows 01/05/06/07 already had it (the
   phone over the document) and they are the best-looking rows on the page.
   Rows 02, 03 and 04 were tried and reverted: Fuel has no second fuel screen
   that exists, Office already IS two screens stacked, and on Fleet the float
   sat on the map card own chips - including the green "Matches ticket
   JT-20260902-0601", which is the most convincing detail in the section.
   An overlap that covers the proof is worse than no overlap. */

/* 6 - the meta line: what is actually ON the screen above it */
.tour .meta{display:flex;align-items:center;gap:9px;margin:12px 0 0;
  font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  font-size:.74rem;letter-spacing:.05em;color:var(--mut)}
.tour .meta::before{content:"";width:6px;height:6px;background:var(--red);flex:none}
.tour .row.band .meta{color:var(--dark-mut)}
.tour .row.band .meta::before{background:var(--red-hi)}

/* ===================================================================
   TEXTURE AND FINISH (2026-09-20)
   Owner: "match them and do the whole site."

   >>> THIS EXACT BLOCK LIVES IN BOTH st.css AND st-chrome.css. <<<
   index.html loads st.css; every other page loads st-chrome.css.
   If you change one, change the other, or the home page and the rest
   of the site stop being made of the same material.

   ONE material, one angle, everywhere: diagonal "/" lines, 11px apart,
   in the site's own ink on the light ground and in white on the dark.
   The dark used to be 8px and the light 11px - close enough to read as
   a mistake rather than a choice, so both are 11px now.

   The opacity is BAKED INTO the SVG (stroke-opacity) rather than set
   with the opacity property, because some of these surfaces paint the
   texture as a background layer and some as a ::after - baking it is
   the only way the two can be guaranteed identical.
   =================================================================== */
:root{
  --tex-step:11px;
  --tex-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M-1 1l2-2M0 11l11-11M10 12l2-2' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
  --tex-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M-1 1l2-2M0 11l11-11M10 12l2-2' stroke='%231d1a19' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E");
}

/* ---- the light ground, site-wide ----
   On <body>, so every page and every section that does not paint its own
   background gets it without being listed. The three that DO paint their
   own light background are named. */
/* `html body` and not `body`: every example page carries its own inline
   `body{background:var(--ground)}`, a shorthand that resets background-image,
   and it is in the document AFTER this stylesheet. Two element selectors
   outrank one, so this wins wherever it is written. Caught by checking a
   page other than the one I had been testing. */
html body{background-image:var(--tex-light);background-size:var(--tex-step) var(--tex-step)}
.st-next,#built,#faq{
  background-image:var(--tex-light);background-size:var(--tex-step) var(--tex-step)}

/* ---- the dark sections ----
   Two mechanisms on purpose. The hero and the chain strip have a free
   ::after. The .dark sections do NOT - .st-cut::after is already the red
   score line where the blade went in - so those take the texture as a
   background layer on the element itself. Same tile, same angle, same
   baked opacity, so they are indistinguishable. */
.hero-dark,.chain{position:relative}
.hero-dark::after,.chain::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--tex-dark);background-size:var(--tex-step) var(--tex-step)}
.hero-dark > .wrap,.chain > .wrap{position:relative;z-index:1}
.dark{background-color:var(--dark);
  background-image:var(--tex-dark);background-size:var(--tex-step) var(--tex-step)}

/* the tour's graphite slabs were the one dark surface with no texture at
   all - the page read textured, flat, textured as you scrolled */
.tour .row.band::before{
  background-color:var(--dark);
  background-image:var(--tex-dark);background-size:var(--tex-step) var(--tex-step)}

/* ---- the blade ----
   ONE saw blade, ghosted, on the home hero only. It is the dashed ring
   from our own ST mark at the same tooth spacing, blown up - not a stock
   graphic, and it does not repeat, so it can never read as wallpaper.
   It fills the right half of the hero, which was empty dark until now.
   ::before is free here; on the .dark sections it is the cut edge. */
.hero-dark::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-190px;top:-150px;width:820px;height:820px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='%23ffffff' stroke-width='11' stroke-dasharray='13.2 4.07'/%3E%3Ccircle cx='50' cy='50' r='34' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.05}
@media (max-width:900px){
  .hero-dark::before{right:-240px;top:-110px;width:560px;height:560px;opacity:.045}
}

/* ---- hero finish: surfaces, red rules and interaction states ----
   Shadows, edge highlights and hover only. Nothing here sets a width,
   height, padding, margin, border, font or line-height, so none of it
   can move a word or rewrap a line. Verified by measuring all 105
   elements in the hero with and without it: identical. */
/* ---------- 2. REFINED SURFACES ----------
   Depth added inside the existing arrangement. Every one of these is a
   box-shadow, which paints outside the layout box and cannot reflow a
   thing. Dimensions, positions and proportions are exactly as they were. */

/* The hub shot is the dominant object on the page. It had one big soft
   shadow and a flat 1px ring; it now has a contact shadow close to the
   edge, the big ambient one further out, and a lit top edge - the way a
   real panel sits on a dark wall. */
.hero-dark .hk-hub{
  box-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 4px 10px rgba(0,0,0,.45),
    0 30px 70px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.26)}

/* the eight cards get the same three-part treatment, in miniature */
.hero-dark .stack.herokit .hk-grid img{
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.34),
    0 18px 38px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.28)}
.hero-dark .hk-clock{
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 3px 8px rgba(0,0,0,.34),
    0 18px 38px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.13),
    inset 0 1px 0 rgba(255,255,255,.2)}

/* the two chips on the cards were flat rectangles of colour */
.hero-dark .hk-tag{
  box-shadow:0 1px 2px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.14)}
.hero-dark .hk-fact{
  box-shadow:0 1px 2px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.3)}

/* the two proof pills under the buttons */
.hero-dark .proof span{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.3)}

/* the buttons: a lit top edge and a shadow in their own colour, so the
   red one glows faintly rather than sitting flat on the dark */
.hero-dark .btn.red{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 2px 6px rgba(0,0,0,.38),
             0 10px 26px rgba(198,40,40,.34)}
.hero-dark .btn.light,.hero-dark .btn.ghost{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 8px rgba(0,0,0,.3)}

/* the chain's stops: a hairline between them instead of a hard edge */
.chain ol a,.chain ol span.stopx{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}

/* ---------- 3. CONSISTENT GRAPHIC DETAILS ----------
   The site already speaks in red rules: the 3px under the nav, the 3px
   on top of .chain, the 28px bar on every kicker. These two put the same
   line in the two places it was missing, both inside existing space. */

/* a 2px red rule where the hub shot meets its own caption - the same red,
   the same weight, in the gap that was already there */
.hero-dark .hk-hubcap{box-shadow:inset 0 2px 0 var(--red)}

/* the kicker's bar picks up a faint glow so it reads as lit, not printed */
.hero-dark .kicker::before{box-shadow:0 0 12px rgba(255,90,79,.5)}

/* ---------- 4. POLISHED INTERACTION STATES ----------
   Nothing here changes a size or a behaviour, and nothing here is needed
   to read the page: every state is a refinement of one that already
   worked. All motion is behind prefers-reduced-motion. */

/* focus stays exactly the outline the site already uses - it just gets a
   soft halo so it is findable against the dark hero */
.hero-dark a:focus-visible,.chain a:focus-visible{
  box-shadow:0 0 0 6px rgba(198,40,40,.26)}

@media (prefers-reduced-motion:no-preference){
  .hero-dark .hk-card,.hero-dark .hk-tag,.hero-dark .hk-fact{
    transition:box-shadow .2s ease,translate .2s ease}
  .hero-dark .btn{transition:box-shadow .16s ease,translate .16s ease,
                             background .15s,color .15s}
  .chain ol a{transition:box-shadow .16s ease}

  /* `translate` and NOT `transform`: the hero art animates in with
     `animation:rise ... both`, and fill-mode both HOLDS transform after
     it finishes - a transform hover on these silently does nothing.
     This bit me once already. */
  .hero-dark .hk-card:hover{translate:0 -2px}
  .hero-dark .hk-card:active{translate:0 0}
  .hero-dark .btn:hover{translate:0 -1px}
  .hero-dark .btn:active{translate:0 1px}
}

/* the ring brightens on hover so a card reads as pickable. This is a
   box-shadow swap, so it works with motion off too. */
.hero-dark .hk-card:hover img{
  box-shadow:
    0 1px 2px rgba(0,0,0,.5),
    0 6px 14px rgba(0,0,0,.4),
    0 26px 52px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,90,79,.55),
    inset 0 1px 0 rgba(255,255,255,.34)}
.hero-dark .hk-card:hover .hk-tag{background:rgba(16,13,12,.98)}
.hero-dark .btn.red:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),
             0 2px 6px rgba(0,0,0,.4),
             0 14px 32px rgba(198,40,40,.46)}
.hero-dark .hk-hub:hover{
  box-shadow:
    0 1px 2px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.5),
    0 40px 90px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,90,79,.4),
    inset 0 1px 0 rgba(255,255,255,.3)}

/* ---- a customer saying it, 2026-09-20 ----
   Dana does payroll at Concrete Coring Company. Her words, verbatim, given
   by Shane. First name only because that is what he gave. This is the only
   testimonial on the site - do not add one that somebody did not say. */
.said{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:12px;padding:26px 28px;margin-top:34px;
  box-shadow:0 1px 2px rgba(29,26,25,.05),0 14px 34px rgba(29,26,25,.09)}
.said blockquote{margin:0;font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;color:var(--ink)}
.said blockquote::before{content:"\201C";font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:2.4rem;line-height:0;color:var(--red);
  margin-right:.12em;vertical-align:-.28em}
.said cite{display:block;margin-top:16px;font-style:normal;font-size:.95rem;color:var(--mut)}
.said cite b{color:var(--ink);font-weight:700}
.dark .said,.hero-dark .said{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);
  border-left-color:var(--red)}
.dark .said blockquote,.hero-dark .said blockquote{color:#fff}
.dark .said cite,.hero-dark .said cite{color:var(--dark-mut)}
.dark .said cite b,.hero-dark .said cite b{color:#fff}