/* =========================================================
   Dolphin Trade Pro — inner page components
   Loaded AFTER main.css and style.css on every page.
   Every selector below is new (.page-hero, .cred__*, .advisor__*,
   .footer__*, ...) so the original home page and template styles
   are left untouched.

   Later, when advisor portraits are available, no CSS change is
   needed: replace <div class="advisor__monogram"> with
   <img src="..."> inside .advisor__photo.
   ========================================================= */

/* ---------------------------------------------------------
   0. Anchor landing
   Deep links such as security.html#credentials, platform.html#faq
   or legal.html#risk must not land underneath the header that
   main.js pins to the top of the window once the page is scrolled.
   --------------------------------------------------------- */
[id] {
    scroll-margin-top: 110px;
}

/* ---------------------------------------------------------
   1. Inner page hero
   --------------------------------------------------------- */
.page-hero {
    position: relative;
    z-index: 1;
    padding: 245px 0 120px;
    background-size: cover;
    background-position: center;
    text-align: center;
    overflow: hidden;
}

.page-hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -35%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(204, 255, 0, 0.07) 0%, rgba(2, 22, 47, 0) 68%);
    z-index: -1;
    pointer-events: none;
}

.page-hero__title {
    font-size: 48px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--tg-color-white-default);
    margin: 22px 0 0;
}

.page-hero__desc {
    max-width: 840px;
    margin: 22px auto 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--tg-body-font-color);
}

.page-hero__meta {
    margin-top: 26px;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
}

.page-hero__crumb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 16px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tg-body-font-color);
}

.page-hero__crumb li {
    position: relative;
    margin: 0;
}

.page-hero__crumb li:not(:last-child)::after {
    content: "/";
    position: absolute;
    right: -11px;
    color: var(--tg-primary-color);
}

.page-hero__crumb a {
    color: #b9b9b9;
}

.page-hero__crumb a:hover {
    color: var(--tg-primary-color);
}

.page-hero--compact {
    padding: 215px 0 90px;
}

/* ---------------------------------------------------------
   2. Generic content helpers
   --------------------------------------------------------- */
.section-head {
    max-width: 860px;
    margin: 0 auto 60px;
    text-align: center;
}

.lead-text {
    font-size: 18px;
    line-height: 1.75;
    color: #c9c9c9;
}

.content-block p {
    margin-bottom: 18px;
}

.content-block > *:last-child {
    margin-bottom: 0;
}

.mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.mini-stats .mini-stat {
    min-width: 130px;
}

.mini-stats .mini-stat h3 {
    font-size: 34px;
    line-height: 1;
    color: var(--tg-primary-color);
    margin-bottom: 6px;
}

.mini-stats .mini-stat p {
    margin: 0;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   3. Note / disclosure boxes
   --------------------------------------------------------- */
.note-box {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-border-1);
    border-left: 3px solid var(--tg-primary-color);
    border-radius: 12px;
    padding: 26px 30px;
    margin-bottom: 26px;
}

.note-box:last-child {
    margin-bottom: 0;
}

.note-box--green {
    border-left-color: #CCFF00;
}

.note-box--alert {
    border-left-color: #ff6b6b;
}

.note-box .note-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: var(--tg-color-white-default);
    margin-bottom: 12px;
}

.note-box .note-title i {
    color: var(--tg-primary-color);
}

.note-box p {
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.75;
}

.note-box p:last-child {
    margin-bottom: 0;
}

.disclosure__box {
    background: rgba(204, 255, 0, 0.04);
    border: 1px dashed rgba(204, 255, 0, 0.35);
    border-radius: 14px;
    padding: 30px 32px;
}

.disclosure__box .title {
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #CCFF00;
    margin-bottom: 16px;
}

.disclosure__box p {
    font-size: 14px;
    line-height: 1.8;
    color: #9c9c9c;
    margin-bottom: 12px;
}

.disclosure__box p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   4. Credential grid
   --------------------------------------------------------- */
.cred__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cred__card {
    height: 100%;
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 14px;
    padding: 28px 26px;
    transition: all 0.35s ease;
}

.cred__card:hover {
    border-color: rgba(204, 255, 0, 0.55);
    transform: translateY(-4px);
}

.cred__icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(204, 255, 0, 0.12);
    color: #CCFF00;
    font-size: 18px;
    margin-bottom: 18px;
}

.cred__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
    margin-bottom: 10px;
}

.cred__value {
    font-size: 20px;
    line-height: 1.35;
    color: var(--tg-color-white-default);
    margin-bottom: 10px;
}

.cred__meta {
    font-size: 14px;
    line-height: 1.7;
    color: #8f8f8f;
    margin: 0;
}

.cred__meta a {
    color: #CCFF00;
}

.cred__meta a:hover {
    color: var(--tg-primary-color);
}

/* ---------------------------------------------------------
   5. Roles table (stacked into cards on small screens)
   --------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--tg-border-1);
    border-radius: 14px;
}

.roles-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

.roles-table th,
.roles-table td {
    padding: 18px 22px;
    text-align: left;
    vertical-align: top;
    font-size: 15px;
    line-height: 1.65;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.roles-table th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--tg-color-white-default);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.roles-table td strong {
    display: block;
    color: var(--tg-color-white-default);
    margin-bottom: 4px;
}

.roles-table tr:last-child td {
    border-bottom: none;
}

/* ---------------------------------------------------------
   6. Advisor cards (no photo version — see markup: the photo
   slot is .advisor__photo, ready for an <img> later)
   --------------------------------------------------------- */
.advisor__card {
    height: 100%;
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
    padding: 34px 32px;
    transition: border-color 0.35s ease, transform 0.35s ease;
}

.advisor__card:hover {
    border-color: rgba(204, 255, 0, 0.5);
    transform: translateY(-4px);
}

.advisor__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.advisor__monogram {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 204, 102, 0.18), rgba(204, 255, 0, 0.18));
    border: 1px solid rgba(204, 255, 0, 0.45);
    color: #CCFF00;
    font-size: 20px;
    font-weight: var(--tg-fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Use this instead of .advisor__monogram once a portrait exists */
.advisor__photo {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(204, 255, 0, 0.45);
}

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

.advisor__name {
    font-size: 24px;
    line-height: 1.25;
    color: var(--tg-color-white-default);
    margin: 0 0 8px;
}

.advisor__role {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #CCFF00;
    line-height: 1.5;
}

.advisor__body p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 16px;
}

.advisor__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.advisor__tags li {
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--tg-border-1);
    border-radius: 30px;
    font-size: 12.5px;
    letter-spacing: 0.04em;
    color: #b9b9b9;
}

/* ---------------------------------------------------------
   7. Engagement scope list (numbered)
   --------------------------------------------------------- */
.engage__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: engage;
}

.engage__list > li {
    position: relative;
    padding: 0 0 26px 58px;
    margin: 0;
    counter-increment: engage;
}

.engage__list > li:last-child {
    padding-bottom: 0;
}

.engage__list > li::before {
    content: counter(engage);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(204, 255, 0, 0.4);
    color: #CCFF00;
    font-size: 15px;
    font-weight: var(--tg-fw-semi-bold);
}

.engage__list > li h4 {
    font-size: 18px;
    color: var(--tg-color-white-default);
    margin-bottom: 8px;
}

.engage__list > li p {
    margin: 0;
    font-size: 15px;
    line-height: 1.75;
}

/* ---------------------------------------------------------
   8. Newsroom cards
   --------------------------------------------------------- */
.news__card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
    padding: 32px 30px;
    transition: border-color 0.35s ease, transform 0.35s ease;
}

.news__card:hover {
    border-color: rgba(204, 255, 0, 0.5);
    transform: translateY(-4px);
}

.news__card--featured {
    background: linear-gradient(150deg, rgba(204, 255, 0, 0.07), rgba(25, 26, 27, 1) 55%);
}

.news__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
}

.news__badge {
    padding: 5px 12px;
    border-radius: 30px;
    background: rgba(204, 255, 0, 0.14);
    color: #CCFF00;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.news__title {
    font-size: 22px;
    line-height: 1.4;
    color: var(--tg-color-white-default);
    margin-bottom: 14px;
}

.news__title a {
    color: inherit;
}

.news__title a:hover {
    color: var(--tg-primary-color);
}

.news__excerpt {
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 22px;
}

.news__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: var(--tg-fw-semi-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #CCFF00;
}

.news__link:hover {
    color: var(--tg-primary-color);
}

/* ---------------------------------------------------------
   9. Contact cards
   --------------------------------------------------------- */
.contact__card {
    height: 100%;
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
    padding: 32px 30px;
    transition: border-color 0.35s ease, transform 0.35s ease;
}

.contact__card:hover {
    border-color: rgba(204, 255, 0, 0.5);
    transform: translateY(-4px);
}

.contact__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 204, 102, 0.12);
    color: var(--tg-primary-color);
    font-size: 20px;
    margin-bottom: 20px;
}

.contact__label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
    margin-bottom: 10px;
}

.contact__value {
    display: inline-block;
    font-size: 16.5px;
    line-height: 1.4;
    color: var(--tg-color-white-default);
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

.contact__value:hover {
    color: #CCFF00;
}

.contact__text {
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0;
}

/* ---------------------------------------------------------
   10. Badge row (partner / regulator marks)
   --------------------------------------------------------- */
.badge__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.badge__row li {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border: 1px solid var(--tg-border-1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #c2c2c2;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Each mark links to the page that explains it. The link is stretched over
   the whole tile, so the padding and the badge logo are clickable too. */
.badge__row li .badge__link {
    display: flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.badge__row li .badge__link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.badge__row li:hover,
.badge__row li:focus-within {
    border-color: rgba(204, 255, 0, 0.55);
    background: rgba(204, 255, 0, 0.06);
}

.badge__row li .badge__link:focus-visible {
    outline: 2px solid #CCFF00;
    outline-offset: 6px;
    border-radius: 10px;
}

.badge__row li img {
    height: 26px;
    width: auto;
}

.badge__row li .badge__text strong {
    display: block;
    color: var(--tg-color-white-default);
    font-size: 13.5px;
    letter-spacing: 0.04em;
}

.badge__row li .badge__text span {
    font-size: 11.5px;
    color: var(--tg-primary-color);
}

/* ---------------------------------------------------------
   11. In-page CTA band
   --------------------------------------------------------- */
.cta__band {
    position: relative;
    background: linear-gradient(120deg, rgba(204, 255, 0, 0.09), rgba(25, 26, 27, 0.9) 60%);
    border: 1px solid var(--tg-border-1);
    border-radius: 18px;
    padding: 56px 50px;
    text-align: center;
    overflow: hidden;
}

.cta__band .title {
    font-size: 36px;
    line-height: 1.25;
    color: var(--tg-color-white-default);
    margin-bottom: 18px;
}

.cta__band p {
    max-width: 760px;
    margin: 0 auto 30px;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

/* ---------------------------------------------------------
   12. Site footer (sitemap + disclosures)
   --------------------------------------------------------- */
.footer__area .footer__top {
    padding: 100px 0 70px;
}

.footer__nav-wrap {
    padding: 0 0 50px;
    border-top: 1px solid var(--tg-border-1);
    padding-top: 60px;
}

.footer__brand p {
    font-size: 15px;
    line-height: 1.8;
    margin: 22px 0;
}

.footer__contact-line {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__contact-line li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.6;
}

.footer__contact-line li i {
    color: var(--tg-primary-color);
    margin-top: 4px;
}

.footer__contact-line li a {
    color: var(--tg-color-white-default);
    word-break: break-word;
}

.footer__contact-line li a:hover {
    color: #CCFF00;
}

.footer__contact-line li span {
    display: block;
    font-size: 12.5px;
    color: #7f7f7f;
}

.footer__col h5 {
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tg-color-white-default);
    margin-bottom: 22px;
}

.footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__col ul li {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.6;
}

.footer__col ul li a {
    color: #9c9c9c;
}

.footer__col ul li a:hover {
    color: var(--tg-primary-color);
}

.footer__disclosure {
    padding: 34px 0;
    border-top: 1px solid var(--tg-border-1);
}

.footer__disclosure p {
    font-size: 12.5px;
    line-height: 1.85;
    color: #7f7f7f;
    margin-bottom: 12px;
}

.footer__disclosure p:last-child {
    margin-bottom: 0;
}

.footer__disclosure strong {
    color: #b9b9b9;
}

.footer__disclosure a {
    color: #a8a8a8;
    text-decoration: underline;
}

.footer__disclosure a:hover {
    color: var(--tg-primary-color);
}

/* ---------------------------------------------------------
   13. Simple contact form
   --------------------------------------------------------- */
.form-box {
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
    padding: 36px 32px;
}

.form-box .form-group {
    margin-bottom: 20px;
}

.form-box label {
    display: block;
    font-size: 12.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
    margin-bottom: 10px;
}

.form-box input,
.form-box textarea,
.form-box select {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tg-border-1);
    border-radius: 10px;
    padding: 15px 18px;
    color: var(--tg-color-white-default);
    font-size: 15px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-box input:focus,
.form-box textarea:focus,
.form-box select:focus {
    border-color: rgba(204, 255, 0, 0.6);
}

.form-box textarea {
    min-height: 150px;
    resize: vertical;
}

.form-box input::placeholder,
.form-box textarea::placeholder {
    color: #6f6f6f;
}

.form-box .tg-btn {
    width: 100%;
    justify-content: center;
}

.form-note {
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #7f7f7f;
}

.ajax-response {
    margin-top: 16px;
    font-size: 14.5px;
}

.ajax-response.success {
    color: #CCFF00;
}

.ajax-response.error {
    color: #ff6b6b;
}

/* ---------------------------------------------------------
   14. Responsive
   --------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .page-hero {
        padding: 205px 0 100px;
    }

    .page-hero__title {
        font-size: 42px;
    }

    .cred__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .page-hero {
        padding: 175px 0 90px;
    }

    .page-hero__title {
        font-size: 36px;
    }

    .cta__band {
        padding: 46px 34px;
    }

    .cta__band .title {
        font-size: 30px;
    }

    .footer__brand {
        margin-bottom: 46px;
    }
}

@media (max-width: 767.98px) {
    .page-hero {
        padding: 160px 0 80px;
    }

    .page-hero__title {
        font-size: 30px;
    }

    .page-hero__desc {
        font-size: 16px;
    }

    .cred__grid {
        grid-template-columns: 1fr;
    }

    /* Stack the roles table into readable cards */
    .roles-table {
        min-width: 0;
    }

    .roles-table thead {
        display: none;
    }

    .roles-table,
    .roles-table tbody,
    .roles-table tr,
    .roles-table td {
        display: block;
        width: 100%;
    }

    .roles-table tr {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .roles-table td {
        border: none;
        padding: 10px 20px;
    }

    .roles-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--tg-primary-color);
        margin-bottom: 6px;
    }

    .note-box,
    .disclosure__box {
        padding: 24px 22px;
    }

    .advisor__card {
        padding: 28px 24px;
    }

    .advisor__head {
        gap: 16px;
    }

    .advisor__name {
        font-size: 20px;
    }

    .cta__band {
        padding: 38px 22px;
    }

    .cta__band .title {
        font-size: 25px;
    }

    .badge__row li {
        padding: 12px 16px;
        font-size: 12px;
    }

    .form-box {
        padding: 28px 22px;
    }
}

@media (max-width: 480px) {
    .page-hero__title {
        font-size: 26px;
    }

    .advisor__monogram,
    .advisor__photo {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
        font-size: 17px;
    }

    .mini-stats {
        gap: 20px;
    }

    .cta__actions .tg-btn,
    .cta__actions .tg-btn-two {
        width: 100%;
        justify-content: center;
    }

    .news__title {
        font-size: 19px;
    }

    .footer__contact-line li {
        font-size: 13.5px;
    }
}

/* ---------------------------------------------------------
   15. Print (advisory engagement summary, disclosures)
   --------------------------------------------------------- */
@media print {

    .tg-header__area,
    .scroll__top,
    .footer__area,
    .tgmobile__menu,
    .page-hero__crumb,
    .tg-btn,
    .tg-btn-two {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #1a1a1a;
    }

    .page-hero {
        padding: 0 0 20px;
    }

    .page-hero__title,
    .advisor__name,
    .news__title,
    .cta__band .title {
        color: #111111;
    }

    .advisor__card,
    .note-box,
    .disclosure__box,
    .cred__card {
        background: #ffffff;
        border: 1px solid #cccccc;
    }
}

/* ---------------------------------------------------------
   MSB registration certificate. The former PDF <embed> was replaced by an
   image: the embedded PDF viewer could hold back the window load event, and
   it cannot be zoomed on mobile browsers either.
   --------------------------------------------------------- */
.certificate-display {
    margin: 0;
    padding: 14px;
    background: #191A1B;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
}

.certificate-display a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.certificate-display img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 640px;
    object-fit: contain;
    background: #ffffff;
    transition: transform 0.35s ease;
}

.certificate-display a:hover img {
    transform: scale(1.015);
}

.certificate-caption {
    margin: 12px 2px 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #8f8f8f;
}

/* ---------------------------------------------------------
   16. Contact form: the native dropdown was unreadable
   The <select> carried a near-white text colour on a nearly
   transparent background. That is fine for the closed control, but the
   browser paints the option list on its own popup surface - white by
   default - so every choice came out white on white. Three things fix
   it: an opaque background on the control, color-scheme: dark so the UA
   draws the popup in dark mode, and explicit option colours for engines
   that ignore color-scheme in popups.
   --------------------------------------------------------- */
.form-box input,
.form-box textarea,
.form-box select {
    color-scheme: dark;
}

.form-box select {
    /* opaque, but visually identical to the 3% white over the #191A1B card */
    background-color: #1d1e1f;
}

.form-box select option {
    background-color: #191a1b;
    color: #f2f2f2;
}

.form-box select option:checked,
.form-box select option:hover {
    background-color: #2b2f1c;
    color: #ffffff;
}

/* ---------------------------------------------------------
   17. Header row: keep the "Open an Account" button inside the pill
   The template centres a menu whose links carry 25px horizontal padding
   each. With seven menu items plus the CTA the row no longer fitted, so
   .tgmenu__nav wrapped and the button was pushed onto a second line at
   the left edge, under the logo, leaving the right half of the pill
   empty. These rules tighten the row (1280px+ shows logo, menu and CTA
   on one 68px line) and keep the CTA on the right instead of letting it
   wrap on narrower desktops.
   --------------------------------------------------------- */
@media (min-width: 992px) {
    .tgmenu__navbar-wrap > ul > li > a {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tgmenu__action > ul li.header-btn {
        margin-left: 18px;
    }

    .tgmenu__action > ul li.header-btn .tg-btn {
        padding: 13px 20px;
    }
}

/* 992-1199.98px: the seven menu items and the CTA cannot share one line,
   so the menu wraps inside its own column while the CTA stays on the
   right. Without this the whole action block dropped to a second row. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .tgmenu__nav {
        flex-wrap: nowrap;
    }

    .tgmenu__navbar-wrap {
        min-width: 0;
    }

    .tgmenu__navbar-wrap > ul {
        justify-content: center;
    }

    .tgmenu__navbar-wrap > ul > li > a {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* ---------------------------------------------------------
   18. Press-release / article typography
   Used by press-release.html. The article re-uses the existing
   .cred__card, .note-box, .advisor__card and .contact__card
   components; only the prose block itself is new here.
   --------------------------------------------------------- */
.article {
    text-align: left;
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 34px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.article__tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(204, 255, 0, 0.12);
    border: 1px solid rgba(204, 255, 0, 0.4);
    color: var(--tg-primary-color);
    font-weight: var(--tg-fw-semi-bold);
    letter-spacing: 0.1em;
}

.article__body {
    font-size: 17px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
}

.article__body > p {
    margin-bottom: 22px;
}

.article__body > p:last-child {
    margin-bottom: 0;
}

.article__body h3 {
    font-size: 27px;
    line-height: 1.3;
    color: var(--tg-color-white-default);
    margin: 46px 0 20px;
}

.article__body h3:first-child {
    margin-top: 0;
}

.article__body a {
    color: var(--tg-primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.article__body strong {
    color: var(--tg-color-white-default);
}

.article__dateline {
    padding: 22px 26px;
    border-left: 3px solid var(--tg-primary-color);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0 12px 12px 0;
}

.article__list {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.article__list > li {
    position: relative;
    padding: 0 0 16px 30px;
}

.article__list > li:last-child {
    padding-bottom: 0;
}

.article__list > li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tg-primary-color);
}

/* Numbered variant of the same list (advisory mandates) */
.article__list--numbered {
    counter-reset: article-item;
}

.article__list--numbered > li {
    padding-left: 42px;
    counter-increment: article-item;
}

.article__list--numbered > li::before {
    content: counter(article-item);
    left: 0;
    top: 2px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(204, 255, 0, 0.4);
    color: var(--tg-primary-color);
    font-size: 12px;
    font-weight: var(--tg-fw-semi-bold);
}
/* ---------------------------------------------------------
   Formal correspondence block (appointment letter)
   --------------------------------------------------------- */
.letter {
    position: relative;
    padding: 40px 46px 34px;
    border: 1px solid var(--tg-border-1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.letter__head {
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 26px;
}

.letter__firm {
    font-size: 24px;
    line-height: 1.3;
    color: var(--tg-color-white-default);
    margin-bottom: 8px;
}

.letter__address,
.letter__date {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

.letter__date {
    margin-top: 10px;
    color: var(--tg-primary-color);
    font-weight: var(--tg-fw-semi-bold);
    letter-spacing: 0.04em;
}

.letter__body {
    font-size: 16px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.78);
}

.letter__body > p {
    margin-bottom: 18px;
}

.letter__line {
    padding: 0 0 0 16px;
    border-left: 2px solid rgba(204, 255, 0, 0.4);
}

.letter__body strong {
    color: var(--tg-color-white-default);
}

.letter__body a {
    color: var(--tg-primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.letter__body .article__list {
    margin-bottom: 24px;
}

.letter__sign {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, 0.85);
}

.letter__sign em {
    display: inline-block;
    margin-bottom: 4px;
    color: var(--tg-primary-color);
    font-style: normal;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 12px;
}

.letter__note {
    margin: 26px 0 0;
    padding-top: 20px;
    border-top: 1px dashed rgba(255, 255, 255, 0.15);
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.5);
}

.letter__note a {
    color: var(--tg-primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 767.98px) {
    .letter {
        padding: 30px 24px 26px;
    }

    .letter__firm {
        font-size: 20px;
    }

    .letter__body {
        font-size: 15px;
        line-height: 1.8;
    }
}



.article__quote {
    margin: 0 0 8px;
    padding: 30px 32px 26px;
    background: rgba(204, 255, 0, 0.05);
    border: 1px dashed rgba(204, 255, 0, 0.35);
    border-radius: 16px;
}

.article__quote p {
    margin: 0 0 18px;
    font-size: 20px;
    line-height: 1.7;
    color: var(--tg-color-white-default);
}

.article__quote cite {
    display: block;
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tg-primary-color);
}

.article__ends {
    margin: 34px 0 0 !important;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.article__body .note-box {
    margin: 0 0 24px;
}

.article__body .note-box > p:last-child {
    margin-bottom: 0;
}

.article__body .note-box > a {
    word-break: break-word;
}

@media (max-width: 991.98px) {
    .article__body {
        font-size: 16px;
        line-height: 1.8;
    }

    .article__body h3 {
        font-size: 23px;
        margin: 36px 0 16px;
    }

    .article__quote {
        padding: 24px 22px 20px;
    }

    .article__quote p {
        font-size: 18px;
    }

    .article__dateline {
        padding: 18px 20px;
    }
}

@media (max-width: 575.98px) {
    .article__meta {
        gap: 8px 12px;
        font-size: 11px;
    }

    .article__body h3 {
        font-size: 21px;
    }

    .article__quote p {
        font-size: 17px;
    }

    .article__list > li {
        padding-left: 26px;
    }

    .article__list--numbered > li {
        padding-left: 36px;
    }
}