/* =========================================================
   BLUELIST LUMINARIES LLC
   MASTER WEBSITE STYLESHEET
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
    --blue-dark: #071a2b;
    --blue-deep: #0039a6;
    --blue: #1261a0;
    --blue-light: #2e8bcf;
    --blue-pale: #eaf5fc;

    --white: #ffffff;
    --off-white: #f7f9fb;
    --light-gray: #eef2f5;
    --gray: #6b7785;
    --dark: #16202a;

    --border: #dfe6ec;

    --shadow-small: 0 8px 24px rgba(7, 26, 43, 0.08);
    --shadow-medium: 0 18px 45px rgba(7, 26, 43, 0.12);
    --shadow-large: 0 30px 70px rgba(7, 26, 43, 0.16);

    --radius-small: 10px;
    --radius-medium: 18px;
    --radius-large: 28px;

    --max-width: 1180px;
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    color: var(--dark);
    background: var(--white);
    line-height: 1.7;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}


/* =========================================================
   GLOBAL
========================================================= */

.container {
    width: min(100% - 40px, var(--max-width));
    margin: 0 auto;
}

.section {
    padding: 110px 0;
}

.section-heading {
    max-width: 780px;
    margin-bottom: 60px;
}

.section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(2.1rem, 4vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
    margin-bottom: 20px;
}

.section-heading p:not(.eyebrow) {
    color: var(--gray);
    font-size: 1.05rem;
}

.eyebrow {
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
}

.large-text {
    font-size: 1.35rem;
    line-height: 1.55;
    color: var(--blue-deep);
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 26px;

    border-radius: 999px;

    font-weight: 700;
    font-size: 0.95rem;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0 10px 24px rgba(18, 97, 160, 0.22);
}

.button-primary:hover {
    background: var(--blue-deep);
    box-shadow: 0 14px 30px rgba(18, 97, 160, 0.28);
}

.button-secondary {
    background: var(--white);
    color: var(--blue-deep);
    border: 1px solid var(--border);
}

.button-secondary:hover {
    border-color: var(--blue-light);
    box-shadow: var(--shadow-small);
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: relative;
    z-index: 100;

    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
}

.nav-container {
    min-height: 90px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.logo {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0;

    font-size: 1.78rem;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.logo-blue {
    color: var(--blue);
}

.logo-list {
    color: var(--dark);
}

.logo-subtitle {
    width: 100%;

    color: var(--gray);

    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.25em;

    margin-top: -5px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.main-nav a {
    color: var(--gray);
    font-size: 1rem;
    font-weight: 650;

    transition:
        color 0.2s ease;
}

.main-nav a:hover {
    color: var(--blue);
}


/* =========================================================
   HOMEPAGE HERO
========================================================= */

.hero {
    position: relative;
    overflow: hidden;

    min-height: 690px;

    display: flex;
    align-items: center;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(46, 139, 207, 0.18),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f8fbfd 0%,
            #eef6fb 100%
        );
}

.hero-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.hero-text h1 {
    max-width: 720px;

    font-size: clamp(3.3rem, 7vw, 6.2rem);
    line-height: 0.98;
    letter-spacing: -0.065em;

    color: var(--blue-dark);

    margin-bottom: 30px;
}

.hero-text h1 span {
    color: var(--blue);
}

.hero-description {
    max-width: 650px;

    color: var(--gray);
    font-size: 1.2rem;
    line-height: 1.7;

    margin-bottom: 34px;
}


/* =========================================================
   HOMEPAGE HERO VISUAL
========================================================= */

.hero-visual {
    position: relative;

    width: min(100%, 500px);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    margin: 0 auto;
}

.hero-glow {
    position: absolute;

    width: 55%;
    height: 55%;

    border-radius: 50%;

    background: rgba(46, 139, 207, 0.22);

    filter: blur(45px);
}

.hero-symbol {
    position: relative;
    z-index: 2;

    width: 190px;
    height: 190px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        var(--blue),
        var(--blue-deep)
    );

    color: var(--white);

    font-size: 3.2rem;
    font-weight: 900;

    box-shadow: var(--shadow-large);
}

.hero-orbit {
    position: absolute;

    border: 1px solid rgba(18, 97, 160, 0.2);
    border-radius: 50%;
}

.orbit-one {
    width: 76%;
    height: 76%;
}

.orbit-two {
    width: 100%;
    height: 100%;
    transform: rotate(25deg);
}


/* =========================================================
   HOMEPAGE ABOUT
========================================================= */

.about-section {
    background: var(--white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.about-main p {
    color: var(--gray);
    margin-bottom: 22px;
}

.about-main .large-text {
    color: var(--blue-deep);
}

.about-statement {
    display: grid;
    gap: 18px;
}

.statement-card {
    padding: 28px;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--off-white);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.statement-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-small);
}

.statement-number {
    display: block;

    color: var(--blue-light);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    margin-bottom: 8px;
}

.statement-card h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.statement-card p {
    color: var(--gray);
}


/* =========================================================
   HOMEPAGE COMPANIES
========================================================= */

.companies-section {
    background: var(--off-white);
}

.company-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.company-card {
    padding: 36px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.company-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
}

.company-card.featured-company {
    border-color: rgba(18, 97, 160, 0.35);
}

.company-card.future-company {
    background: var(--blue-dark);
    color: var(--white);
}

.company-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    margin-bottom: 28px;

    border-radius: 16px;

    background: var(--blue-pale);
    color: var(--blue);

    font-weight: 900;
    font-size: 1.2rem;
}

.balloon-icon {
    border-radius: 50%;
}

.future-company .company-icon {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.company-type {
    color: var(--blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;

    margin-bottom: 8px;
}

.future-company .company-type {
    color: #9bcff0;
}

.company-card h3 {
    font-size: 1.45rem;
    line-height: 1.25;
    margin-bottom: 14px;
}

.company-card > p:not(.company-type) {
    color: var(--gray);
    margin-bottom: 24px;
}

.future-company > p:not(.company-type) {
    color: rgba(255, 255, 255, 0.72);
}

.company-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--blue);

    font-weight: 800;
    font-size: 1rem;
}

.future-company .company-link {
    color: var(--white);
}

.company-link span {
    transition: transform 0.2s ease;
}

.company-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   MISSION
========================================================= */

.mission-section {
    padding: 120px 0;

    background: var(--blue-dark);
    color: var(--white);
}

.mission-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 70px;
}

.mission-content h2 {
    font-size: clamp(2.4rem, 5vw, 4.3rem);
    line-height: 1.08;
    letter-spacing: -0.045em;

    margin-bottom: 30px;
}

.mission-content p:last-child {
    max-width: 650px;

    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
}

.mission-section .eyebrow {
    color: #8ec9ef;
}

.mission-mark {
    display: grid;
    place-items: center;
}

.mission-mark span {
    width: 220px;
    height: 220px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    color: rgba(255, 255, 255, 0.9);

    font-size: 3.5rem;
    font-weight: 900;
}


/* =========================================================
   HOMEPAGE CONTACT
========================================================= */

.contact-section {
    background: var(--blue-pale);
}

.contact-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.contact-container h2 {
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    line-height: 1.1;

    margin-bottom: 14px;
}

.contact-container p:not(.eyebrow) {
    max-width: 700px;
    color: var(--gray);
}


/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
    padding: 100px 0 120px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(46, 139, 207, 0.13),
            transparent 30%
        ),
        var(--off-white);
}

.contact-page-header {
    max-width: 800px;
    margin-bottom: 60px;
}

.contact-page-header h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.06em;

    color: var(--blue-dark);

    margin-bottom: 25px;
}

.contact-page-header > p:last-child {
    max-width: 700px;

    color: var(--gray);
    font-size: 1.1rem;
}

.contact-page-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: 60px;
    align-items: start;
}

.contact-information {
    padding-top: 15px;
}

.contact-information h2 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.contact-information > p {
    color: var(--gray);
    margin-bottom: 35px;
}

.contact-detail {
    padding: 20px 0;

    border-top: 1px solid var(--border);
}

.contact-detail span {
    display: block;

    color: var(--gray);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    margin-bottom: 5px;
}

.contact-detail a {
    color: var(--blue);
    font-weight: 700;
}

.contact-detail strong {
    color: var(--blue-deep);
}

.contact-form-card {
    padding: 42px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-medium);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;

    color: var(--blue-dark);

    font-size: 0.86rem;
    font-weight: 750;

    margin-bottom: 8px;
}

.form-group input,
.form-group textarea {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--off-white);
    color: var(--dark);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input {
    min-height: 50px;
}

.form-group textarea {
    resize: vertical;
    min-height: 170px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--blue-light);

    box-shadow:
        0 0 0 4px rgba(46, 139, 207, 0.1);
}

.form-submit {
    border: none;
    cursor: pointer;
    width: 100%;
}

.form-messages {
    margin-bottom: 30px;
}

.form-message {
    padding: 16px 20px;

    border-radius: 10px;

    font-weight: 650;
}

.form-message.success {
    background: #e7f6ed;
    color: #1b6a3b;
}

.form-message.warning {
    background: #fff6dd;
    color: #7a5a00;
}

.form-message.error {
    background: #fdeaea;
    color: #9a2929;
}


/* =========================================================
   ALLCARE PAGE
========================================================= */

.allcare-hero {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(46, 139, 207, 0.17),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f8fbfd,
            #eaf5fc
        );
}

.allcare-hero-container {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 70px;
}

.allcare-hero-content h1 {
    max-width: 760px;

    font-size: clamp(3rem, 6vw, 5.4rem);
    line-height: 1;
    letter-spacing: -0.06em;

    color: var(--blue-dark);

    margin-bottom: 28px;
}

.allcare-hero-content h1 span {
    color: var(--blue);
}

.allcare-hero-description {
    max-width: 680px;

    color: var(--gray);
    font-size: 1.15rem;

    margin-bottom: 32px;
}

.allcare-hero-mark {
    display: grid;
    place-items: center;
}

.allcare-circle {
    width: min(360px, 80vw);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border: 1px solid rgba(18, 97, 160, 0.2);
    border-radius: 50%;

    position: relative;
}

.allcare-circle::before {
    content: "";

    position: absolute;

    width: 78%;
    height: 78%;

    border-radius: 50%;

    background: rgba(46, 139, 207, 0.12);
}

.allcare-inner-circle {
    position: relative;
    z-index: 2;

    width: 48%;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);

    color: var(--white);

    font-size: 2.6rem;
    font-weight: 900;

    box-shadow: var(--shadow-large);
}


/* ALLCARE INTRO */

.allcare-intro {
    background: var(--white);
}

.allcare-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.allcare-intro-grid > div:last-child p {
    color: var(--gray);
    margin-bottom: 20px;
}


/* ALLCARE SERVICES */

.allcare-services {
    background: var(--off-white);
}

.allcare-service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.allcare-service-card {
    padding: 28px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.allcare-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-small);
}

.service-number {
    color: var(--blue-light);

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;

    margin-bottom: 18px;
}

.allcare-service-card h3 {
    font-size: 1.2rem;
    line-height: 1.25;

    margin-bottom: 12px;
}

.allcare-service-card p {
    color: var(--gray);
    font-size: 0.92rem;
}


/* ALLCARE WHY */

.allcare-why {
    background: var(--white);
}

.allcare-why-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
}

.allcare-why h2 {
    font-size: clamp(2.5rem, 5vw, 4.1rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.allcare-why-content p {
    color: var(--gray);
    margin-bottom: 22px;
}

.allcare-why-content .large-text {
    color: var(--blue-deep);
}


/* ALLCARE PROCESS */

.allcare-process {
    background: var(--off-white);
}

.allcare-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.process-step {
    padding-top: 25px;

    border-top: 2px solid var(--blue-light);
}

.process-step > span {
    display: block;

    color: var(--blue);

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;

    margin-bottom: 16px;
}

.process-step h3 {
    font-size: 1.2rem;
    line-height: 1.3;

    margin-bottom: 12px;
}

.process-step p {
    color: var(--gray);
    font-size: 0.92rem;
}


/* ALLCARE CTA */

.allcare-cta {
    padding: 90px 0;

    background: var(--blue-dark);
    color: var(--white);
}

.allcare-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.allcare-cta h2 {
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    line-height: 1.05;

    margin-bottom: 15px;
}

.allcare-cta p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.7);
}

.allcare-cta .eyebrow {
    color: #8ec9ef;
}


/* ALLCARE PARENT */

.allcare-parent {
    background: var(--white);
}

.allcare-parent-card {
    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    background: var(--blue-pale);

    border: 1px solid rgba(18, 97, 160, 0.12);
    border-radius: var(--radius-large);
}

.allcare-parent-card h2 {
    max-width: 700px;

    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;

    margin-bottom: 16px;
}

.allcare-parent-card p:not(.eyebrow) {
    max-width: 700px;
    color: var(--gray);
}


/* =========================================================
   BLUE BALLOON PAGE
========================================================= */

.blueballoon-hero {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(46, 139, 207, 0.18),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbfd,
            #edf7fc
        );
}

.blueballoon-hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 70px;
}

.blueballoon-hero-content h1 {
    max-width: 760px;

    font-size: clamp(3rem, 6vw, 5.3rem);
    line-height: 1;
    letter-spacing: -0.06em;

    color: var(--blue-dark);

    margin-bottom: 28px;
}

.blueballoon-hero-content h1 span {
    color: var(--blue);
}

.blueballoon-hero-description {
    max-width: 690px;

    color: var(--gray);
    font-size: 1.15rem;

    margin-bottom: 32px;
}


/* BLUE BALLOON HERO VISUAL */

.blueballoon-hero-visual {
    position: relative;

    min-height: 420px;

    display: grid;
    place-items: center;
}

.balloon-orbit {
    position: absolute;

    border: 1px solid rgba(18, 97, 160, 0.18);
    border-radius: 50%;
}

.balloon-orbit-one {
    width: 320px;
    height: 320px;
}

.balloon-orbit-two {
    width: 400px;
    height: 220px;

    transform: rotate(-25deg);
}

.blue-balloon {
    position: relative;
    z-index: 3;

    width: 190px;
    height: 230px;

    display: grid;
    place-items: center;

    border-radius: 50% 50% 47% 47%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255, 255, 255, 0.7),
            transparent 15%
        ),
        linear-gradient(
            145deg,
            #2e8bcf,
            #1261a0
        );

    color: var(--white);

    font-size: 3rem;
    font-weight: 900;

    box-shadow: var(--shadow-large);

    animation: balloon-float 5s ease-in-out infinite;
}

.blue-balloon::after {
    content: "";

    position: absolute;

    bottom: -12px;

    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 18px solid var(--blue);
}

.balloon-string {
    position: absolute;

    width: 1px;
    height: 105px;

    left: 50%;
    top: 100%;

    background: rgba(7, 26, 43, 0.3);
}

@keyframes balloon-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }
}


/* BLUE BALLOON ABOUT */

.blueballoon-about {
    background: var(--white);
}

.blueballoon-about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.blueballoon-about-grid > div:last-child p {
    color: var(--gray);
    margin-bottom: 20px;
}


/* BLUE BALLOON APPROACH */

.blueballoon-approach {
    background: var(--off-white);
}

.blueballoon-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.blueballoon-approach-card {
    padding: 30px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.blueballoon-approach-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-small);
}

.approach-number {
    color: var(--blue-light);

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;

    margin-bottom: 18px;
}

.blueballoon-approach-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.blueballoon-approach-card p {
    color: var(--gray);
    font-size: 0.92rem;
}


/* BLUE BALLOON CONTENT */

.blueballoon-content {
    background: var(--white);
}

.blueballoon-content-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 90px;
}

.blueballoon-content-grid > div:first-child h2 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.05em;

    margin-bottom: 25px;
}

.blueballoon-content-grid > div:first-child .large-text {
    color: var(--gray);
}

.blueballoon-content-list {
    display: grid;
    gap: 10px;
}

.content-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 22px;

    padding: 22px 0;

    border-bottom: 1px solid var(--border);
}

.content-item > span {
    width: 52px;
    height: 52px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue-pale);
    color: var(--blue);

    font-weight: 850;
    font-size: 0.85rem;
}

.content-item h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.content-item p {
    color: var(--gray);
    font-size: 0.92rem;
}


/* BLUE BALLOON SYMBOL */

.blueballoon-symbol-section {
    padding: 110px 0;

    background: var(--blue-pale);
}

.blueballoon-symbol-card {
    display: grid;
    grid-template-columns: 0.65fr 1.35fr;
    align-items: center;
    gap: 70px;
}

.blueballoon-symbol {
    display: grid;
    place-items: center;
}

.symbol-balloon {
    width: 190px;
    height: 225px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue);

    color: var(--white);

    font-size: 3rem;
    font-weight: 900;

    box-shadow: var(--shadow-large);
}

.blueballoon-symbol-card h2 {
    max-width: 700px;

    font-size: clamp(2.3rem, 5vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -0.05em;

    margin-bottom: 22px;
}

.blueballoon-symbol-card p:not(.eyebrow) {
    max-width: 700px;

    color: var(--gray);

    margin-bottom: 18px;
}


/* BLUE BALLOON FUTURE */

.blueballoon-future {
    background: var(--white);
}

.blueballoon-future-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.future-card {
    padding: 35px;

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    background: var(--off-white);
}

.future-card > span {
    color: var(--blue-light);

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.future-card h3 {
    font-size: 1.35rem;
    margin: 18px 0 10px;
}

.future-card p {
    color: var(--gray);
}


/* BLUE BALLOON CTA */

.blueballoon-cta {
    padding: 90px 0;

    background: var(--blue-dark);
    color: var(--white);
}

.blueballoon-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.blueballoon-cta h2 {
    max-width: 750px;

    font-size: clamp(2.2rem, 4vw, 3.6rem);
    line-height: 1.05;

    margin-bottom: 15px;
}

.blueballoon-cta p:not(.eyebrow) {
    color: rgba(255, 255, 255, 0.7);
}

.blueballoon-cta .eyebrow {
    color: #8ec9ef;
}


/* =========================================================
   ABOUT PAGE
========================================================= */

.about-page-hero {
    padding: 110px 0;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(46, 139, 207, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #f8fbfd,
            #eaf5fc
        );
}

.about-page-hero-container {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 70px;
}

.about-page-hero-content h1 {
    max-width: 800px;

    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.06em;

    color: var(--blue-dark);

    margin-bottom: 28px;
}

.about-page-hero-content h1 span {
    color: var(--blue);
}

.about-page-hero-content > p:last-child {
    max-width: 700px;

    color: var(--gray);
    font-size: 1.15rem;
}

.about-page-mark {
    display: grid;
    place-items: center;
}

.about-mark-circle {
    width: min(360px, 80vw);
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(46, 139, 207, 0.22),
            rgba(18, 97, 160, 0.04) 65%
        );

    border: 1px solid rgba(18, 97, 160, 0.18);
}

.about-mark-circle span {
    width: 48%;
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--blue-dark);

    color: var(--white);

    font-size: 2.8rem;
    font-weight: 900;

    box-shadow: var(--shadow-large);
}


/* ABOUT STORY */

.about-story {
    background: var(--white);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}

.about-story-grid > div:last-child p {
    color: var(--gray);
    margin-bottom: 20px;
}


/* ABOUT PHILOSOPHY */

.about-philosophy {
    background: var(--off-white);
}

.about-philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.philosophy-card {
    padding: 38px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);
}

.philosophy-number {
    color: var(--blue-light);

    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.1em;

    margin-bottom: 20px;
}

.philosophy-card h3 {
    font-size: 1.8rem;
    margin-bottom: 12px;
}

.philosophy-card p {
    color: var(--gray);
}


/* ABOUT COMPANIES */

.about-companies {
    background: var(--white);
}

.about-company-list {
    display: grid;
    gap: 0;
}

.about-company-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 35px;

    padding: 45px 0;

    border-top: 1px solid var(--border);
}

.about-company-number {
    color: var(--blue-light);

    font-size: 0.8rem;
    font-weight: 850;
    letter-spacing: 0.1em;
}

.about-company-content h3 {
    font-size: 1.9rem;
    margin-bottom: 12px;
}

.about-company-content > p:not(.company-type) {
    max-width: 760px;

    color: var(--gray);

    margin-bottom: 20px;
}


/* ABOUT PURPOSE */

.about-purpose {
    padding: 120px 0;

    background: var(--blue-dark);
    color: var(--white);
}

.about-purpose-container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: 80px;
}

.about-purpose-content h2 {
    max-width: 800px;

    font-size: clamp(2.6rem, 5vw, 4.5rem);
    line-height: 1.03;
    letter-spacing: -0.055em;

    margin-bottom: 30px;
}

.about-purpose-content p:not(.eyebrow) {
    max-width: 720px;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 18px;
}

.about-purpose .eyebrow {
    color: #8ec9ef;
}

.about-purpose-mark {
    display: grid;
    place-items: center;
}

.about-purpose-mark span {
    width: 220px;
    height: 220px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;

    font-size: 3.4rem;
    font-weight: 900;
}


/* ABOUT FINAL */

.about-final {
    background: var(--off-white);
}

.about-final-card {
    padding: 55px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 45px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow-small);
}

.about-final-card h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;

    margin-bottom: 14px;
}

.about-final-card p:not(.eyebrow) {
    max-width: 700px;
    color: var(--gray);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 55px 0 25px;

    background: #04131f;
    color: var(--white);
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 40px;

    padding-bottom: 40px;
}

.footer-logo {
    font-size: 1.15rem;
    font-weight: 800;
}

.footer-container p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 1rem;
    margin-top: 4px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);

    font-size: 0.95rem;
    font-weight: 650;
}

.footer-links a:hover {
    color: var(--white);
}

.copyright {
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .section {
        padding: 85px 0;
    }

    .company-grid {
        grid-template-columns: 1fr 1fr;
    }

    .allcare-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .blueballoon-approach-grid {
        grid-template-columns: 1fr 1fr;
    }

    .allcare-process-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .hero-content,
    .allcare-hero-container,
    .blueballoon-hero-container,
    .about-page-hero-container {
        grid-template-columns: 1fr;
    }

    .hero-visual,
    .allcare-hero-mark,
    .blueballoon-hero-visual,
    .about-page-mark {
        margin-top: 20px;
    }

    .about-grid,
    .allcare-intro-grid,
    .allcare-why-grid,
    .blueballoon-about-grid,
    .blueballoon-content-grid,
    .about-story-grid,
    .about-purpose-container {
        grid-template-columns: 1fr;
    }

    .mission-container {
        grid-template-columns: 1fr;
    }

    .mission-mark {
        justify-content: start;
    }

    .contact-page-grid {
        grid-template-columns: 1fr;
    }

    .blueballoon-symbol-card {
        grid-template-columns: 1fr;
    }

    .blueballoon-symbol {
        justify-content: start;
    }

    .future-card {
        padding: 28px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .container {
        width: min(100% - 28px, var(--max-width));
    }

    .section {
        padding: 70px 0;
    }

    .site-header {
        position: relative;
    }

    .nav-container {
        min-height: auto;

        padding: 18px 0;

        flex-direction: column;
        align-items: flex-start;
    }

    .main-nav {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 8px 16px;
    }

    .main-nav a {
        font-size: 0.95rem;
    }

    .hero,
    .allcare-hero,
    .blueballoon-hero,
    .about-page-hero {
        padding: 75px 0;
    }

    .hero-text h1,
    .allcare-hero-content h1,
    .blueballoon-hero-content h1,
    .about-page-hero-content h1 {
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .hero-description,
    .allcare-hero-description,
    .blueballoon-hero-description {
        font-size: 1rem;
    }

    .hero-visual {
        width: 300px;
    }

    .hero-symbol {
        width: 140px;
        height: 140px;

        font-size: 2.4rem;
    }

    .company-grid,
    .allcare-service-grid,
    .blueballoon-approach-grid,
    .allcare-process-grid,
    .blueballoon-future-grid {
        grid-template-columns: 1fr;
    }

    .company-card {
        padding: 28px;
    }

    .mission-section,
    .about-purpose {
        padding: 80px 0;
    }

    .mission-content h2,
    .about-purpose-content h2 {
        font-size: clamp(2.3rem, 11vw, 3.3rem);
    }

    .mission-mark span,
    .about-purpose-mark span {
        width: 160px;
        height: 160px;

        font-size: 2.5rem;
    }

    .contact-container,
    .allcare-cta-container,
    .blueballoon-cta-container,
    .about-final-card,
    .allcare-parent-card,
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-container,
    .allcare-cta-container,
    .blueballoon-cta-container {
        display: flex;
    }

    .contact-form-card {
        padding: 25px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .about-company-item {
        grid-template-columns: 55px 1fr;
        gap: 18px;
    }

    .about-company-content h3 {
        font-size: 1.5rem;
    }

    .about-final-card,
    .allcare-parent-card {
        padding: 30px;
    }

    .blueballoon-hero-visual {
        min-height: 340px;
    }

    .balloon-orbit-one {
        width: 250px;
        height: 250px;
    }

    .balloon-orbit-two {
        width: 300px;
        height: 170px;
    }

    .blue-balloon {
        width: 145px;
        height: 175px;

        font-size: 2.4rem;
    }

    .symbol-balloon {
        width: 150px;
        height: 180px;

        font-size: 2.4rem;
    }

    .content-item {
        grid-template-columns: 52px 1fr;
        gap: 15px;
    }

    .footer-links {
        gap: 15px;
    }
}
/* =========================================================
   2026 HOMEPAGE REFINEMENT — BLUELIST BLUE HOUR
========================================================= */
:root {
    --blue-hour: #0039A6;
    --blue-deep: var(--blue-hour);
    --blue: var(--blue-hour);
}

body { font-size: 1.05rem; }
.button { font-size: 1rem; }
.button-primary { box-shadow: 0 10px 24px rgba(0,57,166,.22); }
.button-primary:hover { background: #002d82; box-shadow: 0 14px 30px rgba(0,57,166,.28); }
.logo { font-size: 1.9rem; }
.logo-subtitle { font-size: .56rem; }
.main-nav a { font-size: 1.05rem; }
.hero-orbit { border-color: rgba(0,57,166,.2); }

.home-hero { min-height: 760px; }
.home-hero .hero-description { font-size: 1.27rem; margin-bottom: 14px; }
.hero-support { max-width: 660px; color: var(--gray); font-size: 1.08rem; margin-bottom: 18px; }
.hero-manifesto { color: var(--blue-dark); font-size: 1.08rem; margin-bottom: 30px; }
.orbit-label { position:absolute; z-index:3; padding:8px 12px; border:1px solid rgba(0,57,166,.14); border-radius:999px; background:rgba(255,255,255,.86); color:var(--blue); font-size:.68rem; font-weight:850; letter-spacing:.13em; box-shadow:var(--shadow-small); }
.orbit-label-one { top:13%; right:8%; }.orbit-label-two { bottom:19%; left:2%; }.orbit-label-three { bottom:5%; right:17%; }
.blue-emphasis { color: var(--blue); }
.story-closing { max-width:900px; margin:54px auto 0; padding-top:32px; border-top:1px solid var(--border); text-align:center; font-size:1.25rem; color:var(--blue-dark); }
.section-heading p:not(.eyebrow) { font-size:1.1rem; }
.eyebrow { font-size:.82rem; }
.large-text { font-size:1.42rem; }
.companies-heading { max-width:880px; }
.flagship-grid { align-items:stretch; }
.company-card { display:flex; flex-direction:column; }
.company-card h3 { font-size:1.62rem; }
.company-card h4 { margin:-4px 0 16px; color:var(--blue-deep); font-size:1.05rem; line-height:1.45; }
.future-company h4 { color:#c9dcff; }
.company-card > p:not(.company-type) { font-size:1rem; flex:1; }
.company-link { margin-top:auto; }
.company-allcare { border-top:4px solid #2e8bcf; }
.company-balloon { border-top:4px solid #76bde8; }
.company-blutrino { border-top:4px solid #8fb4ff; }
.direction-section .mission-content p { margin-bottom:18px; }
.mission-signoff { color:#fff !important; font-size:1.2rem !important; }
.split-editorial { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:start; }
.split-editorial .section-heading { margin-bottom:0; position:sticky; top:40px; }
.editorial-copy p { color:var(--gray); margin-bottom:22px; font-size:1.08rem; }
.editorial-copy .large-text { color:var(--blue-deep); font-size:1.42rem; }
.editorial-punch { color:var(--blue) !important; font-size:1.45rem !important; }
.evolution-section { background:var(--off-white); }
.evolution-card { padding:70px; border-radius:var(--radius-large); background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow-small); }
.evolution-card h2 { max-width:850px; font-size:clamp(2.3rem,4.6vw,4rem); line-height:1.08; letter-spacing:-.045em; margin-bottom:42px; }
.evolution-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; }
.evolution-grid p { color:var(--gray); font-size:1.12rem; }
.evolution-grid p:first-child { color:var(--blue-deep); font-weight:750; font-size:1.28rem; line-height:1.8; }
.evolution-close { margin-top:42px; padding-top:28px; border-top:1px solid var(--border); color:var(--blue-dark); font-size:1.12rem; }
.centered-copy { max-width:900px; text-align:center; }
.centered-copy h2 { font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.08; letter-spacing:-.045em; margin-bottom:24px; }
.centered-copy > p:not(.eyebrow) { max-width:720px; margin:0 auto; color:var(--gray); font-size:1.1rem; }
.next-words { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:34px 0; }
.next-words span { padding:10px 16px; border-radius:999px; background:var(--blue-pale); color:var(--blue); font-weight:800; }
.closing-section { padding:105px 0; background:linear-gradient(135deg,#071a2b,#0039A6); color:#fff; text-align:center; }
.closing-section .eyebrow { color:#a9c7ff; }
.closing-content h2 { font-size:clamp(2.8rem,6vw,5.2rem); line-height:1; letter-spacing:-.055em; margin-bottom:24px; }
.closing-content > p:last-child { max-width:720px; margin:0 auto; color:rgba(255,255,255,.76); font-size:1.15rem; }
.closing-content strong { color:#fff; }

@media (max-width:1000px) {
    .split-editorial { grid-template-columns:1fr; gap:30px; }
    .split-editorial .section-heading { position:static; }
    .evolution-grid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:700px) {
    body { font-size:1rem; }
    .logo { font-size:1.72rem; }
    .main-nav a { font-size:1rem; }
    .home-hero { min-height:auto; }
    .home-hero .hero-description { font-size:1.08rem; }
    .hero-support,.hero-manifesto { font-size:1rem; }
    .hero-visual { width:min(290px,90vw); }
    .orbit-label { font-size:.58rem; }
    .section-heading h2 { font-size:clamp(2.15rem,10vw,3rem); }
    .large-text,.editorial-copy .large-text { font-size:1.25rem; }
    .story-closing { font-size:1.12rem; }
    .evolution-card { padding:32px 24px; }
    .evolution-card h2 { font-size:clamp(2.1rem,10vw,3rem); }
    .closing-section { padding:80px 0; }
}

/* =========================================================
   PRODUCTION ADDITIONS — DASHBOARD + LEGAL
========================================================= */
.legal-hero { min-height: 360px; display: flex; align-items: center; }
.legal-copy { max-width: 860px; }
.legal-copy h2 { margin: 38px 0 10px; color: var(--blue-dark); font-size: 1.55rem; }
.legal-copy p { color: var(--gray); font-size: 1.05rem; }
.legal-copy a { color: var(--blue); font-weight: 750; }

.dashboard-body { background: var(--off-white); }
.dashboard-main { padding: 72px 0 110px; }
.dashboard-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 34px; }
.dashboard-heading h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); letter-spacing: -.045em; line-height: 1; margin-bottom: 12px; }
.dashboard-heading p:not(.eyebrow) { color: var(--gray); }
.dashboard-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px; }
.dashboard-stat { display: block; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: 16px; text-decoration: none; box-shadow: var(--shadow-small); }
.dashboard-stat strong { display: block; color: var(--blue); font-size: 1.7rem; }
.dashboard-stat span { color: var(--gray); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.dashboard-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 28px; }
.dashboard-filter span { font-weight: 800; margin-right: 4px; }
.dashboard-filter a { text-decoration: none; color: var(--blue-deep); background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font-size: .9rem; font-weight: 700; }
.dashboard-filter a.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.inquiry-list { display: grid; gap: 18px; }
.inquiry-card { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px; box-shadow: var(--shadow-small); }
.inquiry-top { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.inquiry-name { font-size: 1.25rem; font-weight: 850; color: var(--blue-dark); margin-bottom: 2px; }
.inquiry-top a { color: var(--blue); text-decoration: none; }
.inquiry-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 18px; color: var(--gray); font-size: .9rem; }
.inquiry-message { padding: 18px; background: var(--off-white); border-radius: 14px; color: var(--dark); }
.status-pill { border-radius: 999px; padding: 7px 11px; font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; background: var(--light-gray); }
.status-new { background: #e9f1ff; color: #0039a6; }.status-contacted { background: #fff4d8; color: #7b5700; }.status-confirmed { background: #e2f7ea; color: #166534; }.status-completed { background: #e8eef4; color: #334155; }.status-cancelled { background: #fce8e8; color: #991b1b; }
.inquiry-actions { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-top: 18px; }
.inquiry-actions form { display: flex; align-items: end; gap: 10px; }
.inquiry-actions label { font-size: .78rem; font-weight: 800; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; }
.inquiry-actions select { min-height: 52px; border: 1px solid var(--border); border-radius: 10px; padding: 0 36px 0 12px; background: #fff; font: inherit; }
.empty-state { text-align: center; padding: 70px 24px; background: #fff; border: 1px dashed var(--border); border-radius: 20px; }
.empty-state p { color: var(--gray); }

@media (max-width: 900px) {
    .dashboard-stats { grid-template-columns: repeat(3, 1fr); }
    .dashboard-heading, .inquiry-actions { align-items: stretch; flex-direction: column; }
}
@media (max-width: 600px) {
    .dashboard-main { padding-top: 42px; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); }
    .inquiry-top { flex-direction: column; }
    .inquiry-actions form { flex-direction: column; align-items: stretch; }
    .inquiry-actions select { width: 100%; }
}