/* Kaufman & Company — shared stylesheet */

:root {
--bg: #faf9f7;
--panel: #f1efe7;
--ink: #17140f;
--sub: #5b564c;
--faint: #6e6a60;
--line: #e4e0d4;
--dark: #17140f;
--dark2: #211d16;
--gold: #c9a15f;
--bronze: #8a6a3a;
--focus: #2f6fb3;
--max: 1240px;
}

/* Visually hidden but available to assistive tech (accessible labels, skip link) */
.sr-only {
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: -48px;
left: 12px;
z-index: 1000;
background: var(--ink);
color: #fff;
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 4px;
transition: top .15s ease;
}
.skip-link:focus {
top: 12px;
outline: 3px solid var(--focus);
outline-offset: 2px;
}

/* Consistent, visible keyboard focus ring across interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.chip:focus-visible,
.nav-toggle:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 2px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
font-family: 'Newsreader', ui-serif, Georgia, serif;
font-weight: 500;
line-height: 1.15;
margin: 0;
letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

img, svg { max-width: 100%; display: block; }

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

.eyebrow {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bronze);
font-weight: 600;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.eyebrow.on-dark { color: var(--gold); text-shadow: 0 1px 5px rgba(0,0,0,0.6); }

/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 500;
padding: 14px 26px;
border: 1px solid var(--ink);
color: var(--ink);
background: transparent;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
white-space: nowrap;
}
.btn:hover { background: var(--ink); color: var(--bg); }
.btn.solid { background: var(--ink); color: var(--bg); }
.btn.solid:hover { background: #000; }
.btn.on-dark { border-color: #fff; color: #fff; }
.btn.on-dark:hover { background: #fff; color: var(--ink); }
.btn.link { border: none; padding: 4px 0; border-bottom: 1px solid var(--ink); }
.btn.link:hover { background: none; color: var(--bronze); border-color: var(--bronze); }
.btn.link.on-dark { border-bottom: 1px solid #fff; }
.btn.link.on-dark:hover { background: none; color: var(--gold); border-color: var(--gold); }

/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 40;
border-bottom: 1px solid var(--line);
/* No backdrop-filter directly on .site-header: that property establishes a
new containing block for any `position: fixed` descendant (the mobile
.main-nav dropdown), which clips the fixed panel to the header's own
~70px box instead of the viewport. The frosted-glass look is applied via
::before instead, which sits behind the header's content without being
an ancestor of .main-nav. */
}
.site-header::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: rgba(250,249,247,0.92);
backdrop-filter: blur(8px);
}
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between; gap: 40px;
padding-top: 18px; padding-bottom: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
width: 32px; height: 32px; border: 1.5px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: 'Newsreader', serif; font-weight: 600; font-size: 15px;
}
.brand-word { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; }
.brand-logo { height: 36px; width: auto; display: block; }
.footer-brand-logo { height: 32px; width: auto; display: block; margin-bottom: 12px; }

.main-nav { display: flex; gap: 8px; align-items: center; }
.main-nav a { font-size: 13.5px; color: var(--sub); padding-bottom: 3px; border-bottom: 1.5px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--bronze); font-weight: 600; }

/* Desktop nav dropdowns: three grouped menus (Company / Portfolio /
Insights) instead of eight flat links, so nothing wraps to a second
line. `.nav-item` is the hover/focus/click target; the trigger is a
real <button> (it doesn't navigate anywhere itself). On mobile the
grouping is unwrapped back into the original flat link list — see
the responsive block below. */
.nav-item { position: relative; }
.nav-link {
display: flex; align-items: center; gap: 5px;
font: inherit; font-size: 13.5px; color: var(--sub); background: none; border: none; cursor: pointer;
padding: 8px 10px; border-bottom: 1.5px solid transparent;
}
.nav-link .chev { width: 9px; height: 9px; flex: none; transition: transform .15s ease; }
.nav-link:hover { color: var(--ink); }
.nav-item:hover .nav-link, .nav-item.open .nav-link { color: var(--ink); }
.nav-item:hover .nav-link .chev, .nav-item.open .nav-link .chev { transform: rotate(180deg); }
.nav-link.active { color: var(--ink); border-bottom-color: var(--bronze); font-weight: 600; }

.nav-dropdown {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
display: none; flex-direction: column; gap: 1px;
min-width: 210px; padding: 10px; margin-top: 2px;
background: var(--bg); border: 1px solid var(--line); box-shadow: 0 14px 28px rgba(20,16,8,0.1);
z-index: 50;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown { display: flex; }
.nav-dropdown a {
font-size: 13.5px; color: var(--sub); white-space: nowrap;
padding: 10px 12px; border-bottom: none;
}
.nav-dropdown a:hover { color: var(--ink); background: var(--panel); }
.nav-dropdown a[aria-current="page"] { color: var(--bronze); font-weight: 600; background: var(--panel); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.partner-link { font-size: 11.5px; color: var(--faint); padding-left: 16px; border-left: 1px solid var(--line); }
.partner-link:hover { color: var(--bronze); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #d9d5cc; padding: 64px 0 28px; }
.footer-grid {
display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px;
padding-bottom: 40px; border-bottom: 1px solid #33302a;
}
.footer-grid h5 { font-size: 11px; letter-spacing: 0.08em; color: #8a8578; font-weight: 600; margin-bottom: 14px; text-transform: uppercase;}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: #d9d5cc; }
.footer-col a:hover { color: var(--gold); }
.footer-brand { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #fff; margin-bottom: 12px; }
.footer-addr { font-size: 13px; color: #a8a294; line-height: 1.8; }
.newsletter-row { display: flex; gap: 8px; margin-top: 6px; }
.newsletter-row input {
flex: 1; background: transparent; border: 1px solid #4a453c; color: #fff;
padding: 11px 14px; font-size: 13px; font-family: inherit;
}
.newsletter-row input::placeholder { color: #8a8578; }
.newsletter-row button {
border: 1px solid var(--gold); background: transparent; color: var(--gold);
padding: 11px 18px; font-size: 12.5px; cursor: pointer;
}
.newsletter-row button:hover { background: var(--gold); color: var(--dark); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 20px; font-size: 11.5px; color: #878379; }
.footer-bottom > div:first-child { max-width: 640px; }
.footer-bottom a { color: #878379; }
.footer-bottom a:hover { color: #d9d5cc; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 10px 20px; }
@media (max-width: 620px) {
  .footer-legal { justify-content: flex-start; }
}
.footer-social { display: flex; gap: 10px; margin-bottom: 16px; }
.social-icon { color: #a8a294; display: flex; width: 30px; height: 30px; }
.social-icon svg { width: 100%; height: 100%; }
.social-icon:hover { color: var(--gold); }
.footer-legal-notice { font-size: 11px; line-height: 1.75; color: #878379; padding-top: 24px; max-width: 980px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Hero ---------- */
.hero {
position: relative; color: #fff; overflow: hidden;
min-height: 640px; display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,8,5,0.88) 4%, rgba(10,8,5,0.64) 45%, rgba(10,8,5,0.38) 75%, rgba(10,8,5,0.2) 100%); }
.hero-content { position: relative; z-index: 1; padding: 90px 0 70px; max-width: 760px; }
.hero h1 { font-size: 54px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero .lede { font-size: 17px; color: #e7e2d6; max-width: 560px; margin-top: 20px; text-shadow: 0 1px 6px rgba(0,0,0,0.45); }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.hero.small { min-height: 380px; }
.hero.small .hero-content { padding: 150px 0 56px; max-width: 820px; }
.hero.small h1 { font-size: 42px; }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 { font-size: 34px; max-width: 620px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.two-col.wide-left { grid-template-columns: 1.1fr 0.9fr; }
.two-col.narrow-left { grid-template-columns: 0.85fr 1.15fr; }

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

/* dark band */
.band-dark { background: var(--dark); color: #fff; }
.band-dark .sub { color: #a8a294; }

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat-tile { background: var(--bg); padding: 32px 26px; }
.stat-num { font-family: 'Newsreader', serif; font-size: 40px; color: var(--bronze); }
.stat-label { font-size: 13px; color: var(--sub); margin-top: 6px; }

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-3.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3.companies > *:last-child { grid-column: 1 / -1; }
.grid-3.companies > *:last-child .body { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.grid-3.companies > *:last-child .desc { max-width: 480px; }
@media (max-width: 980px) {
.grid-3.companies > *:last-child { grid-column: 1 / -1; }
.grid-3.companies > *:last-child .body { flex-direction: column; align-items: flex-start; }
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.company-card { background: var(--bg); display: flex; flex-direction: column; }
.company-card .thumb { aspect-ratio: 1 / 1; height: auto; overflow: hidden; }
.company-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Standalone photo banner: class="company-card thumb" combined on one element
(used for single photo call-outs, e.g. the contact page HQ photo) rather
than the nested .company-card > .thumb structure above. Needs its own
rule since a combined-class selector doesn't match the descendant selector. */
.company-card.thumb { overflow: hidden; display: block; }
.company-card.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.company-logo-chip { display: block; height: 52px; width: auto; max-width: 100%; margin-bottom: 18px; }
.company-card .body { padding: 26px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.company-card .name { font-size: 16px; font-weight: 600; }
.company-card .sector { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.company-card .desc { font-size: 13.5px; color: var(--sub); margin-top: 10px; }

.value-card { display: flex; flex-direction: column; gap: 12px; }
.value-icon { width: 38px; height: 38px; }
.value-card h3 { font-size: 16.5px; font-weight: 600; font-family: -apple-system, sans-serif; }
.value-card p { font-size: 13.5px; color: var(--sub); }

.press-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--line); gap: 20px; flex-wrap: wrap; }
.press-row .outlet { font-size: 11.5px; letter-spacing: 0.05em; color: var(--faint); text-transform: uppercase; min-width: 130px; }
.press-row .headline { font-size: 15px; flex: 1; }
.press-row .date { font-size: 12px; color: var(--faint); white-space: nowrap; }

.venture-card { background: var(--bg); border: 1px solid var(--line); padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.venture-card .thumb { height: 150px; }
.venture-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.venture-card .body { padding: 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.venture-tag { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--line); padding: 4px 9px; width: fit-content; }

.team-card img, .team-avatar { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.team-avatar {
aspect-ratio: 1/1; border-radius: 50%; background: var(--panel); border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-family: 'Newsreader', serif; font-size: 26px; color: var(--bronze);
}
.team-card .name { font-size: 14px; font-weight: 600; margin-top: 14px; }
.team-card .title { font-size: 12px; color: var(--faint); }
.team-links { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.team-links a { color: var(--faint); width: 18px; height: 18px; display: flex; transition: color .15s; }
.team-links a svg { width: 100%; height: 100%; }
.team-links a:hover { color: var(--bronze); }
.founder-links { display: flex; gap: 14px; margin-top: 16px; }
.founder-links a { color: #a8a294; width: 22px; height: 22px; display: flex; transition: color .15s; }
.founder-links a svg { width: 100%; height: 100%; }
.founder-links a:hover { color: var(--gold); }

/* ---------- Filter chips ---------- */
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { font-size: 12.5px; border: 1px solid var(--line); padding: 8px 16px; color: var(--sub); cursor: pointer; background: none; font-family: inherit; }
.chip.on { border-color: var(--ink); color: var(--ink); font-weight: 600; }

/* ---------- Forms ---------- */
.field { width: 100%; border: 1px solid var(--line); background: var(--bg); padding: 14px 16px; font-size: 14px; font-family: inherit; color: var(--ink); }
.field:focus { border-color: var(--bronze); outline: 3px solid var(--focus); outline-offset: 1px; }
textarea.field { resize: vertical; min-height: 130px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label.field-label { font-size: 12px; color: var(--sub); margin-bottom: 6px; display: block; }

/* ---------- Breadcrumb ---------- */
.crumb { font-size: 12.5px; color: var(--faint); margin-bottom: 18px; }
.crumb b { color: var(--ink); font-weight: 500; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); border: none; margin: 0; }
.pull-quote { font-family: 'Newsreader', serif; font-size: 30px; line-height: 1.35; }
.key-facts { border: 1px solid var(--line); background: var(--panel); padding: 30px; }
.key-facts::before {
content: "At a Glance";
display: block;
font-family: 'Newsreader', ui-serif, Georgia, serif;
font-size: 15px;
color: var(--ink);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.key-facts dt { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.key-facts dd { font-size: 14.5px; font-weight: 500; margin: 2px 0 16px; }
.key-facts dd:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.wrap { padding: 0 24px; }
.main-nav { position: fixed; inset: 68px 0 0 0; background: var(--bg); flex-direction: column; align-items: flex-start; padding: 24px; gap: 4px; display: none; overflow-y: auto; }
.main-nav.open { display: flex; }
.main-nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line); }
/* Unwrap the desktop dropdown grouping back into the original flat
link list on mobile — .nav-item and .nav-dropdown disappear from
the box model (display:contents) so their <a> children become
direct flex children of .main-nav again, picking up the ".main-nav
a" row styling above exactly as before this redesign. The group
trigger buttons (Company / Portfolio / Insights) are hidden since
they don't navigate anywhere themselves. */
.nav-item, .nav-dropdown { display: contents; }
/* Tapping a link inside a dropdown focuses it first (focus fires before
click on touch devices), which triggers :focus-within on its ancestor
.nav-item. The desktop rule `.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown, .nav-item.open .nav-dropdown {
display: flex }` above has the same specificity as the two selectors
it's overriding here individually, so without this it wins by matching
more specifically than the plain `.nav-dropdown { display: contents }`
rule — snapping the tapped dropdown back into an absolutely-positioned
floating popover mid-tap. That relayout happens between the tap's focus
and click events, so the click lands on whatever now sits under the
finger instead of the intended link, and the menu appears to silently
do nothing (or jump to a different section). Pin all three states back
to contents at matching specificity so mobile never re-triggers the
desktop popover behavior. */
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.open .nav-dropdown { display: contents; }
.nav-link { display: none; }
.nav-toggle { display: block; }
.header-actions .partner-link { display: none; }
.hero h1, .hero.small h1 { font-size: 34px; }
.two-col, .two-col.wide-left, .two-col.narrow-left { grid-template-columns: 1fr; gap: 32px; }
.grid-3, .grid-3.cols-4, .grid-3.cols-2 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.stat-row { grid-template-columns: repeat(2, 1fr); } .fact-strip { grid-template-columns: repeat(2, 1fr); } .journal-crosslink { grid-template-columns: 1fr; gap: 28px; } .journal-crosslink-posts { grid-template-columns: 1fr; gap: 18px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
section { padding: 64px 0; }
.field-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.grid-4 { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
.hero-content, .hero.small .hero-content { padding-top: 120px; }
}

/* ---------- Company / partner detail extras ---------- */
.fact-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .journal-crosslink { display: grid; grid-template-columns: 1fr 1.6fr; gap: 44px; align-items: center; } .journal-crosslink-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 980px) { .journal-crosslink { grid-template-columns: 1fr; gap: 28px; } .journal-crosslink-posts { grid-template-columns: 1fr; gap: 18px; } .fact-strip { grid-template-columns: repeat(2, 1fr); } }
.fact-tile { background: var(--bg); padding: 24px; }
.fact-tile .num { font-family: 'Newsreader', serif; font-size: 26px; color: var(--bronze); }
.fact-tile .lbl { font-size: 11.5px; color: var(--sub); margin-top: 4px; }
.tag-pill { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--bronze); border: 1px solid var(--line); padding: 4px 10px; display: inline-block; }
.person-row { display: grid; grid-template-columns: 120px 1fr; gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.person-row:last-child { border-bottom: none; }
.person-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Newsreader', serif; font-size: 30px; color: var(--bronze); }
.badge-verified { font-size: 10.5px; color: var(--bronze); border: 1px solid var(--line); padding: 3px 9px; display: inline-flex; align-items: center; gap: 5px; }
.badge-verified svg { width: 11px; height: 11px; }
.note-block { font-size: 12px; color: var(--faint); font-family: ui-monospace, monospace; margin-top: 14px; line-height: 1.6; }