/* ============================================================
   CIOC — Coming Soon page (src_2 prototype)
   White background with a soft "shade" of brand tints.
   Custom CSS only for what Bootstrap utilities cannot express.
   ============================================================ */

:root {
    --cs-navy-900: #07275b;
    --cs-navy-800: #0a2f6b;
    --cs-text: #324665;
    --cs-muted: #6e7f9c;
    --cs-border: #dfe6f1;
    --cs-red: #ef4038;
    --cs-ring-blue: #0081c8;
    --cs-ring-yellow: #fcb131;
    --cs-ring-green: #00a651;
    --cs-ring-red: #ee334e;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
  	min-height: 100dvh;
  	display: flex;
  	flex-direction: column;
    font-family: "Barlow Semi Condensed", Arial, sans-serif;
    color: var(--cs-text);
    /* White base with gentle brand-colour "shade" around the edges */
    background:
        radial-gradient(46rem 46rem at 10% -10%, rgba(18, 63, 130, 0.07), transparent 60%),
        radial-gradient(38rem 38rem at 92% 112%, rgba(217, 42, 42, 0.055), transparent 60%),
        radial-gradient(30rem 30rem at 102% -6%, rgba(0, 166, 81, 0.05), transparent 60%),
        radial-gradient(28rem 28rem at -2% 104%, rgba(252, 177, 49, 0.07), transparent 60%),
        #ffffff;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid rgba(217, 42, 42, 0.35);
    outline-offset: 3px;
}

/* --- Decorative background drift (page structure stays in-flow) --- */
.cs-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.cs-bg::before,
.cs-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
}

.cs-bg::before {
    width: 420px;
    height: 420px;
    top: -150px;
    right: -130px;
    background: radial-gradient(circle at 35% 35%, rgba(0, 129, 200, 0.16), rgba(0, 129, 200, 0) 65%);
}

.cs-bg::after {
    width: 480px;
    height: 480px;
    bottom: -190px;
    left: -150px;
    background: radial-gradient(circle at 60% 60%, rgba(239, 64, 56, 0.13), rgba(239, 64, 56, 0) 65%);
}

@media (prefers-reduced-motion: no-preference) {
    .cs-bg::before {
        animation: cs-drift 22s ease-in-out infinite alternate;
    }

    .cs-bg::after {
        animation: cs-drift-alt 26s ease-in-out infinite alternate;
    }
}

@keyframes cs-drift {
    to {
        transform: translate(-40px, 32px) scale(1.06);
    }
}

@keyframes cs-drift-alt {
    to {
        transform: translate(32px, -28px) scale(1.05);
    }
}

/* --- Page shell --- */
.cs-page {
    padding: 16px 0 16px;
  	flex: 1 0 auto;
  	padding: 16px 0;
}

.cs-container {
    max-width: 760px;
}

/* --- Logo --- */
.cs-logo {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    /* logo.png has asymmetric internal padding (144px left vs 63px right),
       so the artwork sits ~1.87% right of true centre — nudge it back. */
    transform: translateX(-1.87%);
}

/* --- Typography --- */
.cs-title {
    margin: 28px 0 0;
    font-family: "Bebas Neue", "Barlow Semi Condensed", sans-serif;
    font-size: clamp(3.4rem, 11vw, 6rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cs-navy-900);
}

.cs-title__accent {
    color: var(--cs-red);
}

.cs-divider {
    width: 84px;
    height: 4px;
    margin: 20px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg,
        var(--cs-ring-blue) 0%, var(--cs-ring-blue) 20%,
        var(--cs-ring-yellow) 20%, var(--cs-ring-yellow) 40%,
        #111111 40%, #111111 60%,
        var(--cs-ring-green) 60%, var(--cs-ring-green) 80%,
        var(--cs-ring-red) 80%, var(--cs-ring-red) 100%);
}

.cs-lede {
    max-width: 540px;
    margin: 22px auto 0;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--cs-text);
}

/* --- Footer --- */
.cs-footer {
    margin-top: 8px;
    padding: 24px 0;
    border-top: 1px solid var(--cs-border);
    background: rgba(248, 250, 252, 0.72);
}

.cs-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--cs-muted);
    font-size: 0.92rem;
}

.cs-footer__address {
    margin: 0;
    font-style: normal;
}

.cs-footer__line {
    margin: 0;
}

.cs-footer__address a {
    color: var(--cs-navy-800);
    text-decoration: none;
    font-weight: 600;
}

.cs-footer__address a:hover {
    text-decoration: underline;
}

.cs-footer__copyright {
    margin: 0;
}