/* OwnersFirm - brand stylesheet.
 Locked palette per /memory/project_ownersfirm_brand.md
 This file imported by every page. Edits propagate site-wide. */

:root {
 /* Palette - boutique professional services. No purple. No gradients. */
 --ink: #1A1A1A; /* primary text + wordmark */
 --paper: #F5F1EA; /* warm off-white background */
 --brass: #B68B40; /* accent (the dot). Use sparingly. */
 --slate: #4A4A4A; /* secondary text */
 --hair: #E8E1D4; /* hairlines + dividers */
 --paper-2: #EFE9DC; /* slightly darker paper for alt sections */
 --ink-90: rgba(26,26,26,.9);
 --ink-70: rgba(26,26,26,.72);
 --ink-50: rgba(26,26,26,.5);
 --ink-30: rgba(26,26,26,.3);

 /* Type */
 --serif: 'EB Garamond', 'Times New Roman', Georgia, serif;
 --sans: 'Inter', system-ui, -apple-system, sans-serif;
 --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

 /* Radius - restrained. Boutique firms don't have rounded corners on everything. */
 --r-sm: 4px;
 --r-md: 8px;
 --r-lg: 14px;

 /* Spacing rhythm */
 --gap-1: 8px;
 --gap-2: 14px;
 --gap-3: 22px;
 --gap-4: 36px;
 --gap-5: 56px;
 --gap-6: 84px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
 font-family: var(--sans);
 background: var(--paper);
 color: var(--ink);
 line-height: 1.6;
 font-size: 16px;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
 font-family: var(--serif);
 font-weight: 500;
 line-height: 1.12;
 letter-spacing: -0.015em;
 color: var(--ink);
}
h1 { font-size: clamp(38px, 5.5vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
h4 { font-size: clamp(17px, 1.7vw, 20px); }

p { color: var(--ink-70); line-height: 1.7; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brass); }

img { max-width: 100%; height: auto; display: block; }

/* The dot - brand signature */
.dot {
 display: inline-block;
 width: 0.45em;
 height: 0.45em;
 border-radius: 50%;
 background: var(--brass);
 vertical-align: middle;
 margin-left: 0.06em;
 margin-bottom: 0.05em;
}
.brass { color: var(--brass); }
.ink { color: var(--ink); }
.serif { font-family: var(--serif); }
.sans { font-family: var(--sans); }
.mono { font-family: var(--mono); letter-spacing: 0.04em; }

/* Layout primitives */
.container {
 max-width: 1140px;
 margin: 0 auto;
 padding: 0 32px;
}
@media (max-width: 720px) { .container { padding: 0 22px; } }

.section { padding: var(--gap-6) 0; }
.section-tight { padding: var(--gap-5) 0; }
.section-alt { background: var(--paper-2); }
.hairline { border-top: 1px solid var(--hair); }

/* Eyebrow label (uppercase mono) */
.eyebrow {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 500;
 color: var(--brass);
 text-transform: uppercase;
 letter-spacing: 0.18em;
 margin-bottom: var(--gap-2);
}

/* Buttons */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 14px 28px;
 font-family: var(--sans);
 font-size: 14px;
 font-weight: 600;
 letter-spacing: 0.01em;
 border: 1px solid var(--ink);
 border-radius: 100px;
 cursor: pointer;
 transition: all 0.2s ease;
 white-space: nowrap;
 background: var(--ink);
 color: var(--paper);
}
.btn:hover {
 background: transparent;
 color: var(--ink);
}
.btn-ghost {
 background: transparent;
 color: var(--ink);
 border-color: var(--ink);
}
.btn-ghost:hover {
 background: var(--ink);
 color: var(--paper);
}
.btn-brass {
 background: var(--brass);
 border-color: var(--brass);
 color: var(--paper);
}
.btn-brass:hover {
 background: transparent;
 color: var(--brass);
}
.btn-lg { padding: 17px 36px; font-size: 15px; }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* Cards */
.card {
 background: var(--paper);
 border: 1px solid var(--hair);
 border-radius: var(--r-lg);
 padding: var(--gap-4);
}

/* Nav */
.nav-bar {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(245, 241, 234, 0.92);
 backdrop-filter: blur(14px);
 -webkit-backdrop-filter: blur(14px);
 border-bottom: 1px solid var(--hair);
}
.nav-inner {
 max-width: 1240px;
 margin: 0 auto;
 padding: 18px 32px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 28px;
}
.nav-logo {
 font-family: var(--serif);
 font-size: 22px;
 font-weight: 500;
 letter-spacing: -0.02em;
 color: var(--ink);
}
.nav-logo .dot { width: 8px; height: 8px; }
.nav-links {
 display: flex;
 gap: 32px;
 font-size: 14px;
 font-weight: 500;
 color: var(--ink-70);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
 display: inline-flex;
 align-items: center;
 padding: 10px 20px;
 background: var(--ink);
 color: var(--paper);
 border-radius: 100px;
 font-size: 13px;
 font-weight: 600;
}
.nav-cta:hover { background: var(--brass); color: var(--paper); }
@media (max-width: 760px) {
 .nav-links { display: none; }
}

/* Footer */
.foot {
 padding: 80px 0 60px;
 background: var(--ink);
 color: var(--paper);
}
.foot a { color: var(--paper); }
.foot a:hover { color: var(--brass); }
.foot-inner {
 display: grid;
 grid-template-columns: 1.5fr 1fr 1fr 1fr;
 gap: 60px;
 margin-bottom: 60px;
}
@media (max-width: 760px) { .foot-inner { grid-template-columns: 1fr; gap: 40px; } }
.foot h5 {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 500;
 text-transform: uppercase;
 letter-spacing: 0.16em;
 color: rgba(245, 241, 234, 0.5);
 margin-bottom: 18px;
}
.foot-logo {
 font-family: var(--serif);
 font-size: 30px;
 font-weight: 500;
 letter-spacing: -0.02em;
 margin-bottom: 14px;
 color: var(--paper);
}
.foot-logo .dot { background: var(--brass); width: 10px; height: 10px; }
.foot ul { list-style: none; }
.foot li { margin-bottom: 12px; font-size: 14px; }
.foot-bottom {
 padding-top: 32px;
 border-top: 1px solid rgba(245, 241, 234, 0.1);
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-family: var(--mono);
 font-size: 11px;
 color: rgba(245, 241, 234, 0.4);
 letter-spacing: 0.08em;
}
@media (max-width: 760px) { .foot-bottom { flex-direction: column; gap: 12px; text-align: center; } }

/* Hero shared */
.hero {
 padding: 100px 0 80px;
 text-align: center;
 position: relative;
}
.hero-eyebrow {
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 500;
 color: var(--brass);
 text-transform: uppercase;
 letter-spacing: 0.22em;
 margin-bottom: 28px;
}
.hero h1 {
 max-width: 780px;
 margin: 0 auto 24px;
}
.hero-lede {
 font-family: var(--sans);
 font-size: clamp(16px, 1.7vw, 18px);
 color: var(--ink-70);
 max-width: 600px;
 margin: 0 auto 36px;
 line-height: 1.65;
}
.hero-actions {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
}

/* Proof bar - the data anchors */
.proof-bar {
 padding: 48px 0;
 border-top: 1px solid var(--hair);
 border-bottom: 1px solid var(--hair);
}
.proof-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 40px;
 text-align: center;
}
@media (max-width: 760px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
.proof-num {
 font-family: var(--serif);
 font-size: clamp(34px, 4.5vw, 48px);
 font-weight: 500;
 line-height: 1;
 margin-bottom: 8px;
}
.proof-num .dot { width: 12px; height: 12px; }
.proof-label {
 font-family: var(--mono);
 font-size: 10.5px;
 text-transform: uppercase;
 letter-spacing: 0.14em;
 color: var(--ink-50);
 margin-bottom: 6px;
}
.proof-sub {
 font-size: 12px;
 color: var(--ink-70);
}

/* Section heads */
.s-head {
 text-align: center;
 max-width: 720px;
 margin: 0 auto var(--gap-5);
}
.s-head h2 { margin-bottom: 14px; }
.s-head p { font-size: 16px; line-height: 1.7; }

/* Utility */
.text-center { text-align: center; }
.muted { color: var(--ink-50); }