/* ==========================================================================
   Compass & Code Consulting — site styles
   Palette and type follow the Claude Design comp:
   parchment ground, navy ink, gold and oxblood accents,
   Bitter for headings, IBM Plex Mono for labels, Helvetica for body.
   ========================================================================== */

:root {
  --parchment: #EDE6D5;
  --navy: #1F2A3C;
  --ink: #211E1B;
  --gold: #A9862F;
  --oxblood: #5C2A2A;

  --rule: rgba(33, 30, 27, 0.15);
  --rule-strong: rgba(33, 30, 27, 0.2);
  --rule-on-dark: rgba(237, 230, 213, 0.15);

  --font-serif: "Bitter", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --measure: 1280px;
  --section-pad: clamp(56px, 8vw, 112px);
}

/* Base ------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  /* Lets .hero::before bleed to the window edge without a horizontal scrollbar.
     Must be clip, not hidden: hidden creates a scroll container and would break
     the sticky .timeline__stage. */
  overflow-x: clip;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
}

a {
  color: var(--navy);
}

a:hover {
  color: var(--oxblood);
}

svg {
  display: block;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 10px 16px;
  background: var(--navy);
  color: var(--parchment);
  font-family: var(--font-mono);
  font-size: 13px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 16px;
  color: var(--parchment);
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

/* Type helpers ----------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.eyebrow--gold {
  color: var(--gold);
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--gold);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
}

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  color: var(--navy);
  text-wrap: pretty;
}

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.5;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--parchment);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--parchment);
}

.btn--outline {
  border-color: var(--navy);
  color: var(--navy);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--oxblood);
  color: var(--oxblood);
}

.btn--gold {
  padding: 16px 28px;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--parchment);
  border-color: var(--parchment);
  color: var(--ink);
}

/* Header / nav ----------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--navy);
  text-decoration: none;
}

.brand:hover {
  color: var(--navy);
}

.brand__mark {
  width: 34px;
  height: 34px;
  flex: none;
}

.brand__name {
  font-family: var(--font-serif);
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 28px;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a.is-accent {
  color: var(--oxblood);
}

.nav-links a.is-accent:hover {
  color: var(--navy);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid var(--rule-strong);
  color: var(--navy);
  cursor: pointer;
}

.nav-toggle__close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

@media (max-width: 760px) {
  .nav {
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
  }

  .nav-links.is-open {
    display: flex;
  }
}

/* Hero ------------------------------------------------------------------- */

.hero {
  /* Compass underlay behind the hero copy. */
  --underlay-opacity: 0.22;
  --underlay-art: url("../assets/hero-underlay-compass.webp");
  --underlay-size: 158%;
  --underlay-x: 78%;
  --underlay-y: 4%;
  --underlay-blend: multiply;

  position: relative;
  isolation: isolate;
  /* Opaque ground so the underlay's multiply blend has something to sit on. */
  background: var(--parchment);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 128px) var(--gutter);
}

/* Full-bleed so the artwork runs past the 1280px measure to the window edge. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translate(-50%, -50%);
  background-image: var(--underlay-art);
  background-repeat: no-repeat;
  background-position: calc(50% + var(--underlay-x)) calc(50% + var(--underlay-y));
  background-size: auto var(--underlay-size);
  opacity: var(--underlay-opacity);
  mix-blend-mode: var(--underlay-blend);
  pointer-events: none;
  /* The asset carries its own left-to-right alpha fade, which travels with the
     image at any --underlay-x / --underlay-size. This mask is a second, separate
     fade in the element's own coordinates: the element is 100vw and centred, so
     these stops are viewport positions, not image positions. That is what we
     want here, because the thing to stay clear of is the copy column, which ends
     near 55% of the window at every width above the 860px breakpoint -- hold the
     underlay faint across the text, then let it come up to full past it. */
  --underlay-feather: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.32) 48%,
    rgba(0, 0, 0, 0.8) 66%,
    #000 78%
  );
  -webkit-mask-image: var(--underlay-feather);
  mask-image: var(--underlay-feather);
}

/* Without overflow: clip the 100vw bleed would show a horizontal scrollbar,
   so fall back to containing the underlay within the hero's measure. */
@supports not (overflow: clip) {
  .hero {
    overflow: hidden;
  }
}

/* PNG fallback for anything without WebP. */
@supports not (background-image: image-set(url("x.webp") type("image/webp"))) {
  .hero {
    --underlay-art: url("../assets/hero-underlay-compass.png");
  }

}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  color: var(--navy);
  text-wrap: pretty;
}

.hero__lede {
  max-width: 560px;
  font-size: 19px;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 860px) {
  .hero {
    /* Narrow screens: lighter and larger, so it reads as texture behind the copy. */
    --underlay-opacity: 0.17;
    --underlay-size: 139%;
    --underlay-x: 0%;
    /* Single column here, so the copy spans the full width and a left-side
       fade would just be a lopsided wash. Lean on the lower opacity instead. */
    --underlay-feather: none;
    grid-template-columns: 1fr;
  }
}

/* Compass / code band ---------------------------------------------------- */

.band {
  background: var(--navy);
  color: var(--parchment);
  padding: clamp(56px, 7vw, 96px) var(--gutter);
}

.band__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px;
}

.band__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.band__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  text-wrap: pretty;
}

.band__text {
  font-size: 17px;
  text-wrap: pretty;
}

/* Services --------------------------------------------------------------- */

.services {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px 32px;
  background: var(--parchment);
  border: 1px solid var(--rule-strong);
}

.card__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--navy);
}

.card__text {
  font-size: 16px;
  text-wrap: pretty;
}

.card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.card__list li {
  display: flex;
  gap: 10px;
}

.card__list li::before {
  content: "\2014";
  flex: none;
  color: var(--oxblood);
}

/* Approach --------------------------------------------------------------- */

.approach {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.approach__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 48px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.approach__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approach__text {
  font-size: 17px;
  text-wrap: pretty;
}

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 40px;
}

.principle {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.principle p:not(.mono-label) {
  font-size: 16px;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .approach__inner {
    grid-template-columns: 1fr;
  }
}

/* Principals ------------------------------------------------------------- */

.principals {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--section-pad) var(--gutter);
}

.principals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
}

.principals__story {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.principals__story p {
  font-size: 17px;
  text-wrap: pretty;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  align-content: start;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-strong);
}

.stat__value {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.2;
  color: var(--navy);
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--oxblood);
}

/* Contact ---------------------------------------------------------------- */

.contact {
  background: var(--ink);
  color: var(--parchment);
  padding: clamp(64px, 9vw, 128px) var(--gutter);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 48px;
  align-items: end;
}

.contact__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  text-wrap: pretty;
}

.contact__text {
  max-width: 520px;
  font-size: 17px;
  text-wrap: pretty;
}

.contact__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.contact__note {
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0.85;
}

/* Footer ----------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: var(--parchment);
  border-top: 1px solid var(--rule-on-dark);
  padding: 28px var(--gutter);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.site-footer__mark {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Bearing timeline (compass arc) ----------------------------------------- */
/* The dial is one very large compass card whose centre sits far below the
   stage, so only the top of it crosses the page: a full-width tick ruler that
   curves. Base styles are the no-JS / reduced-motion presentation, a plain
   readable list; main.js adds .is-animated for the pinned version. */

.timeline {
  background: var(--ink);
  color: var(--parchment);
  padding: var(--section-pad) var(--gutter) clamp(32px, 4vw, 56px);
}

.timeline .section-title {
  color: inherit;
}

.timeline__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: clamp(40px, 6vw, 72px);
}

.timeline__head > * {
  max-width: 720px;
}

.timeline__lede {
  font-size: 17px;
  color: rgba(237, 230, 213, 0.78);
  text-wrap: pretty;
}

.timeline__list {
  display: grid;
  gap: 48px;
  padding: 0;
  list-style: none;
}

.timeline__list > .milestone + .milestone {
  padding-top: 40px;
  border-top: 1px solid var(--rule-on-dark);
}

.milestone {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.milestone__mark {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.milestone__year {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.milestone__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(27px, 3.4vw, 46px);
  line-height: 1.16;
  text-wrap: pretty;
}

.milestone__text {
  font-size: 17px;
  color: rgba(237, 230, 213, 0.85);
  text-wrap: pretty;
}

/* The ruler -------------------------------------------------------------- */

.arc {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.arc__dial {
  width: 100%;
  height: clamp(200px, 40vw, 60vh);
}

.arc__tick {
  stroke: rgba(237, 230, 213, 0.3);
  stroke-width: 1.4;
}

.arc__tick--medium {
  stroke: rgba(237, 230, 213, 0.55);
  stroke-width: 1.8;
}

.arc__tick--major {
  stroke: var(--gold);
  stroke-width: 2.4;
}

.arc__rim {
  fill: none;
  stroke: rgba(237, 230, 213, 0.3);
  stroke-width: 1.6;
  transition: stroke 0.6s ease;
}

.arc__year {
  font-family: var(--font-mono);
  font-size: 27px;
  fill: rgba(237, 230, 213, 0.5);
  transition: fill 0.4s ease, font-size 0.4s ease;
}

.arc__year.is-active {
  font-size: 34px;
  fill: var(--gold);
}

.arc__index {
  fill: var(--gold);
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.arc__lubber {
  stroke: var(--gold);
  stroke-width: 2;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

/* The index brightens as the card settles on a mark, so the hold reads as
   landing on something rather than as the scroll going dead. */
.timeline.is-locked .arc__index,
.timeline.is-locked .arc__lubber {
  opacity: 1;
}

.arc__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.compass__readout {
  display: flex;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 230, 213, 0.6);
  transition: color 0.5s ease;
}

.compass__readout-sep {
  color: rgba(237, 230, 213, 0.3);
}

.timeline__cue {
  display: none;
}

.arc__progress {
  display: none;
}

/* Scroll-driven presentation --------------------------------------------- */

.timeline.is-animated .timeline__scroll {
  height: 520vh;
}

.timeline.is-animated .timeline__stage {
  position: sticky;
  top: 0;
  height: 100vh;
}

/* The ruler is full-bleed, so it escapes the section gutter. */
.timeline.is-animated .arc {
  position: absolute;
  top: 0;
  left: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter) * 2);
}

.timeline.is-animated .timeline__list {
  position: absolute;
  top: 57%;
  left: 50%;
  gap: 0;
  /* 720 rather than 680: at the narrower measure the longest milestones ended
     on a two-word line, which is conspicuous in centred text. */
  width: min(720px, 86vw);
  transform: translate(-50%, -50%);
  text-align: center;
}

.timeline.is-animated .milestone {
  grid-area: 1 / 1;
  align-items: center;
  padding-top: 0;
  border-top: 0;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.timeline.is-animated .milestone.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.timeline.is-animated .arc {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.timeline.is-animated.is-revealed .arc {
  opacity: 1;
  transform: none;
}

.timeline.is-animated.is-north .arc__rim {
  stroke: var(--gold);
}

.timeline.is-north .compass__readout {
  color: var(--gold);
}

.timeline.is-animated .arc__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(30px, 5vh, 54px);
}

.timeline.is-animated .timeline__cue {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237, 230, 213, 0.45);
  transition: opacity 0.4s ease;
}

.timeline.is-animated.is-moving .timeline__cue {
  opacity: 0;
}

.timeline.is-animated .arc__progress {
  display: block;
  position: absolute;
  left: calc(var(--gutter) * -1);
  bottom: 0;
  width: calc(100% + var(--gutter) * 2);
  height: 2px;
  background: var(--rule-on-dark);
}

.timeline.is-animated .arc__progress span {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 900px) {
  .milestone__text {
    font-size: 15px;
  }

  .arc__year {
    font-size: 30px;
  }

  .arc__year.is-active {
    font-size: 38px;
  }

  /* The band is short at this width, so bring the copy up under the arc
     instead of leaving it stranded mid-stage. */
  .arc__dial {
    height: clamp(210px, 30vh, 260px);
  }

  .timeline.is-animated .timeline__list {
    top: 52%;
  }

  .timeline.is-animated .timeline__scroll {
    height: 460vh;
  }
}

@media (max-height: 680px) {
  .timeline.is-animated .timeline__cue {
    display: none;
  }
}

/* No pinning, no sweep: the base list above is the whole story. */
@media (prefers-reduced-motion: reduce) {
  .timeline.is-animated .timeline__scroll,
  .timeline.is-animated .timeline__stage {
    position: static;
    height: auto;
  }

  .timeline.is-animated .arc {
    position: static;
    left: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }

  .timeline.is-animated .timeline__list {
    position: static;
    gap: 48px;
    width: auto;
    margin-top: 48px;
    transform: none;
    text-align: left;
  }

  .timeline.is-animated .milestone {
    grid-area: auto;
    align-items: flex-start;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .timeline.is-animated .milestone + .milestone {
    padding-top: 40px;
    border-top: 1px solid var(--rule-on-dark);
  }

  .timeline.is-animated .arc__foot {
    position: static;
    margin-top: 32px;
  }

  .timeline.is-animated .timeline__cue,
  .timeline.is-animated .arc__progress {
    display: none;
  }
}