/* Shortbow Operations. Moved verbatim from reference/prototype.html; production additions are at the end. */

@font-face { font-family: "BM1"; src: url("/fonts/BrutalMilkNo1-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "BM2"; src: url("/fonts/BrutalMilkNo2-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Layout: Outsource-style type hero, then a two-column story with copy scrolling left and one pinned stage on the right that moves from scattered tools to a designed stack */
:root {
  --canvas: #120501;
  --surface: #1a0904;
  --ink: #D2795E;
  --ink-dim: #b46d56;
  --sand: #DEC9A3;
  --rule: #3a1a0f;
  --line: #6b331f;
  --on-ink: #120501;
  --f-display: "BM2", ui-sans-serif, system-ui, sans-serif;
  --f-body: "BM1", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { background: var(--canvas); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canvas); }
/* grain made of the terracotta (the old site's recipe): noise only masks a solid ink layer, so it warms the maroon instead of graying it */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: .55;
  background: var(--ink);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.glow-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }
main { position: relative; z-index: 1; }
.gutter { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1360px; margin: 0 auto; }
.display { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.03em; }
.label { font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0; }
.line-mask { overflow: hidden; }

/* nav */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 20; transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease), box-shadow .5s var(--ease); }
.nav .logo, .nav .navcol { border-radius: 0; transition: background-color .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s var(--ease); }
.nav .logo { padding: 8px 12px; margin: -8px -12px; }
.nav .navcol { padding: 8px 14px; margin: -8px 0; }
.nav.scrolled .logo, .nav.scrolled .navcol { background-color: rgba(18, 5, 1, .68); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgba(18, 5, 1, .9); }
.nav .wrap { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 24fr) minmax(0, 18fr); align-items: start; padding-block: 22px; }
.navcol { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; }
.nav .btn { justify-self: end; }
.scr-t { display: inline-block; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; justify-self: start; }
.logo-svg { display: block; height: 26px; width: auto; }
.logo-svg.sm { height: 18px; opacity: .8; }
.logo b { font-family: var(--f-display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--sand); }
.logo span { font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .16em; color: var(--ink); border: 1px solid var(--ink-dim); padding: 2px 6px; }
.nav a.link { align-self: flex-start; color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; background: linear-gradient(var(--sand), var(--sand)) left bottom / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.nav a.link:hover, .nav a.link:focus-visible { background-size: 100% 1px; color: var(--sand); }
.btn { display: inline-block; font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--on-ink); background: var(--sand); text-decoration: none; padding: 14px 20px; border: 0; border-radius: 0; cursor: pointer; will-change: transform; }
.btn.lg { font-size: 16px; padding: 18px 26px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
.btn span { display: inline-block; pointer-events: none; }

/* hero */
.hero { position: relative; z-index: 3; min-height: max(640px, 88svh); display: flex; align-items: flex-end; overflow-x: clip; overflow-y: visible; }
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 140px 72px; display: grid; gap: 32px; }
.hero h1 { margin: 0; font-size: clamp(54px, min(9.4vw, 28.4svh - 125px), 120px); line-height: .88; color: var(--ink); max-width: 11.5ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--sand); }
.hero-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.hero-foot p { margin: 0; max-width: 46ch; font-size: 18px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cta small { font-size: 14px; color: var(--ink-dim); max-width: 28ch; line-height: 1.4; }
.dither { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: calc(100% + 30vh); image-rendering: pixelated; pointer-events: none; }
.dither-side { display: block; width: 100%; height: 100%; min-height: 320px; image-rendering: pixelated; pointer-events: none; }
.horizon { position: absolute; left: 0; right: 0; top: 0; height: 120px; background-repeat: repeat-x; image-rendering: pixelated; pointer-events: none; opacity: .6; }
.guides { position: absolute; z-index: 1; top: 0; bottom: 0; left: max(24px, env(safe-area-inset-left, 0px)); right: max(24px, env(safe-area-inset-right, 0px)); max-width: 1360px; margin: 0 auto; pointer-events: none; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.guides i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.hero .wrap > * { position: relative; }

/* story */
.story { position: relative; z-index: 2; overflow-x: clip; }
.story .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px; }
.beats { position: relative; z-index: 2; }
.beat { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; max-width: 30rem; padding-block: 80px; }
.beat h2 { margin: 0; font-size: clamp(40px, 5vw, 76px); line-height: 1; text-wrap: balance; }
.beat h2 em { font-style: normal; color: var(--sand); }
.beat p { margin: 0; max-width: 40ch; }
.stage-col { position: relative; }
.stage-pin { position: sticky; top: 0; height: 100vh; padding-top: 120px; display: flex; align-items: center; }
.stage { position: relative; width: 100%; height: min(78vh, 720px); }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.stage line.hot { stroke: var(--sand); }
.tool { position: absolute; left: 0; top: 0; padding: 9px 13px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.tool .t-l { display: block; font-family: var(--f-display); font-weight: 500; font-size: 15px; line-height: 1.2; color: var(--ink); }
.tool .t-sub { display: block; font-size: 12px; line-height: 1.3; color: var(--ink-dim); margin-top: 2px; }
.tool .tag { position: absolute; top: -10px; right: -8px; font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 0; opacity: 0; }
.tool .tag.keep { background: var(--sand); color: var(--on-ink); }
.tool .tag.move { background: var(--ink); color: var(--on-ink); }
.tool .tag.cut { border: 1px solid var(--ink-dim); color: var(--ink-dim); background: var(--canvas); }
.tool.core { border-color: var(--ink-dim); }
.record { position: absolute; left: 0; top: 0; width: 230px; padding: 18px 20px; border: 1px solid var(--ink); border-radius: 0; background: #1f0b05; opacity: 0; text-align: left; will-change: transform, opacity; }
.record .r-k { font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.record .r-n { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.1; color: var(--sand); margin: 4px 0 8px; }
.record .r-s { font-size: 12px; color: var(--ink); display: flex; gap: 6px; flex-wrap: wrap; }
.record .r-s i { font-style: normal; padding: 2px 8px; border: 1px solid var(--rule); display: inline-block; }
.person { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; will-change: transform, opacity; }
.person .av { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 14px; }
.person .role { font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
.person .ai { position: absolute; top: -8px; right: -14px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sand); background: var(--canvas); color: var(--sand); display: grid; place-items: center; font-size: 11px; opacity: 0; transform: scale(.4); }
.ai-layer { position: absolute; left: 6%; right: 6%; top: 2%; height: 9.5%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid var(--line); background: var(--canvas); opacity: 0; }
.ai-layer b { width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: var(--on-ink); display: grid; place-items: center; font-size: 13px; flex: none; }
.ai-layer .ai-t { font-family: var(--f-display); font-weight: 500; font-size: 17px; color: var(--sand); }
.ai-layer { z-index: 2; }
.ai-txt { display: grid; gap: 2px; max-width: 34%; }
.ai-layer .ai-s { grid-area: 2 / 1; font-size: 12px; line-height: 1.35; color: var(--ink-dim); }
.ai-layer .ai-s.s5 { opacity: 0; color: var(--sand); }
.person { z-index: 3; }
.ctx-lbl { position: absolute; left: 32%; top: 25%; transform: translate(-50%, -50%); padding: 2px 8px; font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); background: var(--canvas); white-space: nowrap; opacity: 0; }
.lane { position: absolute; top: 15%; transform: translateX(-50%); font-family: var(--f-display); font-weight: 600; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); background: var(--canvas); padding: 2px 6px; opacity: 0; }
.edge-lbl { position: absolute; transform: translate(-50%, -50%); padding: 1px 6px; font-size: 11px; line-height: 1.4; color: var(--ink-dim); background: var(--canvas); white-space: nowrap; opacity: 0; pointer-events: none; }
.stage line.ai-drop { stroke: var(--line); stroke-dasharray: .02 .03; stroke-dashoffset: 0; opacity: 0; }
.pulses circle { fill: var(--sand); }
.ainode { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--sand); border-radius: 999px; background: var(--canvas); opacity: 0; }
.ainode b { width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: var(--on-ink); display: grid; place-items: center; font-size: 13px; }
.ainode span { font-size: 13px; color: var(--sand); white-space: nowrap; }
.stage-cap { position: absolute; left: 0; right: 0; top: 88%; text-align: center; font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--sand); opacity: 0; }
.bucket { position: absolute; top: 0; height: 83%; width: 22.6%; border: 1px dashed var(--line); opacity: 0; pointer-events: none; }
.bucket span { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-size: 12px; color: var(--ink-dim); }
.tool .t-rec { display: block; font-size: 11px; line-height: 1.3; color: var(--sand); opacity: .85; margin-top: 3px; }
.scan { position: absolute; left: -4%; right: -4%; top: 0; height: 1px; background: var(--sand); box-shadow: 0 0 14px 1px rgba(222,201,163,.25); opacity: 0; }
.scan-trail { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background-repeat: repeat-x; background-position: left bottom; image-rendering: pixelated; opacity: .75; pointer-events: none; }
.stage-floor { position: absolute; left: -6%; right: -6%; bottom: -8%; height: 44%; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; opacity: .35; pointer-events: none; }
.record { image-rendering: pixelated; }

/* after */
.after { position: relative; }
.after .wrap { position: relative; padding-block: 120px 96px; display: grid; gap: 48px; }
.after-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.after-head .dither-side { height: 340px; }
.after h2 em { font-style: normal; color: var(--sand); }
.after h2 { margin: 0; font-size: clamp(40px, 5.6vw, 84px); line-height: .98; max-width: 14ch; }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.offer { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.offer .who { font-size: 13px; color: var(--ink-dim); }
.offer h3 { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 30px; letter-spacing: -0.01em; }
.offer .price { font-family: var(--f-display); font-weight: 500; font-size: 44px; line-height: 1; color: var(--sand); letter-spacing: -0.02em; }
.offer .price small { font-family: var(--f-body); font-size: 14px; color: var(--ink-dim); letter-spacing: 0; margin-left: 6px; }
.offer p { margin: 0; }
.close { position: relative; }
.close .wrap { position: relative; padding-block: 120px 96px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 48px; align-items: center; }
.close-copy { display: grid; gap: 40px; }
.close .dither-side { height: 460px; }
.close h2 { margin: 0; font-size: clamp(44px, 6vw, 104px); line-height: .95; max-width: 12ch; }
.close h2 em { font-style: normal; color: var(--sand); }
.foot { position: relative; }
.foot .wrap { position: relative; padding-block: 28px 44px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--ink-dim); }
.foot-note { font-size: 12px; color: var(--ink-dim); }

@media (max-width: 900px) {
  .guides { display: none; }
  .nav .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .navcol { display: none; }
  .story .wrap { grid-template-columns: minmax(0, 1fr); }
  .stage-col { display: none; }
  .beat { min-height: auto; padding-block: 72px; border-top: 1px solid var(--rule); }
  .offers { grid-template-columns: minmax(0, 1fr); }
  .after-head, .close .wrap { grid-template-columns: minmax(0, 1fr); }
  .dither-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav a.link, .btn { transition: none; }
}

/* ---- production additions ---- */

/* full-bleed sections, so the hero guides line up with the nav columns at every width */
body { margin: 0; }

/* hero headline (rule up top): the 28.4svh - 125px term shrinks it only on windows too short to show the Book a call button, keeping ~40px below it */

/* nav links 24px apart center to center (WCAG target spacing); the prototype's 4px gap left them at 23.2px */
.navcol { gap: 5px; }

/* skip link: off screen until focused */
.skip { position: fixed; top: 12px; left: 12px; z-index: 60; transform: translateY(calc(-100% - 24px)); }
.skip:focus { transform: none; }

/* the hero waits for its intro only when scripts are running (html.js, set in the head); no-JS and reduced-motion visitors see it at once */
@media (prefers-reduced-motion: no-preference) {
  .js .split-hero, .js [data-fade] { opacity: 0; }
}


/* 404 */
.nf { position: relative; z-index: 1; min-height: 100svh; display: flex; align-items: center; }
.nf .wrap { width: 100%; padding-block: 140px 72px; display: grid; justify-items: center; gap: 28px; text-align: center; }
.nf h1 { margin: 0; font-size: clamp(44px, 6vw, 104px); line-height: .95; color: var(--ink); text-wrap: balance; }

@media (max-width: 900px) {
  /* 44px tap target for the logo; the negative margin keeps it in place */
  .nav .logo { padding-block: 9px; margin-block: -9px; }
  /* below ~406px the full-size logo runs under the button: let it scale down instead, with a gap */
  .nav .wrap { column-gap: 16px; }
  .nav .logo, .nav .logo-svg { min-width: 0; }
  .nav .logo-svg { max-width: 100%; }
}