:root{
  --carbon: #1A1B1D;
  --cream: #FFFAF0;
  --gold: #FEC148;
  --gold-mid: #F4B23A;
  --gold-deep: #C88819;
  --gold-grad: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 50%, var(--gold-deep) 100%);
  --navy: #002147;
  --navy-deep: #00152E;

  --font-sans: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Alice', Georgia, 'Times New Roman', serif;
  --font-mono: 'Reddit Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius-card: 18px;
  --radius-pill: 999px;
  --shadow-portrait: 0 30px 60px -22px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--gold) 15%, transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background: var(--navy);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
body{
  min-height:100vh;overflow-x:hidden;position:relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-attachment: fixed;
}

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

.wrap{max-width:1320px;margin:0 auto;padding:0 36px;position:relative;z-index:2;width:100%}
@media (max-width:780px){.wrap{padding:0 20px}}

/* ─── Header ─────────────────────────────────────────── */
header{
  position:relative;z-index:50;
  margin-top:20px;
  padding-inline:36px; /* keep the bar off the screen edges, like .wrap content */
}
@media (max-width:780px){header{padding-inline:20px}}
.header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;gap:24px;
  background: color-mix(in srgb, var(--carbon) 70%, transparent);
  border:1px solid var(--gold);
  border-radius: var(--radius-card);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 14px 40px -18px rgba(0,0,0,.55);
}
.brand{display:flex;align-items:center;gap:0;color:var(--cream)}
.brand .logo{width:180px;height:40px;fill:var(--cream)}
.header-bar .brand .logo{fill:url(#logoGold)}

nav.main{display:flex;align-items:center;gap:30px}
.pill{
  display:inline-flex;align-items:center;gap:10px;padding:11px 22px;
  border:1px solid var(--gold);border-radius: var(--radius-pill);
  color:var(--gold);font-size:16px;line-height:20px;
  transition: all .3s ease;background:transparent;
}
.pill:hover{background:var(--gold-grad);color:var(--carbon);border-color: var(--gold-deep)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 var(--gold);animation:pulse 1.8s ease-out infinite}
.pill:hover .dot{background:var(--carbon);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Scale the bar down on phones so the brand + pill fit within the viewport
   instead of overflowing it (flex items don't shrink below their content). */
@media (max-width:560px){
  .header-bar{padding:10px 14px;gap:12px}
  .brand .logo{width:120px;height:27px}
  nav.main{gap:16px}
  .pill{padding:9px 14px;font-size:15px;gap:8px}
}

/* ─── Hero ───────────────────────────────────────────── */
.hero{padding: 32px 0 60px;position:relative}
.hero-grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:64px;align-items:center;padding-top:60px}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}

.portraits{position:relative;aspect-ratio:5/6;width:100%;max-width:520px;margin-left:auto}
.portrait{
  position:absolute;overflow:hidden;border-radius:2px;
  border:1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  box-shadow: var(--shadow-portrait);
  background: var(--carbon);
}
.portrait img{width:100%;height:100%;object-fit:cover;display:block;filter: saturate(.92) contrast(1.02)}
.portrait.p1{top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:75%;z-index:2}
.portrait::after{
  content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb, var(--gold) 18%, transparent);pointer-events:none;
}
/* corner crosshairs around portrait stack */
.portraits::before,.portraits::after{
  content:"";position:absolute;width:22px;height:22px;border:1px solid var(--gold);opacity:.55;pointer-events:none;z-index:4;
}
.portraits::before{top:-8px;right:-8px;border-left:0;border-bottom:0}
.portraits::after{bottom:-8px;left:-8px;border-right:0;border-top:0}
@media (max-width:980px){.portraits{margin:0 auto}}

.hero-solo{max-width:1080px}
.hero-solo .lede{max-width:68ch}

h1.head{
  font-family: var(--font-serif);font-weight:400;
  font-size: clamp(46px, 7.4vw, 108px);
  line-height:1.17;
  margin-bottom:36px;
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lede{color:var(--cream);font-size:18px;line-height:1.7;max-width:54ch;margin-bottom:40px;font-weight:400}
.lede b{color:var(--gold);font-weight:700}

/* ─── Split lede (Client / Consultant) ───────────────── */
.lede-split{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:8px 0 40px;position:relative;
}
.lede-split::before{
  content:"";position:absolute;left:50%;top:14%;bottom:14%;width:1px;
  background:linear-gradient(180deg, transparent 0%, var(--gold) 25%, var(--gold) 75%, transparent 100%);
  transform:translateX(-.5px);pointer-events:none;
}
.lede-card{position:relative;padding-block:6px;padding-inline:0 40px}
.lede-card + .lede-card{padding-inline:40px 0}
.lede-q{
  font-family: var(--font-serif);font-style:italic;
  font-size:28px;line-height:36px;color:var(--gold);
  margin-bottom:14px;
}
.lede-card .lede{margin:0;max-width:42ch;font-size:17px;line-height:1.65}
@media (max-width:780px){
  .lede-split{grid-template-columns:1fr;gap:0}
  .lede-split::before{display:none}
  .lede-card,.lede-card + .lede-card{padding:0}
  .lede-card + .lede-card{margin-top:28px;padding-top:28px;border-top:1px solid color-mix(in srgb, var(--gold) 22%, transparent)}
}

/* ─── Bump divider (icon as separator) ───────────────── */
.bump-divider{
  position:relative;z-index:3;width:100vw;left:50%;transform:translateX(-50%);
  line-height:0;margin-bottom:-1px;pointer-events:none;
}
.bump-divider svg{
  display:block;width:100%;height:auto;
}

/* ─── Generic content page ───────────────────────────── */
.page-main{min-height:60dvh;padding:80px 0 120px}
.page-title{
  font-family:var(--font-serif);
  font-size:clamp(36px,5vw,56px);
  line-height:1.05;margin-bottom:32px;
}
.page-title::after{
  content:"";display:block;width:120px;height:3px;margin-top:18px;
  background:var(--gold-grad);
  border-radius:2px;
}
.placeholder{
  color: color-mix(in srgb, var(--cream) 60%, transparent);
  font-style: italic;
  max-width: 60ch;
}
.prose{max-width:72ch;font-size:16px;line-height:24px;color:var(--cream)}
.prose h2{
  font-family:var(--font-serif);
  font-size:36px;line-height:44px;
  margin:48px 0 16px;
  color:var(--cream);
}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 16px}
.prose strong{font-weight:700}
.prose a{color:var(--cream);border-bottom:1px solid color-mix(in srgb, var(--gold) 40%, transparent);transition:color .2s ease,border-color .2s ease}
.prose a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.prose dl{display:grid;grid-template-columns:max-content 1fr;column-gap:24px;row-gap:8px;margin:0 0 16px}
.prose dt{font-family:var(--font-mono);font-size:13px;line-height:20px;letter-spacing:.1em;text-transform:uppercase;color: color-mix(in srgb, var(--gold) 85%, var(--cream));padding-top:2px}
.prose dd{margin:0}
@media (max-width:640px){
  .prose dl{grid-template-columns:1fr;row-gap:2px}
  .prose dt{margin-top:10px}
}

/* ─── Footer ─────────────────────────────────────────── */
footer{
  padding:80px 0 36px;background: var(--carbon);color:var(--cream);
  position:relative;z-index:2;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr;gap:48px;margin-bottom:56px;
}
.footer-grid .brand{display:inline-flex}
.footer-grid .brand .logo{width:220px;height:57px;display:block}
.footer-grid p{color:var(--cream);font-size:16px;line-height:24px;max-width:36ch;margin-top:18px}
.footer-grid .col-title{font-family: var(--font-mono);font-size:16px;line-height:20px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;margin-bottom:22px;font-weight:400}
.footer-grid a:not(.brand){display:block;color:var(--cream);font-size:16px;line-height:24px;padding:6px 0;transition: all .2s ease}
.footer-grid a:not(.brand):hover{color:var(--gold);padding-left:6px}
.footer-grid a.social-link{display:flex;align-items:center;gap:8px}
.footer-grid a.social-link .social-icon{width:18px;height:18px;background-color:var(--cream);-webkit-mask:url(linkedin.svg) center/contain no-repeat;mask:url(linkedin.svg) center/contain no-repeat;transition:background-color .2s ease}
.footer-grid a.social-link:hover .social-icon{background-color:var(--gold)}
.legal{
  padding-top:28px;border-top:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  display:flex;align-items:center;
  color:var(--cream);
  font-size:16px;line-height:24px;
  flex-wrap:wrap;gap:14px;
}
.legal a{color:var(--cream);text-decoration:underline;text-decoration-color:color-mix(in srgb, var(--gold) 40%, transparent);text-underline-offset:3px;transition:color .2s ease}
.legal a:hover{color:var(--gold)}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}