:root { --home-display: "Manrope", "Inter", sans-serif; --home-bg: var(--color-bg); --home-bg-soft: var(--color-bg-soft); --home-surface: var(--color-surface-elevated); --home-text: var(--color-text-primary); --home-copy: var(--color-text-secondary); --home-muted: var(--color-text-muted); --home-accent: var(--color-accent); --home-accent-strong: var(--color-accent-strong); --home-border: var(--color-border); --home-border-strong: var(--color-border-strong); }
.home-page { background: var(--home-bg); color: var(--home-text); font-family: "Inter", sans-serif; }.home-page main { display: block; padding: 0; }.home-page .container { width: min(1180px, calc(100% - 3.5rem)); }
.home-hero { position: relative; overflow: hidden; padding: clamp(5.5rem, 12vw, 9rem) 0 clamp(4.5rem, 9vw, 7.5rem); background: linear-gradient(180deg, rgba(168, 214, 235, .22), rgba(255,255,255,.18)), linear-gradient(rgba(102, 174, 216, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 174, 216, .11) 1px, transparent 1px); background-size: auto, 28px 28px, 28px 28px; background-color: rgba(214, 236, 245, .7); }.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }.home-eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.35rem; color: var(--home-accent); font-size: .68rem; font-weight: 800; letter-spacing: .15em; line-height: 1.4; text-transform: uppercase; }.home-eyebrow > span { display: inline-block; width: 2.2rem; height: 1px; background: currentColor; }.hero-copy h1 { max-width: 8ch; margin: 0; color: var(--home-text); font-family: var(--home-display); font-size: clamp(3.5rem, 8vw, 6.7rem); letter-spacing: -.09em; line-height: .94; }.hero-copy h1 em { color: var(--home-accent); font-style: normal; }.hero-role { margin: 1.6rem 0 .95rem; color: var(--home-text); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 700; }.hero-description { max-width: 38rem; margin: 0; color: var(--home-copy); font-size: 1rem; line-height: 1.85; }.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }.home-primary-button, .home-secondary-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: .55rem; padding: .76rem 1.1rem; border-radius: .55rem; font-size: .8rem; font-weight: 700; transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }.home-primary-button { background: var(--home-accent); color: var(--home-bg); box-shadow: var(--shadow-sm); }.home-primary-button:hover { background: var(--home-accent-strong); color: var(--home-text); transform: translateY(-2px); }.home-secondary-button { border: 1px solid var(--home-border-strong); background: var(--home-surface); color: var(--home-text); }.home-secondary-button:hover { border-color: var(--home-accent); transform: translateY(-2px); }.hero-competencies { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 2rem; color: var(--home-muted); font-size: .7rem; }.hero-competencies span::before { content: "/"; margin-right: .55rem; color: var(--home-accent); }
.hero-portrait { position: relative; min-height: 410px; display: grid; place-items: center; }.portrait-shell { position: relative; width: min(100%, 560px); aspect-ratio: 1; display: grid; place-items: center; padding: 1.4rem; border: 12px solid rgba(103, 180, 217, .85); border-radius: 50%; background: linear-gradient(180deg, rgba(202, 235, 245, .7), rgba(154, 205, 227, .32)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 18px rgba(134, 197, 224, .22), 0 28px 50px rgba(85, 150, 185, .18); }.portrait-shell::before { content: ""; position: absolute; inset: -1.3rem; border: 2px solid rgba(122, 193, 222, .75); border-radius: 50%; pointer-events: none; }.portrait-shell img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); }.portrait-ring { position: absolute; inset: -1.8rem; border: 1px solid rgba(128, 197, 225, .7); border-radius: 50%; pointer-events: none; }
.home-section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--home-border); background: var(--home-bg); }
.introduction-section, .personal-section { background: var(--home-bg-soft); }
.intro-grid, .personal-grid { display: grid; grid-template-columns: .55fr 1.45fr; gap: 4rem; align-items: start; }
.intro-grid h2, .personal-grid h2, .section-heading h2, .snapshot-heading h2, .home-cta h2 { margin: 0; color: var(--home-text); font-family: var(--home-display); font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.06em; line-height: 1.05; }
.intro-grid > div > p, .personal-grid > div > p:not(.home-eyebrow), .snapshot-heading > p:not(.home-eyebrow) { max-width: 700px; margin: 1.1rem 0 0; color: var(--home-copy); font-size: 1rem; line-height: 1.9; }
.section-heading { max-width: 700px; margin-bottom: 2.7rem; }
.strengths-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.strength-item { min-height: 280px; padding: 1.35rem; border: 1px solid var(--home-border); border-radius: 1.15rem; background: linear-gradient(180deg, color-mix(in srgb, var(--home-accent) 3%, var(--home-surface)), var(--home-surface)); box-shadow: 0 12px 24px rgba(15, 23, 42, .04); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.strength-item:hover { transform: translateY(-3px); border-color: var(--home-border-strong); box-shadow: 0 16px 28px rgba(15, 23, 42, .08); }
.strength-item > span { color: var(--home-accent); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.strength-item > i { display: block; margin: 2.5rem 0 1.2rem; color: var(--home-accent); font-size: 1.25rem; }
.strength-item h3 { margin: 0 0 .7rem; color: var(--home-text); font-size: 1.05rem; }
.strength-item p { margin: 0; color: var(--home-copy); font-size: .84rem; line-height: 1.75; }
.snapshot-section { background: var(--home-bg); }
.snapshot-heading { max-width: 720px; }
.snapshot-list { display: grid; gap: 1rem; }
.snapshot-list article { display: grid; grid-template-columns: 155px 1fr; gap: 2rem; padding: 1.35rem 1.4rem; border: 1px solid var(--home-border); border-left: 3px solid var(--home-accent); border-radius: 1.1rem; background: linear-gradient(180deg, color-mix(in srgb, var(--home-accent) 2%, var(--home-surface)), var(--home-surface)); box-shadow: 0 10px 18px rgba(15, 23, 42, .04); }
.snapshot-year { color: var(--home-accent); font-size: .8rem; font-weight: 800; letter-spacing: .08em; }
.snapshot-list h3 { margin: 0; color: var(--home-text); font-family: var(--home-display); font-size: 1.1rem; }
.snapshot-org { margin: .35rem 0 0; color: var(--home-accent); font-size: .83rem; font-weight: 700; }
.snapshot-list article p:last-child { max-width: 720px; margin: .7rem 0 0; color: var(--home-copy); font-size: .88rem; line-height: 1.7; }
.home-text-link { display: inline-flex; gap: .5rem; margin-top: 1.5rem; color: var(--home-accent); font-size: .82rem; font-weight: 700; }
.interest-list { display: grid; grid-template-columns: repeat(4, max-content); gap: .6rem 1rem; margin-top: 1.4rem; }
.interest-list span { display: inline-flex; align-items: center; gap: .45rem; color: var(--home-copy); font-size: .82rem; }
.interest-list i { color: var(--home-accent); }
.home-cta { position: relative; overflow: hidden; padding: clamp(3.2rem, 7vw, 6rem) 0; background: var(--home-bg-soft); text-align: center; }
.home-cta .container { position: relative; z-index: 1; }
.home-cta .home-eyebrow { justify-content: center; }
.home-cta h2 { max-width: 720px; margin-inline: auto; }
.home-cta .container > p:not(.home-eyebrow) { max-width: 650px; margin: 1.2rem auto 0; color: var(--home-copy); line-height: 1.8; }
.home-cta .hero-actions { justify-content: center; }
.home-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--home-accent) 12%, transparent), transparent 50%); pointer-events: none; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr .75fr; gap: 2rem; }.strengths-grid { grid-template-columns: repeat(2, 1fr); }.intro-grid, .personal-grid { grid-template-columns: 1fr; gap: 1.2rem; } }
@media (max-width: 680px) { .home-page .container { width: min(100% - 2rem, 620px); }.home-hero { padding-top: 4.5rem; }.hero-grid { grid-template-columns: 1fr; }.hero-copy h1 { max-width: none; font-size: clamp(3.3rem, 16vw, 5.4rem); }.hero-portrait { min-height: 350px; }.portrait-shell { width: min(100%, 330px); padding: 1rem; border-width: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 12px rgba(134, 197, 224, .18); }.strengths-grid { grid-template-columns: 1fr; }.snapshot-list article { grid-template-columns: 1fr; gap: .45rem; }.interest-list { grid-template-columns: repeat(2, max-content); }.hero-actions { flex-direction: column; }.hero-actions a { width: 100%; }.home-cta .hero-actions { align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .strength-item, .home-primary-button, .home-secondary-button, .fade-section { transition: none; } }

/* Home section card system */
.home-hero-card { padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid var(--home-border-strong); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--home-surface) 82%, var(--home-bg)); box-shadow: var(--shadow-lg); }
.home-section-card { border-top: 0; background: var(--home-bg); }
.home-section-card > .container { padding: clamp(1.5rem, 4vw, 3.5rem); border: 1px solid var(--home-border); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--home-surface) 88%, var(--home-bg)); box-shadow: var(--shadow-md); }
.philosophy-card { max-width: 850px; margin-inline: auto; }
.philosophy-card > p:not(.home-eyebrow), .home-cta .container > p:not(.home-eyebrow) { color: var(--home-copy); line-height: 1.8; }
.philosophy-card > p:not(.home-eyebrow) { margin-top: 1rem; }
.interest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.interest-list span { display: grid; grid-template-columns: 1.2rem 1fr; gap: .15rem .55rem; }
.interest-list i { grid-row: span 2; padding-top: .2rem; }
.interest-list strong { color: var(--home-text); font-size: .86rem; }
.interest-list small { grid-column: 2; color: var(--home-muted); font-size: .76rem; line-height: 1.55; }
@media (max-width: 680px) { .home-hero-card { padding: 1.25rem; }.interest-list { grid-template-columns: 1fr; } }

/* Portrait interaction */
.portrait-shell { cursor: pointer; transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); animation: home-portrait-frame 8s ease-in-out infinite; }
.portrait-shell img { transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease; }
.portrait-shell:hover, .portrait-shell:focus, .portrait-shell:active { border-color: var(--color-accent); box-shadow: 0 0 0 12px color-mix(in srgb, var(--home-accent) 10%, transparent), var(--shadow-lg), 0 0 24px color-mix(in srgb, var(--home-accent) 22%, transparent); transform: translateY(-3px); }
.portrait-shell:hover img, .portrait-shell:focus img, .portrait-shell:active img, .portrait-shell.is-touching img, .portrait-shell.is-clicked img { opacity: .18; filter: saturate(.45); transform: scale(1.035); }
.portrait-ring { transform-origin: center; animation: home-portrait-ring 10s linear infinite; }
@keyframes home-portrait-frame { 0%, 100% { border-color: var(--home-border-strong); } 50% { border-color: color-mix(in srgb, var(--home-accent) 78%, var(--home-border-strong)); } }
@keyframes home-portrait-ring { 0%, 100% { transform: rotate(-1deg) scale(1); border-color: color-mix(in srgb, var(--home-accent) 38%, transparent); } 50% { transform: rotate(2deg) scale(1.018); border-color: color-mix(in srgb, var(--color-info) 58%, transparent); } }
@media (prefers-reduced-motion: reduce) { .portrait-shell, .portrait-ring, .portrait-shell img { animation: none; transition: none; } }

[data-theme="light"] .home-page,
[data-theme="light"] .home-page main,
[data-theme="light"] .home-hero,
[data-theme="light"] .home-section,
[data-theme="light"] .home-hero-card,
[data-theme="light"] .home-section-card > .container,
[data-theme="light"] .strength-item,
[data-theme="light"] .snapshot-list article,
[data-theme="light"] .home-cta,
[data-theme="light"] .home-cta::before {
  background: var(--gradient-background);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="light"] .home-hero-card,
[data-theme="light"] .home-section-card > .container,
[data-theme="light"] .strength-item,
[data-theme="light"] .snapshot-list article {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .home-primary-button,
[data-theme="light"] .home-secondary-button,
[data-theme="light"] .home-text-link {
  border-radius: var(--radius-md);
  box-shadow: none;
}

[data-theme="light"] .home-primary-button {
  background: var(--gradient-main);
  color: #ffffff;
  border-color: transparent;
}

[data-theme="light"] .home-secondary-button {
  background: var(--color-surface-solid);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

[data-theme="light"] .home-eyebrow,
[data-theme="light"] .interest-list i,
[data-theme="light"] .snapshot-year,
[data-theme="light"] .snapshot-org,
[data-theme="light"] .home-text-link {
  color: var(--color-accent);
}

[data-theme="light"] .strength-item p,
[data-theme="light"] .snapshot-list article p:last-child,
[data-theme="light"] .intro-grid > div > p,
[data-theme="light"] .personal-grid > div > p:not(.home-eyebrow),
[data-theme="light"] .snapshot-heading > p:not(.home-eyebrow),
[data-theme="light"] .home-cta .container > p:not(.home-eyebrow),
[data-theme="light"] .home-copy,
[data-theme="light"] .interest-list small {
  color: var(--color-text-secondary);
}

[data-theme="light"] .strength-item > span,
[data-theme="light"] .home-eyebrow,
[data-theme="light"] .snapshot-year {
  letter-spacing: .12em;
  text-transform: uppercase;
}