/* 8 Furlong Consulting — global.css
   Design tokens + shared elements only. NO chrome (header/footer) rules, NO page layout.
   Mobile-first base ≤767px → tablet @media (min-width:768px) → desktop @media (min-width:1024px). */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=Poppins:wght@500;600&family=Space+Grotesk:wght@500;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  --navy: #1D2327;            /* charcoal navy — dark sections, headings on light */
  --navy-deep: #12171A;       /* navy hover deepen */
  --navy-soft: #262E34;       /* hero underlay / photo band */
  --blue: #324A6D;            /* links, secondary accents on light */
  --tan: #B58961;             /* accent on dark only, rules/ticks decoration */
  --saddle: #7A4220;          /* tan text on light (AA) */
  --cream: #F5EDE6;           /* CTA fill on navy */
  --cream-ground: #F6F0E7;    /* warm page ground (Direction E) */
  --white: #FFFFFF;
  --body: #4A555F;            /* body text on light */
  --muted: #B8C0C8;           /* muted text on navy */
  --muted-dark: #7E8890;      /* small labels on navy */
  --line-light: #DFD3BF;      /* hairline rules on cream */
  --line-card: #E4D8C2;       /* card borders on cream */
  --line-dark: #313A41;       /* hairline rules on navy */
  --line-dark-2: #3A4550;     /* meter track on navy */

  --font-display: 'Fraunces', Georgia, serif;
  --font-label: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-num: 'Space Grotesk', sans-serif;

  --radius-card: 12px;        /* cards, photo masks, widgets */
  --radius-btn: 7px;          /* buttons */
  --radius-pill: 10px;        /* nav pill */

  --pad-side: 20px;           /* mobile side padding */
  --max-content: 1440px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream-ground);
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; transition: color .18s ease-out; }
a:hover { color: var(--saddle); }
p { margin: 0; text-wrap: pretty; }

/* ---------- Layout shell ---------- */
.wrap {
  max-width: var(--max-content);
  margin: 0 auto;
  padding-left: var(--pad-side);
  padding-right: var(--pad-side);
}

/* Sections: dark hero → alternating white/cream → dark closer */
.sect { padding-top: 72px; padding-bottom: 72px; }
.sect--navy { background: var(--navy); }
.sect--cream { background: var(--cream-ground); }
.sect--white { background: var(--white); }

/* ---------- Type scale ---------- */
h1, h2, h3 { font-family: var(--font-display); color: var(--navy); margin: 0; text-wrap: balance; }
h1 { font-weight: 600; font-size: 40px; line-height: 1.08; }
h2 { font-weight: 600; font-size: 30px; line-height: 1.14; }
h3 { font-weight: 600; font-size: 21px; line-height: 1.25; }
.on-navy h1, .on-navy h2, .on-navy h3, .sect--navy h1, .sect--navy h2, .sect--navy h3 { color: var(--white); }
.sect--navy p, .on-navy p { color: var(--muted); }
.lede { font-size: 17px; line-height: 1.7; }
blockquote, .pullquote {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 21px; line-height: 1.5; color: var(--navy); margin: 0;
}
.num { font-family: var(--font-num); font-weight: 700; color: var(--navy); }

/* ---------- Eyebrow pattern ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-label); font-weight: 600;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--saddle);
  margin-bottom: 16px;
}
.sect--navy .eyebrow, .on-navy .eyebrow { color: var(--tan); }
.eyebrow--card { font-size: 12.5px; letter-spacing: .18em; margin-bottom: 0; }

/* ---------- Buttons (context-paired; brown never a fill) ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-block; cursor: pointer;
  font-family: var(--font-label); font-weight: 600;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 17px 32px; border-radius: var(--radius-btn);
  border: 0; text-align: center; min-height: 44px;
}
.btn > span { position: relative; z-index: 1; }
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  transform: scaleX(0); transform-origin: center;
}
/* navy fill + white text on light sections */
.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy::before { background: var(--navy-deep); }
/* cream fill + navy text on navy sections */
.btn--cream { background: var(--cream); color: var(--navy); }
.btn--cream::before { background: var(--white); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Text links (underline draw-in + arrow nudge) ---------- */
.lnk {
  position: relative; display: inline-block; cursor: pointer;
  font-family: var(--font-label); font-weight: 600;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--saddle);
}
.sect--navy .lnk, .on-navy .lnk { color: var(--muted); }
.lnk::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 2px; width: 100%;
  background: var(--tan); transform: scaleX(0); transform-origin: left;
}
.lnk .arr { display: inline-block; }
.lnk:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line-card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.card .ph { overflow: hidden; }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }

/* Hairline rules (engraving weight) */
.rule { border: 0; border-top: 1px solid var(--line-light); margin: 0; }
.sect--navy .rule { border-top-color: var(--line-dark); }

/* ---------- Furlong meter (8 ticks, 5 steps) ---------- */
.meter-label {
  font-family: var(--font-num); font-weight: 500; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--tan);
  text-align: center; margin-bottom: 26px;
}
.meter-track { position: relative; height: 3px; background: var(--line-dark-2); }
.meter-ticks { position: absolute; inset: 0; display: flex; gap: 8px; }
.meter-ticks .tick { flex: 1; background: var(--tan); transform: scaleX(0); transform-origin: left; }
.meter-posts { position: absolute; left: 0; right: 0; top: -7px; display: flex; justify-content: space-between; }
.meter-posts i { width: 2px; height: 16px; background: var(--tan); }
.meter-step-label {
  display: block;
  font-family: var(--font-label); font-weight: 500; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark);
}
/* Both are spans. Without display:block the range label and the step name share
   one line box - "FURLONG 3Prioritize" - and the name's vertical margins are
   dropped, because vertical margins do not apply to non-replaced inline boxes. */
.meter-step-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 25px; color: var(--white); margin: 8px 0 10px; }

/* ---------- Motion (classy: 150–400ms, ease-out family, no bounce) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .2s ease-out, box-shadow .2s ease-out; }
  .btn::before { transition: transform .28s ease-out; }
  .btn:hover::before { transform: scaleX(1); }
  .btn--navy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29,35,39,.3); }
  .btn--cream:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(29,35,39,.25); }

  .lnk::after { transition: transform .2s ease-out; }
  .lnk:hover::after { transform: scaleX(1); }
  .lnk .arr { transition: transform .18s ease-out; }
  .lnk:hover .arr { transform: translateX(4px); }

  .card { transition: transform .3s ease-out, box-shadow .3s ease-out; }
  a .card:hover, a.card:hover, .card--hover:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(29,35,39,.16); }
  .card .ph img { transition: transform .4s ease-out; }
  a .card:hover .ph img, a.card:hover .ph img, .card--hover:hover .ph img { transform: scale(1.02); }

  /* Marquee bands — one direction, gentle, pause on hover. NO edge fade on any band (John 09/04/2026). */
  @keyframes mq-scroll { to { transform: translateX(-50%); } }
  .mqwrap { overflow: hidden; }
  .mq { display: flex; width: max-content; animation: mq-scroll 40s linear infinite; }
  .mq--fast { animation-duration: 30s; }
  .mq--reviews { animation-duration: 60s; }
  .mqwrap:hover .mq { animation-play-state: paused; }

  /* Section entrance hooks (.reveal) — IntersectionObserver added at WP implementation */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s ease-out, transform .35s ease-out; }
  .reveal.in { opacity: 1; transform: translateY(0); }

  /* Meter tick fill on scroll-in (.meter gains .in) */
  @keyframes tick-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .meter.in .tick { animation: tick-in .32s ease-out both; }
  .meter.in .tick:nth-child(1) { animation-delay: .05s; }
  .meter.in .tick:nth-child(2) { animation-delay: .15s; }
  .meter.in .tick:nth-child(3) { animation-delay: .25s; }
  .meter.in .tick:nth-child(4) { animation-delay: .35s; }
  .meter.in .tick:nth-child(5) { animation-delay: .45s; }
  .meter.in .tick:nth-child(6) { animation-delay: .55s; }
  .meter.in .tick:nth-child(7) { animation-delay: .65s; }
  .meter.in .tick:nth-child(8) { animation-delay: .75s; }
}
@media (prefers-reduced-motion: reduce) {
  .mq { display: flex; flex-wrap: wrap; width: auto; }
  .mq--reviews > [aria-hidden="true"] { display: none; }
  .reveal { opacity: 1; transform: none; }
  .meter-ticks .tick { transform: scaleX(1); }
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  :root { --pad-side: 40px; }
  h1 { font-size: 56px; }
  h2 { font-size: 38px; }
  h3 { font-size: 21px; }
  .eyebrow { font-size: 13px; }
  .sect { padding-top: 96px; padding-bottom: 96px; }
  blockquote, .pullquote { font-size: 24px; }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  :root { --pad-side: 72px; }
  h1 { font-size: 80px; line-height: 1.02; }
  h2 { font-size: 48px; line-height: 1.1; }
  h3 { font-size: 23px; }
  .eyebrow { font-size: 14px; }
  .sect { padding-top: 120px; padding-bottom: 120px; }
  .lede { font-size: 18px; }
  blockquote, .pullquote { font-size: 26px; }
}

/* ---- Long words must not break the page (added 2026-09-07) ----
   "Departmentalization" overflowed the 350px heading container at 390px and
   pushed the document 47px wider than the viewport. Font-independent fix. */
h1, h2, h3, h4, .lede { overflow-wrap: break-word; }

/* ---- Tap targets: standalone .lnk CTAs to 44px without moving the layout ----
   Padding grows the hit box; the negative margin gives the space back, so the
   approved vertical rhythm is unchanged. The underline is re-anchored to match. */
.lnk { padding-block: 12px; margin-block: -12px; }
.lnk::after { bottom: 7px; }