@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..800,0..100&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
    --bcs-ink: #1b1712;
    --bcs-panel: #241f1a;
    --bcs-panel-soft: #2c2824;
    --bcs-paper: #f3ecd8;
    --bcs-muted: rgba(243, 236, 216, 0.68);
    --bcs-soft: rgba(243, 236, 216, 0.86);
    --bcs-rule: rgba(243, 236, 216, 0.11);
    --bcs-accent: #d48736;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', system-ui, sans-serif !important;
    background:
        radial-gradient(circle at 78% 0%, rgba(212, 135, 54, 0.08), transparent 28%),
        linear-gradient(180deg, #172017 0%, var(--bcs-ink) 32%, #0f120f 100%) !important;
    color: var(--bcs-paper) !important;
    overflow-x: hidden;
}

body.bcs-header-normalized {
    padding-top: 80px;
}

body.light-mode {
    color-scheme: light;
    background:
        radial-gradient(circle at 78% 0%, rgba(193, 154, 82, 0.12), transparent 28%),
        linear-gradient(180deg, #faf6ed 0%, #f3ecd8 52%, #e4d4b8 100%) !important;
    color: #111411 !important;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(243, 236, 216, 0.025) 1px, transparent 1px);
    background-size: 100% 96px;
    opacity: 0.5;
    z-index: -1;
}

body.light-mode::before {
    background-image: linear-gradient(rgba(27, 23, 18, 0.035) 1px, transparent 1px);
}

body.bcs-header-normalized header {
    border-color: rgba(243, 236, 216, 0.08) !important;
    background: rgba(27, 23, 18, 0.75) !important;
    backdrop-filter: blur(14px);
}

body.bcs-header-normalized header > div {
    max-width: 1400px !important;
    min-height: 80px;
}

body.bcs-header-normalized .nav-link {
    position: relative;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(243, 236, 216, 0.88) !important;
    text-decoration: none !important;
}

body.bcs-header-normalized .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: var(--bcs-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.35s ease;
}

body.bcs-header-normalized .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

body.bcs-header-normalized .theme-toggle {
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(243, 236, 216, 0.16);
    background: rgba(243, 236, 216, 0.06);
    color: var(--bcs-paper);
}

body.bcs-header-normalized #mobileMenuBtn {
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--bcs-paper) !important;
}

body.bcs-header-normalized .header-search {
    min-height: 42px;
}

body.bcs-header-normalized .header-search button.material-symbols-outlined,
body.bcs-header-normalized button .material-symbols-outlined,
body.bcs-header-normalized .material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.light-mode.bcs-header-normalized header {
    border-color: rgba(27, 23, 18, 0.08) !important;
    background: rgba(251, 248, 242, 0.92) !important;
}

body.light-mode.bcs-header-normalized .nav-link,
body.light-mode.bcs-header-normalized header a,
body.light-mode.bcs-header-normalized header button {
    color: rgba(27, 23, 18, 0.84) !important;
}

body.light-mode.bcs-header-normalized header .text-accent,
body.light-mode.bcs-header-normalized .nav-link:hover {
    color: #1b1712 !important;
}

body.light-mode.bcs-header-normalized header a[href*="cal.com"] {
    background: #1b1712 !important;
    border-color: #1b1712 !important;
    color: var(--bcs-paper) !important;
}

body.light-mode.bcs-header-normalized .theme-toggle,
body.light-mode.bcs-header-normalized .header-search {
    border-color: rgba(27, 23, 18, 0.14) !important;
    background: rgba(27, 23, 18, 0.04) !important;
    color: #1b1712 !important;
}

body.light-mode.bcs-header-normalized #mobileMenuBtn {
    color: #1b1712 !important;
}

header.sticky {
    min-height: 76px;
    border-color: var(--bcs-rule) !important;
    background: rgba(15, 19, 16, 0.9) !important;
    backdrop-filter: blur(16px);
}

header.sticky > div {
    max-width: 1400px !important;
    min-height: 76px;
}

header img {
    height: 38px !important;
}

header span.text-xl {
    font-family: 'Fraunces', Georgia, serif !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    font-size: 1.55rem !important;
}

header nav a {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

main {
    width: min(1400px, calc(100% - 48px));
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body > div.relative > nav,
body > div.relative > section {
    width: min(1400px, calc(100% - 48px));
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body > div.relative {
    max-width: 100%;
    overflow-x: hidden;
}

body > div.relative > * {
    max-width: 100%;
}

section {
    scroll-margin-top: 110px;
}

.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-\[1000px\],
.max-w-\[1200px\] {
    max-width: 1400px !important;
}

h1,
h2,
h3,
h4,
.font-display {
    font-family: 'Fraunces', Georgia, serif !important;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(3rem, 7vw, 6.8rem) !important;
    line-height: 0.94 !important;
    font-weight: 500 !important;
}

h2 {
    font-size: clamp(2rem, 4vw, 4rem) !important;
    line-height: 0.98 !important;
    font-weight: 500 !important;
}

h3 {
    font-size: clamp(1.45rem, 2.2vw, 2rem) !important;
    line-height: 1.05 !important;
    font-weight: 550 !important;
}

p,
li,
summary,
label,
input,
select,
textarea {
    line-height: 1.68 !important;
}

p,
li,
summary {
    color: var(--bcs-soft);
}

body.light-mode p,
body.light-mode li,
body.light-mode summary,
body.light-mode label {
    color: rgba(27, 23, 18, 0.72) !important;
}

body.light-mode .text-white,
body.light-mode .dark\:text-white,
body.light-mode strong,
body.light-mode h1,
body.light-mode h2,
body.light-mode h3 {
    color: #1b1712 !important;
}

body.light-mode .text-gray-300,
body.light-mode .text-gray-400,
body.light-mode .text-text-secondary,
body.light-mode .text-text-muted,
body.light-mode .dark\:text-gray-300,
body.light-mode .dark\:text-gray-400 {
    color: rgba(27, 23, 18, 0.68) !important;
}

.bg-surface-dark,
.dark\:bg-surface-dark,
.bg-background-dark,
.dark\:bg-background-dark,
.bg-\[\#11221a\],
details,
section.rounded-2xl,
section.rounded-3xl,
div.rounded-2xl,
div.rounded-3xl {
    background: linear-gradient(180deg, rgba(30, 41, 33, 0.88), rgba(21, 28, 23, 0.98)) !important;
    border-color: var(--bcs-rule) !important;
}

body.light-mode .bg-surface-dark,
body.light-mode .dark\:bg-surface-dark,
body.light-mode .bg-background-dark,
body.light-mode .dark\:bg-background-dark,
body.light-mode .bg-\[\#11221a\],
body.light-mode details,
body.light-mode section.rounded-2xl,
body.light-mode section.rounded-3xl,
body.light-mode div.rounded-2xl,
body.light-mode div.rounded-3xl {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 243, 236, 0.98)) !important;
    border-color: rgba(27, 23, 18, 0.08) !important;
}

.rounded-xl,
.rounded-2xl,
.rounded-3xl {
    border-radius: 28px !important;
}

.border,
.border-t,
.border-b,
.border-secondary,
.border-border-dark,
.border-surface-border {
    border-color: var(--bcs-rule) !important;
}

.text-primary,
.dark\:text-primary,
.hover\:text-primary:hover {
    color: var(--bcs-accent) !important;
}

.text-gray-300,
.text-gray-400,
.text-text-secondary,
.text-text-muted,
.dark\:text-gray-300,
.dark\:text-gray-400 {
    color: var(--bcs-muted) !important;
}

.bg-primary,
.hover\:bg-primary-hover:hover {
    background: var(--bcs-accent) !important;
    color: var(--bcs-ink) !important;
}

a[class*='rounded'],
button[class*='rounded'],
.inline-flex[class*='px-6'],
.block.w-full.py-3,
button[type='submit'] {
    min-height: 46px;
    border-radius: 999px !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

a[class*='rounded'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

a[class*='rounded']:not(.bg-primary):not([class*='bg-primary']),
button[class*='rounded']:not(.bg-primary):not([class*='bg-primary']),
.inline-flex[class*='px-6']:not(.bg-primary):not([class*='bg-primary']) {
    background: rgba(243, 236, 216, 0.035) !important;
    border: 1px solid var(--bcs-rule) !important;
    color: var(--bcs-paper) !important;
}

body.light-mode a[class*='rounded']:not(.bg-primary):not([class*='bg-primary']),
body.light-mode button[class*='rounded']:not(.bg-primary):not([class*='bg-primary']),
body.light-mode .inline-flex[class*='px-6']:not(.bg-primary):not([class*='bg-primary']) {
    background: rgba(27, 23, 18, 0.035) !important;
    border-color: rgba(27, 23, 18, 0.14) !important;
    color: #1b1712 !important;
}

a[class*='rounded']:hover,
button[class*='rounded']:hover,
.inline-flex[class*='px-6']:hover {
    border-color: rgba(212, 135, 54, 0.45) !important;
    background: rgba(212, 135, 54, 0.1) !important;
    color: var(--bcs-accent) !important;
}

.material-symbols-outlined {
    vertical-align: middle;
}

img {
    max-width: 100%;
}

.hidden {
    display: none !important;
}

.shadow-xl,
.shadow-2xl {
    box-shadow: 0 34px 110px rgba(0, 0, 0, 0.2) !important;
}

footer {
    margin-top: 90px;
    background: #1b1712 !important;
    border-color: var(--bcs-rule) !important;
    padding-top: 5rem !important;
    padding-bottom: 3rem !important;
}

footer > div {
    max-width: 1400px !important;
}

footer .grid {
    gap: 3rem !important;
}

footer h4 {
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--bcs-accent) !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

footer a,
footer p {
    color: var(--bcs-muted) !important;
    line-height: 1.7 !important;
}

footer a:hover {
    color: var(--bcs-paper) !important;
}

body.light-mode footer {
    background: #1b1712 !important;
}

body.light-mode footer h4 {
    color: var(--bcs-accent) !important;
}

body.light-mode footer a,
body.light-mode footer p,
body.light-mode footer address,
body.light-mode footer li,
body.light-mode footer div {
    color: var(--bcs-muted) !important;
}

body.light-mode footer a:hover {
    color: var(--bcs-paper) !important;
}

body.light-mode footer .border-t,
body.light-mode footer .border-b,
body.light-mode footer .border-rule {
    border-color: var(--bcs-rule) !important;
}

body.light-mode footer .text-mid {
    color: var(--bcs-muted) !important;
}

body.light-mode footer .text-paper,
body.light-mode footer .text-white,
body.light-mode footer .dark\:text-white {
    color: var(--bcs-paper) !important;
}

body.light-mode footer .text-accent {
    color: var(--bcs-accent) !important;
}

body.light-mode footer .font-mono {
    color: var(--bcs-muted) !important;
}

body.light-mode footer .font-serif {
    color: var(--bcs-paper) !important;
}

input,
select,
textarea {
    background: rgba(243, 236, 216, 0.04) !important;
    border-color: var(--bcs-rule) !important;
    color: var(--bcs-paper) !important;
    border-radius: 18px !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background: rgba(27, 23, 18, 0.035) !important;
    border-color: rgba(27, 23, 18, 0.12) !important;
    color: #111411 !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
    color: rgba(27, 23, 18, 0.42) !important;
}

label,
form p,
form .text-sm,
form .text-xs {
    color: rgba(243, 236, 216, 0.78) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(243, 236, 216, 0.42) !important;
}

option {
    background: var(--bcs-ink);
    color: var(--bcs-paper);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--bcs-accent) !important;
    box-shadow: 0 0 0 1px var(--bcs-accent) !important;
}

.fixed.bottom-0,
.fixed.bottom-4,
.fixed.bottom-6 {
    z-index: 60;
}

#cookie-popup {
    position: fixed !important;
    left: auto !important;
    right: 24px !important;
    bottom: 24px !important;
    width: min(720px, calc(100% - 32px)) !important;
    z-index: 60 !important;
    padding: 18px 20px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(243, 236, 216, 0.2) !important;
    background: rgba(16, 20, 17, 0.94) !important;
    color: var(--bcs-paper) !important;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(18px);
}

#cookie-popup .layout-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

#cookie-popup p,
#cookie-popup div {
    color: rgba(243, 236, 216, 0.82) !important;
}

#cookie-popup button {
    min-height: 42px !important;
    border-radius: 12px !important;
    padding: 0 18px !important;
}

@media (min-width: 901px) {
    .grid.md\:grid-cols-2,
    .grid.lg\:grid-cols-2,
    .grid.lg\:grid-cols-3 {
        gap: 2rem !important;
    }

    .grid.lg\:grid-cols-3 > *:nth-child(3n + 1) {
        transform: translateY(0);
    }

    .grid.lg\:grid-cols-3 > *:nth-child(3n + 2) {
        transform: translateY(26px);
    }

    .grid.lg\:grid-cols-3 > *:nth-child(3n) {
        transform: translateY(52px);
    }
}

@media (min-width: 768px) {
    .md\:flex {
        display: flex !important;
    }

    .md\:inline-flex {
        display: inline-flex !important;
    }

    .md\:grid {
        display: grid !important;
    }

    .md\:block {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .lg\:flex {
        display: flex !important;
    }

    .lg\:grid {
        display: grid !important;
    }
}

@media (max-width: 900px) {
    main {
        width: 100%;
        max-width: 100vw;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body > div.relative > nav,
    body > div.relative > section {
        width: 100%;
        max-width: 100vw;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body > div.relative,
    body > div.relative > *,
    body > div.relative > section > div,
    body > div.relative > nav > div {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    body > div.relative > section > div,
    body > div.relative > nav > div {
        max-width: calc(100vw - 32px) !important;
    }

    h1 {
        font-size: clamp(2.5rem, 11vw, 4rem) !important;
        line-height: 1 !important;
        overflow-wrap: anywhere;
    }

    header span.text-xl {
        font-size: 1.25rem !important;
    }

    header.sticky > div {
        max-width: 100vw !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        overflow: hidden;
    }

    header nav {
        display: none !important;
    }

    #cookie-popup {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
    }

    #cookie-popup .layout-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    #cookie-popup .shrink-0 {
        width: 100% !important;
    }

    #cookie-popup button {
        flex: 1;
    }
}

/* Team profile cards: keep long professional names inside the card after
   restyling passes that alter global H1 sizing. */
.team-layout .aspect-\[3\/4\] h1 {
    font-size: clamp(3.1rem, 4.4vw, 5rem) !important;
    line-height: 0.98 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

@media (max-width: 900px) {
    .team-layout .aspect-\[3\/4\] h1 {
        font-size: clamp(3.4rem, 13vw, 5rem) !important;
    }
}