@charset "UTF-8";

:root {
    --navy-950: #040B19;
    --navy-900: #07162D;
    --navy-800: #0C2547;
    --blue: #284893;
    --red: #EE2737;
    --red-deep: #CB1828;
    --white: #F8FAFC;
    --mist: #D7E0EC;
    --muted: #8EA1BC;
    --line: rgba(210, 225, 246, .14);
    --surface: rgba(11, 32, 61, .78);
    --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--navy-950); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--white);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(850px 570px at -8% -10%, rgba(40, 72, 147, .56), transparent 65%),
        radial-gradient(620px 500px at 109% 6%, rgba(238, 39, 55, .17), transparent 64%),
        linear-gradient(145deg, #091A35 0%, #040B19 52%, #071326 100%);
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.page-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 32px 20px;
}

.profile-card {
    position: relative;
    isolation: isolate;
    width: min(100%, 480px);
    overflow: hidden;
    border: 1px solid rgba(194, 215, 244, .16);
    border-radius: 28px;
    background:
        linear-gradient(145deg, rgba(18, 48, 88, .90), rgba(6, 20, 42, .94) 42%, rgba(5, 15, 31, .98));
    box-shadow: 0 34px 86px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.profile-card::before,
.profile-card::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
}

.profile-card::before {
    inset: 0;
    opacity: .48;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, black, transparent 68%);
}

.profile-card::after {
    top: -120px;
    right: -116px;
    width: 290px;
    height: 290px;
    border: 1px solid rgba(238, 39, 55, .28);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(238, 39, 55, .035), 0 0 0 69px rgba(238, 39, 55, .022);
}

.brand-header,
.identity,
.section,
.location-panel,
.save-contact,
.profile-footer { margin-right: 30px; margin-left: 30px; }

.brand-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-top: 28px;
}

.brand-lockup { display: flex; align-items: center; min-width: 0; gap: 14px; }

.brand-logo {
    display: block;
    flex: 0 0 auto;
    width: 70px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
}

.brand-copy { min-width: 0; }

.brand-name,
.brand-tagline,
.eyebrow,
.position,
.company-line,
.section-heading p,
.location-panel p,
.profile-footer { margin: 0; }

.brand-name {
    color: var(--white);
    font-size: 16px;
    font-weight: 780;
    letter-spacing: .23em;
    line-height: 1;
}

.brand-tagline {
    max-width: 205px;
    margin-top: 7px;
    color: #B7C6DA;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .078em;
    line-height: 1.38;
    text-transform: uppercase;
}

.status-mark {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #C5D1E1;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
}

.status-mark i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 4px rgba(238, 39, 55, .12);
}

.identity { padding-top: 52px; text-align: left; }

.eyebrow {
    color: #9EB2CC;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .205em;
}

.identity h1 {
    max-width: 390px;
    margin: 11px 0 0;
    color: var(--white);
    font-size: clamp(31px, 8.8vw, 43px);
    font-weight: 760;
    letter-spacing: -.05em;
    line-height: .99;
}

.position {
    margin-top: 17px;
    color: #FF7B86;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    line-height: 1.3;
    text-transform: uppercase;
}

.company-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 13px;
    color: #C3D0E0;
    font-size: 12px;
    font-weight: 520;
}

.company-line svg { width: 15px; height: 15px; fill: none; stroke: var(--red); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.accent-rule {
    position: relative;
    height: 1px;
    margin: 34px 30px 0;
    background: var(--line);
}

.accent-rule span {
    position: absolute;
    top: -1px;
    left: 0;
    width: 74px;
    height: 3px;
    background: var(--red);
    box-shadow: 18px 0 28px rgba(238, 39, 55, .42);
}

.section { margin-top: 29px; }

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
}

.section-heading p,
.location-panel p {
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .18em;
}

.section-heading span {
    color: rgba(193, 209, 230, .42);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .12em;
}

.contact-list { margin-top: 11px; }

.contact-row {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
    padding: 14px 0;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: transform .22s ease, background-color .22s ease;
}

.contact-row:active { transform: scale(.985); }

.icon-wrap {
    display: grid;
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    place-items: center;
    border: 1px solid rgba(185, 207, 237, .17);
    border-radius: 11px;
    background: rgba(83, 119, 172, .10);
}

.icon-wrap svg,
.row-arrow,
.map-link svg,
.save-contact svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.icon-wrap svg { width: 17px; height: 17px; color: #C8D7E9; }

.contact-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.contact-copy small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .15em;
}

.contact-copy strong {
    overflow: hidden;
    color: #F2F6FC;
    font-size: 13px;
    font-weight: 510;
    letter-spacing: -.012em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contact-copy em {
    color: #B8C9DD;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}

.row-arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: #7289A7;
    transition: transform .22s ease, color .22s ease;
}

.location-panel {
    position: relative;
    overflow: hidden;
    margin-top: 28px;
    padding: 20px;
    border: 1px solid rgba(190, 212, 240, .15);
    border-radius: 18px;
    background: linear-gradient(125deg, rgba(39, 70, 124, .35), rgba(10, 29, 56, .54));
}

.location-panel::after {
    position: absolute;
    right: -45px;
    bottom: -63px;
    width: 152px;
    height: 152px;
    content: "";
    border: 1px solid rgba(238, 39, 55, .21);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(238, 39, 55, .03);
}

.location-top { display: flex; gap: 13px; }

.icon-wrap-red {
    width: 38px;
    height: 38px;
    border-color: rgba(238, 39, 55, .36);
    background: rgba(238, 39, 55, .11);
}

.icon-wrap-red svg { color: #FF6571; }

.location-panel p { color: #B3C4D8; }

.location-panel address {
    margin-top: 7px;
    color: #F0F5FA;
    font-size: 12px;
    font-style: normal;
    font-weight: 470;
    letter-spacing: .005em;
    line-height: 1.6;
}

.map-link {
    display: inline-flex;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: #FF7A84;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: .145em;
    text-decoration: none;
}

.map-link svg { width: 14px; height: 14px; }

.save-contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    margin-top: 28px;
    padding: 0 19px;
    overflow: hidden;
    color: white;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: .115em;
    text-decoration: none;
    border: 1px solid rgba(255, 126, 136, .44);
    border-radius: 14px;
    background: linear-gradient(115deg, #F13241, #D71D2E);
    box-shadow: 0 14px 30px rgba(163, 10, 30, .28), inset 0 1px 0 rgba(255,255,255,.20);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.save-contact span { display: inline-flex; align-items: center; gap: 10px; }

.save-contact svg { width: 18px; height: 18px; }

.cta-arrow { width: 17px !important; height: 17px !important; }

.profile-footer {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 25px 0 27px;
    color: #889CB6;
    font-size: 8px;
    font-weight: 680;
    letter-spacing: .09em;
    line-height: 1.45;
}

.profile-footer span:last-child { text-align: right; }

@media (hover: hover) {
    .contact-row:hover { transform: translateX(4px); }
    .contact-row:hover .row-arrow { color: #FF7A84; transform: translateX(3px); }
    .save-contact:hover { filter: brightness(1.06); box-shadow: 0 18px 38px rgba(163, 10, 30, .42), inset 0 1px 0 rgba(255,255,255,.23); transform: translateY(-2px); }
}

@media (max-width: 430px) {
    .page-shell { padding: 0; }
    .profile-card { width: 100%; min-height: 100vh; border-width: 0; border-radius: 0; }
    .brand-header, .identity, .section, .location-panel, .save-contact, .profile-footer { margin-right: 23px; margin-left: 23px; }
    .accent-rule { margin-right: 23px; margin-left: 23px; }
    .brand-header { padding-top: calc(25px + env(safe-area-inset-top)); }
    .profile-footer { padding-bottom: calc(25px + env(safe-area-inset-bottom)); }
    .contact-copy strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}