:root {
  --cream: #f6f1e7;
  --forest: #1f3a2e;
  --forest-light: #2f5040;
  --terracotta: #b5562e;
  --gold: #c99a3c;
  --ink: #241f18;
  --line: rgba(36, 31, 24, 0.12);
  --serif: 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Header / Nav */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246, 241, 231, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.navbar {
  max-width: 880px;
  margin: 0 auto;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
}

nav a,
.dropdown-trigger {
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

nav a:hover,
.dropdown-trigger:hover { opacity: 1; }

.dropdown-trigger {
  cursor: pointer;
  outline: none;
}

/* Dropdown — Our Clients */
.has-dropdown {
  position: relative;
}

.has-dropdown .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 10px 0 0;
  padding: 8px 0;
  list-style: none;
  min-width: 180px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(36, 31, 24, 0.1);
  gap: 0;
  z-index: 20;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  display: block;
}

.dropdown li {
  list-style: none;
}

.dropdown a {
  display: block;
  padding: 8px 18px;
  font-size: 0.85rem;
  opacity: 0.8;
  white-space: nowrap;
}

.dropdown a:hover {
  opacity: 1;
  background: rgba(36, 31, 24, 0.04);
}

/* Hero */
.hero {
  padding: 110px 0 70px;
  text-align: left;
}

.lede-wrap {
  position: relative;
  max-width: 600px;
  margin: 0 auto 70px;
  text-align: left;
}

.hero-motif {
  position: absolute;
  top: calc(100% - 175px);
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 92vw;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.42));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.42));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.hero .eyebrow {
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 40px;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.15;
  color: var(--forest);
  margin: 0 0 24px;
  font-weight: 400;
  text-align: center;
}

.hero p.lede {
  position: relative;
  z-index: 1;
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0;
  color: var(--ink);
  opacity: 0.85;
}

.hero p.lede + p.lede {
  margin-top: 14px;
}

.hero .cta {
  position: absolute;
  z-index: 1;
  bottom: -68px;
  right: -20px;
  display: inline-block;
  padding: 9px 40px;
  background: var(--forest);
  color: var(--cream);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  transition: background 0.2s ease;
}

.hero .cta:hover { background: var(--forest-light); }

/* Standalone sub-page header (About, Our Work, etc.) */
.page-header {
  padding: 90px 0 40px;
}

.page-header .back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.65;
  text-decoration: none;
}

.page-header .back-link:hover { opacity: 1; }

.page-header .eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
}

.page-header h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--forest);
  margin: 0 0 16px;
  font-weight: 400;
}

.page-header p.lede {
  font-size: 1.1rem;
  max-width: 640px;
  color: var(--ink);
  opacity: 0.85;
}

.about-header-copy {
  position: relative;
}

.about-header-copy .eyebrow,
.about-header-copy h1,
.about-header-copy p.lede {
  position: relative;
  z-index: 1;
}

.about-motif {
  position: absolute;
  top: -120px;
  right: -30px;
  width: 520px;
  max-width: 66%;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* Problem strip */
.problem {
  padding: 300px 0 70px;
}

.problem p {
  font-size: 1.1rem;
  max-width: 700px;
}

.problem .section-label {
  margin-top: 64px;
}

.problem .section-label:first-child {
  margin-top: 0;
}

/* Triad — editorial alternative to boxed cards */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 32px 0 44px;
}

.triad-item {
  border-top: 1px solid rgba(201, 154, 60, 0.4);
  border-bottom: 1px solid rgba(201, 154, 60, 0.4);
  padding-top: 20px;
  padding-bottom: 20px;
}

.triad-item .triad-word {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--forest);
  margin: 0 0 10px;
}

.triad-item p {
  font-size: 0.96rem;
  max-width: none;
}

.triad-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 86, 46, 0.35);
}

/* Triad — vertical variant, more open/editorial */
.triad-vertical {
  gap: 0;
}

.triad-vertical .triad-item {
  border-top: none;
  border-bottom: none;
  padding: 6px 32px;
}

.triad-vertical .triad-item:first-child {
  padding-left: 0;
}

.triad-vertical .triad-item:last-child {
  padding-right: 0;
}

.triad-vertical .triad-item + .triad-item {
  border-left: 1px solid var(--line);
}

/* Sections */
section {
  padding: 80px 0;
  border-top: 1px solid var(--line);
}

.section-label {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 16px;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--forest);
  margin: 0 0 28px;
  font-weight: 400;
}

section p {
  font-size: 1.05rem;
  max-width: 700px;
}

section p + p { margin-top: 18px; }

/* Generic card grid — reused for tiers, who-we-work-with, and blurb cards */
.cards-grid {
  display: grid;
  gap: 28px;
  margin: 40px 0 8px;
}

.cards-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fdfcf9;
  border: 1px solid var(--line);
  padding: 28px 24px;
  border-radius: 12px;
}

.card-illustrated {
  padding: 0 0 24px;
  overflow: hidden;
}

.card-illustrated img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 20px;
}

.card-illustrated .card-tag {
  padding: 0 24px;
}

.card-illustrated p {
  padding: 0 24px;
}

.card .card-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.card .card-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--forest);
  margin: 0 0 8px;
}

.card p {
  font-size: 0.96rem;
  margin: 0;
}

.card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 86, 46, 0.35);
}

.section-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 1rem;
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid rgba(181, 86, 46, 0.35);
}

/* Principles */
.principles {
  margin-top: 40px;
  counter-reset: principle;
}

.principle {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.principle:first-child { border-top: none; }

.principle .num {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--gold);
  flex-shrink: 0;
  width: 28px;
}

.principle p {
  margin: 0;
}

.grounding-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
  max-width: 640px;
}

/* Pillars — extended principle rows with title + description + result */
.pillars .principle { align-items: flex-start; }

.principle-body { display: flex; flex-direction: column; }

.principle-title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--forest);
  margin: 0 0 8px;
}

.principle-result {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--terracotta);
  margin: 10px 0 0;
}

.principle-body p strong,
.belief p strong {
  font-weight: 600;
  color: var(--forest);
}

/* Beliefs — two closing statements after How We Work's pillars, no list, no numbers */
.beliefs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  margin-top: 48px;
}

.belief {
  border-top: 1px solid rgba(201, 154, 60, 0.4);
  padding-top: 20px;
}

.belief p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--forest);
  margin: 0;
  line-height: 1.5;
}

.founder-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin: 0 0 24px;
  line-height: 1.4;
}

.founder-close {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--forest);
  margin: 28px 0 0;
  line-height: 1.4;
}

.pull-quote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--forest);
  border-left: 3px solid var(--gold);
  padding-left: 24px;
  margin: 40px 0;
  max-width: 600px;
}

/* People We Build For — background motif */
#people {
  position: relative;
}

.people-copy {
  position: relative;
  margin-bottom: 560px;
}

.people-copy p,
.people-copy .section-link {
  position: relative;
  z-index: 1;
}

.people-motif {
  position: absolute;
  top: calc(100% - 5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 95vw;
  opacity: 0.73;
  pointer-events: none;
  z-index: 0;
}

/* Footer / contact */
footer {
  background: var(--forest);
  color: var(--cream);
  padding: 70px 0 40px;
}

footer h2 { color: var(--cream); }

footer p {
  color: rgba(246, 241, 231, 0.85);
  max-width: 560px;
}

footer a.email {
  display: inline-block;
  margin-top: 20px;
  font-size: 1.15rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 154, 60, 0.4);
  padding-bottom: 2px;
}

.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(246, 241, 231, 0.15);
  font-size: 0.82rem;
  color: rgba(246, 241, 231, 0.55);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 640px) {
  .navbar { padding: 14px 12px; }
  .wordmark { font-size: 1.05rem; }
  nav ul { gap: 9px; flex-wrap: nowrap; }
  nav a, .dropdown-trigger { font-size: 0.76rem; white-space: nowrap; }
  .cards-grid.cols-2, .cards-grid.cols-3, .cards-grid.cols-4 { grid-template-columns: 1fr; }
  .triad { grid-template-columns: 1fr; gap: 24px; }
  .beliefs { grid-template-columns: 1fr; gap: 24px; }
  .triad-vertical .triad-item {
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 20px 0 0;
  }
  .triad-vertical .triad-item:first-child {
    border-top: none;
    padding-top: 0;
  }
  .triad-vertical .triad-item:last-child {
    padding-bottom: 0;
  }
  .hero { padding: 80px 0 50px; }
  section { padding: 56px 0; }

  /* Bridge motif — on mobile, align the apex with the top of the "Let's talk" button
     instead of the word "build" (line-wrapping is unpredictable here), and size it to
     land between the button and just grazing "The Challenge" label below. */
  .hero-motif {
    max-width: 85vw;
    top: calc(100% - 13px);
  }
  .hero .cta {
    right: 0;
    bottom: -40px;
  }

  /* The 300px gap above "The Challenge" was sized for how far down the full desktop
     bridge image extends. On mobile the image is much smaller, so that much empty
     space just reads as a gap — bring it back down to a normal section gap. */
  .problem {
    padding-top: 90px;
  }

  /* About page fingerprint motif — right:-30px can push part of the image past the
     edge of a narrow viewport and cause horizontal scroll. Pull it back in and size
     it down so it still reads as a corner accent, not a dominant element. */
  .about-motif {
    top: -70px;
    right: 0;
    width: 330px;
    max-width: 78%;
  }

  /* People We Build For motif — margin-bottom: 560px was sized to fit the image at its
     full desktop dimensions. The image itself shrinks a lot on mobile (capped at 92vw),
     so reserve far less space beneath the text or it reads as a big empty gap. */
  .people-copy {
    margin-bottom: 200px;
  }
  .people-motif {
    max-width: 90vw;
  }
}