/* ===================================
   SCROLL HERO - scroll-hero.css
   Layers fly away on scroll, a circle opens up and reveals the paragraph.
   Pair with js/scroll-hero.js (GSAP + ScrollTrigger)
   =================================== */

:root {
    --sh-navy: #2251ff;
    --sh-sky-top: #0010b0;
    --sh-sky-bottom: #0088d6;
    --sh-pink: #00a9f4;
}

html { scroll-behavior: auto; }
body.sh-body { background: #fff; overflow-x: hidden; }

/* ---------- Fixed header over the hero ---------- */
.sh-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    color: #fff;
    mix-blend-mode: normal;
}
/* ---------- Logo: image on a white badge + white company name ---------- */
.sh-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
    text-decoration: none;
    color: #fff;
}
.sh-logo:hover { color: #fff; text-decoration: none; }
.sh-logo img {
    width: 46px;
    height: 46px;
    padding: 6px;
    object-fit: contain;
    background: #fff;                       /* white badge: a dark logo is clearly visible on any blue */
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(5, 28, 44, .35);
    display: block;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sh-logo span {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(5, 28, 44, .45);
}
.sh-logo:hover img { transform: scale(1.06) rotate(-3deg); box-shadow: 0 6px 18px rgba(0, 169, 244, .55); }
.sh-logo:hover span { color: #00a9f4; }
@media (max-width: 767px) {
    .sh-logo img { width: 40px; height: 40px; }
    .sh-logo span { font-size: 1.4rem; }
}
.sh-burger { background: none; border: 0; width: 34px; height: 24px; position: relative; cursor: pointer; }
.sh-burger span { position: absolute; left: 0; right: 0; height: 3px; background: #fff; border-radius: 2px; }
.sh-burger span:nth-child(1) { top: 2px; }
.sh-burger span:nth-child(2) { top: 10px; }
.sh-burger span:nth-child(3) { top: 18px; }

/* ---------- Stage ---------- */
.sh { position: relative; background: var(--sh-navy); }
.sh-stage {
    position: relative;
    height: 100vh;
    min-height: 560px;
    overflow: hidden;
    /* blue sky photo (img/hero/sky.jpg) with a gradient fallback */
    background:
        url('../img/hero/sky.jpg') center / cover no-repeat,
        linear-gradient(180deg, var(--sh-sky-top) 0%, #0030c8 45%, var(--sh-sky-bottom) 100%);
}
/* brighten the sky towards the blue used in the reference */
.sh-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 20, 190, 0.55) 0%, rgba(0, 110, 220, 0.45) 100%);
    pointer-events: none;
}
.sh-layer { position: absolute; will-change: transform, opacity; }

/* sun (SVG) */
.sh-sun {
    left: 48%;
    top: 60%;
    width: min(110vw, 1050px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}
.sh-sun svg { width: 100%; height: 100%; display: block; }

/* land (SVG) - bottom of the stage, in front of the sun */
.sh-land {
    left: 0;
    right: 0;
    bottom: 0;
    height: 57%;
}
.sh-land img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

/* centre head + side statues + floating items (PNG layers) */
.sh-head {
    left: 50%;
    top: 60%;
    width: min(85vw, 380px);
    transform: translate(-50%, -50%);
}
.sh-side { bottom: -2%; width: min(30vw, 420px); }
.sh-side.left { left: -1%; width: min(50svw, 380px); }
.sh-side.right { right: -1%; width: min(50svw, 380px); }
.sh-float { width: min(16vw, 200px); }
.sh-float.f1 { left: 1%;  top: 18%; width: min(40svw, 380px);  }
.sh-float.f2 { left: 26%; top: 32%; width: min(16vw, 160px); }
.sh-float.f3 { right: 7%; top: 16%; width: min(25vw, 360px); transform: rotate(10deg); }
.sh-float.f4 { right: 22%; top: 50%; width: min(36vw, 250px); }

.sh-layer img { width: 100%; height: auto; display: block; }

/* ---------- Stacking order (back → front) ----------
   sun  <  f3  <  land  <  head, f1, f2, f4  <  left/right statues  <  title  <  reveal circle  */
.sh-sun        { z-index: 1; }
.sh-float.f3   { z-index: 2; }   /* under the land, like the sun, and under right.png */
.sh-land       { z-index: 3; }
.sh-head       { z-index: 4; }
.sh-float.f1,
.sh-float.f2,
.sh-float.f4   { z-index: 4; }
.sh-side       { z-index: 5; }

/* Placeholder shown until you drop your own PNGs into img/hero/ */
.sh-ph {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 2px dashed rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: 700 0.75rem/1.2 'Inter', sans-serif;
    text-align: center;
    padding: 8px;
    backdrop-filter: blur(2px);
}
.sh-layer.no-img .sh-ph { display: flex; }
.sh-layer.no-img img { display: none; }
.sh-head .sh-ph { aspect-ratio: 3 / 4; border-radius: 120px 120px 30px 30px; }
.sh-float .sh-ph { aspect-ratio: 1; border-radius: 50%; }

/* title + scroll button */
.sh-title {
    left: 0;
    right: 0;
    bottom: 17%;
    text-align: center;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: 1px;
    text-shadow: 0 6px 30px rgba(0, 0, 50, 0.45);
    z-index: 6;
}
.sh-scroll {
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 0;
    color: #fff;
    font: 600 0.9rem 'Inter', sans-serif;
    background: radial-gradient(circle at 50% 35%, #5fd0ff 0%, #00a9f4 60%, #2251ff 100%);
    box-shadow: 0 0 60px 10px rgba(0, 169, 244, 0.55);
    padding-bottom: 46px;
    z-index: 6;
}

/* ---------- Circle reveal ---------- */
.sh-reveal {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: var(--sh-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(0% at 50% 48%);
    -webkit-clip-path: circle(0% at 50% 48%);
}
.sh-text {
    max-width: 1400px;
    padding: 0 28px;
    text-align: center;
    color: #fff;
    font-size: clamp(1.3rem, min(2.3vw, 5vh), 2.5rem);   /* Magnus-size: big enough to read, wide lines */
    line-height: 1.35;
    font-weight: 400;
    opacity: 0;
}
.sh-reveal .sh-text { font-size: clamp(1.3rem, min(2.3vw, 5vh), 2.5rem); }   /* same size, higher priority so no other CSS can shrink it */
.sh-text .sh-tag { display: block; margin-top: 0; font-weight: 400; letter-spacing: 0; }

/* ---------- Content that follows ---------- */
.sh-after { background: #fff; position: relative; z-index: 2; }
.sh-after .sh-card {
    border: 1px solid #eee;
    border-radius: 14px;
    padding: 2rem;
    height: 100%;
    background: #fff;
    transition: .35s;
}
.sh-after .sh-card:hover { border-color: #111; transform: translateY(-8px); }

/* ---------- Services section ---------- */
.sv {
    background: linear-gradient(180deg, #051c2c 0%, #2251ff 100%);
    color: #fff;
    padding: 90px 0;
}
.sv-label {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    font-weight: 300;
    margin-bottom: 14px;
    text-transform: uppercase;
}
.sv-label span { color: #00a9f4; }
.sv-heading {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.02;
    letter-spacing: -1px;
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    margin: 0;
}

/* cards */
.sv-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 620px;
    background: #2251ff;
    color: #fff;
    text-decoration: none;
    padding: 20px 20px 28px;
    text-align: center;
    transition: transform .35s ease, box-shadow .35s ease;
}
.sv-card:hover {
    transform: scale(1.06);
    z-index: 5;
    background: #3a64ff;                              /* slightly brighter electric blue */
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
    color: #fff;
}
.sv-img { height: 270px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 26px; }
.sv-img img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sv-card h3 { font-size: 1.55rem; font-weight: 700; line-height: 1.25; margin-bottom: 16px; }
.sv-card p  { font-size: .9rem; line-height: 1.6; text-align: justify; margin: 0; }

/* the character image grows a bit more than the card */
.sv-img img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.sv-card:hover .sv-img img { transform: scale(1.1) translateY(-6px); }

.sv-cards:hover .sv-card:not(:hover) { opacity: .75; }
.sv-card { opacity: 1; }


/* little stagger like the reference (middle card slightly lower) */
@media (min-width: 768px) {
    .sv-cards .col-md-4:nth-child(2) .sv-card { margin-top: 0; }
}

@media (max-width: 991px) {
    .sv-card { min-height: 0; }
    .sv-img { height: 220px; }
}


/* ---------- What we do (light blue, contrasts with the navy services section) ---------- */
/* ---------- What we do (same navy as the circle) ---------- */
.wd {
    background: #2251ff;            /* #2251ff, same as the circle */
    color: #fff;
    padding: 100px 0;
}
.wd-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #00a9f4;                         /* bright blue label, same as the "01" in Our Services */
    margin-bottom: 14px;
}
.wd-title {
    font-weight: 800;
    letter-spacing: -1px;
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    color: #fff;
    margin: 0 0 70px;
}

.wd-grid { --bs-gutter-x: 4rem; }
.wd-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    cursor: default;
    transition: padding-left .3s ease, border-color .3s ease;
}
.wd-item h3 { font-size: 1.45rem; font-weight: 700; margin-bottom: 10px; color: #fff; }
.wd-item p  { margin: 0; color: rgba(255, 255, 255, .75); font-size: .95rem; line-height: 1.6; max-width: 480px; }

.wd-arrow {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #00a9f4;                    /* bright blue circle */
    color: #fff;
    font-size: 1rem;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.wd-item:hover { padding-left: 14px; border-color: #00a9f4; }
.wd-item:hover .wd-arrow { background: #fff; color: var(--sh-navy); transform: translateX(4px); }

@media (max-width: 767px) {
    .wd { padding: 70px 0; }
    .wd-title { margin-bottom: 40px; }
    .wd-grid { --bs-gutter-x: 1.5rem; }
}



/* ---------- Testimonials ---------- */
.tm {
    background: #051c2c;                      /* dark navy, contrasts with the circle-blue section above */
    color: #fff;
    padding: 100px 0;
}
.tm-eyebrow { font-size: .85rem; font-weight: 600; letter-spacing: 3px; color: #00a9f4; margin-bottom: 14px; }
.tm-title   { font-weight: 800; letter-spacing: -1px; font-size: clamp(2rem, 4.2vw, 3.4rem); margin: 0 auto 60px; max-width: 760px; }
.tm-title em { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: #00a9f4; }

.tm-wrap { position: relative; padding: 0 70px; }
.tm-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.tm-track::-webkit-scrollbar { display: none; }

.tm-card {
    flex: 0 0 calc(50% - 14px);               /* 2 per view */
    scroll-snap-align: start;
    background: #2251ff;                      /* circle blue */
    border: 1px solid rgba(0, 169, 244, .35);
    border-radius: 6px;
    padding: 42px 38px 34px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.tm-card:hover { transform: translateY(-6px); border-color: #00a9f4; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }

.tm-quote { font: 700 5rem/0.8 Georgia, serif; color: rgba(0, 169, 244, .55); margin-bottom: 14px; }
.tm-text  { font-size: 1.1rem; line-height: 1.65; color: rgba(255, 255, 255, .92); margin-bottom: 28px; flex: 1; }
.tm-stars { color: #00a9f4; font-size: 1.3rem; letter-spacing: 4px; margin-bottom: 14px; }
.tm-name  { font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; }
.tm-role  { font-size: .9rem; color: rgba(255, 255, 255, .65); margin: 0; }

.tm-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: #00a9f4;
    color: #fff;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.tm-arrow:hover { background: #fff; color: #2251ff; transform: translateY(-50%) scale(1.08); }
.tm-prev { left: 0; }
.tm-next { right: 0; }

@media (max-width: 767px) {
    .tm { padding: 70px 0; }
    .tm-wrap { padding: 0 0 70px; }
    .tm-card { flex-basis: 100%; padding: 34px 24px 28px; }
    .tm-arrow { top: auto; bottom: 0; transform: none; }
    .tm-arrow:hover { transform: scale(1.08); }
    .tm-prev { left: calc(50% - 56px); }
    .tm-next { right: calc(50% - 56px); }
}







/* ---------- CTA ---------- */
.cta { background: #00a9f4; color: #fff; padding: 90px 0 80px; overflow: hidden; }
.cta-title { font-weight: 800; letter-spacing: -1px; line-height: 1.1; font-size: clamp(2rem, 4.4vw, 3.6rem); color: #fff; margin-bottom: 22px; max-width: 560px; }
.cta-text { font-size: 1.05rem; line-height: 1.7; color: #051c2c; max-width: 520px; margin: 0; }
.cta-action { position: relative; text-align: center; padding-top: 110px; }
.cta-mascot { position: absolute; left: 50%; top: 0; width: 150px; transform: translateX(-50%); z-index: 1; pointer-events: none; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.cta-btn { position: relative; z-index: 2; width: 100%; max-width: 380px; padding: 20px 30px; border: 0; border-radius: 60px; background: #2251ff; color: #fff; font-size: 1.05rem; letter-spacing: 1px; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.cta-btn:hover { background: #fff; color: #2251ff; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(5, 28, 44, .35); }
.cta-action:hover .cta-mascot { transform: translateX(-50%) translateY(-10px); }
@media (max-width: 991px) {
    .cta { padding: 70px 0; text-align: center; }
    .cta-title, .cta-text { margin-left: auto; margin-right: auto; }
}

/* ---------- Contact pop-up ---------- */
.modal-backdrop.show { opacity: .75; background: #051c2c; }
.cm-card { background: #00a9f4; border: 0; border-radius: 14px; padding: 28px 28px 30px; color: #fff; box-shadow: 0 30px 80px rgba(5, 28, 44, .6); }
.cm-close { position: absolute; top: 10px; right: 18px; background: none; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; transition: transform .25s ease; }
.cm-close:hover { transform: rotate(90deg); }
.cm-title { font-weight: 900; text-transform: uppercase; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.2; color: #fff; margin: 6px 40px 22px 0; }
.cm-input { display: block; width: 100%; border: 2px solid transparent; border-radius: 2px; background: #f4f7fb; color: #051c2c; padding: 17px 18px; margin-bottom: 14px; font-size: .95rem; outline: none; transition: border-color .25s ease, background .25s ease; }
.cm-input::placeholder { color: #6b7a99; }
.cm-input:focus { border-color: #2251ff; background: #fff; }
.cm-input.is-invalid { border-color: #051c2c; background: #fff; }
textarea.cm-input { resize: vertical; min-height: 110px; }
.cm-submit { width: 100%; border: 0; padding: 18px; background: #2251ff; color: #fff; font-weight: 700; letter-spacing: 1px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.cm-submit:hover { background: #fff; color: #2251ff; }
.cm-note { margin: 14px 0 0; font-weight: 600; text-align: center; min-height: 1.2em; }

/* ---------- Floating contact buttons ---------- */
.sh-fab { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sh-fab a {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; text-decoration: none; font-weight: 700; font-size: .62rem; line-height: 1.05; text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.sh-fab .wa { background: #25d366; font-size: 1.6rem; }
.sh-fab .gt { background: var(--sh-pink); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .sh-stage { height: 100vh; height: 100svh; min-height: 520px; }   /* svh = ignores the phone's address bar */
    .sh-side { width: 46vw; }
    .sh-float { width: 22vw !important; }
    .sh-head { width: 36vw; }
    .sh-sun { width: 80vw; }

    /* land fills its whole box on tall phone screens (no hard edge / gap under the valley) */
    .sh-layer.sh-land img { height: 100%; object-fit: cover; object-position: 50% 0; }

    /* title sits ABOVE the statues so it is easy to read */
    .sh-title {
        bottom: 27%;
        padding: 0 18px;
        font-size: clamp(2rem, 9.5vw, 2.8rem);
        line-height: 1.05;
        letter-spacing: 0;
        text-shadow: 0 4px 22px rgba(0, 12, 60, .75), 0 0 2px rgba(0, 12, 60, .6);
    }
    /* SCROLL button fully visible, centred between the statues */
    .sh-scroll {
        width: 74px; height: 74px;
        bottom: 3.5%;
        padding-bottom: 0;
        font-size: .72rem; letter-spacing: 1px;
        color: #051c2c; font-weight: 700;
        box-shadow: 0 0 34px 6px rgba(0, 169, 244, .55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sh-reveal { clip-path: none; -webkit-clip-path: none; position: relative; min-height: 70vh; }
    .sh-text { opacity: 1; }
}

/* ---------- Full-screen menu (burger) ---------- */
html.menu-lock { overflow: hidden; }
.site-menu {
    position: fixed;
    inset: 0;
    z-index: 100;                           /* above header (50) and floating buttons (60) */
    background: #2251ff;                    /* circle navy */
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    clip-path: circle(0% at calc(100% - 45px) 42px);       /* grows out of the burger button */
    -webkit-clip-path: circle(0% at calc(100% - 45px) 42px);
    transition: clip-path .7s cubic-bezier(.7,0,.2,1), -webkit-clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s linear .7s;
}
.site-menu.is-open {
    visibility: visible;
    clip-path: circle(150% at calc(100% - 45px) 42px);
    -webkit-clip-path: circle(150% at calc(100% - 45px) 42px);
    transition: clip-path .7s cubic-bezier(.7,0,.2,1), -webkit-clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s;
}
.site-menu-logo { position: absolute; top: 18px; left: 28px; }
.site-menu-close {
    position: absolute; top: 14px; right: 24px;
    background: none; border: 0; color: #fff;
    font-size: 3rem; line-height: 1; cursor: pointer;
    transition: transform .3s ease, color .3s ease;
}
.site-menu-close:hover { transform: rotate(90deg); color: #00a9f4; }

.site-menu-list { list-style: none; margin: 0; padding: 0; text-align: center; }
.site-menu-list li { overflow: hidden; }
.site-menu-list a {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.15;
    font-size: clamp(2.4rem, 7.5vw, 5.5rem);
    padding: 4px 10px;
    transform: translateY(110%);
    opacity: 0;
    transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease, color .25s ease, letter-spacing .25s ease;
}
.site-menu.is-open .site-menu-list a { transform: none; opacity: 1; }
.site-menu.is-open li:nth-child(1) a { transition-delay: .25s, .25s, 0s, 0s; }
.site-menu.is-open li:nth-child(2) a { transition-delay: .33s, .33s, 0s, 0s; }
.site-menu.is-open li:nth-child(3) a { transition-delay: .41s, .41s, 0s, 0s; }
.site-menu.is-open li:nth-child(4) a { transition-delay: .49s, .49s, 0s, 0s; }
.site-menu.is-open li:nth-child(5) a { transition-delay: .57s, .57s, 0s, 0s; }
/* hover: the word changes colour */
.site-menu-list a:hover { color: #00a9f4; letter-spacing: 4px; }
.site-menu.is-open .site-menu-list a:hover { transition-delay: 0s; }


/* ===================================================
   SERVICES - 4 cards, colour change on hover (no links)
   Add to CSS/scroll-hero.css (or load as its own file after theme.css)
   =================================================== */
.sx {
    background: #051c2c;                 /* deep blue */
    color: #fff;
    padding: 110px 0;
    position: relative;
    z-index: 2;
}
.sx-head { max-width: 760px; margin-bottom: 56px; }
.sx-label { color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 14px; }
.sx-label span { color: #00a9f4; }
.sx-title { font-size: clamp(1.8rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.5px; margin: 0; }

/* ---------- card ---------- */
.sx-card {
    position: relative;
    height: 100%;
    background: #fff;
    color: #051c2c;
    border: 2px solid #051c2c;
    padding: 30px 22px 28px;
    display: flex;
    flex-direction: column;
    transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sx-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }

.sx-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.sx-num {
    background: #051c2c; color: #00a9f4;
    font-weight: 700; font-size: .85rem;
    padding: 9px 12px; line-height: 1;
    transition: background .35s ease, color .35s ease;
}
.sx-icon {
    width: 48px; height: 48px;
    border: 2px solid #051c2c;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .35s ease, transform .35s ease;
}
.sx-card:hover .sx-icon { transform: rotate(-8deg) scale(1.08); }

.sx-card h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
.sx-card p  { font-size: .95rem; line-height: 1.65; margin: 0; flex: 1; color: rgba(5, 28, 44, .78); transition: color .35s ease; }
.sx-card hr { border: 0; border-top: 2px solid currentColor; opacity: .85; margin: 28px 0 22px; }

.sx-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; min-height: 124px; align-content: flex-start; }
.sx-tags li {
    border: 1.5px solid currentColor;
    padding: 6px 10px;
    font-size: .8rem; line-height: 1.2;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.sx-tags li:hover { background: #fff; color: #051c2c; border-color: #fff; }

/* little tilted tag on top of the card */
.sx-badge {
    position: absolute; top: -13px; right: 18px;
    background: #00a9f4; color: #051c2c;
    font-size: .7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 7px 14px; transform: rotate(2deg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

/* ---------- hover colours ---------- */
/* electric blue cards (01, 04) */
.sx-electric:hover { background: #2251ff; border-color: #2251ff; color: #fff; }
.sx-electric:hover p { color: rgba(255, 255, 255, .88); }
.sx-electric:hover .sx-num { background: #00a9f4; color: #051c2c; }
.sx-electric:hover .sx-icon { border-color: #fff; }

/* cyan cards (02, 03) */
.sx-cyan:hover { background: #00a9f4; border-color: #00a9f4; color: #051c2c; }
.sx-cyan:hover p { color: #051c2c; }
.sx-cyan:hover .sx-num { background: #051c2c; color: #00a9f4; }
.sx-cyan:hover .sx-icon { border-color: #051c2c; }
.sx-cyan:hover .sx-tags li:hover { background: #051c2c; color: #fff; border-color: #051c2c; }

@media (max-width: 767px) {
    .sx { padding: 80px 0; }
    .sx-card { padding: 28px 22px 30px; }
    .sx-top { margin-bottom: 28px; }
}