/* =========================================================
   CREDMEN — BRAND THEME LAYER
   ---------------------------------------------------------
   Each page template ships its own palette, and they had
   drifted: three navies (#062b55, #082B63, #031e3b), two
   blues (#1268dc, #1565E8) and three greys across seven
   pages. Every template reads its colours from custom
   properties on its own wrapper, so redefining those
   properties in one place retunes the whole site without
   touching a single page.
   Anchor colour is #021F41, sampled from the logo mark.
   Selectors are doubled so this wins over the inline page
   styles, which load after this file.
========================================================= */

:root {
    /* brand ramp, from the logo navy up to the action blue */
    --cm-navy-deep:   #021F41;
    --cm-navy:        #072F5C;
    --cm-navy-soft:   #0B3B75;
    --cm-blue:        #1565E8;
    --cm-blue-bright: #3D85FF;
    --cm-tint:        #EAF2FF;
    --cm-bg:          #F6F9FD;
    --cm-text:        #16324F;
    --cm-gray:        #5C6B7E;
    --cm-line:        #E1E9F3;

    /* one radius and shadow scale for the whole site */
    --cm-r-sm: 10px;
    --cm-r-md: 14px;
    --cm-r-lg: 20px;
    --cm-r-xl: 26px;
    --cm-shadow-sm: 0 2px 6px rgba(2, 31, 65, .05);
    --cm-shadow-md: 0 10px 30px rgba(2, 31, 65, .07);
    --cm-shadow-lg: 0 22px 55px rgba(2, 31, 65, .10);
}

/* ---- one palette, mapped onto each template's own names ---- */
.credmen-page.credmen-page {
    --navy:        var(--cm-navy);
    --dark:        var(--cm-navy-deep);
    --blue:        var(--cm-blue);
    --bright-blue: var(--cm-blue-bright);
    --light-blue:  var(--cm-tint);
    --text:        var(--cm-text);
    --gray:        var(--cm-gray);
    --light:       var(--cm-bg);
}

.cmcr-page.cmcr-page {
    --navy:       var(--cm-navy);
    --navy-dark:  var(--cm-navy-deep);
    --blue:       var(--cm-blue);
    --blue-light: var(--cm-blue-bright);
    --pale:       var(--cm-tint);
    --bg:         var(--cm-bg);
    --text:       var(--cm-text);
    --gray:       var(--cm-gray);
}

.cmipo-page.cmipo-page {
    --navy:   var(--cm-navy);
    --dark:   var(--cm-navy-deep);
    --blue:   var(--cm-blue);
    --bright: var(--cm-blue-bright);
    --light:  var(--cm-tint);
    --bg:     var(--cm-bg);
    --text:   var(--cm-text);
    --gray:   var(--cm-gray);
}

.cmind-page.cmind-page {
    --navy:       var(--cm-navy);
    --navy-dark:  var(--cm-navy-deep);
    --blue:       var(--cm-blue);
    --blue-light: var(--cm-blue-bright);
    --bg:         var(--cm-bg);
    --text:       var(--cm-text);
    --gray:       var(--cm-gray);
}

.cmmd-page.cmmd-page,
.cmct-page.cmct-page {
    --navy:      var(--cm-navy);
    --navy-dark: var(--cm-navy-deep);
    --blue:      var(--cm-blue);
    --light:     var(--cm-bg);
    --text:      var(--cm-text);
    --gray:      var(--cm-gray);
}

/* ---- typography -------------------------------------
   Inter is drawn tight; large sizes want negative tracking
   or headings read loose and amateur next to the logotype.
------------------------------------------------------ */
.credmen-page h1, .cmcr-page h1, .cmipo-page h1,
.cmind-page h1, .cmmd-page h1, .cmct-page h1 {
    letter-spacing: -.028em;
    line-height: 1.14;
}

.credmen-page h2, .cmcr-page h2, .cmipo-page h2,
.cmind-page h2, .cmmd-page h2, .cmct-page h2 {
    letter-spacing: -.022em;
    line-height: 1.22;
}

.credmen-page h3, .cmcr-page h3, .cmipo-page h3,
.cmind-page h3, .cmmd-page h3, .cmct-page h3 {
    letter-spacing: -.012em;
}

/* Small uppercase eyebrows carry the brand voice; give them
   consistent tracking and weight rather than six variants. */
.credmen-eyebrow, .cmcr-eyebrow, .cmipo-eyebrow,
.cmind-eyebrow, .cmmd-eyebrow, .cmct-eyebrow {
    letter-spacing: .14em;
    font-weight: 700;
}

/* ---- surfaces ---------------------------------------
   Softer, navy-tinted, layered shadows in place of the flat
   black ones, and a single radius scale.
------------------------------------------------------ */
.credmen-service, .cmcr-service, .cmcr-scale-card, .cmcr-agency-box,
.cmipo-why-card, .cmipo-process-card, .cmind-card, .cmind-success-card,
.cmmd-card, .cmct-info-card, .cmct-box, .cmct-director-card,
.credmen-leader, .credmen-stat-card, .cmlg-card {
    box-shadow: var(--cm-shadow-md);
}

.credmen-service:hover, .cmcr-service:hover, .cmind-card:hover,
.cmmd-card:hover, .cmct-info-card:hover, .credmen-leader:hover {
    box-shadow: var(--cm-shadow-lg);
}

/* ---- controls ---------------------------------------
   Buttons across the templates ranged from square to pill.
   Settle on a soft pill and one motion curve.
------------------------------------------------------ */
.credmen-submit, .cmct-submit, .cmcr-btn, .cmipo-btn,
.cmind-contact-btn, .cmmd-contact-btn, .cmct-contact-btn,
.credmen-contact-btn, .cmcr-contact-btn, .cmipo-contact-btn {
    border-radius: 50px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1),
                box-shadow .25s cubic-bezier(.2, .8, .2, 1),
                background-color .25s ease;
}

.cmct-field input, .cmct-field textarea,
.credmen-field input, .credmen-field select, .credmen-field textarea {
    border-radius: var(--cm-r-md);
    border-color: var(--cm-line);
}

/* ---- footer credit ---------------------------------- */
.cm-credit {
    margin-top: 10px;
    font-size: 13px;
    opacity: .8;
}

.cm-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
}

.cm-credit a:hover {
    opacity: 1;
    border-bottom-color: currentColor;
}

/* ---- native select ----------------------------------
   Moved out of the Customizer's Additional CSS, where it
   was mixed in with rules for a header that no longer
   exists. Kept here so it is versioned with everything
   else; radius follows the brand scale rather than the
   4px it used to hard-code.
------------------------------------------------------ */
.credmen-page .credmen-field select,
.cmct-page .cmct-field select {
    box-sizing: border-box;
    width: 100%;
    /* No fixed height or line-height: the page's own rule sets padding at the
       same specificity, and the two together were pushing the option text out
       of the box. Padding alone sizes it, and matches the text inputs. */
    padding: 16px 42px 16px 16px;
    border: 1px solid var(--cm-line, #E1E9F3);
    border-radius: var(--cm-r-md, 14px);
    background-color: #F8FBFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2316324F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 14px 14px;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ---- FAQ accordions ---------------------------------
   Four pages ship four variants of the same component
   with four class prefixes. Harmonised here: a calmer
   card, a real icon control instead of a bare "+" glyph,
   and a focus state, since these are now buttons.
------------------------------------------------------ */
.credmen-faq-item,
.cmcr-faq-item,
.cmipo-faq-item,
.cmct-item {
    background: #fff;
    border: 1px solid var(--cm-line, #E1E9F3);
    border-radius: var(--cm-r-lg, 20px);
    box-shadow: var(--cm-shadow-sm);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.credmen-faq-item:hover,
.cmcr-faq-item:hover,
.cmipo-faq-item:hover,
.cmct-item:hover {
    border-color: #C8DCF7;
    box-shadow: var(--cm-shadow-md);
}

.credmen-faq-item.active,
.cmcr-faq-item.active,
.cmcr-faq-item.open,
.cmipo-faq-item.active,
.cmipo-faq-item.open,
.cmct-item.active {
    border-color: var(--cm-blue, #1565E8);
    box-shadow: var(--cm-shadow-md);
}

.credmen-faq-question,
.cmcr-faq-question,
.cmipo-faq-question,
.cmct-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.45;
    color: var(--cm-navy, #072F5C);
    text-align: left;
    cursor: pointer;
}

/* the trailing "+" / "−" glyph becomes a round control */
/* The control is drawn, not typed.
   A "+" glyph is positioned on the font's math axis, not the centre of the em
   box, so no amount of flex or grid centring puts it on the circle's centre -
   and "+", "-" and "x" each sit differently. Two bars drawn with pseudo
   elements are centred by geometry, and the templates' own glyph text is
   hidden behind font-size:0. Rotating the shell 45deg turns the plus into a
   close mark, so every page shows the same open state. */
.credmen-faq-symbol,
.cmcr-faq-icon,
.cmipo-faq-icon,
.cmct-question > span:last-child {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cm-tint, #EAF2FF);
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    overflow: hidden;
    transition: background-color .25s ease,
                transform .3s cubic-bezier(.2, .8, .2, 1);
}

.credmen-faq-symbol::before,
.credmen-faq-symbol::after,
.cmcr-faq-icon::before,
.cmcr-faq-icon::after,
.cmipo-faq-icon::before,
.cmipo-faq-icon::after,
.cmct-question > span:last-child::before,
.cmct-question > span:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 2px;
    margin: -1px 0 0 -6.5px;
    border-radius: 2px;
    background: var(--cm-blue, #1565E8);
    transition: background-color .25s ease;
}

.credmen-faq-symbol::after,
.cmcr-faq-icon::after,
.cmipo-faq-icon::after,
.cmct-question > span:last-child::after {
    transform: rotate(90deg);
}

.credmen-faq-item.active .credmen-faq-symbol,
.cmcr-faq-item.active .cmcr-faq-icon,
.cmcr-faq-item.open .cmcr-faq-icon,
.cmipo-faq-item.active .cmipo-faq-icon,
.cmipo-faq-item.open .cmipo-faq-icon,
.cmct-item.active .cmct-question > span:last-child {
    background: var(--cm-blue, #1565E8);
    /* important: Credit Rating's own stylesheet also rotates this span, and
       two rotations cancel back to a plus. */
    transform: rotate(45deg) !important;
}

.credmen-faq-item.active .credmen-faq-symbol::before,
.credmen-faq-item.active .credmen-faq-symbol::after,
.cmcr-faq-item.active .cmcr-faq-icon::before,
.cmcr-faq-item.active .cmcr-faq-icon::after,
.cmcr-faq-item.open .cmcr-faq-icon::before,
.cmcr-faq-item.open .cmcr-faq-icon::after,
.cmipo-faq-item.active .cmipo-faq-icon::before,
.cmipo-faq-item.active .cmipo-faq-icon::after,
.cmipo-faq-item.open .cmipo-faq-icon::before,
.cmipo-faq-item.open .cmipo-faq-icon::after,
.cmct-item.active .cmct-question > span:last-child::before,
.cmct-item.active .cmct-question > span:last-child::after {
    background: #ffffff;
}

.credmen-faq-answer,
.cmcr-faq-answer,
.cmipo-faq-answer,
.cmct-answer {
    padding-inline: 26px;
}

.credmen-faq-answer,
.cmcr-faq-answer,
.cmipo-faq-answer,
.cmct-answer,
.cmct-answer p {
    color: var(--cm-gray, #5C6B7E);
    font-size: 15px;
    line-height: 1.8;
}

@media (max-width: 640px) {

    .credmen-faq-question,
    .cmcr-faq-question,
    .cmipo-faq-question,
    .cmct-question {
        padding: 18px 18px;
        font-size: 15.5px;
    }

    .credmen-faq-answer,
    .cmcr-faq-answer,
    .cmipo-faq-answer,
    .cmct-answer {
        padding-inline: 18px;
    }
}