/* Contact page.
   One centred column on the light gradient canvas: the heading, then one
   glass card per way of reaching us (email, live chat, hours and office
   side by side, helpful pages), the registration banner, and the reviews.
   Plus Jakarta Sans for headings and buttons, Inter for the text. The
   markup keeps its existing contact classes so every word stays as it is. */

/* Tokens */

.contactShell {
    --ct-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ct-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --ct-ink: #0b1220;
    --ct-ink-2: #253247;
    --ct-ink-3: #3f4d66;

    --ct-line: rgba(30, 58, 138, 0.1);
    --ct-line-strong: #cbd6e8;

    --ct-blue: #2563eb;
    --ct-blue-deep: #1d4ed8;
    --ct-blue-ink: #1e3a8a;
    --ct-blue-soft: #e8f0ff;
    --ct-blue-tint: #f4f7ff;

    --ct-green: #059669;
    --ct-green-soft: #ecfdf5;

    --ct-radius-card: 26px;
    --ct-radius-lg: 18px;
    --ct-radius-md: 14px;

    --ct-glass: rgba(255, 255, 255, 0.78);
    --ct-shadow-card:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 28px 60px -34px rgba(30, 58, 138, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --ct-ring: 0 0 0 4px rgba(37, 99, 235, 0.16);
    --ct-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Everything grows with this factor on wide screens: two gentle steps,
       then the page stops growing and the extra width becomes margin. */
    --ct-scale: 1;
}

@media (min-width: 1600px) {
    .contactShell { --ct-scale: 1.08; }
}

@media (min-width: 1800px) {
    .contactShell { --ct-scale: 1.16; }
}

/* Canvas */

.contactShell {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--ct-font-body);
    color: var(--ct-ink);
    font-size: calc(17px * var(--ct-scale));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(640px 360px at 50% 0%, rgba(147, 197, 253, 0.5), rgba(147, 197, 253, 0) 100%),
        radial-gradient(900px 560px at 10% 2%, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0) 100%),
        radial-gradient(760px 520px at 92% 8%, rgba(167, 139, 250, 0.24), rgba(167, 139, 250, 0) 100%),
        radial-gradient(700px 480px at 50% 100%, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0) 100%),
        linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
}

.contactShell,
.contactShell * {
    box-sizing: border-box;
}

.contactShell * {
    font-family: inherit;
}

.contactAmbient {
    position: relative;
    padding: calc(56px * var(--ct-scale)) 16px calc(72px * var(--ct-scale));
    background: none;
}

.contactAmbient::before,
.contactAmbient::after {
    display: none;
}

/* Heading */

.secondaryBannerContact {
    margin: 0 0 calc(44px * var(--ct-scale));
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
}

.contactHero__inner {
    max-width: calc(720px * var(--ct-scale));
    margin: 0 auto;
    padding: 0;
}

.contactHero__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 15px 8px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px var(--ct-line), 0 10px 24px -18px rgba(30, 58, 138, 0.6);
    color: var(--ct-blue-deep);
    font-size: calc(13.5px * var(--ct-scale));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.contactHero__badgeDot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ct-green);
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
    animation: none;
}

.contactShell .secondaryBannerTitle {
    font-family: var(--ct-font-display);
    font-size: clamp(30px, 5.4vw, calc(40px * var(--ct-scale)));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--ct-ink);
    margin: calc(24px * var(--ct-scale)) 0 0;
    padding: 0;
    text-align: center;
    text-wrap: balance;
    text-shadow: none;
}

/* The brand name is part of the same phrase: same line, same ink */
.contactHero__titleAccent {
    display: inline;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    color: inherit;
    background: none;
    -webkit-text-fill-color: currentColor;
}

.contactHero__lead {
    max-width: calc(620px * var(--ct-scale));
    margin: calc(20px * var(--ct-scale)) auto 0;
    font-size: calc(17.5px * var(--ct-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--ct-ink-2);
    text-wrap: pretty;
}

.contactHero__lead a,
.contactTrust__text a {
    color: var(--ct-blue-deep);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(37, 99, 235, 0.3);
    transition: color 0.2s var(--ct-ease), border-color 0.2s var(--ct-ease);
}

.contactHero__lead a:hover,
.contactTrust__text a:hover {
    color: var(--ct-blue-ink);
    border-bottom-color: var(--ct-blue-ink);
    text-decoration: none;
}

/* Column */

.contactShell .trainTeamsSection {
    margin: 0;
    padding: 0;
    background: none;
}

/* The cards sit side by side in a wider measure than the heading: two on
   the first row (email, live chat), three on the second (hours, office,
   helpful pages), then the registration banner across the full width. */
.contactShell .trainTeamsWrapper {
    max-width: calc(1120px * var(--ct-scale));
    margin: 0 auto;
    padding: 0;
}

.contactGrid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: calc(24px * var(--ct-scale));
    margin: 0;
}

.contactCard {
    position: relative;
    display: flex;
    flex-direction: column;
    grid-column: span 4;
    margin: 0;
    background: var(--ct-glass);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--ct-radius-card);
    box-shadow: var(--ct-shadow-card), 0 0 0 1px var(--ct-line);
    padding: calc(28px * var(--ct-scale));
    transform: none;
}

.contactCard--email,
.contactCard--chat {
    grid-column: span 6;
}

/* The last line of a card (the note) sits at the bottom, so cards on the
   same row end on the same line */
.contactCard > .contactCard__note:last-child {
    margin-top: auto;
    padding-top: calc(16px * var(--ct-scale));
}

.contactCard__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 calc(18px * var(--ct-scale));
}

/* The icons are drawn in white, so the tile stays the royal blue of the
   account pages */
.contactCard__icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: calc(46px * var(--ct-scale));
    height: calc(46px * var(--ct-scale));
    flex: 0 0 auto;
    border-radius: 15px;
    background: linear-gradient(150deg, #3b82f6 0%, #1d4ed8 100%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -14px rgba(30, 58, 138, 0.9);
    animation: none;
}

.contactCard__icon svg {
    width: calc(23px * var(--ct-scale));
    height: calc(23px * var(--ct-scale));
}

/* Live chat: the tile is the live chat launcher itself, the same green
   gradient, the same depth, breathing slowly with a soft ring so the eye
   finds the bubble it describes */
.contactCard--chat .contactCard__icon {
    border-radius: 15px;
    background: linear-gradient(150deg, #019279 0%, #00806c 46%, #005949 100%);
    border: 0;
    box-shadow:
        0 18px 34px -14px rgba(0, 60, 50, 0.55),
        0 8px 18px -8px rgba(0, 60, 50, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -6px 14px -8px rgba(0, 40, 34, 0.5);
    animation: ct-bounce 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

.contactCard--chat .contactCard__icon::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(1, 146, 121, 0.45);
    animation: ct-ping 2.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
    pointer-events: none;
}

@keyframes ct-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes ct-ping {
    0% { box-shadow: 0 0 0 0 rgba(1, 146, 121, 0.4); }
    70% { box-shadow: 0 0 0 11px rgba(1, 146, 121, 0); }
    100% { box-shadow: 0 0 0 0 rgba(1, 146, 121, 0); }
}

.contactCard__chatBadge {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 1;
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 6px 12px -6px rgba(220, 38, 38, 0.7);
    color: #ffffff;
    font-family: var(--ct-font-display);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.contactShell .contactCard__title {
    font-family: var(--ct-font-display);
    font-size: calc(23px * var(--ct-scale));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ct-ink);
    margin: 0;
}

.contactCard__text {
    margin: 0 0 calc(18px * var(--ct-scale));
    font-size: calc(16.5px * var(--ct-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--ct-ink-2);
}

.contactCard__note {
    margin: calc(16px * var(--ct-scale)) 0 0;
    font-size: calc(15px * var(--ct-scale));
    font-weight: 500;
    line-height: 1.55;
    color: var(--ct-ink-3);
}

.contactCard__note strong,
.contactCard__text strong {
    font-weight: 700;
    color: var(--ct-ink);
}

/* Desktop and phone wording ("click" or "tap"): only the matching sentence shows */
.contactChatText--mobile {
    display: none;
}

@media (max-width: 767px) {
    .contactChatText--desktop {
        display: none;
    }

    .contactChatText--mobile {
        display: inline;
    }
}

/* Email box: the address in an input like field with the copy button */
.contactEmailBox {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: calc(58px * var(--ct-scale));
    padding: 8px 8px 8px 18px;
    border: 1.5px solid var(--ct-line-strong);
    border-radius: var(--ct-radius-md);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.contactEmailBox > svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    color: var(--ct-blue-deep);
}

.contactEmailBox__value {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ct-font-display);
    font-size: calc(17px * var(--ct-scale));
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ct-ink);
    overflow-wrap: anywhere;
    user-select: all;
}

.contactEmailCopy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 40px;
    margin: 0;
    padding: 0 16px 0 13px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(150deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    font-family: var(--ct-font-display);
    font-size: calc(14.5px * var(--ct-scale));
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 20px -14px rgba(30, 58, 138, 0.9);
    transition: transform 0.2s var(--ct-ease), box-shadow 0.2s var(--ct-ease), background-color 0.2s var(--ct-ease);
}

.contactEmailCopy svg {
    width: 16px;
    height: 16px;
}

.contactEmailCopy .ic-check {
    display: none;
}

.contactEmailCopy.is-copied {
    background: linear-gradient(150deg, #10b981 0%, #059669 100%);
    box-shadow: 0 10px 20px -14px rgba(5, 150, 105, 0.9);
}

.contactEmailCopy.is-copied .ic-copy {
    display: none;
}

.contactEmailCopy.is-copied .ic-check {
    display: block;
}

.contactEmailCopy:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px -14px rgba(30, 58, 138, 0.95);
}

.contactEmailCopy:focus-visible {
    outline: none;
    box-shadow: var(--ct-ring);
}

/* Live chat hint: where the bubble is */
.contactChatHint {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: calc(16px * var(--ct-scale)) calc(18px * var(--ct-scale));
    border-radius: var(--ct-radius-lg);
    background: var(--ct-green-soft);
    border: 1px solid rgba(5, 150, 105, 0.16);
    font-size: calc(16px * var(--ct-scale));
    font-weight: 600;
    line-height: 1.5;
    color: var(--ct-ink);
}

.contactChatHint__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: #ffffff;
    color: var(--ct-green);
    box-shadow: 0 8px 18px -14px rgba(5, 150, 105, 0.7);
}

.contactChatHint__icon svg {
    width: 20px;
    height: 20px;
}

/* Opening hours */
.contactHours {
    margin: 0;
    padding: 0;
}

.contactHours__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: calc(14px * var(--ct-scale)) 0;
    border-top: 1px solid var(--ct-line);
}

.contactHours__row:first-child {
    padding-top: 0;
    border-top: 0;
}

.contactHours__row dt {
    margin: 0;
    font-size: calc(14.5px * var(--ct-scale));
    font-weight: 600;
    line-height: 1.4;
    color: var(--ct-ink-3);
}

.contactHours__row dd {
    margin: 0;
    font-family: var(--ct-font-display);
    font-size: calc(19px * var(--ct-scale));
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--ct-ink);
}

/* Registered office */
.contactAddress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-style: normal;
    font-size: calc(16.5px * var(--ct-scale));
    font-weight: 500;
    line-height: 1.5;
    color: var(--ct-ink-2);
}

.contactAddress span:first-child {
    font-family: var(--ct-font-display);
    font-size: calc(18px * var(--ct-scale));
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ct-ink);
    margin-bottom: 4px;
}

/* Helpful pages: one row per link */
.contactQuickLinks {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.contactQuickLink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: calc(16px * var(--ct-scale)) 4px;
    border-top: 1px solid var(--ct-line);
    border-radius: 10px;
    color: var(--ct-ink);
    font-family: var(--ct-font-display);
    font-size: calc(17px * var(--ct-scale));
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.2s var(--ct-ease);
}

.contactQuickLink:first-child {
    border-top: 0;
    padding-top: 0;
}

.contactQuickLink:last-child {
    padding-bottom: 0;
}

.contactQuickLink svg {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 7px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--ct-line);
    box-shadow: 0 8px 18px -12px rgba(30, 58, 138, 0.6);
    color: var(--ct-blue-deep);
    transition: transform 0.2s var(--ct-ease), background-color 0.2s var(--ct-ease), color 0.2s var(--ct-ease);
}

.contactQuickLink:hover {
    color: var(--ct-blue-ink);
    text-decoration: none;
}

.contactQuickLink:hover svg {
    transform: translateX(3px);
    background: var(--ct-blue-deep);
    border-color: var(--ct-blue-deep);
    color: #ffffff;
}

.contactQuickLink:focus-visible {
    outline: none;
    box-shadow: var(--ct-ring);
}

/* Registration banner */
.contactTrust {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: calc(28px * var(--ct-scale)) 0 0;
    padding: calc(22px * var(--ct-scale)) calc(24px * var(--ct-scale));
    border-radius: var(--ct-radius-card);
    background: linear-gradient(180deg, #eef4ff 0%, #e8f0ff 100%);
    border: 1px solid rgba(37, 99, 235, 0.14);
    box-shadow: 0 20px 40px -32px rgba(30, 58, 138, 0.5);
}

.contactTrust__icon {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 15px;
    background: linear-gradient(150deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 10px 20px -14px rgba(30, 58, 138, 0.9);
}

.contactTrust__icon svg {
    width: 23px;
    height: 23px;
}

.contactTrust__text {
    margin: 0;
    font-size: calc(15.5px * var(--ct-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--ct-ink-2);
}

.contactTrust__text strong {
    font-weight: 700;
    color: var(--ct-ink);
}

/* Copy toast */
.contactToast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 12px 18px 12px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px var(--ct-line), 0 24px 50px -24px rgba(30, 58, 138, 0.6);
    color: var(--ct-ink);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition: opacity 0.25s var(--ct-ease), transform 0.25s var(--ct-ease), visibility 0.25s;
    pointer-events: none;
}

.contactToast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.contactToast__icon {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: linear-gradient(150deg, #10b981 0%, #059669 100%);
}

.contactToast__icon svg {
    width: 18px;
    height: 18px;
}

.contactToast__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.contactToast__title {
    font-family: var(--ct-font-display);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ct-ink);
}

.contactToast__text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ct-ink-3);
    overflow-wrap: anywhere;
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
    .contactEmailCopy,
    .contactQuickLink svg,
    .contactToast {
        transition: none;
    }

    .contactCard--chat .contactCard__icon,
    .contactCard--chat .contactCard__icon::before {
        animation: none;
    }
}

/* Tablets: two cards per row, the helpful pages card across both */
@media (max-width: 960px) {
    .contactGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .contactCard,
    .contactCard--email,
    .contactCard--chat {
        grid-column: span 1;
    }

    .contactCard--links {
        grid-column: 1 / -1;
    }

    .contactCard--links .contactQuickLinks {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .contactCard--links .contactQuickLink {
        border-top: 0;
        padding: 14px 16px;
        border-radius: 14px;
        background: #ffffff;
        border: 1px solid var(--ct-line);
    }

    /* Half width cards: the address gets its own line and the copy button
       sits under it, so the address never breaks in the middle */
    .contactEmailBox {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .contactEmailBox__value {
        flex: 1 1 100%;
        font-size: 16px;
    }

    .contactEmailBox > svg {
        display: none;
    }

    .contactEmailCopy {
        width: 100%;
        justify-content: center;
        min-height: 46px;
    }

    /* Icon plus text: the icon sits on the first line and the text wraps
       under it, no empty column beside a short paragraph */
    .contactChatHint {
        display: block;
    }

    .contactChatHint__icon {
        float: left;
        width: 34px;
        height: 34px;
        margin: 1px 12px 4px 0;
    }

    .contactChatHint__icon svg {
        width: 18px;
        height: 18px;
    }
}

/* Phones */
@media (max-width: 640px) {
    .contactAmbient {
        padding: 36px 12px 56px;
    }

    .secondaryBannerContact {
        margin-bottom: 24px;
    }

    .contactHero__lead {
        font-size: 16.5px;
    }

    .contactGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .contactCard,
    .contactCard--email,
    .contactCard--chat,
    .contactCard--links {
        grid-column: 1 / -1;
    }

    .contactCard--links .contactQuickLinks {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .contactCard {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .contactShell .contactCard__title {
        font-size: 21px;
    }

    .contactTrust {
        flex-direction: column;
        gap: 14px;
        margin-top: 18px;
        padding: 20px 18px;
        border-radius: 22px;
    }

    .contactToast {
        bottom: 16px;
    }
}