/* Saw Time — shared header, footer and "next example" strip, 2026-09-19.
   Every class is prefixed st- on purpose: the example pages each carry their
   own <style> block using generic names (.wrap, .card, .btn, .logo), and this
   file has to sit beside them without touching any of it. */
:root{
  --st-red:#c62828; --st-red-hi:#ff5a4f; --st-dark:#1b1817; --st-dark-2:#262120;
  --st-mut:#b3aaa6; --st-line:#dcd7d3;
}
.st-nav{position:sticky;top:0;z-index:60;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(--st-red);font-family:'Barlow',-apple-system,'Segoe UI',Arial,sans-serif}
.st-nav .st-in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:22px;height:72px}
.st-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:none}
.st-brand svg{width:52px;height:52px;overflow:visible;flex:none}
.st-brand .st-wm{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase;line-height:.9}
.st-brand .st-wm b{color:var(--st-red-hi)}
.st-brand .st-wm small{display:block;font-family:'Barlow',sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.42em;color:var(--st-mut);margin-top:4px}
.st-brand .st-spin{transform-box:fill-box;transform-origin:50% 50%;animation:st-spin 5s cubic-bezier(.55,.06,.45,.94) infinite}
@keyframes st-spin{0%{transform:rotate(0)}40%,100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.st-brand .st-spin{animation:none}}
.st-nav ul{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.st-nav ul a{display:block;padding:8px 12px;border-radius:6px;text-decoration:none;font-weight:600;font-size:.95rem;color:#e7e1dd}
.st-nav ul a:hover,.st-nav ul a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.st-nav .st-signin{color:#e7e1dd;text-decoration:none;font-weight:600;font-size:.92rem}
.st-nav .st-cta{background:var(--st-red);color:#fff;text-decoration:none;font-weight:600;font-size:.92rem;padding:9px 18px;border-radius:8px}
.st-nav .st-cta:hover{background:#a31f1f}
.st-nav .st-burger{display:none;margin-left:auto;background:none;border:0;color:#fff;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer}
.st-nav .st-burger svg{width:26px;height:26px}
@media (max-width:980px){
  .st-nav ul,.st-nav .st-signin,.st-nav .st-cta{display:none}
  .st-nav .st-burger{display:inline-flex}
  /* Same fix as .nav in st.css, and the same reason: Sign in and the call to
     action sit OUTSIDE the <ul>, so an absolutely-positioned dropdown showed
     the links and nothing else. Thirteen of the fifteen storefront pages
     wear this nav, so on a phone almost the whole site had no way in. */
  .st-nav.st-open .st-in{flex-wrap:wrap;height:auto;padding-bottom:16px}
  /* order keeps the burger on the top line beside the brand, instead of
     wrapping below the menu it just opened. */
  .st-nav.st-open ul{order:1;display:flex;flex-direction:column;width:100%;margin:6px 0 0}
  .st-nav.st-open ul a{padding:14px 12px;font-size:1.1rem}
  .st-nav.st-open .st-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}
  .st-nav.st-open .st-cta{order:3;display:block;width:100%;margin-top:12px;text-align:center}
}
/* next-example strip */
.st-next{background:#f4f2ef;border-top:1px solid var(--st-line);padding:44px 0;font-family:'Barlow',sans-serif}
.st-next .st-in{max-width:1180px;margin:0 auto;padding:0 22px}
.st-next h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.8rem;margin:0 0 4px;color:#1d1a19;letter-spacing:.01em}
.st-next p{color:#655e5b;margin:0 0 20px}
.st-next .st-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media (max-width:900px){.st-next .st-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.st-next .st-row{grid-template-columns:1fr}}
.st-next a.st-card{display:block;background:#fff;border:1px solid var(--st-line);border-left:4px solid var(--st-red);border-radius:10px;padding:14px 16px;text-decoration:none;color:#1d1a19;transition:transform .15s,box-shadow .15s}
.st-next a.st-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(29,26,25,.14)}
.st-next a.st-card b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:1.15rem}
.st-next a.st-card span{color:#655e5b;font-size:.88rem}
/* footer */
.st-foot{background:#141110;color:var(--st-mut);padding:56px 0 40px;font-size:.92rem;font-family:'Barlow',sans-serif;line-height:1.6}
.st-foot .st-in{max-width:1180px;margin:0 auto;padding:0 22px}
.st-foot .st-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
@media (max-width:800px){.st-foot .st-cols{grid-template-columns:1fr 1fr}}
.st-foot h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#fff;font-size:1rem;margin:0 0 12px}
.st-foot ul{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.st-foot a{color:var(--st-mut);text-decoration:none}
.st-foot a:hover{color:#fff}
.st-foot .st-owned{display:block;margin-top:10px;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.st-foot .st-owned b{color:#fff;letter-spacing:.1em}
.st-foot .st-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}
.st-foot .st-perm{text-align:center;color:#8a807c;font-size:.84rem;border-top:1px solid #2c2624;margin-top:30px;padding-top:18px}
/* the parent company, right under the wordmark (owner 2026-09-19) */
.st-brand .st-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}
.st-brand .st-wm .st-own b{color:#c8c0bc;font-weight:800}
/* owner 2026-09-19: he wants the parent company under the wordmark on phones too */
@media (max-width:560px){.st-brand .st-wm .st-own{font-size:.46rem;letter-spacing:.06em;margin-top:4px}}
/* the owner's line, under the header on every page (2026-09-19) */
.st-slogan{background:#241f1e;border-bottom:1px solid #332c2a;font-family:'Barlow Condensed',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:#efeae6;text-align:center;padding:9px 16px}
.st-slogan b{color:#ff5a4f}
/* closing ask — the bottom of every inner page (audit P1, 2026-09-19).
   No page should end on what isn't built yet. */
.st-ask{background:#1b1817;color:#efeae6;padding:52px 0;font-family:'Barlow',sans-serif}
.st-ask .st-in{max-width:1180px;margin:0 auto;padding:0 22px}
.st-ask h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1;color:#fff;margin:0 0 10px;letter-spacing:.01em}
.st-ask p{color:#b3aaa6;max-width:62ch;margin:0 0 22px}
.st-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.st-btn{display:inline-block;background:var(--st-red);color:#fff;font-weight:600;padding:13px 24px;
  border-radius:8px;text-decoration:none;border:2px solid var(--st-red)}
.st-btn:hover{background:#a31f1f;border-color:#a31f1f}
.st-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.st-btn.ghost:hover{background:#fff;color:#1b1817;border-color:#fff}
.st-mail{color:#b3aaa6;text-decoration:none;font-size:.95rem}
.st-mail:hover{color:#fff;text-decoration:underline}
/* the paperwork, readable on a phone (audit P2) */
.st-fit{display:none}
@media (max-width:760px){
  .st-fit{display:inline-block;margin:0 0 10px;background:#fff;border:1.5px solid var(--st-line);
    border-radius:999px;padding:8px 16px;font:600 .88rem 'Barlow',sans-serif;color:#1d1a19;cursor:pointer}
  .st-fit:hover{border-color:var(--st-red);color:var(--st-red)}
  .st-fitted{overflow:hidden!important}
}
/* P3 accessibility: a skip link, and thumb-sized targets on a phone */
.st-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--st-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){
  .st-nav.st-open ul a{min-height:44px;display:flex;align-items:center}
}
@media (max-width:760px){
  .st-next a.st-card{min-height:56px}
  .st-btn,.st-mail{min-height:44px;display:inline-flex;align-items:center}
}
/* every <img> now carries width/height so pages stop jumping while they load;
   without this the height attribute fights the CSS and the art comes out tall */
/* :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 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) ----
   Measured on a phone: footer links were 18px tall and the paper "Full size"
   button 35px. These are men in work gloves. Links in running prose are left
   alone - WCAG exempts those, and padding them would wreck the paragraph. */
.st-foot ul a{display:inline-block;padding:7px 0;min-height:32px}
.st-foot ul{gap:2px}
.st-fit,.st-paper-btn{min-height:44px}

/* ===================================================================
   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}
}