/* FideoMosaic. AEC M&A advisory
   Palette: ink + bone + verdigris, the patina copper takes on a building.
   Deliberately avoids the navy/gold, teal/brass and forest-green registers
   used across the competitive set.
   Two verdigris tones by necessity: the bright one only clears contrast on
   dark panels, the deep one carries text and buttons on light. */

:root {
  --ink: #12161b;
  --ink-2: #1b2128;
  --bone: #f7f5f1;
  --bone-2: #ece8e1;
  --accent: #4fa892;        /* bright: dark panels and mosaic tiles only */
  --accent-deep: #2f7565;   /* text and buttons on light, 5.45:1 on white */
  --accent-deeper: #25604f; /* hover */
  --accent-soft: #7cc4b2;   /* eyebrows on dark */
  --sand: #c2a878;          /* weathered limestone, used sparingly in the mosaic */
  --slate: #5b6672;
  --line: #d9d4cb;
  --white: #ffffff;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font: 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

.narrow { max-width: 760px; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }

h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1.1;
  margin: 0 0 20px;
}

h2 {
  font-size: clamp(25px, 3.2vw, 33px);
  line-height: 1.2;
  margin: 0 0 18px;
}

h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 10px;
}

p { margin: 0 0 18px; }

a { color: var(--accent-deep); }

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 14px;
}

.lede { font-size: 20px; line-height: 1.55; color: var(--slate); }

.muted { color: var(--slate); }

/* ---------- mosaic mark ---------- */

.mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 5px);
  grid-auto-rows: 5px;
  gap: 2px;
  vertical-align: middle;
  margin-right: 10px;
}

.mark i { background: var(--accent); border-radius: 1px; }
.mark i:nth-child(2), .mark i:nth-child(6) { background: var(--sand); }
.mark i:nth-child(8) { background: var(--accent-soft); }
.mark i:nth-child(4) { background: transparent; }

/* ---------- header ---------- */

header {
  background: var(--ink);
  color: var(--bone);
  position: sticky;
  top: 0;
  z-index: 20;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--bone);
  text-decoration: none;
  display: flex;
  align-items: center;
  letter-spacing: -0.01em;
}

.nav nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }

.nav nav a {
  color: #b9bfc7;
  text-decoration: none;
  font-size: 15px;
}

.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--bone); }

.nav .btn { padding: 9px 18px; font-size: 14px; }

/* short text link that stands in for the header CTA on small screens */
.nav-contact { display: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--accent-deep);
  color: var(--white);
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--accent-deep);
  transition: background 0.15s ease;
}

.btn:hover { background: var(--accent-deeper); border-color: var(--accent-deeper); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-ghost:hover { background: var(--bone-2); border-color: var(--slate); }

/* ghost buttons sitting on a dark panel need light text and a visible border */
header .btn-ghost,
.hero .btn-ghost,
.page-head .btn-ghost,
.cta-band .btn-ghost {
  color: var(--bone);
  border-color: #4a545f;
}

header .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-head .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  background: var(--ink-2);
  border-color: var(--bone);
}

.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- hero ---------- */

.hero {
  background: var(--ink);
  color: var(--bone);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
}

.hero h1 { color: var(--bone); max-width: 17ch; }
.hero .lede { color: #b9bfc7; max-width: 54ch; margin-bottom: 32px; }
.hero .eyebrow { color: var(--accent-soft); }

.hero-tiles {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: repeat(4, 46px);
  grid-auto-rows: 46px;
  gap: 6px;
  opacity: 0.5;
}

.hero-tiles span { background: var(--ink-2); border-radius: 2px; }
.hero-tiles span:nth-child(3n) { background: #262e36; }
.hero-tiles span:nth-child(2) { background: var(--accent); opacity: 0.9; }
.hero-tiles span:nth-child(6) { background: var(--accent-deep); opacity: 0.9; }
.hero-tiles span:nth-child(9) { background: var(--sand); opacity: 0.45; }
.hero-tiles span:nth-child(13) { background: var(--accent-soft); opacity: 0.35; }
.hero-tiles span:nth-child(4), .hero-tiles span:nth-child(15) { background: transparent; }

@media (max-width: 860px) { .hero-tiles { display: none; } }

.page-head {
  background: var(--ink);
  color: var(--bone);
  padding: 68px 0 60px;
}

.page-head .eyebrow { color: var(--accent-soft); }
.page-head h1 { color: var(--bone); margin-bottom: 14px; }
.page-head .lede { color: #b9bfc7; max-width: 60ch; margin: 0; }

/* ---------- sections ---------- */

section { padding: 72px 0; }

.alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 62ch; margin-bottom: 40px; }

/* ---------- mandates ---------- */

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

.mandate {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 3px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.mandate ul { margin: 0 0 24px; padding-left: 18px; color: var(--slate); }
.mandate li { margin-bottom: 7px; }
.mandate .btn { align-self: flex-start; margin-top: auto; }

/* ---------- steps ---------- */

.steps { counter-reset: step; display: grid; gap: 2px; }

.step {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 26px 30px 26px 76px;
  position: relative;
}

.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  left: 28px;
  top: 26px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--accent-deep);
  font-weight: 600;
}

.step h3 { margin-bottom: 6px; }
.step p { margin: 0; color: var(--slate); font-size: 16px; }
.step .dur {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 600;
  margin-top: 8px;
  display: block;
}

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  background: var(--white);
  font-size: 16px;
}

th, td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  background: var(--bone-2);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

td:first-child { font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* ---------- sectors ---------- */

.tags { display: flex; flex-wrap: wrap; gap: 10px; }

.tag {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 9px 15px;
  font-size: 15px;
}

/* ---------- principles ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.principle { border-left: 2px solid var(--accent-deep); padding-left: 20px; }
.principle p { color: var(--slate); margin: 0; font-size: 16px; }

/* ---------- team ---------- */

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

.person {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 28px;
}

.avatar {
  width: 52px;
  height: 52px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--bone);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 16px;
}

.person h3 { margin-bottom: 4px; }

.person .role {
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

.person a { font-size: 15px; word-break: break-all; }

/* ---------- cta band ---------- */

.cta-band {
  background: var(--ink);
  color: var(--bone);
  padding: 72px 0;
  text-align: center;
}

.cta-band h2 { color: var(--bone); }
.cta-band p { color: #b9bfc7; max-width: 52ch; margin: 0 auto 28px; }

/* ---------- contact ---------- */

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

.contact-item { margin-bottom: 26px; }
.contact-item .label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 700;
  margin: 0 0 6px;
}
.contact-item p { margin: 0; }

.note {
  background: var(--bone-2);
  border-left: 3px solid var(--slate);
  padding: 20px 24px;
  font-size: 15px;
  color: var(--slate);
}

.note p:last-child { margin: 0; }

/* ---------- footer ---------- */

footer {
  background: var(--ink);
  color: #8d95a0;
  padding: 48px 0 40px;
  font-size: 14px;
  border-top: 1px solid var(--ink-2);
}

.foot-top {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ink-2);
  margin-bottom: 24px;
}

footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: #b9bfc7; text-decoration: none; }
footer a:hover { color: var(--bone); }
footer p { margin: 0 0 10px; max-width: 70ch; line-height: 1.6; }

.disclosure { font-size: 13px; color: #737b85; }

/* ---------- mobile ----------
   The nav row's intrinsic width (four links plus a button) exceeds a phone
   viewport, so it overflowed the left edge instead of wrapping. Below 760px
   the header stacks, the links wrap on their own row, and vertical padding
   comes down so the hero headline is visible without scrolling. */

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }

  header { position: static; }

  .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 0 18px;
  }

  .nav nav {
    width: 100%;
    gap: 12px 20px;
    justify-content: flex-start;
  }

  .nav nav a { font-size: 16px; }

  /* the header CTA duplicated the hero CTA directly beneath it, so on
     small screens it collapses to a plain nav link instead */
  .nav .btn { display: none; }
  .nav-contact { display: inline; }

  .hero { padding: 48px 0 56px; }
  .hero h1 { max-width: none; }
  .hero .lede { font-size: 18px; margin-bottom: 26px; }

  .page-head { padding: 40px 0 38px; }

  section { padding: 48px 0; }

  .section-head { margin-bottom: 28px; }

  h1 { font-size: clamp(30px, 8vw, 40px); }
  h2 { font-size: clamp(23px, 6vw, 28px); }

  .lede { font-size: 18px; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { text-align: center; }

  .mandate { padding: 24px; }
  .step { padding: 22px 22px 22px 22px; }
  .step::before { position: static; display: block; margin-bottom: 6px; }

  .cta-band { padding: 48px 0; }

  .foot-top { flex-direction: column; gap: 18px; }
}

/* very narrow phones: let the long headline breathe */
@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .nav nav { gap: 10px 16px; }
  .nav nav a { font-size: 15px; }
}