/* Light Horse Consulting — shared stylesheet (Variant B "paper" design system). */
:root {
  --orange: #BF4D21;
  --orange-dark: #973A18;
  --charcoal: #31333A;
  --deep: #272A30;
  --grey: #696A6F;
  --paper: #FAF8F7;
  --panel: #FFFFFF;
  --line: rgba(49, 51, 58, 0.12);
  --line-strong: rgba(49, 51, 58, 0.25);
  --sans: "Aptos", "Figtree", "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;
}

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

body {
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: var(--paper); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
}
.kicker .tick { color: var(--orange); }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; color: var(--deep); }

/* ---- Nav ---- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.nav-logo .mark { height: 34px; display: block; }
.nav-logo .word { height: 22px; display: block; }
@media (max-width: 500px) { .nav-logo .word { display: none; } }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--deep); }
.nav-links a.active { color: var(--deep); border-bottom: 2px solid var(--orange); padding-bottom: 3px; }
.nav-links a.cta {
  color: var(--paper);
  background: var(--charcoal);
  padding: 10px 18px;
  transition: background 0.2s;
}
.nav-links a.cta:hover { background: var(--orange); }

.nav-toggle {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--charcoal);
  padding: 9px 16px;
  cursor: pointer;
}
@media (max-width: 980px) {
  .nav-toggle { display: inline-block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    padding: 10px 32px 22px;
  }
  nav.open .nav-links { display: flex; }
  .nav-links a { padding: 11px 0; }
  .nav-links a.active { border-bottom: none; color: var(--orange); }
  .nav-links a.cta { margin-top: 8px; }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--orange);
  color: #FAF8F7;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
}
.skip:focus { left: 0; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ---- Hero ---- */
header {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 130px;
}
header.page {
  min-height: 0;
  padding-top: 180px;
  padding-bottom: 10px;
  justify-content: flex-start;
}

.rule {
  width: 64px;
  height: 4px;
  background: var(--orange);
  margin-bottom: 28px;
}
header .rule { margin-top: 22px; }

h1 {
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: 1.04;
  font-weight: 800;
  max-width: 17ch;
  text-wrap: balance;
}
header.page h1 { font-size: clamp(34px, 5vw, 60px); max-width: 20ch; }
h1 em { font-style: normal; color: var(--orange); }

.hero-sub {
  margin-top: 30px;
  max-width: 62ch;
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--grey);
}
.hero-sub strong { color: var(--charcoal); font-weight: 600; }
.hero-sub + .hero-sub { margin-top: 18px; }

.hero-ctas { margin-top: 40px; display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 28px;
  transition: all 0.25s;
}
.btn-primary { background: var(--charcoal); color: var(--paper); }
.btn-primary:hover { background: var(--orange); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--charcoal); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }

/* ---- Charcoal statement band ---- */
.band { margin-top: 90px; background: var(--deep); color: var(--paper); }
.band-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 32px 60px;
}
.band .kicker { color: rgba(250, 248, 247, 0.55); display: block; margin-bottom: 22px; }
.band-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.band-cells p { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.01em; color: var(--paper); }
.band-cells p .accent { color: #E0764A; }
.band-statement { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; color: var(--paper); max-width: 30ch; text-wrap: balance; }
@media (max-width: 760px) { .band-cells { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Sections ---- */
section { padding-top: 110px; }
.sec-head { max-width: 1160px; }
.sec-head .rule { margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(28px, 3.2vw, 44px); max-width: 26ch; text-wrap: balance; }
.sec-head .kicker { display: block; margin-bottom: 14px; }
.sec-head .lede { margin-top: 16px; color: var(--grey); font-size: 18px; max-width: 66ch; }

/* ---- Card grids ---- */
.services {
  margin-top: 46px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.svc {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--charcoal);
  padding: 34px 32px 40px;
  transition: border-color 0.25s;
}
.svc:hover { border-top-color: var(--orange); }
.svc .idx { font-family: var(--mono); font-size: 12px; color: var(--orange); letter-spacing: 0.14em; }
.svc h3 { font-size: 21px; margin: 14px 0 10px; }
.svc p { color: var(--grey); font-size: 16px; }
.svc p + p { margin-top: 10px; }
@media (max-width: 760px) { .services { grid-template-columns: 1fr; } }

/* ---- Two-column detail blocks (service / sector pages) ---- */
.detail {
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: start;
}
.d-body > p { color: var(--grey); font-size: 16.5px; }
.d-body > p + p { margin-top: 16px; }
.d-body h4, .d-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  margin: 30px 0 8px;
}
.d-list {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--charcoal);
  padding: 28px 28px 32px;
}
.d-list .d-label { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.d-list ul { list-style: none; }
.d-list li { font-size: 15px; color: var(--grey); padding: 11px 0; border-bottom: 1px solid var(--line); }
.d-list li:last-child { border-bottom: none; padding-bottom: 0; }
@media (max-width: 820px) { .detail { grid-template-columns: 1fr; gap: 30px; } }

.ticks { list-style: none; margin-top: 4px; }
.ticks li { padding: 9px 0 9px 22px; border-bottom: 1px solid var(--line); color: var(--grey); font-size: 15.5px; position: relative; }
.ticks li::before { content: "\25B8"; color: var(--orange); position: absolute; left: 0; }
.ticks li:last-child { border-bottom: none; }

/* ---- Definition table ---- */
.tbl { margin-top: 46px; border-top: 1px solid var(--line-strong); }
.tbl-row {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 44px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line);
}
.tbl-row p { font-size: 16px; color: var(--grey); }
.tbl-row p:first-child { font-weight: 600; color: var(--deep); }
.tbl-row.head p {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
}
.tbl-row a { color: var(--deep); text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 1px; }
.tbl-row a:hover { color: var(--orange); }
@media (max-width: 700px) { .tbl-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---- Pull-quote / principle ---- */
.principle {
  margin-top: 46px;
  font-size: clamp(21px, 2.3vw, 28px);
  line-height: 1.4;
  font-weight: 600;
  color: var(--deep);
  text-wrap: balance;
  border-left: 4px solid var(--orange);
  padding-left: 26px;
  max-width: 34ch;
}
.principle .kicker { display: block; margin-bottom: 12px; font-weight: 400; }

/* ---- Track record summary rows ---- */
.cases { margin-top: 20px; }
.case {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--line);
}
.case .tag { margin-bottom: 14px; }
.case h3 { font-size: 21px; margin-bottom: 10px; }
.case p { color: var(--grey); font-size: 16.5px; max-width: 62ch; }
.case-metric { text-align: right; padding-top: 34px; }
.case-metric .m { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; color: var(--orange); white-space: nowrap; }
.case-metric .d { font-size: 13.5px; color: var(--grey); margin-top: 4px; }
@media (max-width: 820px) {
  .case { grid-template-columns: 1fr; gap: 12px; }
  .case-metric { text-align: left; padding-top: 0; }
}

/* ---- Full case studies ---- */
.case-full {
  margin-top: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--charcoal);
  padding: 40px 38px 44px;
  display: grid;
  grid-template-columns: 1fr 250px;
  gap: 48px;
  align-items: start;
}
.case-full .tag { margin-bottom: 14px; }
.case-full h3 { font-size: 23px; margin-bottom: 8px; }
.case-full .cf-lede { color: var(--charcoal); font-weight: 600; font-size: 17px; }
.case-full p { color: var(--grey); font-size: 16px; }
.case-full h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  margin: 24px 0 8px;
}
.case-full .ticks li { font-size: 15px; }
.case-full .case-metric { padding-top: 6px; }
@media (max-width: 820px) {
  .case-full { grid-template-columns: 1fr; gap: 20px; padding: 30px 26px 34px; }
  .case-full .case-metric { text-align: left; }
}

.cases-note { margin-top: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--grey); }

/* ---- Step / engagement cards ---- */
.steps { margin-top: 46px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.step { background: var(--panel); border: 1px solid var(--line); padding: 36px 32px 42px; }
.step .kicker { display: block; margin-bottom: 20px; }
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p { color: var(--grey); font-size: 16px; }
@media (max-width: 980px) { .steps.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .steps, .steps.four { grid-template-columns: 1fr; } }

/* ---- About split ---- */
.about { margin-top: 46px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 60px; align-items: start; }
.about blockquote {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.35;
  font-weight: 600;
  color: var(--deep);
  text-wrap: balance;
  border-left: 4px solid var(--orange);
  padding-left: 24px;
}
.about .body { color: var(--grey); font-size: 17px; display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.about .body strong { color: var(--charcoal); font-weight: 600; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; gap: 28px; } }

.also { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.also span {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--grey);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 9px 14px;
}
.also span b { color: var(--charcoal); font-weight: 600; }

/* ---- Contact band ---- */
.contact-band { margin-top: 120px; background: var(--deep); color: var(--paper); }
.contact {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 32px 90px;
}
.contact .kicker { color: rgba(250, 248, 247, 0.55); }
.contact h2 {
  color: var(--paper);
  font-size: clamp(34px, 4.6vw, 58px);
  max-width: 20ch;
  text-wrap: balance;
  margin: 22px 0 20px;
}
.contact .band-lede { color: rgba(250, 248, 247, 0.65); font-size: 17px; max-width: 62ch; margin-bottom: 38px; }
.contact .btn-primary { background: var(--orange); }
.contact .btn-primary:hover { background: var(--orange-dark); }
.contact .btn-ghost { border-color: rgba(250, 248, 247, 0.3); color: var(--paper); }
.contact .btn-ghost:hover { border-color: var(--paper); }

.contact-email { margin-top: 26px; font-size: 15.5px; color: rgba(250, 248, 247, 0.65); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.contact-email a { color: #FAF8F7; text-decoration: none; border-bottom: 1px solid var(--orange); padding-bottom: 1px; }
.copy-email {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid rgba(250, 248, 247, 0.35); color: rgba(250, 248, 247, 0.75);
  padding: 6px 12px; cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.copy-email:hover { border-color: var(--orange); color: #FAF8F7; }

footer {
  background: var(--deep);
  border-top: 1px solid rgba(250, 248, 247, 0.12);
}
.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 32px 38px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
footer img { height: 30px; display: block; }
footer p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(250, 248, 247, 0.5); text-transform: uppercase; }

/* ---- Reveal ---- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.in { opacity: 1; transform: none; }
  header .reveal { transition-delay: calc(var(--d, 0) * 110ms); }
}