/* ============================================================
   Design tokens
   ============================================================ */
:root {
    /* Brand */
    --c-blue: #0d7dfc;
    --c-blue-dark: #0a63c9;
    --c-blue-deep: #0a5cbc;
    --c-blue-light: #7fb2ff;
    --c-sky: #9db4ff;
    --c-purple: #7c56e8;
    --c-purple-deep: #6a46d8;
    --c-purple-light: #b3a0ff;
    /* Text */
    --c-ink: #16263e;
    --c-body: #3c4c63;
    --c-gray-1: #5b6b82;
    --c-gray-2: #64758b;
    --c-gray-3: #8496ad;
    --c-gray-4: #46586f;
    /* Surfaces */
    --c-bg: #fafbfd;
    --c-bg-alt: #eef3f9;
    --c-white: #ffffff;
    --c-navy-1: #0a1428;
    --c-navy-2: #131c40;
    --c-navy-3: #0e1a33;
    --c-navy-4: #1c2450;
    /* RGB triplets for rgba() composition */
    --c-ink-rgb: 22,38,62;
    --c-blue-rgb: 13,125,252;
    --c-purple-rgb: 124,86,232;
    --c-white-rgb: 255,255,255;
    --c-blue-light-rgb: 127,178,255;
    --c-purple-light-rgb: 179,160,255;
    --c-shadow-rgb: 13,38,80;
    --c-shadow2-rgb: 13,60,120;
    /* Type */
    --font-serif: 'EB Garamond', Georgia, serif;
    --font-sans: 'Source Sans 3', 'Segoe UI', sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--font-sans); color: var(--c-body); background: var(--c-bg); -webkit-font-smoothing: antialiased; }
a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-dark); }
::selection { background: rgba(var(--c-blue-rgb),.18); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================
   Navigation
   ============================================================ */
.navbar-nav .nav-link { color: rgba(var(--c-ink-rgb),.8); font-size: 15px; font-weight: 500; }
.dropdown-menu .dropdown-item { border-radius: 8px; padding: 8px 14px; font-size: 14px; color: var(--c-ink); }

/* ============================================================
   Sections & headers
   ============================================================ */
.sec { background: var(--c-bg); padding: 110px 0; }
.sec--alt { background: var(--c-bg-alt); }
.sec-head { max-width: 640px; margin-bottom: 56px; }
.eyebrow { color: var(--c-blue); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 16px; }
.section-title { font-family: var(--font-serif); font-weight: 600; color: var(--c-ink); font-size: clamp(32px, 3.6vw, 46px); line-height: 1.12; margin: 0; text-wrap: balance; }
.title-gap { margin-bottom: 18px; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; background: var(--c-white); min-height: 100vh; display: flex; align-items: center; padding: 150px 0 110px; overflow: hidden; }
.hero-grid { position: absolute; inset: -2% -2%; background-image: linear-gradient(rgba(var(--c-ink-rgb),.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--c-ink-rgb),.05) 1px, transparent 1px); background-size: 58px 58px; }
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, var(--c-white) 100%); }
.hero-orb { position: absolute; }
.hero-orb--blue { top: -180px; right: -120px; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(var(--c-blue-rgb),.13), transparent 72%); }
.hero-orb--purple { bottom: -220px; left: -160px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(var(--c-purple-rgb),.11), transparent 72%); }
.eyebrow--hero { font-weight: 600; margin-bottom: 22px; }
.hero-title { font-family: var(--font-serif); font-weight: 600; color: var(--c-ink); font-size: clamp(44px, 5.6vw, 74px); line-height: 1.06; letter-spacing: -.01em; margin: 0 0 26px; text-wrap: balance; }
.hero-title em { font-style: italic; color: var(--c-blue); }
.hero-sub { color: var(--c-gray-1); font-size: 19px; line-height: 1.65; max-width: 560px; margin: 0 0 36px; text-wrap: pretty; }
.hero-ctas { gap: 14px; margin-bottom: 52px; }
.btn-hero { border-radius: 11px; padding: 14px 28px; font-size: 16px; font-weight: 600; transition: background .2s, transform .2s; }
.btn-hero--primary { background: var(--c-blue); color: var(--c-white); box-shadow: 0 10px 30px rgba(var(--c-blue-rgb),.3); }
.btn-hero--outline { border: 1px solid rgba(var(--c-ink-rgb),.3); color: var(--c-ink); }
.hero-stats { gap: 0 44px; row-gap: 22px; }
.hero-portrait { position: relative; width: min(390px, 78vw); aspect-ratio: 1; }
.hero-ring { position: absolute; inset: -9%; border: 1px solid rgba(var(--c-ink-rgb),.13); border-radius: 50%; }
.hero-ring--outer { inset: -19%; border-color: rgba(var(--c-purple-rgb),.3); }
.hero-photo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--c-white); border: 1px solid rgba(var(--c-ink-rgb),.1); box-shadow: 0 34px 80px rgba(var(--c-shadow-rgb),.18); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chip { position: absolute; background: rgba(var(--c-white-rgb),.8); backdrop-filter: blur(10px); border: 1px solid rgba(var(--c-ink-rgb),.12); border-radius: 12px; padding: 10px 16px; color: var(--c-ink); font-size: 13.5px; font-weight: 600; box-shadow: 0 10px 26px rgba(var(--c-shadow-rgb),.1); animation: floaty 7s ease-in-out infinite; }
.chip--tr { top: 6%; right: -14%; }
.chip--left { left: -18%; top: 48%; animation-duration: 9s; }
.chip--br { bottom: 2%; right: -6%; animation-duration: 11s; }
.chip--tl { top: -4%; left: -8%; animation-duration: 8s; }
.stat { border-left: 2px solid rgba(var(--c-blue-rgb),.55); padding-left: 16px; }
.stat--purple { border-left-color: rgba(var(--c-purple-rgb),.55); }
.stat-num { font-family: var(--font-serif); font-size: 34px; font-weight: 600; color: var(--c-ink); line-height: 1; }
.stat-label { font-size: 13.5px; color: var(--c-gray-2); margin-top: 6px; }

/* ============================================================
   Trusted by
   ============================================================ */
.trust-logo { font-weight: 700; font-size: 16px; letter-spacing: .13em; color: rgba(var(--c-ink-rgb),.42); }

/* ============================================================
   About
   ============================================================ */
.lead-p { font-size: 17px; line-height: 1.75; margin: 0 0 18px; text-wrap: pretty; }
.info-card { background: var(--c-white); border: 1px solid rgba(var(--c-ink-rgb),.09); border-radius: 14px; padding: 28px 30px; box-shadow: 0 1px 2px rgba(var(--c-ink-rgb),.04); }
.card-label { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-blue); margin: 0 0 22px; }
.card-label--purple { color: var(--c-purple); }
.card-label--m16 { margin-bottom: 16px; }
.pill-list { gap: 9px; }
.pill { border: 1px solid rgba(var(--c-ink-rgb),.14); border-radius: 999px; padding: 7px 15px; font-size: 14px; color: var(--c-body); }
.pill--blue { background: rgba(var(--c-blue-rgb),.07); border-color: rgba(var(--c-blue-rgb),.18); font-size: 13.5px; color: var(--c-blue-deep); }
.row-gx4 { --bs-gutter-x: 4rem; }

/* ============================================================
   Services
   ============================================================ */
.svc-card { background: var(--c-white); border: 1px solid rgba(var(--c-ink-rgb),.09); border-radius: 14px; padding: 32px; height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.svc-num { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: var(--c-blue); margin-bottom: 14px; }
.svc-num--purple { color: var(--c-purple); }
.svc-rule { width: 34px; height: 1px; background: rgba(var(--c-ink-rgb),.18); margin-bottom: 18px; }
.svc-title { font-size: 19px; font-weight: 700; color: var(--c-ink); margin: 0 0 10px; }
.svc-text { font-size: 15px; line-height: 1.65; margin: 0; color: var(--c-gray-1); }

/* ============================================================
   Career timeline
   ============================================================ */
#career .col-md-3 { padding-bottom: 8px; }
.tl-year { font-weight: 700; color: var(--c-ink); font-size: 15px; }
.tl-body { border-left: 1px solid rgba(var(--c-ink-rgb),.13); padding: 0 0 46px 30px; position: relative; }
.tl-body--last { border-left-color: transparent; padding-bottom: 8px; }
.tl-dot { position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, var(--c-blue), var(--c-purple)); box-shadow: 0 0 0 4px var(--c-bg); }
.tl-role { font-size: 20px; font-weight: 700; color: var(--c-ink); margin: 0 0 2px; }
.tl-org { font-size: 14.5px; font-weight: 600; color: var(--c-blue); margin-bottom: 10px; }
.tl-text { font-size: 15.5px; line-height: 1.65; margin: 0; color: var(--c-gray-1); max-width: 560px; }

/* ============================================================
   Education
   ============================================================ */
.panel { background: var(--c-white); border: 1px solid rgba(var(--c-ink-rgb),.09); border-radius: 16px; padding: 36px; height: 100%; }
.deg-title { font-family: var(--font-serif); font-size: 21px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.deg-sub { font-size: 14px; color: var(--c-gray-2); margin-top: 4px; }
.row-tight { --bs-gutter-y: 2px; }
.course-name { font-size: 15px; font-weight: 700; color: var(--c-ink); }
.course-detail { font-size: 14.5px; color: var(--c-gray-1); }

/* ============================================================
   Selected work (dark section)
   ============================================================ */
.work-card { background: rgba(var(--c-white-rgb),.045); border: 1px solid rgba(var(--c-white-rgb),.1); border-radius: 16px; padding: 36px; height: 100%; backdrop-filter: blur(6px); transition: transform .25s ease, border-color .25s ease; }
.work-title { font-size: 20px; font-weight: 700; color: var(--c-white); margin: 0 0 12px; }
.work-text { font-size: 15px; line-height: 1.65; color: rgba(var(--c-white-rgb),.68); margin: 0 0 24px; }
.work-metric { border-top: 1px solid rgba(var(--c-white-rgb),.1); padding-top: 20px; }
.metric-num { font-family: var(--font-serif); font-size: 40px; font-weight: 600; color: var(--c-blue-light); line-height: 1; }
.metric-num--purple { color: var(--c-purple-light); }
.metric-label { font-size: 13.5px; color: rgba(var(--c-white-rgb),.55); margin-top: 6px; }

/* ============================================================
   Insights / publications
   ============================================================ */
.pub-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(var(--c-ink-rgb),.1); }
.pub-title { font-family: var(--font-serif); font-size: 19px; color: var(--c-ink); line-height: 1.4; }
.pub-tag { flex-shrink: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-gray-1); border: 1px solid rgba(var(--c-ink-rgb),.16); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.pub-tag--accent { color: var(--c-purple); border-color: rgba(var(--c-purple-rgb),.3); }
.bullet-row { display: flex; gap: 14px; margin-bottom: 18px; }
.dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 8px; background: linear-gradient(135deg, var(--c-blue), var(--c-purple)); }
.bullet-text { font-size: 15.5px; line-height: 1.65; margin: 0; }

/* ============================================================
   Testimonials
   ============================================================ */
.quote-mark { font-family: var(--font-serif); font-size: 56px; line-height: .6; color: rgba(var(--c-blue-rgb),.3); margin-bottom: 18px; }
.quote-mark--purple { color: rgba(var(--c-purple-rgb),.3); }
.quote-ph { background: repeating-linear-gradient(45deg, rgba(var(--c-ink-rgb),.045) 0 8px, transparent 8px 16px); border: 1px dashed rgba(var(--c-ink-rgb),.18); border-radius: 10px; padding: 26px 22px; text-align: center; margin-bottom: 18px; }
.quote-ph-text { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--c-gray-2); }
.quote-attr { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: rgba(var(--c-ink-rgb),.4); }

/* ============================================================
   Contact
   ============================================================ */
.info-row { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(var(--c-ink-rgb),.1); padding-bottom: 14px; }
.info-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gray-3); }
.info-link { font-size: 15.5px; font-weight: 600; }
.field { margin-bottom: 20px; }
.field-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--c-gray-4); margin-bottom: 7px; }
.field-input { width: 100%; padding: 12px 15px; border-radius: 10px; border: 1px solid rgba(var(--c-ink-rgb),.16); font-family: inherit; font-size: 15.5px; color: var(--c-ink); background: var(--c-white); outline: none; transition: border-color .2s, box-shadow .2s; }

/* ============================================================
   Footer
   ============================================================ */
.foot-link { font-size: 14.5px; font-weight: 600; }

/* ============================================================
   Hover states (converted from the design's style-hover attributes).
   !important is needed to override the base inline styles.
   ============================================================ */
.hv-book:hover { background: var(--c-blue-dark) !important; color: var(--c-white) !important; transform: translateY(-1px); }
.hv-primary:hover { background: var(--c-blue-dark) !important; color: var(--c-white) !important; transform: translateY(-2px); }
.hv-submit:hover { background: var(--c-blue) !important; }
.hv-invite:hover { background: var(--c-blue) !important; color: var(--c-white) !important; }
.hv-outline:hover { background: rgba(var(--c-ink-rgb),.06) !important; color: var(--c-ink) !important; transform: translateY(-2px); }
.hv-ghost:hover { background: rgba(var(--c-white-rgb),.1) !important; color: var(--c-white) !important; }
.hv-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(var(--c-shadow2-rgb),.12) !important; }
.hv-card-blue:hover { transform: translateY(-5px); border-color: rgba(var(--c-blue-light-rgb),.4) !important; }
.hv-card-purple:hover { transform: translateY(-5px); border-color: rgba(var(--c-purple-light-rgb),.4) !important; }

/* Focus state (converted from the design's style-focus attribute) */
.fc-input:focus { border-color: var(--c-blue) !important; box-shadow: 0 0 0 3px rgba(var(--c-blue-rgb),.14) !important; }