/* ==================================================
   STYLE.CSS — LAYOUT & COMPONENTS
   ==================================================
   PURPOSE: This is where actual visual rules live —
   everything here CONSUMES the tokens defined in
   variables.css via var(--token-name). You should not
   see a raw hex code or hardcoded pixel value below;
   if you do, it's a sign that the value should be promoted
   to a variable.
   ================================================== */

/* ---------- 1. BASE ELEMENT DEFAULTS ---------- */
body {
    background-color: var(--color-background);
    padding-top:90px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    font-weight: 600;
}

h1 { margin-bottom: 24px; }
h2 { margin-top: 0; margin-bottom: 16px; }
a { color: inherit; text-decoration: none; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--space-xs);
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--color-accent);
    color: #fff;
    padding: var(--space-xs) var(--space-sm);
    z-index: 100;
    transition: top var(--transition-fast);
}

.skip-link:focus { top: 0; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 4. COMPONENTS ---------- */
.site-header {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    --background:var(--color-background);
    --background: transparent;
    --border-bottom: 1px solid var(--color-border);
    padding-block: var(--space-20xs);
}

.site-header .container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    position: relative;
    background:var(--color-background);
}

.theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    border-radius: var(--border-radius);
    flex-shrink: 0;
}

.theme-btn:hover,
.theme-btn:focus-visible { color: var(--color-text); border-color: var(--color-accent); }
.theme-btn svg { width: 18px; height: 18px; }

.logo { display: flex; grid-column: 1 / 2; justify-self: start; }
.logo-mark { height: 64px; width: auto; opacity: 0.99; }

.header-actions {
    grid-column: 2 / 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.main-nav { grid-column: 1 / -1; width: 100%; }
.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
}
.main-nav a { color: var(--color-text-muted); transition: color var(--transition-fast); }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--color-text); }
.main-nav a[aria-current="page"] { color: var(--color-text); border-bottom: 2px solid var(--color-accent); }

.hero {
    position: relative;
    padding-block: var(--space-md);
    text-align: center;
    border-top: none;
    overflow: hidden;
}

.hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        radial-gradient(ellipse at 50% 0%, var(--color-accent-glow), transparent 60%),
        repeating-linear-gradient(to right, var(--color-border) 0 1px, transparent 1px 64px),
        repeating-linear-gradient(to bottom, var(--color-border) 0 1px, transparent 1px 64px);
    opacity: 0.6;
    mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
}

.hero-banner{
    display:block;
    width:100%;
    max-width:100%;
    height:clamp(180px,42vw,620px);
    object-fit:cover;
    object-position:center;
    margin-bottom:var(--space-9xs);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(rgba(255,255,255,0.00), rgba(255,255,255,0.15));
    pointer-events:none;
}

.hero-title{ font-size:clamp(1.4rem, 4vw, 3rem); line-height:1.15; }
.hero-content{ padding:clamp(1rem,4vw,3rem); }
.hero-banner img { width: 100%; height: auto; max-height: 60vh; object-fit: cover; }
.hero-mark { height: 96px; width: auto; margin-inline: auto; margin-bottom: var(--space-sm); }
.hero-wordmark { font-size: var(--text-3xl); font-weight: 700; letter-spacing: 0.15em; margin-bottom: var(--space-md); }
.hero h1 { font-size: clamp(1.5rem, 4vw, 3rem); max-width: 50ch; margin-inline: auto; margin-bottom: var(--space-sm); text-align: center; }
.hero-subline { font-size: clamp(0.75rem, 2.0vw, 1.4rem); color: var(--color-text-muted); white-space: nowrap; }
.hero-subline span { color: var(--color-accent); margin-inline: var(--space-xs); }

.founder-hero { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 30px; align-items: start; margin-bottom: 30px; }
.founder-portrait { width: 100%; max-width: 300px; overflow: hidden; border-radius: 0; margin: 0 auto; }
.founder-portrait img { display: block; width: 100%; height: auto; }
.founder-intro h1 { margin-bottom: 12px; }
.founder-role { margin-bottom: 28px; font-size: 1.1rem; }

@media (max-width: 680px) {
    .founder-hero { grid-template-columns: 1fr; gap: 25px; align-items: start; margin-bottom: 20px; }
    .founder-portrait { width: 75%; max-width: 220px; overflow: hidden; border-radius: 0; margin: 0 auto; }
}

section { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); }
section h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }

.eyebrow {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-xs);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.btn-outline { border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-accent); color: #fff; }
.btn-primary { border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: transparent; color: var(--color-accent); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-md); margin-block: var(--space-lg); }
.card-grid--projects { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: var(--space-md); text-align: start; transition: border-color var(--transition-fast), transform var(--transition-fast); }
.service-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.service-card svg { width: 28px; height: 28px; color: var(--color-accent); margin-bottom: var(--space-sm); }
.service-card h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.service-card p { font-size: var(--text-sm); color: var(--color-text-muted); }

.domain-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg); list-style: none; text-align: center; }
.domain-row li { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); width: 120px; }
.domain-row svg { width: 28px; height: 28px; color: var(--color-accent); }
.domain-row span { font-size: var(--text-sm); color: var(--color-text-muted); }
.who-we-help { text-align: center; }
.who-we-help h2 { max-width: 32ch; margin-inline: auto; margin-bottom: var(--space-lg); }

.services .container > .eyebrow, .services .container > h2,
.projects .container > .eyebrow, .projects .container > h2,
.insights .container > .eyebrow, .insights .container > h2 { text-align: center; }
.services .container > h2, .projects .container > h2, .insights .container > h2 { max-width: 36ch; margin-inline: auto; }
.services > .container, .projects > .container, .insights > .container { text-align: center; }


.card-media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.card-media-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface)); border: 1px solid var(--color-border); border-radius: var(--border-radius); margin-bottom: var(--space-sm); }
.card-media-placeholder img, .card-media-placeholder picture { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--border-radius); }
.card-media-placeholder svg { width: 40px; height: 40px; color: var(--color-text-muted); }
.card-media-placeholder--sm { aspect-ratio: 16 / 9; width: 160px; flex-shrink: 0; margin-bottom: 0; }
.card-media-placeholder--sm svg { width: 28px; height: 28px; }
.card-media-placeholder--lg { aspect-ratio: 16 / 9; margin-bottom: 0; }
.card-media-placeholder--lg svg { width: 56px; height: 56px; }

.project-card { text-align: start; }
.project-card h3 { font-size: var(--text-base); margin-bottom: var(--space-xs); }
.project-card p { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.card-link { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.card-link svg { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.card-link:hover svg, .card-link:focus-visible svg { transform: translateX(3px); }

.insight-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); text-align: start; margin-block: var(--space-lg); }
.insight-item { display: flex; gap: var(--space-md); align-items: flex-start; padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); }
.insight-item:last-child { border-bottom: none; padding-bottom: 0; }
.insight-item__body h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.insight-item__body p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.insight-item__meta { color: var(--color-text-muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; }

.stats { background: var(--color-surface); box-shadow: var(--shadow-card); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-lg); text-align: center; }
.stat { display: flex; flex-direction: column; gap: var(--space-xs); }
.stat__number { font-size: var(--text-3xl); font-weight: 700; }
.stat__number--accent { color: var(--color-accent); }
.stat__label { font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat--callout { border-left: 1px solid var(--color-border); padding-left: var(--space-lg); }
.stat--callout .stat__label { text-transform: none; letter-spacing: normal; font-size: var(--text-base); }
.stat__caption { color: var(--color-text-muted); font-size: var(--text-sm); }

.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-lg); align-items: center; }
.about-copy p { color: var(--color-text-muted); margin-bottom: var(--space-md); }

.contact { text-align: center; background: var(--color-surface); }
.contact p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.contact-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.contact-form { max-width: 900px; margin: var(--space-lg) auto 0; text-align: start; }
.contact-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
.form-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-field label span { color: var(--color-accent); margin-inline-start: var(--space-9xs); }
.form-error { color: var(--color-accent); font-size: var(--text-sm); }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: var(--color-accent); }
.form-field input, .form-field textarea { width: 100%; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-background); color: var(--color-text); font: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-muted); }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-glow); }
.form-success, .form-error-global { margin-bottom: var(--space-md); font-size: var(--text-sm); }
.form-success, .form-error-global { color: var(--color-accent); }
.contact-form > .btn { margin-top: var(--space-md); }


#contact-form-toggle.is-active { background: var(--color-accent); color: var(--color-background); border-color: var(--color-accent); }

.site-footer { padding-block: var(--space-lg); color: var(--color-text-muted); font-size: var(--text-sm); border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-lg); }
.footer-brand p { margin-top: var(--space-sm); }
.footer-logo { height: 38px; width: auto; opacity: 0.85; }
.footer-nav h3 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text); margin-bottom: var(--space-sm); }
.footer-nav ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
.footer-nav a { transition: color var(--transition-fast); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--color-text); }

@media (max-width: 640px) {
    .site-header .container { flex-direction: column; gap: var(--space-xs); }
    .main-nav ul { flex-wrap: wrap; justify-content: center; font-size: var(--text-sm); }
    .about-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-nav ul { align-items: center; }
    .stat--callout { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: var(--space-lg); }
    .insight-item { flex-direction: column; }
    .card-media-placeholder--sm { width: 100%; aspect-ratio: 16 / 9; }
    .contact-form__grid { grid-template-columns: 1fr; }
    .form-field--full { grid-column: auto; }
}

@media (max-width: 380px) {
    .site-header .container { flex-direction: column; gap: var(--space-xs); }
    .main-nav ul { flex-wrap: wrap; justify-content: center; font-size: var(--text-xsm); }
    .about-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-nav ul { align-items: center; }
    .stat--callout { border-left: none; border-top: 1px solid var(--color-border); padding-left: 0; padding-top: var(--space-lg); }
    .insight-item { flex-direction: column; }
    .card-media-placeholder--sm { width: 100%; aspect-ratio: 16 / 9; }
}

.lang-switcher { position: relative; }
.lang-switcher__toggle { display: flex; align-items: center; gap: var(--space-xs); background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); padding: 0.4rem 0.75rem; border-radius: var(--border-radius); cursor: pointer; font-size: var(--text-sm); letter-spacing: 0.05em; transition: border-color var(--transition-fast), color var(--transition-fast); }
.lang-switcher__toggle:hover, .lang-switcher__toggle:focus-visible, .lang-switcher__toggle[aria-expanded="true"] { color: var(--color-text); border-color: var(--color-accent); }
.lang-switcher__toggle svg { width: 16px; height: 16px; }
.lang-flag { width: 20px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; flex-shrink: 0; }
.lang-switcher__current { display: inline-flex; align-items: center; gap: var(--space-xs); }
.lang-switcher__menu { position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: 50; min-width: 80px; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-card); padding: var(--space-xs); }
.lang-switcher__menu a { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius); color: var(--color-text-muted); font-size: var(--text-sm); letter-spacing: 0.05em; transition: background-color var(--transition-fast), color var(--transition-fast); }
.lang-switcher__menu a:hover, .lang-switcher__menu a:focus-visible { background: var(--color-surface-raised); color: var(--color-text); }
.lang-switcher__menu a[aria-current="true"] { color: var(--color-accent); font-weight: 600; }

.founder-external-links { margin-top: 28px; }
.founder-external-links-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.8rem; }
.founder-external-links-items { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.founder-external-links-items a { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; }
.founder-external-links-items img { width: 22px; height: 22px; }
.founder-external-links-items span { font-size: 0.9rem; }
.footer-social { display: flex; align-items: center; gap: var(--space-sm); }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--color-text-muted); transition: color var(--transition-fast), opacity var(--transition-fast); }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--color-text); }
.footer-social img { width: 22px; height: 22px; display: block; transition: filter var(--transition-fast), opacity var(--transition-fast); }
[data-theme="dark"] .footer-social img[src*="github.svg"], [data-theme="dark"] .footer-social img[src*="x.svg"] { filter: invert(1); }

/* ---------- About-page content lists ---------- */
.content-list {
    margin-block: var(--space-sm);
    padding-inline-start: 2rem;
}

.content-list li {
    margin-bottom: var(--space-xs);
}