/* Intrepid Sales Co. simplified home: three choices, each one a path.
   Tokens match the live site (intrepidsalesco.com). */
:root {
  --bg: #0d0c0c;
  --surface: #1a1717;
  --surface-2: #221e1e;
  --line: #ffffff14;
  --line-strong: #ffffff29;
  --text: #f1ece4;
  --text-2: #b8b0a6;
  --text-3: #7d766e;
  --red: #b1100f;
  --red-2: #d61c1b;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-lg: 22px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--font-body);
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 14px; }
/* The logo sits on a black plate, and a sonar ping crosses it. The ping is a curved
   wave front that starts off the left edge and travels across, with a fading wake
   behind it and a fainter echo following. It shows through the gaps in the mark,
   and only the SALES CO lettering brightens as the wave reaches it. It repeats every 3.6 seconds.
   Each wave is a big circle centred off the left edge: scaling it up moves its
   rim across the plate, which is what makes the front curved and not a straight bar. */
.brand-plate { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 78px; height: 64px; overflow: hidden; background: #000; border-radius: 12px; animation: ping-glow 3.6s ease-out infinite; }
.brand-plate::before, .brand-plate::after {
  content: ""; position: absolute; left: -30%; top: 50%; width: 340%; aspect-ratio: 1; margin: -170% 0 0 -170%; border-radius: 50%;
  background: radial-gradient(circle closest-side, transparent 52%, #b1100f26 70%, #d61c1b8c 86%, #f1ece4 95%, transparent 100%);
  transform: scale(.02); opacity: 0; animation: ping 3.6s linear infinite;
}
.brand-plate::after { animation-delay: .38s; filter: opacity(.45); }
.brand-mark { position: relative; z-index: 1; width: 72px; height: 60px; object-fit: contain; }
/* A second copy of the mark, cut down to just the "SALES CO" lettering and turned up bright.
   It fades in as the wave reaches it, holds for a second and a half so the words
   can be read, then dims before the next ping. */
.brand-mark.lit { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; clip-path: inset(75% 22% 12% 24%); filter: grayscale(1) brightness(3) contrast(3); mix-blend-mode: screen; opacity: 0; animation: ping-read 3.6s ease-out infinite; }
/* A soft white glow behind the lit words: a blurred copy of the same lettering, faded out
   at its edges by an oval mask so it never shows as a box. */
.brand-mark.lit.glow { z-index: 1; clip-path: none; filter: grayscale(1) brightness(3) contrast(3) blur(1.6px); -webkit-mask-image: radial-gradient(ellipse 30% 9% at 49% 81%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 30% 9% at 49% 81%, #000 45%, transparent 100%); }
.brand:hover .brand-plate, .brand:hover .brand-plate::before, .brand:hover .brand-plate::after, .brand:hover .brand-mark { animation-duration: 2.4s; }
@keyframes ping {
  0% { transform: scale(.02); opacity: 0; }
  5% { opacity: 1; }
  40% { opacity: 1; }
  52%, 100% { transform: scale(1.15); opacity: 0; }
}
/* On at about 1.0s, held to about 2.5s (a 1.5 second read), off by 3.0s. */
@keyframes ping-read {
  0%, 22% { opacity: 0; }
  28%, 70% { opacity: 1; }
  83%, 100% { opacity: 0; }
}
@keyframes ping-glow {
  0%, 50%, 100% { box-shadow: 0 0 0 0 #d61c1b00; }
  23% { box-shadow: 0 0 22px 2px #d61c1b73; }
}
@media (max-width: 860px) { .brand-plate { width: 64px; height: 52px; } .brand-mark { width: 58px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .brand-plate, .brand-plate::before, .brand-plate::after, .brand-mark { animation: none; } }
.brand b { display: block; font: 700 17px/1.1 var(--font-display); letter-spacing: .18em; }
.brand div span { display: block; font-size: 10px; letter-spacing: .28em; color: var(--text-2); margin-top: 4px; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav .call, .nav .call[aria-current] { white-space: nowrap; color: #fff; font-weight: 700; background: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 9px 18px; transition: background .3s, border-color .3s; }
.nav .call:hover { color: #fff; background: var(--red-2); border-color: var(--red-2); }

/* Hero */
main { flex: 1; }
.hero { padding-top: clamp(28px, 6vh, 64px); padding-bottom: clamp(24px, 4vh, 40px); }
.kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--red-2); }
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--red-2); }
h1 { margin: 0; font: 700 clamp(34px, 5.4vw, 60px)/1.05 var(--font-display); letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; }
h1 em { font-style: normal; color: var(--red-2); }
.lede { margin: 16px 0 0; max-width: 56ch; color: var(--text-2); }
.hero .fine.soon { color: var(--red-2); font-weight: 700; letter-spacing: .04em; }
.hero .fine { margin: 12px 0 0; max-width: 56ch; font-size: 14.5px; color: var(--text-3); }
.back { display: inline-block; margin-bottom: 18px; font-size: 14px; color: var(--text-3); }
.back:hover { color: var(--text); }

/* The three choices */
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: clamp(40px, 8vh, 80px); }
.card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform .5s var(--ease-out), border-color .4s, background .4s;
}
/* Dark red glow under the pointer, same as the live site. glow.js sets --mx / --my. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(400px 260px at var(--mx, 50%) var(--my, 0%), #d61c1b29, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: #d61c1b80; outline: none; }
.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card h2 { margin: 0; font: 700 clamp(18px, 1.7vw, 21px)/1.25 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.card .pitch { margin: 10px 0 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-2); }
.card .pitch::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: 12px; background: var(--red-2); }
.card .body { margin: 14px 0 26px; font-size: 15.5px; color: var(--text-2); }
.card .more { margin-top: auto; align-self: flex-start; padding: 11px 20px; border-radius: 999px; background: var(--red); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; }
.card:hover .more { background: var(--red-2); }
.card .more::after { content: " \2192"; }

/* Four choices in a row (The Machine) */
.choices.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .choices.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .choices.four { grid-template-columns: 1fr; } }

/* A path with a single product (The Machine): one card, and who it targets as plain labels */
.choices.one { grid-template-columns: minmax(0, 640px); }
.targets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; list-style: none; }
.targets li { padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; color: var(--text); }
.card .body:has(+ .targets) { margin-bottom: 16px; }

/* One-question form (Jobber) */
.ask { gap: 14px; }
.ask:hover { transform: none; border-color: var(--line); }
.ask::before { display: none; }
.ask[hidden], .ask [hidden] { display: none; }
.ask .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ask .fine a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ask h2 { margin: 0; font: 700 21px/1.25 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.ask label { font: 700 clamp(18px, 1.7vw, 21px)/1.3 var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.ask textarea { min-height: 150px; resize: vertical; }
.ask textarea, .ask input { width: 100%; padding: 14px 16px; font: 400 16px/1.5 var(--font-body); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; }
.ask label.small { font: 700 13px/1.4 var(--font-body); letter-spacing: .04em; text-transform: none; color: var(--text-2); margin-bottom: -6px; }
.ask input:focus, .ask textarea:focus { outline: 2px solid var(--red-2); outline-offset: 1px; }
.ask .more { border: 0; cursor: pointer; font-family: var(--font-body); }
.ask .more:hover { background: var(--red-2); }
.ask .fine { margin: 4px 0 0; font-size: 13.5px; color: var(--text-3); }

.times { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.time { padding: 12px 18px; font: 500 15.5px var(--font-body); color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 12px; cursor: pointer; transition: border-color .3s, background .3s; }
.time:hover { border-color: #d61c1b80; }
.time[aria-checked="true"] { border-color: var(--red-2); background: #d61c1b29; }

/* What-we-do cards under the Jobber form: same card look, and a tap starts the question */
.choices.tight { padding-bottom: 28px; }
.banners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: clamp(40px, 8vh, 80px); }
.card.banner { padding: 24px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.banner h2 { font-size: 16px; }
.banner h2::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 12px; background: var(--red-2); }
.card.banner .body { margin: 12px 0 0; font-size: 14.5px; }
@media (max-width: 980px) { .banners { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .banners { grid-template-columns: 1fr; } }

/* Long-form pages: AI policy, privacy, terms */
.doc { max-width: 760px; padding-top: clamp(28px, 6vh, 64px); padding-bottom: 80px; }
.doc h1 { font-size: clamp(30px, 4.6vw, 48px); }
.doc h2 { margin: 40px 0 10px; font: 700 19px/1.3 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.doc h3 { margin: 22px 0 6px; font: 700 17px/1.3 var(--font-body); color: var(--text); }
.doc p, .doc li { color: var(--text-2); }
.doc .lede { max-width: none; color: var(--text); }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc b { color: var(--text); }
.doc a { color: var(--red-2); text-decoration: underline; text-underline-offset: 3px; }
.doc .fine { font-size: 13.5px; color: var(--text-3); }
.doc .fine a { color: var(--text-2); }
.doc .draft { margin: 24px 0; padding: 12px 16px; border: 1px solid var(--red-2); border-radius: 12px; font-size: 14.5px; color: var(--text); }

/* Scrolling trade names above the footer (marquee.js), matching the live site */
.marquee { border-top: 1px solid var(--line); background: #141212; padding: 18px 0; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 240s linear infinite; }
.marquee-track.back { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 22px; padding-inline: 22px; font-family: var(--font-display); font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--text-2); }
.marquee-item::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red-2); }
@keyframes marquee { to { transform: translate(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Related articles under a page */
.reads { padding-bottom: clamp(40px, 8vh, 80px); }
.reads ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.reads li { border-bottom: 1px solid var(--line); }
.reads a { display: block; padding: 14px 0; color: var(--text-2); transition: color .3s, padding .3s; }
.reads a:hover { color: var(--text); padding-left: 10px; }
/* The arrow follows a no-break space, so it stays on the line with the last word of a long title. */
.reads a::after { content: "\00a0\2192"; color: var(--red-2); }
/* The home page's version: as small as the questions above it, so the three cards stay the page */
.reads.quiet { max-width: 640px; margin-bottom: 28px; padding-bottom: 0; }
.reads.quiet h2 { margin: 0 0 6px; font: 700 11px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); opacity: .7; }
.reads.quiet a { padding: 7px 2px; font-size: 13px; font-weight: 500; }
.reads.quiet a:hover { padding-left: 8px; }

/* Animated icon in the upper right corner of a card (isc-animations.js). It sits in the
   space beside the title, so the text keeps its place. */
.card-anim { position: absolute; top: 18px; right: 18px; width: 84px; height: 84px; pointer-events: none; }
.card-anim > * { display: block; width: 100%; height: 100%; }
.card-anim ~ h2 { padding-right: 92px; min-height: 2.5em; }
@media (max-width: 520px) { .card-anim { width: 68px; height: 68px; top: 14px; right: 14px; } .card-anim ~ h2 { padding-right: 76px; } }

/* Home page questions: small, quiet and closed, so people can skip them. The text is still on
   the page for search engines and AI crawlers to read. */
.faq { margin-top: 56px; margin-bottom: 28px; max-width: 640px; }
.faq h2 { margin: 0 0 6px; font: 700 11px/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); opacity: .7; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 2px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; list-style: none; transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 14px; line-height: 1; opacity: .6; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover, .faq details[open] summary { color: var(--text); }
.faq details p { margin: 0 0 12px; max-width: 64ch; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* Footer */
.foot { width: 100%; border-top: 1px solid var(--line); padding-top: 22px; padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; font-size: 13.5px; color: var(--text-3); }
.foot a:hover { color: var(--text); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }

@media (max-width: 860px) {
  .choices { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  /* The menu on a phone, with no button and no script: the three offers drop to a second row of
     small text links under the logo and the call button, which stay where they were. The nav's
     own box is dissolved (display: contents) so its links can move down a row while the call
     button stays up beside the logo. .top::after is the line break between the two rows.
     The links share the row's width, so the gaps between the words are even, and each one is
     40px tall to tap. The bottom margin lets that height reach into the header's own padding,
     so the header grows by 20px, not 40. A header with no links (/start/) is not changed. */
  .top { flex-wrap: wrap; }
  .top::after { content: ""; order: 2; flex: 0 0 100%; }
  .nav { display: contents; }
  .nav .call { order: 1; }
  .nav a:not(.call) { order: 3; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 40px; margin-bottom: -20px; font-size: 13px; white-space: nowrap; }
  .nav a:not(.call):first-child { justify-content: flex-start; }
  .nav a:not(.call):nth-last-child(2) { justify-content: flex-end; }
}
/* On a tablet that row would be three words a long way apart, so there they sit together under the logo. */
@media (min-width: 521px) and (max-width: 860px) {
  .nav a:not(.call) { flex: 0 0 auto; padding-right: 30px; }
  .nav a:not(.call):nth-last-child(2) { margin-right: auto; padding-right: 0; }
}
/* On the narrowest phones the wordmark gives way so the call button fits. */
@media (max-width: 420px) { .brand div { display: none; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }