:root { color-scheme: dark; --navy:#07111f; --navy-soft:#11233a; --gold:#d7ae72; --cream:#f5efe4; --muted:#b9c3cf; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--cream); background: radial-gradient(circle at 85% 5%, #253956 0, transparent 34%), linear-gradient(135deg,#07111f,#0b1b30 60%,#07111f); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
.skip-link { position: absolute; left: -9999px; top: 1rem; z-index: 3; padding: .8rem 1rem; color: var(--navy); background: #fff; }
.skip-link:focus { left: 1rem; }
.card-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: min(1220px,100%); margin: 0 auto; padding: 1.25rem clamp(1.25rem,4vw,2.5rem); }
.brand img { display: block; width: clamp(145px,16vw,180px); height: auto; border-radius: 8px; background: #fff; padding: 8px; }
.back-link { color: var(--muted); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.back-link:hover, .under-card a:hover, .contact-details a:hover { color: var(--gold); }
main { width: min(1220px,100%); margin: 0 auto; padding: clamp(1.8rem,5vw,4rem) clamp(1.25rem,4vw,2.5rem) 4rem; }
.page-intro { max-width: 800px; margin-bottom: clamp(2rem,5vw,3.5rem); }
.eyebrow { margin: 0 0 .9rem; color: var(--gold); font-size: .82rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.page-intro h1 { max-width: 760px; margin: 0; font: 500 clamp(2.6rem,5.4vw,5.2rem)/1.02 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; }
.page-intro > p:last-child { margin: 1.1rem 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.5; }
.business-card { display: grid; grid-template-columns: minmax(290px,.8fr) minmax(0,1.2fr); min-height: 600px; overflow: hidden; border: 1px solid rgba(215,174,114,.38); border-radius: 28px; background: linear-gradient(145deg,#12233a,#07111f); box-shadow: 0 28px 80px rgba(0,0,0,.32); }
.portrait-panel { position: relative; display: flex; align-items: end; justify-content: center; min-height: 600px; padding: 2.3rem 2.3rem 0; overflow: hidden; background: radial-gradient(circle at 50% 34%,#334e6d,#14263f 55%,#081523); }
.portrait-panel::before { content: ''; position: absolute; inset: 1.5rem; border: 1px solid rgba(215,174,114,.28); border-radius: 220px 220px 18px 18px; pointer-events: none; }
.portrait-frame { width: min(100%,405px); height: 100%; min-height: 550px; overflow: hidden; }
.portrait-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.portrait-caption { position: absolute; bottom: 1.4rem; left: 1.6rem; color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 800; letter-spacing: .22em; }
.portrait-initials { display: grid; place-items: center; width: min(70%,330px); height: min(70%,330px); margin: auto auto 7rem; border: 1px solid rgba(215,174,114,.55); border-radius: 50%; color: var(--gold); font: 500 clamp(4rem,10vw,7rem)/1 Georgia, serif; letter-spacing: -.08em; }
.team-card .card-details h2 { white-space: normal; overflow-wrap: anywhere; }
.card-details { position: relative; display: flex; flex-direction: column; padding: 2cm clamp(2rem,4vw,3.5rem) clamp(2rem,4vw,3.5rem); min-width: 0; }
.card-topline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.card-qr { position: absolute; top: .5cm; right: .5cm; display: block; width: 128px; height: 128px; padding: 0; border: 1.5px solid var(--gold); border-radius: 0; background: transparent; }
.card-qr img { display: block; width: 100%; height: 100%; }
.card-details h2 { max-width: calc(100% - 145px); margin: 0 0 .5rem; font: 500 clamp(2rem,3.5vw,4.1rem)/.98 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; white-space: nowrap; }
.card-details h2 span { color: var(--gold); }
.role { margin: .35rem 0 0; font-size: 1rem; font-weight: 700; }
.summary { max-width: 560px; margin: 1.2rem 0 0; color: var(--muted); font-size: 1.03rem; line-height: 1.55; }
.card-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2.1rem 0 2.5rem; }
.save-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 50px; padding: .8rem 1.25rem; border-radius: 999px; text-decoration: none; font-size: .95rem; font-weight: 800; }
.save-button { color: var(--navy); background: var(--gold); }
.save-button:hover { background: #e9c695; }
.outline-button { border: 1px solid rgba(255,255,255,.4); }
.outline-button:hover { border-color: var(--gold); color: var(--gold); }
.contact-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.4rem 2rem; margin: auto 0 0; }
.contact-details div { min-width: 0; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.16); }
.contact-details dt { margin-bottom: .35rem; color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.contact-details dd { margin: 0; color: var(--cream); font-size: .93rem; line-height: 1.5; overflow-wrap: anywhere; }
.contact-details a { text-decoration: none; }
.under-card { margin: 2rem 0 0; color: var(--muted); font-size: .98rem; line-height: 1.6; text-align: center; }
.under-card a { color: var(--cream); text-underline-offset: .25em; }
footer { padding: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); color: var(--muted); font-size: .8rem; text-align: center; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
@media (max-width: 850px) { .business-card { grid-template-columns: 1fr; } .portrait-panel { min-height: 360px; max-height: 400px; } .portrait-frame { min-height: 0; height: 400px; width: min(100%,330px); } .contact-details { margin-top: 0; } }
@media (max-width: 540px) { .card-header { padding-top: 1rem; } .brand img { width: 145px; } .back-link { font-size: .78rem; } main { padding-top: 1.5rem; } .page-intro h1 { font-size: clamp(2.3rem,10vw,3.5rem); } .business-card { border-radius: 20px; } .portrait-panel { min-height: 300px; max-height: 320px; padding: 1rem 2rem 0; } .portrait-frame { height: 320px; } .portrait-panel::before { inset: 1rem; } .card-details { padding: 142px 1.6rem 1.6rem; } .card-topline { font-size: .63rem; } .card-qr { width: 108px; height: 108px; padding: 0; } .card-details h2 { max-width: 100%; font-size: clamp(1.8rem,8vw,2.7rem); } .contact-details { grid-template-columns: 1fr; gap: .9rem; } .card-actions { margin-bottom: 1.8rem; } .save-button, .outline-button { flex: 1 1 130px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }