/* Telltale: shared look for the homepage and the Services page */
:root { --ink:#0a0a0a; --cream:#faf5e4; --lime:#b4ff00; --red:#ff1500; --yellow:#ffe000; --blue:#0033ff; --pink:#ff00b4; --grey:#c3c3b9; --line:3px solid var(--ink); --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans:Arial Black, Arial, Helvetica, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:Arial, Helvetica, sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; } img { display:block; }
.wrap { width:min(1240px, calc(100% - 40px)); margin:auto; }
.eyebrow { margin:0; font:700 11px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.label { display:inline-block; padding:8px 10px; color:var(--cream); background:var(--ink); }
.h-xl, .h-lg, .h-md { margin:0; font-family:var(--sans); font-weight:900; letter-spacing:-.09em; text-transform:uppercase; }
.h-xl { font-size:clamp(46px,6.4vw,92px); line-height:.84; } .h-lg { font-size:clamp(40px,5.2vw,74px); line-height:.86; } .h-md { font-size:clamp(24px,2.4vw,32px); line-height:.9; letter-spacing:-.07em; }
.red { color:var(--red); } .lime { color:var(--lime); }

/* Ticker and navigation */
.ticker { overflow:hidden; white-space:nowrap; color:var(--lime); background:var(--ink); border-bottom:var(--line); } .ticker-track { display:inline-flex; gap:38px; min-width:max-content; padding:9px 0; font:700 12px var(--mono); letter-spacing:.08em; animation:marquee 30s linear infinite; } .ticker-track span { display:inline-flex; align-items:center; gap:13px; } .ticker-track b { color:var(--red); font-size:17px; } @keyframes marquee { to { transform:translateX(-50%); } }
.nav { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; border-bottom:var(--line); } .logo { font:900 21px/1 var(--sans); letter-spacing:-.1em; text-transform:uppercase; } .logo i { color:var(--red); font-style:normal; }
.nav-links { display:flex; align-items:center; gap:23px; font:700 12px var(--mono); text-transform:uppercase; } .nav-links a:not(.button):hover, .nav-links a[aria-current] { background:var(--lime); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:12px 16px; border:2px solid var(--ink); color:var(--ink); background:var(--lime); box-shadow:4px 4px 0 var(--ink); font:900 12px var(--sans); letter-spacing:-.03em; text-align:center; text-transform:uppercase; transition:transform .15s, box-shadow .15s; } .button:hover { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); } .button.dark { color:var(--cream); background:var(--ink); } .button.small { min-height:40px; padding:10px 13px; }
.text-link { border-bottom:2px solid currentColor; font-weight:800; font-size:13px; }

/* Hero */
.hero { display:grid; grid-template-columns:1.04fr .96fr; min-height:660px; border-bottom:var(--line); } .hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px; padding:60px 45px 60px 0; } .hero-copy > p:not(.eyebrow) { max-width:500px; margin:0; font-size:18px; line-height:1.5; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:6px; }
.hero-visual { position:relative; overflow:hidden; min-height:520px; border-left:var(--line); background:var(--red); } .hero-visual > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 85%; filter:grayscale(1) contrast(1.2) brightness(.68); opacity:.8; mix-blend-mode:multiply; } .hero-visual::after { position:absolute; inset:0; background:linear-gradient(130deg,#ff1500cc 2%,#ff150029 67%,#0a0a0ad9 100%); content:''; }
.sticker { position:absolute; z-index:1; top:27px; right:25px; max-width:220px; padding:10px 12px; border:2px solid var(--ink); background:var(--yellow); box-shadow:4px 4px 0 var(--ink); font:900 14px/1.05 var(--sans); text-transform:uppercase; transform:rotate(4deg); } .sticker small { display:block; margin-top:6px; font:700 9px/1.3 var(--mono); letter-spacing:.04em; }
.week-card { position:absolute; z-index:2; right:28px; bottom:28px; left:28px; border:var(--line); background:var(--cream); box-shadow:8px 8px 0 var(--ink); } .week-card header { display:flex; justify-content:space-between; padding:11px 13px; border-bottom:var(--line); font:700 10px var(--mono); text-transform:uppercase; } .week-card header b { color:var(--red); }
.week-item { padding:12px 13px; border-bottom:2px solid var(--ink); } .week-item:last-child { border-bottom:0; } .week-item div { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .week-item b { font-size:15px; } .week-item small { flex:none; font:700 9px var(--mono); color:var(--red); text-transform:uppercase; } .week-item p { margin:4px 0 0; color:#4a4a42; font-size:12px; line-height:1.4; }

/* What you get */
.get { padding:80px 0; } .get .h-lg { margin:12px 0 28px; } .get-grid { display:grid; grid-template-columns:repeat(3,1fr); border:var(--line); }
.get-card { min-height:250px; padding:24px; } .get-card + .get-card { border-left:var(--line); } .get-card:nth-child(1) { background:var(--yellow); } .get-card:nth-child(2) { color:var(--cream); background:var(--blue); } .get-card:nth-child(3) { background:var(--lime); } .get-card .no { display:block; margin-bottom:40px; font:900 10px var(--mono); } .get-card p { margin:12px 0 0; font-size:14px; line-height:1.5; }

/* How it works */
.how { display:grid; grid-template-columns:1fr 1fr; min-height:640px; color:var(--cream); background:var(--ink); border-top:var(--line); border-bottom:var(--line); } .how-photo { position:relative; overflow:hidden; } .how-photo img { width:100%; height:100%; object-fit:cover; opacity:.82; filter:grayscale(1) contrast(1.35); } .how-photo::after { position:absolute; inset:0; background:linear-gradient(0deg,#0033ffce,transparent 65%); content:''; } .how-label { position:absolute; z-index:1; right:28px; bottom:27px; left:28px; }
.how-steps { display:grid; align-content:center; gap:26px; margin:0; padding:52px 47px; list-style:none; } .how-steps li { padding-top:18px; border-top:3px solid var(--cream); } .how-steps span { color:var(--lime); font:800 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; } .how-steps h3 { margin:8px 0 6px; font:900 24px/.95 var(--sans); letter-spacing:-.07em; text-transform:uppercase; } .how-steps p { margin:0; color:var(--grey); font-size:14px; line-height:1.5; }

/* Signals */
.signals { display:grid; grid-template-columns:.8fr 1.2fr; min-height:560px; border-bottom:var(--line); } .signals-photo { position:relative; overflow:hidden; border-right:var(--line); background:var(--yellow); } .signals-photo img { width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05); }
.signals-copy { display:flex; flex-direction:column; justify-content:center; gap:16px; padding:54px 56px; background:var(--red); } .signals-copy > p { max-width:460px; margin:0; font-size:16px; line-height:1.45; }
.signal-lists { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px; } .signal-list { padding:16px; border:var(--line); background:var(--cream); box-shadow:5px 5px 0 var(--ink); } .signal-list h3 { margin:0 0 8px; font:900 20px/.9 var(--sans); letter-spacing:-.07em; text-transform:uppercase; } .signal-list ul { margin:0; padding-left:18px; font-size:13px; line-height:1.55; } .signal-list p { margin:8px 0 0; font:700 10px/1.35 var(--mono); color:var(--red); text-transform:uppercase; }

/* Pricing */
.pricing { padding:90px 0; } .pricing .h-lg { margin:12px 0 30px; } .price-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:34px; align-items:start; }
.price-card { display:flex; flex-direction:column; gap:16px; padding:28px; border:var(--line); background:var(--lime); box-shadow:9px 9px 0 var(--ink); } .price-card h3, .sprints h3 { margin:0; font:800 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .price-big { margin:0; font:900 clamp(44px,5vw,64px)/.85 var(--sans); letter-spacing:-.1em; text-transform:uppercase; } .price-sub { margin:0; font-size:14px; font-weight:700; }
.price-list { display:grid; gap:9px; margin:4px 0; padding:16px 0; border-top:var(--line); border-bottom:var(--line); list-style:none; font-size:13px; font-weight:700; } .price-list li::before { margin-right:9px; content:'✓'; }
.price-card > p:not(.price-big):not(.price-sub) { margin:0; font-size:13px; line-height:1.5; } .price-note { padding:12px 14px; border:2px solid var(--ink); background:var(--cream); } .price-note b { color:var(--red); } .price-card .button { align-self:flex-start; }
.sprints { display:flex; flex-direction:column; gap:16px; padding:28px; border:var(--line); background:var(--yellow); box-shadow:9px 9px 0 var(--ink); transform:rotate(1.2deg); } .sprints > p { margin:0; font-size:14px; font-weight:700; } .sprint-row { padding-top:14px; border-top:var(--line); } .sprint-row b { display:block; font:900 24px/.9 var(--sans); letter-spacing:-.07em; text-transform:uppercase; } .sprint-row span { display:block; margin-top:6px; font-size:14px; }

/* Free signal map form */
.map { color:var(--cream); background:var(--blue); border-top:var(--line); border-bottom:var(--line); } .map .wrap { display:grid; grid-template-columns:1fr 1fr; gap:55px; align-items:center; padding:90px 0; } .map-copy p { max-width:470px; margin:16px 0 0; font-size:17px; line-height:1.45; } .map-copy .h-lg { margin-top:12px; }
.map-form { display:flex; flex-direction:column; gap:14px; padding:26px; color:var(--ink); border:var(--line); background:var(--yellow); box-shadow:8px 8px 0 var(--ink); transform:rotate(-1.2deg); } .map-form label { font:800 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .map-form input { width:100%; min-height:46px; margin-top:6px; padding:0 12px; border:2px solid var(--ink); background:#fff; font:inherit; font-size:16px; } .map-form input:focus { outline:3px solid var(--red); outline-offset:1px; } .map-form .button { width:100%; margin-top:4px; } .form-msg { margin:0; font-size:14px; font-weight:700; line-height:1.4; } .form-msg:empty { display:none; } .form-note { margin:0; font-size:13px; line-height:1.4; } .form-note a { border-bottom:2px solid var(--ink); font-weight:700; } .hp { position:absolute; left:-9999px; }

/* FAQ */
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; padding:84px 0; } .faq .h-lg { margin-top:12px; }
details { border-top:var(--line); } details:last-child { border-bottom:var(--line); } summary { display:flex; justify-content:space-between; gap:16px; padding:17px 0; cursor:pointer; list-style:none; font-size:15px; font-weight:800; } summary::-webkit-details-marker { display:none; } summary::after { color:var(--red); content:'+'; font:900 24px/.6 var(--sans); } details[open] summary::after { transform:rotate(45deg); } details p { max-width:640px; margin:0; padding:0 0 18px; color:#555; font-size:14px; line-height:1.55; } details a { border-bottom:2px solid var(--ink); color:var(--ink); font-weight:700; }

/* Footer */
.footer { box-shadow:0 0 0 100vmax var(--ink); clip-path:inset(0 -100vmax); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding:24px 0; color:var(--cream); background:var(--ink); font:11px var(--mono); text-transform:uppercase; } .footer-links { display:flex; flex-wrap:wrap; gap:20px; align-items:center; } .footer-links a { border-bottom:1px solid var(--cream); } .footer-links a[href^="mailto"] { text-transform:none; }

/* Services page */
.page-hero { padding:80px 0 60px; border-bottom:var(--line); } .page-hero .h-xl { max-width:900px; margin:20px 0; } .page-hero p:last-child { max-width:620px; margin:0; font-size:18px; line-height:1.5; }
.sprint { display:grid; grid-template-columns:300px 1fr; margin:60px 0; border:var(--line); background:#fff; box-shadow:10px 10px 0 var(--ink); } .sprint-lead { position:relative; border-right:var(--line); background:var(--red); } .sprint-lead img { width:100%; height:100%; min-height:300px; object-fit:cover; filter:grayscale(1) contrast(1.15); mix-blend-mode:multiply; } .sprint-lead p { position:absolute; left:16px; bottom:16px; margin:0; padding:7px 9px; border:2px solid var(--ink); background:var(--yellow); font:900 13px var(--sans); text-transform:uppercase; transform:rotate(-2deg); }
.sprint:nth-of-type(2) .sprint-lead { background:var(--blue); }
.sprint-body { display:flex; flex-direction:column; gap:20px; padding:30px; } .sprint-body > p { margin:0; font-size:16px; line-height:1.5; } .sprint-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; padding:14px 16px; border:2px solid var(--ink); background:var(--lime); } .sprint-price b { font:900 22px var(--sans); letter-spacing:-.06em; } .sprint-price span { font-size:13px; }
.months { display:grid; grid-template-columns:repeat(3,1fr); border:2px solid var(--ink); } .months div { padding:14px; } .months div + div { border-left:2px solid var(--ink); } .months b { display:block; margin-bottom:6px; color:var(--red); font:800 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .months p { margin:0; font-size:13px; line-height:1.45; }
.you-get b { font:800 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .you-get ul { margin:8px 0 0; padding-left:18px; font-size:14px; line-height:1.6; font-weight:700; }
.people { padding:80px 0; color:var(--cream); background:var(--ink); } .people .h-lg { margin-bottom:34px; } .people-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; } .people-note { margin:26px 0 0; color:var(--grey); font-size:15px; }
.person { display:grid; grid-template-columns:150px 1fr; gap:20px; padding:22px; border:3px solid var(--cream); } .person img { width:150px; height:180px; object-fit:cover; border:3px solid var(--cream); filter:grayscale(1) contrast(1.1); } .person h3 { margin:0; font:900 26px/.9 var(--sans); letter-spacing:-.07em; text-transform:uppercase; } .person .role { margin:6px 0 12px; color:var(--lime); font:800 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; } .person p { margin:0 0 10px; color:var(--grey); font-size:14px; line-height:1.55; } .person a { color:var(--cream); border-bottom:2px solid var(--lime); font-weight:700; }
.call { color:var(--ink); background:var(--yellow); border-bottom:var(--line); } .call .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:30px; padding:80px 0; } .call p { max-width:560px; margin:14px 0 0; font-size:17px; line-height:1.45; } .call p a { border-bottom:2px solid var(--ink); font-weight:700; }

/* Section scroll snap: each scroll lands on the start of the next section */
.ticker, main > section, .footer { scroll-snap-align:start; } .footer { scroll-snap-align:end; }
@media(min-width:881px) and (prefers-reduced-motion:no-preference) { html { scroll-snap-type:y proximity; } }

@media(max-width:880px) {
  .wrap { width:min(100% - 32px, 650px); } .nav-links a:not(.button) { display:none; }
  .hero, .how, .signals, .price-grid, .map .wrap, .faq, .people-grid { grid-template-columns:1fr; }
  .hero-copy { padding:52px 0; } .hero-visual { display:flex; flex-direction:column; min-height:0; padding:0 16px 18px; border-top:var(--line); border-left:0; } .hero-visual > img { position:relative; inset:auto; width:calc(100% + 32px); height:min(112vw,480px); margin:0 -16px; object-position:50% 42%; } .week-card { position:relative; inset:auto; margin-top:-36px; }
  .get-grid { grid-template-columns:1fr; } .get-card + .get-card { border-left:0; border-top:var(--line); } .get-card { min-height:0; } .get-card .no { margin-bottom:20px; }
  .how-photo { min-height:440px; } .how-steps { padding:40px 23px; }
  .signals-photo { min-height:340px; border-right:0; border-bottom:var(--line); } .signals-copy { padding:40px 23px; } .signal-lists { grid-template-columns:1fr; }
  .sprints { transform:none; } .map-form { transform:none; } .faq { gap:24px; }
  .sprint { grid-template-columns:1fr; } .sprint-lead { border-right:0; border-bottom:var(--line); } .sprint-lead img { height:300px; } .months { grid-template-columns:1fr; } .months div + div { border-left:0; border-top:2px solid var(--ink); }
}
@media(max-width:500px) {
  .wrap { width:calc(100% - 28px); } .nav-links .button { min-height:38px; padding:9px 11px; font-size:11px; }
  .person { grid-template-columns:1fr; } .person img { width:120px; height:140px; }
  .footer { flex-direction:column; align-items:flex-start; }
  .footer-links { gap:4px 20px; } .footer-links a, .person a, .call p a { display:inline-block; padding:8px 0; }
}