/*
 * Crux Risk Intelligence — brand layer
 * Loaded after style.css. Holds the CCRA identity (logo lockups, palette,
 * button contrast) plus the few components the marketing content needs
 * that the base template doesn't ship.
 */

:root {
    --crux-navy: #002070;
    --crux-navy-dark: #001647;
    --crux-cyan: #00b0f0;
    --crux-cyan-dark: #0090cc;
    --crux-green: #007030;
    --crux-red: #e1251b;
    --crux-gray: #8a8f98;
    --crux-ink: #4c4c4c;
    --crux-mist: #f2f4f6;
}

/* ##### Logo lockups ##### */

.header-area .top-header-area {
    height: 92px;
    background-color: #ffffff;
    border-bottom: 1px solid #e7ebf0;
}

.header-area .top-header-area .logo a {
    display: block;
    line-height: 1;
}

.header-area .top-header-area .logo img {
    height: 54px;
    width: auto;
    display: block;
}

/* The footer sits on #021c3c, where the logo's own navy wordmark would vanish.
   Keep the identical full-colour logo used in the header and set it on a white
   plate, so the brand reads the same top and bottom. */
.footer-area .copywrite-area .footer-logo {
    display: inline-block;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 13px 20px;
    line-height: 0;
}

.footer-area .copywrite-area .footer-logo img {
    height: 40px;
    width: auto;
    display: block;
}

@media only screen and (max-width: 767px) {
    .header-area .top-header-area {
        height: 76px;
    }
    .header-area .top-header-area .logo img {
        height: 38px;
    }
    .footer-area .copywrite-area .footer-logo {
        padding: 10px 15px;
    }
    .footer-area .copywrite-area .footer-logo img {
        height: 32px;
    }
}

.header-area .top-header-area .top-contact-info a {
    color: var(--crux-ink);
}

.header-area .top-header-area .top-contact-info a:hover {
    color: var(--crux-cyan);
}

/* The template's top-bar icons are a white phone and a yellow envelope — both
   wrong against a white bar and the cyan accent, so use FontAwesome instead. */
.header-area .top-header-area .top-contact-info a i {
    color: var(--crux-cyan);
    font-size: 15px;
    margin-right: 9px;
}

/* Registered-entity block: legal name, CIN and address, wherever it appears. */
.entity-line {
    font-size: 13px;
    line-height: 1.8;
}

.footer-area .footer-disclaimer .entity-line {
    color: #aab2bc;
    margin-bottom: 14px;
}

.footer-area .footer-disclaimer .entity-line strong {
    color: #ffffff;
}

.footer-area .footer-disclaimer .entity-line a {
    color: var(--crux-cyan);
}

.single-contact-area .entity-line {
    color: var(--crux-gray);
}

.single-contact-area .entity-line strong {
    color: var(--crux-navy);
}

/* ##### Buttons — navy primary, cyan secondary ##### */

.credit-btn {
    background-color: var(--crux-navy);
    color: #ffffff;
    letter-spacing: 0.04em;
}

.credit-btn:hover,
.credit-btn:focus {
    background-color: var(--crux-cyan);
    color: var(--crux-navy);
}

.credit-btn.btn-2 {
    background-color: var(--crux-cyan);
    color: var(--crux-navy);
}

.credit-btn.btn-2:hover,
.credit-btn.btn-2:focus {
    background-color: #ffffff;
    color: var(--crux-navy);
}

.credit-btn.btn-3 {
    color: var(--crux-navy);
    border-color: var(--crux-navy);
}

/* Products dropdown. The template sizes dropdowns for one-word labels: a fixed
   180px panel whose rows are locked to height:35px / line-height:34px. Our
   product names run to two lines, so they overlapped each other. Give the panel
   room and let the rows grow with their content. */
.breakpoint-off .classynav ul li .dropdown {
    width: 306px;
    top: 100%;
    padding: 12px 0;
    border-top: 3px solid var(--crux-cyan);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 16px 38px rgba(0, 32, 112, 0.18);
}

/* The nav's own `text-transform: capitalize` turns "for" into "For", so these
   need the full selector chain to win. */
.header-area .credit-main-menu .classy-navbar .classynav ul li .dropdown li a {
    height: auto;
    min-height: 0;
    line-height: 1.55;
    padding: 14px 26px;
    white-space: normal;
    text-transform: none;
    font-size: 14px;
    font-weight: 600;
}

.classynav ul li .dropdown li a {
    border-bottom: 1px solid #eef1f5;
}

.header-area .credit-main-menu .classy-navbar .classynav ul li .dropdown li a:hover,
.header-area .credit-main-menu .classy-navbar .classynav ul li .dropdown li a:focus {
    color: var(--crux-cyan);
    background-color: #f6fafd;
}

/* Nav wedge: the "Talk to us" slot replaces the template's phone number */
.header-area .credit-main-menu .classy-navbar .contact a {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.header-area .credit-main-menu .classy-navbar .contact a:hover {
    color: #ffffff;
}

/* Split CTA band: navy reads better than the template's flat accent fill */
.cta-area .cta-content {
    background-color: var(--crux-navy);
}

/* ...which means buttons sitting on navy have to flip to cyan */
.cta-area .cta-content .credit-btn,
.cta-2-area .credit-btn,
.stat-strip .credit-btn {
    background-color: var(--crux-cyan);
    color: var(--crux-navy);
}

.cta-area .cta-content .credit-btn:hover,
.cta-2-area .credit-btn:hover,
.stat-strip .credit-btn:hover {
    background-color: #ffffff;
    color: var(--crux-navy);
}

/* ##### Stat strip ##### */

.stat-strip {
    background-color: var(--crux-navy);
    padding: 55px 0;
}

.stat-strip .single-stat {
    text-align: center;
    padding: 15px 10px;
}

.stat-strip .single-stat h3 {
    color: var(--crux-cyan);
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-strip .single-stat p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .stat-strip .single-stat h3 {
        font-size: 28px;
    }
}

/* ##### Checklist / cross-list ##### */

.brand-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.brand-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--crux-ink);
}

.brand-list li:last-child {
    margin-bottom: 0;
}

.brand-list li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'FontAwesome';
    font-size: 14px;
}

.brand-list.is-yes li::before {
    content: '\f00c';
    color: var(--crux-green);
}

.brand-list.is-no li::before {
    content: '\f00d';
    color: var(--crux-red);
}

.brand-list.is-dot li::before {
    content: '\f0da';
    color: var(--crux-cyan);
}

.brand-list li strong {
    color: var(--crux-navy);
    font-weight: 700;
}

.brand-list.on-dark li {
    color: rgba(255, 255, 255, 0.82);
}

.brand-list.on-dark li strong {
    color: #ffffff;
}

.brand-list.on-dark.is-dot li::before,
.brand-list.on-dark.is-yes li::before {
    color: var(--crux-cyan);
}

/* ##### Panel card (what we are / are not, focus areas, tech pillars) ##### */

.brand-panel {
    background-color: #ffffff;
    border: 1px solid #e7ebf0;
    border-top: 4px solid var(--crux-cyan);
    border-radius: 6px;
    padding: 40px 35px;
    transition-duration: 400ms;
}

/* Cards on the same grid line match heights, because the column is stretched by
   the row and the panel fills it. The spacing utility therefore has to live on
   the column — a bottom margin inside the stretched panel would be added on top
   of the stretched height and leave that much dead space in every card. */
[class*="col-"] > .brand-panel {
    height: 100%;
    margin-bottom: 0;
}

.brand-panel:hover {
    box-shadow: 0 15px 40px 0 rgba(0, 32, 112, 0.12);
}

.brand-panel.is-navy {
    border-top-color: var(--crux-navy);
}

.brand-panel.is-red {
    border-top-color: var(--crux-red);
}

.brand-panel h4 {
    color: var(--crux-navy);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.brand-panel .panel-index {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--crux-cyan);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.brand-panel p {
    font-size: 15px;
    line-height: 1.75;
}

.brand-panel .brand-list + p {
    margin-top: 22px;
}

@media only screen and (max-width: 767px) {
    .brand-panel {
        padding: 30px 25px;
    }
}

/* ##### Leadership card ##### */

.leader-card {
    background-color: #ffffff;
    border: 1px solid #e7ebf0;
    border-radius: 6px;
    padding: 45px 35px 40px;
    text-align: center;
    transition-duration: 400ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

[class*="col-"] > .leader-card {
    height: 100%;
    margin-bottom: 0;
}

.leader-card:hover {
    box-shadow: 0 18px 44px rgba(0, 32, 112, 0.13);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}

.leader-card .leader-avatar {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    margin: 0 auto 26px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-image: linear-gradient(135deg, #002070 0%, #0b3fa8 100%);
    color: #ffffff;
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 6px var(--crux-cyan);
}

.leader-card h4 {
    color: var(--crux-navy);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 7px;
}

.leader-card .leader-role {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crux-cyan);
    margin-bottom: 22px;
}

.leader-card .leader-rule {
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background-color: #e2e8f0;
    margin: 0 auto 22px;
}

.leader-card p {
    font-size: 14px;
    line-height: 1.85;
    color: var(--crux-ink);
    margin-bottom: 0;
}

.section-lead {
    font-size: 16px;
    line-height: 1.9;
    color: var(--crux-ink);
    margin-bottom: 0;
}

/* Pinned to the bottom so the company line stays aligned across cards whose
   bios run to different lengths. */
.leader-card .leader-org {
    display: block;
    margin-top: auto;
    padding-top: 22px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--crux-gray);
}

/* ##### Corporate information table ##### */

.corporate-info {
    background-color: #ffffff;
    border: 1px solid #e7ebf0;
    border-left: 4px solid var(--crux-navy);
    border-radius: 6px;
    padding: 15px 40px;
}

.corporate-info dl {
    margin-bottom: 0;
}

.corporate-info .info-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 20px 0;
    border-bottom: 1px solid #eef1f5;
}

.corporate-info .info-row:last-child {
    border-bottom: none;
}

.corporate-info dt {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 230px;
    flex: 0 0 230px;
    max-width: 230px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--crux-cyan);
    line-height: 1.9;
    margin-bottom: 0;
}

.corporate-info dd {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 260px;
    flex: 1 1 260px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--crux-navy);
    margin-bottom: 0;
}

.corporate-info dd a {
    color: var(--crux-navy);
    font-weight: 600;
}

.corporate-info dd a:hover {
    color: var(--crux-cyan);
}

@media only screen and (max-width: 767px) {
    .corporate-info {
        padding: 10px 25px;
    }
    .corporate-info dt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 4px;
    }
}

/* ##### Tagline pull-quote ##### */

.brand-pullquote {
    border-left: 4px solid var(--crux-cyan);
    padding: 5px 0 5px 25px;
    margin-top: 40px;
}

.brand-pullquote p {
    font-size: 18px;
    font-style: italic;
    color: var(--crux-navy);
    margin-bottom: 0;
    line-height: 1.7;
}

/* ##### Compliance / disclaimer bar ##### */

.disclaimer-bar {
    background-color: var(--crux-mist);
    padding: 35px 0;
    border-top: 3px solid var(--crux-cyan);
}

.disclaimer-bar p {
    font-size: 13px;
    line-height: 1.8;
    color: #6b7280;
    margin-bottom: 0;
}

.disclaimer-bar strong {
    color: var(--crux-navy);
}

.footer-area .footer-disclaimer {
    border-top: 1px solid #3c4450;
    padding: 30px 0 0;
}

.footer-area .footer-disclaimer p {
    color: #8b939d;
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 0;
}

/* ##### Misc content tweaks ##### */

.section-heading h2 {
    line-height: 1.3;
}

.single-service-area .icon i {
    color: var(--crux-cyan);
}

/* The template draws a "|" before the last meta link. With a single byline
   that link is also the first, so drop the separator and its offset. */
.news-meta a:only-child,
.blog-meta a:only-child {
    margin-left: 0;
}

.news-meta a:only-child::after,
.blog-meta a:only-child::after {
    content: none;
}

.welcome-text h6 {
    letter-spacing: 0.08em;
}

/* The template's 70px hero type was sized for three-word headlines. */
@media only screen and (min-width: 1200px) {
    .single-slide .welcome-text h2 {
        font-size: 52px;
    }
}

/* Contact page: the advisor card is accent-filled, so its text has to be navy. */
.contact-advisor h5,
.contact-advisor .brand-list li,
.contact-advisor .brand-list li strong {
    color: var(--crux-navy);
}

.contact-advisor .brand-list li::before {
    color: #ffffff;
}

.hero-area .welcome-text .hero-tags {
    margin-top: 25px;
    margin-bottom: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.hero-area .welcome-text .btn + .btn {
    margin-left: 15px;
}

@media only screen and (max-width: 575px) {
    .hero-area .welcome-text .btn + .btn {
        margin-left: 0;
        margin-top: 15px;
    }
}