/* ───────────────────────────────────────────────────────────────────────────
   Turnbytes — corporate site

   Warm paper base rather than white, deep navy panels, one azure accent, and
   an italic display face for the emphasis word in each headline. The warmth
   lives in the neutrals (paper, sand, warm hairlines) instead of a second
   accent colour, so the palette stays tied to the logo.

   Sibling to YardHelm: shared body face (Inter), different display face,
   navy instead of emerald. YardHelm green appears only in product contexts.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* warm paper neutrals */
  --paper:      #faf8f4;
  --paper-2:    #f4f0e8;          /* alternating section wash */
  --paper-3:    #ece6da;
  --card:       #ffffff;
  --line:       #e6ded0;          /* warm hairline, never cold grey */
  --line-2:     #d6cbb6;

  /* ink */
  --ink:        #101828;
  --ink-2:      #2a3444;
  --muted:      #5c6577;          /* 6.0:1 on paper */
  --muted-2:    #8b93a3;

  /* dark panels */
  --navy:       #0a1020;
  --navy-2:     #141d33;
  --navy-line:  rgba(150, 178, 255, .16);
  --on-navy:    #f2f5fb;
  --on-navy-mut:#9aa6c2;

  /* accent */
  --accent:     #2f6bf0;
  --accent-ink: #1c4ac6;          /* deeper, for display italics + numerals */
  --accent-soft:#eaf0fe;
  --accent-line:#c6d8fc;
  --accent-lit: #6f9dff;          /* on dark */

  /* product */
  --yh:         #059669;
  --yh-deep:    #047857;
  --yh-soft:    #ecfdf5;
  --yh-line:    #b7e3cd;

  --r-xl: 26px; --r-lg: 18px; --r-md: 12px; --r-sm: 8px;
  --w: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: -.025em; line-height: 1.08; font-weight: 700; }

/* the emphasis word: italic serif, accent-inked, with a hand-drawn underline */
.em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  font-weight: 400; color: var(--accent-ink); letter-spacing: -.01em;
}
.em.u { position: relative; white-space: nowrap; }
.em.u::after {
  content: ""; position: absolute; left: .04em; right: .04em; bottom: -.06em; height: .06em;
  background: currentColor; opacity: .38; border-radius: 2px;
}
.on-dark .em, .navy-panel .em { color: var(--accent-lit); }

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 5px; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 24px; }

/* ── pill eyebrow ────────────────────────────────────────────────────────── */
.pill-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--line); font-size: 11.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
}
.pill-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: none; }
.on-dark .pill-eyebrow { background: rgba(255,255,255,.06); border-color: var(--navy-line);
  color: var(--on-navy); }
.on-dark .pill-eyebrow::before { background: var(--accent-lit); }
.pill-eyebrow.yh::before { background: var(--yh); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 14px 24px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
  border: 1px solid transparent; line-height: 1; font-family: Inter, sans-serif;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-dark   { background: var(--navy); color: #fff; }
.btn-dark:hover { background: var(--navy-2); transform: translateY(-1px); }
.btn-line   { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-light  { background: var(--paper); color: var(--ink); }
.btn-light:hover { background: #fff; transform: translateY(-1px); }
.btn-ghost-d { background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.22); }
.btn-ghost-d:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.btn-yh { background: var(--yh); color: #fff; }
.btn-yh:hover { background: var(--yh-deep); transform: translateY(-1px); }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(250,248,244,.82);
  backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.nav.solid { border-bottom-color: var(--line); }
.nav-in { max-width: var(--w); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; gap: 30px; }
.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.logo svg { width: 30px; height: 30px; flex: none; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-links a { color: var(--muted); font-size: 14.5px; font-weight: 500; transition: color .18s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: 6px; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding: clamp(52px, 7vw, 88px) 0 clamp(56px, 7vw, 92px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 5vw, 68px); align-items: center; }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); margin: 24px 0 20px; letter-spacing: -.035em; }
.hero h1 .em { font-size: 1.06em; }
.hero p.lede { font-size: clamp(16.5px, 1.5vw, 18.5px); color: var(--muted); max-width: 46ch; margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stats { display: flex; gap: clamp(24px, 4vw, 52px); margin-top: clamp(36px, 5vw, 54px);
  padding-top: 28px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hero-stats b { display: block; font-family: "Space Grotesk", sans-serif; font-size: clamp(24px, 2.7vw, 31px);
  font-weight: 700; letter-spacing: -.03em; }
.hero-stats b i { font-style: normal; color: var(--accent-ink); }
.hero-stats span { font-size: 13px; color: var(--muted); }

/* hero visual: an abstract of the product, framed like an app window */
.mock { position: relative; }
.mock-win {
  border-radius: 20px; overflow: hidden; background: var(--navy);
  border: 1px solid var(--navy-line); box-shadow: 0 44px 90px -46px rgba(16,24,40,.55);
}
.mock-bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px;
  background: rgba(255,255,255,.04); border-bottom: 1px solid var(--navy-line); }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.2); }
.mock-bar span { margin-left: 8px; font-size: 11px; color: var(--on-navy-mut); letter-spacing: .04em; }
.mock-body { padding: 20px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-kpi { background: rgba(255,255,255,.05); border: 1px solid var(--navy-line);
  border-radius: 11px; padding: 12px 13px; }
.mock-kpi b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 19px; color: #fff; letter-spacing: -.02em; }
.mock-kpi span { font-size: 10.5px; color: var(--on-navy-mut); }
.mock-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,.04);
  border: 1px solid var(--navy-line); margin-bottom: 8px; font-size: 12.5px; color: var(--on-navy); }
.mock-row .st { font-size: 11px; font-weight: 600; color: #6ee7b7; }
.mock-row .st.amber { color: #fcd34d; }
.mock-row .st.azure { color: var(--accent-lit); }
.mock-yard { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 14px; }
.mock-yard i { aspect-ratio: 1/1.5; border-radius: 4px; background: rgba(255,255,255,.07);
  border: 1px solid var(--navy-line); }
.mock-yard i.on { background: rgba(52,211,153,.5); border-color: rgba(167,243,208,.45); }
.mock-yard i.warn { background: rgba(251,191,36,.45); border-color: rgba(253,224,71,.45); }

/* floating cards over the mock */
.float {
  position: absolute; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 15px; box-shadow: 0 20px 44px -22px rgba(16,24,40,.4);
}
.float b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.02em; }
.float span { font-size: 11px; color: var(--muted); }
.float.a { top: -22px; left: -26px; }
.float.b { bottom: -20px; right: -20px; display: flex; align-items: center; gap: 9px; }
.float.b .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yh); flex: none; }
.float.b span { font-size: 12px; color: var(--ink); font-weight: 500; }

/* ── sections ────────────────────────────────────────────────────────────── */
section { padding: clamp(58px, 8vw, 100px) 0; }
section.wash { background: var(--paper-2); border-block: 1px solid var(--line); }

.sec-head { max-width: 700px; margin-bottom: clamp(34px, 4.5vw, 52px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(29px, 4vw, 46px); margin: 18px 0 14px; }
.sec-head p { color: var(--muted); font-size: 16.5px; }
.sec-head.center p { margin-inline: auto; max-width: 58ch; }

/* ── dark stat band ──────────────────────────────────────────────────────── */
.statband {
  background: var(--navy); border-radius: var(--r-xl); padding: clamp(30px, 4vw, 46px) clamp(24px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.statband div { padding: 6px clamp(14px, 2vw, 28px); border-left: 1px solid var(--navy-line); }
.statband div:first-child { border-left: 0; padding-left: 0; }
.statband b { display: block; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; color: #fff; letter-spacing: -.035em; }
.statband b i { font-style: normal; color: var(--accent-lit); }
.statband span { font-size: 13px; color: var(--on-navy-mut); }

/* ── feature cards ───────────────────────────────────────────────────────── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.fcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fcard:hover { transform: translateY(-3px); border-color: var(--line-2);
  box-shadow: 0 22px 46px -32px rgba(16,24,40,.4); }
.fcard .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); margin-bottom: 18px; }
.fcard .ico svg { width: 20px; height: 20px; stroke: var(--accent-ink); }
.fcard h3 { font-size: 17.5px; margin-bottom: 8px; }
.fcard p { color: var(--muted); font-size: 14.5px; flex: 1; }
.fcard .go { margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 6px; }
.fcard .go svg { width: 14px; height: 14px; transition: transform .18s ease; }
.fcard:hover .go svg { transform: translateX(3px); }

.fcard.dark { background: var(--navy); border-color: var(--navy-line); color: var(--on-navy); }
.fcard.dark h3 { color: #fff; }
.fcard.dark p { color: var(--on-navy-mut); }
.fcard.dark .ico { background: rgba(255,255,255,.08); border-color: var(--navy-line); }
.fcard.dark .ico svg { stroke: var(--accent-lit); }
.fcard.dark .go { color: var(--accent-lit); }

/* ── product spotlight ───────────────────────────────────────────────────── */
.spot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.spot h3 { font-size: clamp(26px, 3.3vw, 38px); margin: 18px 0 16px; }
.spot p { color: var(--muted); margin-bottom: 16px; }
.checks { list-style: none; display: grid; gap: 11px; margin: 22px 0 28px; }
.checks li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.checks svg { width: 19px; height: 19px; flex: none; stroke: var(--yh); margin-top: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.tag { font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding: 6px 12px;
  border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }

/* ── numbered steps ──────────────────────────────────────────────────────── */
.step { display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 26px 0;
  border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; }
.step .n { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 13px;
  color: var(--accent-ink); letter-spacing: .1em; padding-top: 4px; }
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15px; }

/* ── quote cards (our own words — never invented customers) ──────────────── */
.qcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; display: flex; flex-direction: column; }
.qcard .mark { font-family: "Instrument Serif", Georgia, serif; font-size: 46px; line-height: .8;
  color: var(--accent-ink); opacity: .3; margin-bottom: 12px; }
.qcard p { font-size: 16px; color: var(--ink-2); flex: 1; }
.qcard .who { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); }
.qcard.dark { background: var(--navy); border-color: var(--navy-line); }
.qcard.dark p { color: var(--on-navy); }
.qcard.dark .mark { color: var(--accent-lit); opacity: .5; }
.qcard.dark .who { color: var(--on-navy-mut); border-top-color: var(--navy-line); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 52px; position: relative;
  font-size: 17px; font-weight: 600; font-family: "Space Grotesk", sans-serif; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n { position: absolute; left: 0; top: 24px; font-size: 12.5px; font-weight: 700;
  color: var(--muted-2); letter-spacing: .08em; font-family: "Space Grotesk", sans-serif; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px;
  margin-top: -6px; transition: transform .22s ease;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6577' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 44px 24px 52px; color: var(--muted); font-size: 15.5px; }

/* ── CTA panel ───────────────────────────────────────────────────────────── */
.cta-panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl); text-align: center;
  padding: clamp(48px, 6.5vw, 84px) 32px; background: var(--navy);
  border: 1px solid var(--navy-line);
}
.cta-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(150,178,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,178,255,.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 30%, transparent 76%);
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { font-size: clamp(29px, 4.2vw, 50px); color: #fff; margin: 20px 0 0; }
.cta-panel p { color: var(--on-navy-mut); max-width: 52ch; margin: 16px auto 30px; }
.cta-panel .ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── footer ──────────────────────────────────────────────────────────────── */
/* No margin here on purpose. The closing CTA is an inset dark panel and the
   footer is a dark block, so they need a band of paper between them — but the
   preceding section's own padding already supplies it. Adding a footer margin
   on top of that stacked to ~190px and read as a hole rather than a break. */
footer { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.foot { max-width: var(--w); margin: 0 auto; padding: clamp(48px, 6vw, 72px) 24px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; position: relative; z-index: 1; }
.foot .logo { color: #fff; }
.foot .about { font-size: 14px; color: var(--on-navy-mut); margin-top: 14px; max-width: 34ch; }
.foot h4 { font-family: Inter, sans-serif; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-lit); margin-bottom: 16px; font-weight: 700; }
.foot ul { list-style: none; display: grid; gap: 11px; }
.foot a { color: var(--on-navy-mut); font-size: 14.5px; transition: color .18s ease; }
.foot a:hover { color: #fff; }
.foot-btm { max-width: var(--w); margin: 0 auto; padding: 20px 24px 30px; position: relative; z-index: 1;
  border-top: 1px solid var(--navy-line); display: flex; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: 13.5px; color: var(--on-navy-mut); }
/* oversized wordmark bled into the footer, like the references */
.foot-mark {
  position: absolute; left: 50%; bottom: -.28em; transform: translateX(-50%);
  font-family: "Space Grotesk", sans-serif; font-weight: 700; letter-spacing: -.05em;
  font-size: clamp(80px, 17vw, 230px); line-height: 1; color: rgba(255,255,255,.035);
  pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
}

/* ── reveal (additive: gated on .js so a script failure can't blank the page) */
.js .rv { opacity: 0; transform: translateY(15px);
  transition: opacity .55s ease, transform .55s ease; transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .spot { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .statband div:nth-child(3) { border-left: 0; padding-left: 0; }
  .float.a { left: -8px; top: -16px; } .float.b { right: -6px; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr 1fr; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 6px 24px 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-top: 1px solid var(--line); font-size: 16px; }
  .nav-links .btn { margin-top: 12px; justify-content: center; }
  .nav-toggle { display: block; margin-left: auto; }
  .faq summary { padding: 20px 38px 20px 42px; font-size: 16px; }
  .faq .ans { padding: 0 38px 22px 42px; }
}
@media (max-width: 560px) {
  .grid-4 { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr; }
  .statband div { border-left: 0; padding-left: 0; }
  .foot { grid-template-columns: 1fr; gap: 30px; }
  .hero-ctas .btn, .cta-panel .ctas .btn { width: 100%; justify-content: center; }
  .float { display: none; }   /* they crowd the mock at phone widths */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js .rv { opacity: 1; transform: none; }
}