/*-----------------------------------------------------------
    EMREC Consulting Limited — site-specific additions
    Layered on top of the Corpox template stylesheet.
    Only classes prefixed with .emrec- are defined here so the
    template's own styles stay untouched.
------------------------------------------------------------*/

/* Bulleted lists used inside the "How We Work" function cards */
.emrec-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.emrec-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-body);
}

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

.emrec-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Equal-height cards in the function and sector grids */
.emrec-function-card,
.emrec-sector-card {
    height: 100%;
}

/* "Key partners" line at the foot of each priority-sector card */
.emrec-partners {
    display: block;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-body);
}

.emrec-partners strong {
    color: var(--color-heading);
    font-weight: 600;
}

/* TikTok glyph — the icon font used by the template has no TikTok icon */
.emrec-tiktok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.emrec-tiktok svg {
    width: 17px;
    height: 17px;
    display: block;
}

/* Contact lines in the footer widget. The theme only sizes `a` inside
   .footer-link, so the non-link rows would otherwise render larger than the
   email link; this puts every row on the same type. */
.emrec-contact-list li {
    margin-bottom: 10px;
}

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

.footer-style-default .footer-top .tmp-footer-widget .emrec-contact-list li a,
.footer-style-default .footer-top .tmp-footer-widget .emrec-contact-list li span {
    display: block;
    font-size: 14px;
    line-height: 25px;
    color: var(--color-body);
    text-transform: none;
}

/* True dark overlays.
   The template flips [data-black-overlay] to a WHITE wash in light mode
   (.active-light-mode [data-black-overlay]:before { background-color:#fff }),
   so sections that need a dark scrim opt back in with this marker class. */
.emrec-dark-overlay[data-black-overlay]:before,
.active-light-mode .emrec-dark-overlay[data-black-overlay]:before {
    background-color: #000000;
}

/* ---------------------------------------------------------------
   National Alignment (Vision 2050) band
   Photographic background under a black scrim. The stat cards reuse the
   template's own service__style--1 chrome so they match How We Work and
   Priority Sectors; only the figure size and the small label above it are
   added here. Section text is pinned to white — the template's
   --color-white flips to near-black in light mode.
------------------------------------------------------------------ */
.emrec-vision-area .tmp-section-title-border .title,
.active-light-mode .emrec-vision-area .tmp-section-title-border .title {
    color: #ffffff;
}

.emrec-vision-copy,
.active-light-mode .emrec-vision-copy {
    color: rgba(255, 255, 255, 0.72);
    font-size: 16px;
    line-height: 30px;
}

.emrec-vision-area .pres-line-separator-wrapper .subtitle .subtitle-text,
.emrec-vision-area .pres-line-separator-wrapper .subtitle .number,
.active-light-mode .emrec-vision-area .pres-line-separator-wrapper .subtitle .subtitle-text,
.active-light-mode .emrec-vision-area .pres-line-separator-wrapper .subtitle .number {
    color: var(--color-primary);
}

.emrec-vision-area .line-separator {
    background: rgba(255, 255, 255, 0.3);
}

/* Stat cards — template card chrome, figure-sized title */
.emrec-vision-card {
    height: 100%;
}

.emrec-vision-card__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-primary);
}

.emrec-vision-card .content .title {
    margin-bottom: 12px;
    font-size: 40px;
    line-height: 1.1;
}

@media only screen and (max-width: 1199px) {
    .emrec-vision-card .content .title {
        font-size: 32px;
    }
}

/* Email and web addresses in the footer must keep their real casing —
   the template capitalises every footer link. */
.footer-style-default .footer-top .tmp-footer-widget .emrec-contact-list li a,
.footer-style-default .footer-top .tmp-footer-widget .emrec-contact-list li span {
    text-transform: none;
}

/* The get-in-touch card's corner ribbon reads "Call Us" in the template;
   EMREC's published contact point is email, so relabel it. */
.tmp-get-in-touch-area .section-inner::after {
    content: "Contact Us";
}

/* Larger wordmark in the navbar. The theme caps the logo at 140px wide /
   45px tall, which leaves the EMREC mark small against an 80px header. */
.header-default .logo a img,
.popup-mobile-menu .inner .header-top .logo a img,
.inverweb-side-bar-close .logo-side a img {
    max-width: 200px;
    max-height: 58px;
}

@media only screen and (max-width: 575px) {
    .header-default .logo a img,
    .popup-mobile-menu .inner .header-top .logo a img {
        max-width: 165px;
    }
}

/* Footer tagline sits with the contact lines, so it shares their type rather
   than the theme's larger 16px/28px widget subtitle. */
.footer-style-default .footer-top .tmp-footer-widget .subtitle {
    font-size: 14px;
    line-height: 25px;
    padding-right: 0;
    margin-bottom: 24px;
}

/* No underline on the footer email — .link-hover draws an animated 2px rule
   under every anchor it wraps. */
.emrec-contact-list a,
.emrec-contact-list a:hover {
    text-decoration: none;
}

.emrec-contact-list a::after {
    display: none;
}

/* Links to pages that have not been built yet. The href is parked in
   data-href so the anchor is completely inert — no navigation, no focus stop —
   while keeping its normal appearance for review. To re-enable a page, rename
   data-href back to href and drop this class. */
.emrec-disabled {
    cursor: pointer;
}


/*===========================================================
    EMREC 2026 redesign — additions
    Everything below supports the restructured homepage, the
    new inner pages, the enquiry forms and the org chart.
============================================================*/

:root {
    --emrec-navy: #0b2239;
    --emrec-navy-soft: #14314e;
    --emrec-ink: #41474d;
    --emrec-hair: rgba(11, 34, 57, .12);
    --emrec-surface: #ffffff;
    --emrec-surface-alt: #f5f7fa;
}

/* --------------------------------------------------------
   Brand lock-up in the header: logo plus a prominent EMREC
   wordmark and the full company name beneath it.
----------------------------------------------------------*/
.emrec-brand a {
    display: flex;
    align-items: center;
}

/* The brief asks for a prominent logo and a clearly legible EMREC name. The
   wordmark lives inside the SVG, so the mark itself is enlarged rather than
   repeating the company name as HTML beside it. */
.header-default .logo a img,
.popup-mobile-menu .inner .header-top .logo a img,
.inverweb-side-bar-close .logo-side a img {
    max-width: 200px;
    max-height: 52px;
}

/* --------------------------------------------------------
   Navbar fit.
   Seven menu items plus the button group are wider than the
   header row, and the theme lets .header-right wrap — which
   dropped the buttons onto a second line and made the header
   131px tall. Keep it on one row and budget the width.
----------------------------------------------------------*/
.header-right {
    flex-wrap: nowrap;
}

/* The theme sets the menu in 16px/500; 15px/400 reads lighter and more
   corporate without losing legibility on the photographic header. The mobile
   popup keeps the theme's 16px — shrinking it would hurt tap targets. */
.mainmenu-nav .mainmenu > li > a,
.mainmenu-nav .mainmenu li.has-droupdown .submenu li a,
.popup-mobile-menu .mainmenu li a {
    font-weight: 400;
}

.mainmenu-nav .mainmenu > li > a {
    font-size: 15px;
}

.mainmenu-nav .mainmenu li.has-droupdown .submenu li a {
    font-size: 14px;
}

.mainmenu-nav .mainmenu > li > a {
    white-space: nowrap;
}

/* The theme's 30px button gap is more than this header needs. */
.header-right.with-search .header-btn {
    gap: 20px;
}

/* Between 1200 and 1399 the container is 1140px, so the menu has to give
   back a little padding for the row to hold. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .mainmenu-nav .mainmenu > li > a { padding: 0 14px; }
    .header-default .logo a img { max-width: 180px; }
}

@media only screen and (max-width: 1199px) {
    .header-default .logo a img { max-width: 185px; }
}

@media only screen and (max-width: 575px) {
    .header-default .logo a img,
    .popup-mobile-menu .inner .header-top .logo a img {
        max-width: 160px;
    }
}

/* --------------------------------------------------------
   Section headings — the brief asks for larger, clearly
   visible section titles such as "Our Services".
----------------------------------------------------------*/
.emrec-section-heading {
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

@media only screen and (max-width: 1199px) { .emrec-section-heading { font-size: 42px; } }
@media only screen and (max-width: 767px)  { .emrec-section-heading { font-size: 34px; } }

.emrec-lead-copy {
    font-size: 18px;
    line-height: 32px;
}

/* --------------------------------------------------------
   Hero
----------------------------------------------------------*/
.emrec-hero {
    min-height: 720px;
    align-items: center;
}

@media only screen and (max-width: 767px) { .emrec-hero { min-height: 620px; } }

.slider-style-2 .inner .title.emrec-hero__title,
.emrec-hero__title {
    font-size: 58px;
    line-height: 1.1;
    font-weight: 700;
    color: #ffffff;
}

.active-light-mode .emrec-hero__title { color: #ffffff; }

@media only screen and (max-width: 1199px) {
    .slider-style-2 .inner .title.emrec-hero__title { font-size: 46px; }
}
@media only screen and (max-width: 767px) {
    .slider-style-2 .inner .title.emrec-hero__title { font-size: 34px; }
}

.slider-style-2.variation-2 .inner p.emrec-hero__lead,
.emrec-hero__lead,
.active-light-mode .emrec-hero__lead {
    padding-right: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    line-height: 32px;
}

.emrec-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Outline buttons sitting on a photograph. The theme's border button
   inherits body colour, which is near-black in light mode. */
.tmp-btn.btn-border.emrec-btn-onphoto,
.active-light-mode .tmp-btn.btn-border.emrec-btn-onphoto {
    color: #ffffff;
    border-color: rgba(255, 255, 255, .55);
}

.tmp-btn.btn-border.emrec-btn-onphoto:hover,
.active-light-mode .tmp-btn.btn-border.emrec-btn-onphoto:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, .14);
    border-color: #ffffff;
}

/* --------------------------------------------------------
   Service / value cards
----------------------------------------------------------*/
.emrec-service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.emrec-service-card .content { display: flex; flex-direction: column; flex: 1; }

.emrec-service-card .title a { color: inherit; }
.emrec-service-card .title a:hover { color: var(--color-primary); }

.emrec-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--color-primary);
}

.emrec-more-link i { transition: transform .25s ease; }
.emrec-more-link:hover { color: var(--color-primary); }
.emrec-more-link:hover i { transform: translateX(4px); }

/* --------------------------------------------------------
   Call-to-action band (Partner With Us)
----------------------------------------------------------*/
.emrec-cta-band .tmp-section-title-border .title,
.active-light-mode .emrec-cta-band .tmp-section-title-border .title {
    color: #ffffff;
}

.emrec-cta-band__lead,
.active-light-mode .emrec-cta-band__lead {
    color: rgba(255, 255, 255, .74);
}

.emrec-cta-band .pres-line-separator-wrapper .subtitle .subtitle-text,
.emrec-cta-band .pres-line-separator-wrapper .subtitle .number {
    color: var(--color-primary);
}

.emrec-cta-band .line-separator { background: rgba(255, 255, 255, .3); }

.emrec-cta-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 36px 32px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    transition: transform .3s ease, background .3s ease, border-color .3s ease;
}

.emrec-cta-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .34);
}

.emrec-cta-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 22px;
}

.emrec-cta-card__title {
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

.emrec-cta-card__copy {
    display: block;
    margin-bottom: 22px;
    font-size: 15px;
    line-height: 27px;
    color: rgba(255, 255, 255, .72);
}

.emrec-cta-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.emrec-cta-card:hover .emrec-cta-card__action i { transform: translateX(4px); }
.emrec-cta-card__action i { transition: transform .25s ease; }

/* --------------------------------------------------------
   Organisational chart
----------------------------------------------------------*/
.emrec-org { display: flex; flex-direction: column; align-items: center; }

.emrec-org__tier { width: 100%; display: flex; justify-content: center; }

.emrec-org__connector {
    width: 2px;
    height: 34px;
    background: linear-gradient(180deg, var(--color-primary), var(--emrec-hair));
}

.emrec-org__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    width: 100%;
    margin-top: 4px;
}

.emrec-org__node {
    display: flex;
    flex-direction: column;
    padding: 26px 26px 22px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
    box-shadow: var(--shadow-1);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.emrec-org__node:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
}

.emrec-org__node--board,
.emrec-org__node--exec {
    width: min(560px, 100%);
    text-align: left;
    border-top: 4px solid var(--color-primary);
}

.emrec-org__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 10px;
    background: rgba(177, 151, 119, .14);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 19px;
}

.emrec-org__name {
    display: block;
    margin-bottom: 8px;
    font-size: 19px;
    font-weight: 700;
    color: var(--color-heading);
}

.emrec-org__short {
    display: block;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-body);
}

.emrec-org__cue {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.emrec-org__node:hover .emrec-org__cue i { transform: translateX(4px); }
.emrec-org__cue i { transition: transform .25s ease; }

/* --------------------------------------------------------
   Contact cards
----------------------------------------------------------*/
.emrec-contact-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 34px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
    box-shadow: var(--shadow-1);
}

.emrec-contact-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: rgba(177, 151, 119, .14);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 24px;
}

.emrec-contact-card__icon--wa {
    background: rgba(37, 211, 102, .12);
    color: #1faa54;
}

.emrec-contact-card__title {
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-heading);
}

.emrec-contact-card__copy {
    margin-bottom: 16px;
    font-size: 15px;
    line-height: 27px;
    color: var(--color-body);
}

.emrec-contact-card__value {
    display: block;
    margin-top: auto;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
    word-break: break-word;
}

a.emrec-contact-card__value:hover { color: var(--color-primary); }

.emrec-btn-wa,
.emrec-btn-wa:hover {
    background: #1faa54;
    border-color: #1faa54;
    color: #ffffff;
}

/* --------------------------------------------------------
   Floating WhatsApp button
----------------------------------------------------------*/
.emrec-whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 15px;
    border-radius: 40px;
    background: #1faa54;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 26px rgba(31, 170, 84, .35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.emrec-whatsapp-float:hover {
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(31, 170, 84, .45);
}

.emrec-whatsapp-float__icon { display: inline-flex; }
.emrec-whatsapp-float__icon svg { width: 24px; height: 24px; }

@media only screen and (max-width: 767px) {
    .emrec-whatsapp-float { right: 16px; bottom: 16px; padding: 14px; }
    .emrec-whatsapp-float__label { display: none; }
}

/* --------------------------------------------------------
   Inner page header
----------------------------------------------------------*/
.emrec-page-header {
    position: relative;
    padding: 190px 0 90px;
    background-size: cover;
    background-position: center;
}

@media only screen and (max-width: 767px) { .emrec-page-header { padding: 150px 0 60px; } }

.emrec-crumbs {
    margin-bottom: 18px;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
}

.emrec-crumbs a,
.active-light-mode .emrec-crumbs a { color: rgba(255, 255, 255, .7); }
.emrec-crumbs a:hover { color: #ffffff; }
.emrec-crumbs span { margin: 0 8px; }
.emrec-crumbs .current { color: #ffffff; margin: 0; }

.emrec-page-header__title,
.active-light-mode .emrec-page-header__title {
    margin-bottom: 16px;
    font-size: 54px;
    line-height: 1.15;
    font-weight: 700;
    color: #ffffff;
}

@media only screen and (max-width: 1199px) { .emrec-page-header__title { font-size: 42px; } }
@media only screen and (max-width: 767px)  { .emrec-page-header__title { font-size: 32px; } }

.emrec-page-header__lead,
.active-light-mode .emrec-page-header__lead {
    max-width: 760px;
    margin-bottom: 0;
    font-size: 17px;
    line-height: 30px;
    color: rgba(255, 255, 255, .78);
}

/* --------------------------------------------------------
   Article blocks on detail pages
----------------------------------------------------------*/
.emrec-article__heading {
    position: relative;
    margin-bottom: 20px;
    padding-bottom: 14px;
    font-size: 30px;
    font-weight: 700;
    color: var(--color-heading);
}

.emrec-article__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--color-primary);
}

.emrec-article__copy {
    margin-bottom: 0;
    font-size: 17px;
    line-height: 31px;
    color: var(--color-body);
}

.emrec-tick {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
    font-size: 15px;
    line-height: 25px;
    color: var(--color-body);
    height: 100%;
}

.emrec-tick i {
    flex: 0 0 auto;
    margin-top: 4px;
    color: var(--color-primary);
}

/* --------------------------------------------------------
   Panels, chips, steps, inline CTA
----------------------------------------------------------*/
.emrec-panel {
    padding: 40px 36px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
    box-shadow: var(--shadow-1);
}

.emrec-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 12px;
    background: rgba(177, 151, 119, .14);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 22px;
}

.emrec-panel__title {
    margin-bottom: 14px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-heading);
}

.emrec-panel__copy {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 29px;
    color: var(--color-body);
}

.emrec-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.emrec-chip-grid--static { justify-content: flex-start; }

.emrec-chip {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border-radius: 30px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

a.emrec-chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.emrec-chip--static { font-weight: 500; color: var(--color-body); }

.emrec-step {
    height: 100%;
    padding: 34px 30px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
}

.emrec-step__num {
    display: block;
    margin-bottom: 14px;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
}

.emrec-step__title { margin-bottom: 10px; font-size: 20px; font-weight: 700; color: var(--color-heading); }
.emrec-step__copy  { margin-bottom: 0; font-size: 15px; line-height: 26px; color: var(--color-body); }

.emrec-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 40px 42px;
    border-radius: 12px;
    background: var(--emrec-surface-alt);
    border: 1px solid var(--emrec-hair);
}

.emrec-inline-cta__title { margin-bottom: 8px; font-size: 26px; font-weight: 700; color: var(--color-heading); }
.emrec-inline-cta__copy  { margin-bottom: 0; font-size: 16px; line-height: 27px; color: var(--color-body); }

/* --------------------------------------------------------
   Detail page sidebar
----------------------------------------------------------*/
.emrec-sidebar { position: sticky; top: 110px; }

.emrec-sidebar__block {
    padding: 30px 28px;
    margin-bottom: 26px;
    border-radius: 12px;
    background: var(--color-card);
    border: 1px solid var(--emrec-hair);
}

.emrec-sidebar__block--contact { background: var(--emrec-surface-alt); }
.emrec-sidebar__block p { font-size: 15px; line-height: 26px; color: var(--color-body); }

.emrec-sidebar__title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--emrec-hair);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-heading);
}

.emrec-sidebar__list { list-style: none; padding: 0; margin: 0; }

.emrec-sidebar__list li { margin-bottom: 10px; }
.emrec-sidebar__list li:last-child { margin-bottom: 0; }

.emrec-sidebar__list a {
    font-size: 15px;
    line-height: 24px;
    color: var(--color-body);
}

.emrec-sidebar__list a:hover { color: var(--color-primary); }
.emrec-sidebar__list li.is-current a { color: var(--color-primary); font-weight: 600; }

.emrec-sidebar__related,
.emrec-mini-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--emrec-hair);
}

.emrec-sidebar__related:last-child { border-bottom: 0; padding-bottom: 0; }

.emrec-mini-card {
    height: 100%;
    padding: 22px;
    border: 1px solid var(--emrec-hair);
    border-radius: 10px;
    background: var(--color-card);
    transition: border-color .25s ease, transform .25s ease;
}

.emrec-mini-card:hover { border-color: var(--color-primary); transform: translateY(-3px); }

.emrec-sidebar__related-icon,
.emrec-mini-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(177, 151, 119, .14);
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 17px;
}

.emrec-sidebar__related strong,
.emrec-mini-card strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
}

.emrec-sidebar__related em,
.emrec-mini-card em {
    display: block;
    font-style: normal;
    font-size: 13px;
    line-height: 22px;
    color: var(--color-body);
}

.emrec-sidebar__contact { list-style: none; padding: 0; margin: 0 0 20px; }
.emrec-sidebar__contact li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.emrec-sidebar__contact i { color: var(--color-primary); }
.emrec-sidebar__contact a { color: var(--color-body); word-break: break-word; }
.emrec-sidebar__contact a:hover { color: var(--color-primary); }

.emrec-ordered { padding-left: 20px; margin: 0; }
.emrec-ordered li { margin-bottom: 10px; font-size: 15px; line-height: 25px; color: var(--color-body); }

/* --------------------------------------------------------
   Forms
----------------------------------------------------------*/
.emrec-form__hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.emrec-form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
}

.emrec-form__label span { color: #e5484d; }

.emrec-form__input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 8px;
    background: var(--color-card);
    /* Stronger than --emrec-hair: a form field has to read as an input, not
       as a panel edge. */
    border: 1px solid rgba(11, 34, 57, .22);
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 24px;
    color: var(--color-heading);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.emrec-form__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(177, 151, 119, .25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.emrec-form__input.is-invalid { border-color: #e5484d; }

textarea.emrec-form__input { resize: vertical; min-height: 150px; }

select.emrec-form__input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2341474d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 46px;
}

.emrec-form__error { display: block; margin-top: 7px; font-size: 13px; color: #e5484d; }

.emrec-form__note { margin-bottom: 20px; font-size: 14px; line-height: 24px; color: var(--color-body); }
.emrec-form__note span { color: #e5484d; }

.emrec-alert {
    padding: 18px 22px;
    margin-bottom: 28px;
    border-radius: 8px;
    font-size: 15px;
    line-height: 25px;
}

.emrec-alert--error {
    background: rgba(229, 72, 77, .08);
    border: 1px solid rgba(229, 72, 77, .3);
    color: #b3282c;
}

.emrec-alert ul { margin: 8px 0 0; padding-left: 20px; }

/* --------------------------------------------------------
   Thank-you page
----------------------------------------------------------*/
.emrec-thanks { padding-top: 200px; }

@media only screen and (max-width: 767px) { .emrec-thanks { padding-top: 150px; } }

.emrec-thanks__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 30px;
    border-radius: 50%;
    background: rgba(31, 170, 84, .12);
    color: #1faa54;
    font-size: 38px;
}

.emrec-thanks__title { margin-bottom: 20px; font-size: 40px; line-height: 1.25; font-weight: 700; color: var(--color-heading); }

@media only screen and (max-width: 767px) { .emrec-thanks__title { font-size: 28px; } }

.emrec-thanks__copy { margin-bottom: 14px; font-size: 17px; line-height: 30px; color: var(--color-body); }
.emrec-thanks__ref  { margin-bottom: 34px; font-size: 15px; color: var(--color-body); }

.emrec-thanks__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------
   Footer additions
----------------------------------------------------------*/
.emrec-footer-about {
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 25px;
    color: var(--color-body);
}