:root {
  color-scheme: light;
  --paper: #f8f4ec;   /* light cream (Erick 10/5): the Hotel flag's white reads against it */
  --mist: #eee9df;    /* warm panel on cream */
  --line: #e2dcd0;    /* warm hairline on cream */
  --ink: #000000;
  --body: #4d4d4d;
  --soft: #6b6b6b;
  --red: #d12631;
  --blue: #1b3f94;
  --yellow: #f6c21c;
  --white: #ffffff;
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
}

html, body { margin: 0; }
figure { margin: 0; }
img { max-width: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
}
a { color: inherit; }
a:focus-visible, .pill:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
p { margin: 0 0 16px; }
main:focus { outline: none; }

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
  font-size: 14px;
  z-index: 40;
}
.skip:focus { top: 16px; }

/* Navigation: sticky; black once the page scrolls and cream again at the top, fading both ways (nav.js; Erick 10/5) */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.nav .wordmark, .nav .menu a, .nav .pill { transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease; }
.nav.scrolled { background: var(--ink); border-bottom-color: var(--ink); }
.nav.scrolled .wordmark { color: var(--paper); }
.nav.scrolled .menu a { color: rgba(248, 244, 236, 0.78); }
.nav.scrolled .menu a:hover { color: var(--paper); }
.nav.scrolled .pill.solid { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav.scrolled .pill.solid:hover { background: var(--white); border-color: var(--white); }
.nav.scrolled a:focus-visible, .nav.scrolled .pill:focus-visible { outline-color: var(--yellow); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 104px; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 22px; }
.wordmark { font-family: var(--serif); font-size: 26px; font-weight: 400; text-decoration: none; letter-spacing: -0.01em; }
.links { display: flex; align-items: center; gap: 28px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { text-decoration: none; font-size: 15px; color: var(--body); }
.menu a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.pill.solid { background: var(--ink); color: var(--paper); }
.pill.solid:hover { background: #262626; }
.pill.line { background: transparent; color: var(--ink); }
.pill.line:hover { background: var(--mist); }

/* Hero */
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px;
  align-items: end;
  padding-block: 40px 88px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 7.5vw, 96px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
}
.hero p { font-size: 19px; color: var(--body); max-width: 36em; }
.row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero-tile {
  border-radius: 40px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  position: relative;
  isolation: isolate;
}
.hero-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figcap { font-size: 14px; color: var(--soft); margin-top: 14px; text-align: center; text-wrap: balance; }

/* Signal flags, International Code of Signals */
.flag { position: absolute; inset: 0; }
.f-H { background: linear-gradient(90deg, var(--white) 0 50%, var(--red) 50% 100%); }
.f-K { background: linear-gradient(90deg, var(--yellow) 0 50%, var(--blue) 50% 100%); }
.f-P { background: var(--blue); }
.f-P::after { content: ""; position: absolute; inset: 33.34%; background: var(--white); }
.f-G { background: repeating-linear-gradient(90deg, var(--yellow) 0 16.667%, var(--blue) 16.667% 33.334%); }
.f-U { background: conic-gradient(var(--white) 0deg 90deg, var(--red) 90deg 180deg, var(--white) 180deg 270deg, var(--red) 270deg 360deg); }
.f-C { background: linear-gradient(180deg, var(--blue) 0 16.667%, var(--white) 16.667% 33.334%, var(--red) 33.334% 66.667%, var(--white) 66.667% 83.334%, var(--blue) 83.334% 100%); }

/* Cloth grain and a faint edge on the big flags, until a photograph replaces them */
.hero-tile .flag::before, .k-tile .flag::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.10;
  mix-blend-mode: multiply;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero-tile .flag::after, .k-tile .flag::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-radius: inherit;
}

/* Small flag marks beside headings */
.mark {
  position: relative;
  display: inline-block;
  width: 40px;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  vertical-align: -4px;
  margin-right: 12px;
  border-radius: 2px;
  border: 1px solid var(--line);
  isolation: isolate;
}

/* Sections */
.section { padding-block: 96px; }
.section.tight { padding-top: 0; }
.section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 32px;
}

.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.25;
  letter-spacing: 0;
  max-width: 28em;
  margin: 0;
}

/* Founder, inside Who we are. The left column takes a portrait when one exists. */
.founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; margin-top: 48px; }
.portrait { display: block; width: 100%; max-width: 360px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 32px; margin-bottom: 20px; }
.founder .name { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; margin: 0 0 4px; }
.founder .link { margin: 0; font-size: 15px; }
.bio { max-width: 36em; }
.founder .link a { color: var(--body); }
.founder .link a:hover { color: var(--ink); }
.bio p { color: var(--body); }
.bio p:last-child { margin-bottom: 0; }

/* Offers */
.options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.option { background: var(--mist); border-radius: 28px; padding: 32px; }
.option h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: 0; margin: 0 0 10px; }
.option p { color: var(--body); margin: 0; }
.option .terms { color: var(--ink); font-weight: 500; margin-bottom: 8px; }

/* How an engagement runs */
.solutions { border-top: 1px solid var(--ink); }
.sol {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.1fr) minmax(0, 1fr) 140px;
  gap: 32px;
  align-items: start;
  padding-block: 32px;
  border-bottom: 1px solid var(--line);
}
.num {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 1;
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.sol h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: 0; margin: 0; }
.sol .desc { color: var(--body); margin: 0; }
.sol .when { font-size: 14px; color: var(--soft); font-variant-numeric: tabular-nums; text-align: right; margin: 0; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.contact p { font-size: 19px; color: var(--body); max-width: 30em; }
.k-tile { position: relative; aspect-ratio: 3 / 2; border-radius: 32px; overflow: hidden; isolation: isolate; }

/* Footer */
footer { border-top: 1px solid var(--ink); margin-top: 32px; }
footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: 56px 32px;
  font-size: 15px;
  color: var(--body);
}
footer .wordmark { display: inline-block; color: var(--ink); margin-bottom: 12px; }
footer .foot-col p { max-width: 24em; margin: 0 0 6px; }
.foot-h { font-size: 13px; font-weight: 500; color: var(--soft); margin: 0 0 12px; }
.foot-col a:not(.wordmark) { display: block; text-decoration: none; margin-bottom: 8px; color: var(--body); }
.foot-col a:not(.wordmark):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--soft);
}
.foot-legal a { color: inherit; }

/* Text pages: privacy, 404 */
.page { max-width: 40em; padding-block: 24px 96px; }
.page h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 8px; }
.page .updated { color: var(--soft); font-size: 15px; margin-bottom: 40px; }
.page h2 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; margin: 36px 0 10px; }
.page p { color: var(--body); }
.page a { color: var(--ink); }

@media (max-width: 960px) {
  .sol { grid-template-columns: 96px minmax(0, 1fr); }
  .sol .desc { grid-column: 2; }
  .sol .when { grid-column: 2; text-align: left; }
}
@media (max-width: 820px) {
  [id] { scroll-margin-top: 120px; }
  .nav .wrap { flex-wrap: wrap; row-gap: 10px; padding-block: 12px; }
  .links { display: contents; }
  .menu { flex-basis: 100%; order: 3; gap: 18px; font-size: 14px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { white-space: nowrap; }
  .links .pill { order: 2; padding: 10px 18px; font-size: 14px; }
  .hero .wrap, .contact, .options, .founder { grid-template-columns: 1fr; }
  .founder { gap: 24px; }
  .hero .wrap { gap: 32px; padding-block: 24px 64px; }
  .hero-tile { aspect-ratio: 16 / 11; border-radius: 28px; }
  .section { padding-block: 64px; }
  footer .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  footer .foot-col:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .sol { grid-template-columns: 1fr; gap: 12px; }
  .sol .desc, .sol .when { grid-column: 1; }
  .num { font-size: 40px; }
}

@media print {
  .nav { position: static; }
  .nav.scrolled { background: none; }
  .nav.scrolled .wordmark { color: #000; }
  .nav .links, .skip { display: none; }
  body { font-size: 12pt; color: #000; }
  .section { padding-block: 24pt; }
  .flag, .flag::after, .mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hero-tile, .k-tile { border-radius: 0; }
  .option { background: none; border: 1px solid #000; border-radius: 0; }
  .sol, .option, .founder { break-inside: avoid; }
  .pill, .pill.solid, .pill.line { background: none; color: #000; border: 1px solid #000; }
  .pill[href^="http"]::after, .bio a[href^="http"]::after, .foot-col a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #4d4d4d; white-space: normal; }
  .row { flex-direction: column; align-items: flex-start; }
}

/* Long text pages */
.page.wide { max-width: 44em; }
.page .lede { font-size: 17px; }
.page .lede strong, .page .first strong { color: var(--ink); font-weight: 500; }
.toc { background: var(--mist); border-radius: 20px; padding: 20px 24px; margin: 32px 0 8px; }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin: 4px 0; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
ul.plain { padding-left: 1.2em; color: var(--body); }
ul.plain li { margin: 0 0 10px; }
.vert { padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.vert h2 { margin-top: 0; }
.pitfall { margin: 28px 0; }
.pitfall h3 { margin: 0 0 8px; }
.pitfall p { margin: 0 0 8px; }
.src { font-size: 14px; color: var(--soft); }
.src a { color: var(--soft); }
.src a:hover { color: var(--ink); }
.ask-h { margin-top: 32px; }
ol.ask { padding-left: 1.2em; color: var(--body); }
ol.ask li { margin: 0 0 10px; }
.page .first { margin-top: 20px; }
.page h3, .pitfall h3, .ask-h { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: 0; }

/* Industry pages */
.ind-hero .wrap { padding-block: 24px 64px; }
.crumb { font-size: 14px; color: var(--soft); margin: 0 0 20px; }
.crumb a { color: var(--soft); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.ind-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 14em;
  margin: 0 0 24px;
}
.ind-intro { max-width: 38em; }
.ind-intro p { font-size: 19px; color: var(--body); }
.asks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.asks .option h3 { font-size: 22px; }
.sol.three .desc { grid-column: span 1; }
#pitfalls .wrap, #faq .wrap { border-top: 1px solid var(--line); padding-top: 48px; }
.you-get { margin-top: 40px; max-width: 36em; }
.you-get h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 12px; }
.terms-line { color: var(--ink); font-weight: 500; margin: 8px 0 0; }
.wrap.narrow > * { max-width: 44em; }
.wrap.narrow h2 { margin-bottom: 24px; }
.more a { color: var(--ink); }
.faq { margin: 0 0 24px; }
.faq h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0 0 8px; }
.faq p { color: var(--body); margin: 0; }
@media (max-width: 820px) {
  .asks { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  footer .wrap { grid-template-columns: 1fr; }
}

/* Who we work with (home) */
.board-intro { color: var(--body); max-width: 36em; margin-bottom: 28px; }
.fits { color: var(--ink); margin-top: 12px; }
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ind-card { display: flex; flex-direction: column; text-decoration: none; background: var(--mist); border-radius: 28px; padding: 28px; color: var(--ink); }
.ind-card:hover { background: #ebebeb; }
.ind-card h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; letter-spacing: 0; margin: 0 0 14px; }
.ind-card ul { margin: 0 0 18px; padding-left: 1.1em; color: var(--body); flex: 1; }
.ind-card li { margin: 0 0 6px; }
.ind-more { font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.ind-note { color: var(--body); margin: 28px 0 0; max-width: 36em; }
.ind-note a { color: var(--ink); }
@media (max-width: 960px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ind-grid { grid-template-columns: 1fr; } }

/* Opening sequence: "I'm looking for [role]" cycles, lands on the firm, the name flies into the header */
.hero { position: relative; }
.h1-stage { position: relative; }
.h1-stage.playing h1 { display: none; }
.hero .seek {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 14em;
}
.hero .seek .role { position: relative; z-index: 11; color: var(--red); transition: filter 120ms linear; }
.hero .seek .role.blur { filter: blur(3px); }
.hero .seek .role.landed { color: var(--ink); }
.hero .seek .lead { transition: opacity 400ms ease; }
.hero .seek.fade .lead { opacity: 0; }
.h1-stage h1.arrive { animation: arrive 600ms ease both; }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* While the opening plays, the header wordmark stays hidden until the name lands on it,
   and the cycling line holds the headline's place from first paint. */
.intro-pending .nav .wordmark { opacity: 0; }
.intro-pending .h1-stage h1 { display: none; }
.intro-pending .hero .seek { display: block; }

/* Flag hoists on the home page (hoist.js; Erick 10/5). A signal mast stands over each flag tile. Hotel's tile
   and caption stay hidden while the opening plays; when the headline lands, the mast rises in, the flag is
   hoisted and becomes the tile, then the caption fades in. Kilo is hoisted when the contact section comes
   into view and keeps flying in its tile's place. Reduced-motion visitors get the tiles as they are. */
.tile-wrap { position: relative; }
.rig-over { position: absolute; right: 0; bottom: 0; height: 108%; aspect-ratio: 490 / 690; max-width: 100%; pointer-events: none; z-index: 2; display: none; }
.rig-over > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rigs-on .rig-over { display: block; }
#kover { right: auto; left: 50%; transform: translateX(-50%); height: 125%; }
.rigs-on #ktile { opacity: 0; }
.intro-pending #htile, .intro-pending #hcap, .hoisting #htile, .hoisting #hcap, .hoisting #hover { opacity: 0; }
@media (max-width: 820px) { .rig-over { height: 100%; } }

/* Tools we work with: a scrolling strip of chips (home) */
.tools-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 48px; overflow: hidden; }
.tools-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.tools-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.15; margin: 0 0 6px; }
.tools-head p { color: var(--body); font-size: 16px; margin: 0; }
.tools-actions { display: flex; align-items: center; gap: 16px; }
.tools-pause { font-size: 13px; padding: 6px 14px; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.marquee-track { display: flex; width: max-content; animation: tools-scroll 70s linear infinite; }
.marquee-set { display: flex; gap: 12px; padding-right: 12px; }
.tools-band:hover .marquee-track, .tools-band:focus-within .marquee-track, .tools-band.paused .marquee-track { animation-play-state: paused; }
@keyframes tools-scroll { to { transform: translateX(-50%); } }
.tool-chip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; }
.tool-chip img { width: 22px; height: 22px; display: block; }
.tool-chip:hover { border-color: var(--ink); }
.tools-note { font-size: 14px; color: var(--soft); margin: 20px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; width: auto; padding-inline: max(24px, env(safe-area-inset-left)); }
  .marquee-set { flex-wrap: wrap; padding-right: 0; }
  .marquee-set[aria-hidden="true"] { display: none; }
  .tools-pause { display: none; }
}
@media (max-width: 600px) {
  .tools-band { padding-block: 40px; }
  .tools-head h2 { font-size: 24px; }
  .marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  .tool-chip { height: 44px; padding: 0 18px; font-size: 15px; }
  .tool-chip img { width: 18px; height: 18px; }
}

/* /tools page */
.tool { margin: 28px 0; }
.tool h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; }
.tool .tool-mark { width: 26px; height: 26px; }
.tool .maker { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--soft); }
.tool p { margin: 0 0 8px; }
.tool .good { font-size: 15px; }
.tool .good strong { color: var(--ink); font-weight: 500; }
.tool .fits-line, .tools-line { font-size: 15px; color: var(--body); }
.tool .fits-line a, .tools-line a { color: var(--ink); }
.tools-line { margin: 16px 0 0; }