/* ==========================================================================
   Jupiter AI Solutions — Editorial Enterprise Design
   Creative direction: restraint, typography, asymmetric structure
   ========================================================================== */

:root {
    /* Brand palette */
    --navy: #081B3A;
    --navy-secondary: #102A54;
    --orange: #FF6B1A;
    --bg: #FAFBFD;
    --dark: #061327;
    --text: #111827;
    --gray: #6B7280;
    --white: #ffffff;

    /* Derived */
    --line: rgba(17, 24, 39, 0.1);
    --line-light: rgba(255, 255, 255, 0.1);
    --line-on-dark: rgba(255, 255, 255, 0.08);

    /* Semantic aliases */
    --ink: var(--text);
    --ink-muted: var(--gray);
    --paper: var(--bg);
    --paper-warm: var(--bg);
    --ink-soft: var(--navy-secondary);
    --accent: var(--orange);

    --font-heading: 'Space Grotesk', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-nav: 'Manrope', system-ui, sans-serif;
    --font-button: 'Inter', system-ui, sans-serif;
    --track-tight: -0.035em;
    --track-heading: -0.03em;
    --track-body: -0.011em;
    --track-eyebrow: 0.16em;
    --track-nav: 0.04em;
    --track-button: 0.02em;
    --heading-xl: clamp(3.25rem, 5vw + 2.5rem, 6.875rem);
    --heading-lg: clamp(2.75rem, 3.5vw + 1.25rem, 5rem);
    --heading-md: clamp(2rem, 2.5vw + 1rem, 3.75rem);
    --heading-sm: clamp(1.375rem, 1.5vw + 0.75rem, 2rem);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 88px;
    --header-h-scrolled: 72px;
    --header-float-y: 1.25rem;
    --header-float-y-scrolled: 0.75rem;
    --header-gutter: clamp(0.875rem, 2.5vw, 2rem);
    --header-pad-x: clamp(1.25rem, 2.5vw, 2rem);
    --max: 1240px;
    --space: clamp(1.25rem, 4vw, 2.5rem);

    /* Spacing scale */
    --space-xs: 12px;
    --space-sm: 20px;
    --space-md: 32px;
    --space-lg: 48px;
    --space-xl: 64px;
    --space-2xl: 80px;
    --space-3xl: 100px;
    --space-handoff: 50px;

    /* Section vertical rhythm */
    --section-py-mobile: 60px;
    --section-py-medium: 80px;
    --section-py-large: 100px;
    --section-py-cta: 120px;
}

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: var(--track-body);
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--space);
}

/* ---- Typography system ---- */
.eyebrow {
    font-family: var(--font-nav);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 1.25rem;
}

.eyebrow--light { color: rgba(255, 255, 255, 0.45); }

.display-lg {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: var(--track-tight);
    color: var(--ink);
}

.display-lg--light { color: var(--white); }

.display-md {
    font-family: var(--font-heading);
    font-size: var(--heading-lg);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: var(--track-heading);
    color: var(--ink);
    text-wrap: balance;
}

.display-md--light { color: var(--white); }

/* Section headings — stay within a two-line rhythm */
.section :is(
    .hero-headline,
    h2.display-md,
    h2[class*="__title"],
    h2.why-quote,
    .about-split__headline
) {
    text-wrap: balance;
    line-height: 1.08;
    max-width: 22em;
}

.section-head--wide :is(h2.display-md, h2[class*="__title"]) {
    max-width: 26em;
}

.section-lede {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    letter-spacing: var(--track-body);
    color: var(--ink-muted);
    max-width: 22rem;
}

.section-head { margin-bottom: var(--space-xl); max-width: 100%; }

.section-head--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: end;
}

@media (min-width: 768px) {
    .section-head--split {
        grid-template-columns: 1.2fr 0.8fr;
    }
}

.section-foot { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--line); }

/* ---- Link actions (not pill buttons) ---- */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-button);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: var(--track-button);
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.2rem;
    transition: color 0.25s, border-color 0.25s, opacity 0.25s;
}

.link-action:hover { color: var(--orange); border-color: var(--orange); }

.link-action--light {
    color: var(--white);
    border-color: rgba(255,255,255,0.4);
}

.link-action--light:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.link-action--primary {
    color: var(--orange);
    border-color: var(--orange);
}

.link-action--primary:hover {
    opacity: 0.75;
}

.link-action--large {
    font-size: 1.0625rem;
    padding-bottom: 0.35rem;
}

.link-action--small {
    font-size: 0.8125rem;
}

.link-action--nav {
    font-size: 0.875rem;
    color: var(--white);
    border-color: rgba(255,255,255,0.35);
}

.link-action--nav:hover {
    color: var(--white);
    border-color: var(--white);
}

.link-action--submit {
    margin-top: 0.5rem;
    background: none;
    cursor: pointer;
}

/* Legacy btn support for subpages */
.btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-button);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: var(--track-button);
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ink);
    transition: color 0.25s, border-color 0.25s;
}

.btn-primary { color: var(--orange); border-color: var(--orange); }
.btn-primary:hover { color: var(--orange); border-color: var(--orange); opacity: 0.85; }
.btn-outline { color: var(--ink); border-color: var(--ink); }
.btn-outline-light { color: var(--white); border-color: rgba(255,255,255,0.4); }
.btn-sm { font-size: 0.875rem; }
.btn-lg { font-size: 1rem; }
.btn-full { width: auto; }

.section {
    position: relative;
    padding-top: var(--section-py-medium);
    padding-bottom: var(--section-py-medium);
}

.section--large {
    padding-top: var(--section-py-large);
    padding-bottom: var(--section-py-large);
}

.section--cta {
    padding-top: var(--section-py-cta);
    padding-bottom: var(--section-py-cta);
}

@media (max-width: 767px) {
    .section,
    .section--large,
    .section--cta {
        padding-top: var(--section-py-mobile);
        padding-bottom: var(--section-py-mobile);
    }
}

/* ---- Header + Hero → assets/css/header-hero.css ---- */

/* Enterprise photography — brand-grade cinematic treatment */
.photo-crop {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(0.88) contrast(1.08) brightness(0.92);
}

.photo-crop img,
picture .photo-crop {
    filter: saturate(0.88) contrast(1.08) brightness(0.92);
}

/* Navy brand overlay on photo containers */
.hero-photo-frame,
.about-visual__main,
.svc-card__media,
.case-showcase__media,
.industry-showcase__photo,
.ct-office-card__media,
.abt-exist__frame,
.abt-hero__visual,
.abt-mission__visual,
.abt-vision__visual,
.svc-detail-hero__visual,
.cs-hero__frame,
.car-hero__visual,
.car-culture__photo,
.contact-convert__photo {
    position: relative;
    overflow: hidden;
}

.hero-photo-frame::after,
.about-visual__main::after,
.svc-card__media::after,
.case-showcase__media::after,
.industry-showcase__photo::after,
.svc-detail-hero__visual::after,
.cs-hero__frame::after,
.car-hero__visual::after,
.contact-convert__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        rgba(8, 27, 58, 0.35),
        rgba(8, 27, 58, 0.35)
    );
    z-index: 1;
}

.hero-photo-frame img,
.hero-photo-frame picture,
.about-visual__main img,
.svc-card__media img,
.case-showcase__media img {
    position: relative;
    z-index: 0;
}

.photo-crop--hero { object-position: 50% 35%; }
.photo-crop--about { object-position: 50% 35%; }
.photo-crop--about-accent { object-position: 55% 40%; }
.photo-crop--case-featured { object-position: 48% 28%; }
.photo-crop--case-security { object-position: 42% 35%; }
.photo-crop--case-cloud { object-position: 55% 30%; }
.photo-crop--careers { object-position: 50% 40%; }
.photo-crop--case-featured-alt { object-position: 60% 25%; }
.photo-crop--service-ai { object-position: 50% 30%; }
.photo-crop--service-cloud { object-position: 55% 35%; }
.photo-crop--service-app { object-position: 48% 32%; }
.photo-crop--service-security { object-position: 42% 28%; }
.photo-crop--service-data { object-position: 60% 25%; }
.photo-crop--service-integration { object-position: 50% 38%; }
.photo-crop--service-consulting { object-position: 55% 30%; }
.photo-crop--service-managed { object-position: 45% 40%; }
.photo-crop--process-discover { object-position: 50% 35%; }
.photo-crop--process-design { object-position: 48% 32%; }
.photo-crop--process-develop { object-position: 50% 30%; }
.photo-crop--process-deploy { object-position: 55% 35%; }
.photo-crop--process-optimize { object-position: 52% 28%; }
.photo-crop--process-scale { object-position: 50% 38%; }
.photo-crop--case-healthcare { object-position: 52% 22%; }
.photo-crop--case-finance { object-position: 50% 18%; }
.photo-crop--case-manufacturing { object-position: 50% 40%; }
.photo-crop--case-cybersecurity { object-position: 50% 35%; }
.photo-crop--case-cloud-platform { object-position: 55% 28%; }

.cases-card__media .photo-crop {
    filter: saturate(0.86) contrast(1.1) brightness(0.9);
}
.about-stack .photo-crop {
    min-height: 100%;
    filter: saturate(0.86) contrast(1.08) brightness(0.9);
}

.magazine__feature-media .photo-crop,
.case-detail-image .photo-crop {
    width: 100%;
    height: 100%;
    min-height: inherit;
    filter: saturate(0.86) contrast(1.1) brightness(0.9);
}

.case-detail-layout--text {
    grid-template-columns: 1fr !important;
    max-width: 40rem;
}

.case-detail-layout--text .case-detail-copy {
    max-width: none;
}

/* ---- Homepage section layouts → assets/css/sections.css ---- */

/* ---- Shared form fields (contact) ---- */
.field { margin-bottom: 1.5rem; }

.field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1.25rem;
}

@media (min-width: 640px) {
    .field-row { grid-template-columns: 1fr 1fr; }
}

.field label {
    display: block;
    font-family: var(--font-nav);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 0.5rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    transition: border-color 0.2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--navy);
}

.field textarea { resize: vertical; min-height: 120px; }

/* ---- Subpages ---- */
.page-hero {
    padding: calc(var(--header-h) + var(--header-float-y) + 4rem) 0 4rem;
    background: var(--dark);
    color: var(--white);
}

.page-hero h1 {
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: var(--track-tight);
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.5);
    max-width: 32rem;
}

.page-section { padding-top: var(--section-py-medium); padding-bottom: var(--section-py-medium); }

@media (max-width: 767px) {
    .page-section { padding-top: var(--section-py-mobile); padding-bottom: var(--section-py-mobile); }
}

.careers-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
    .careers-grid { grid-template-columns: 1fr 1fr; }
}

.career-card {
    padding: 2rem 0;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
    .career-card:nth-child(odd) { padding-right: 2rem; }
    .career-card:nth-child(even) { padding-left: 2rem; border-left: 1px solid var(--line); }
}

.career-card h3 {
    font-family: var(--font-heading);
    font-size: var(--heading-sm);
    font-weight: 500;
    letter-spacing: var(--track-heading);
    margin-bottom: 0.5rem;
}

.career-meta {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    margin-bottom: 0.75rem;
}

.career-card p {
    font-size: 0.9375rem;
    color: var(--ink-muted);
    margin-bottom: 1.25rem;
    line-height: 1.65;
}

.service-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
    .service-detail { grid-template-columns: 200px 1fr; gap: 3rem; }
}

.service-detail h2 {
    font-family: var(--font-heading);
    font-size: var(--heading-sm);
    font-weight: 500;
    letter-spacing: var(--track-heading);
    margin-bottom: 1rem;
}

.service-detail p {
    font-size: 0.9375rem;
    color: var(--ink-muted);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.service-features span {
    font-size: 0.8125rem;
    color: var(--ink-muted);
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--line);
}

.case-detail {
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--line-light);
}

.case-detail-copy h2 {
    font-family: var(--font-heading);
    font-size: var(--heading-md);
    font-weight: 500;
    letter-spacing: var(--track-heading);
    margin: 0.75rem 0 2rem;
    color: var(--white);
}

.case-detail-block h3 {
    font-family: var(--font-nav);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.5rem;
}

.case-detail-block {
    margin-bottom: 1.75rem;
}

.case-detail-block p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.5);
    max-width: 32rem;
}

.section-contact:first-child,
main > .section-contact {
    padding-top: calc(var(--header-h) + var(--header-float-y) + 3rem);
}


.case-detail-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .case-detail-layout { grid-template-columns: 1fr 1fr; }
}

.case-detail-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--ink-soft);
}

.case-detail-image img,
.case-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-placeholder {
    background: linear-gradient(145deg, var(--navy-secondary), var(--dark));
}

.alert-success {
    padding: 1rem 0;
    font-size: 0.9375rem;
    color: var(--ink-muted);
    border-bottom: 1px solid var(--line);
    margin-bottom: 2rem;
}

/* Legacy class aliases for subpages */
.section-label {
    font-family: var(--font-nav);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--track-eyebrow);
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--heading-lg);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: var(--track-heading);
}

.section-dark { background: var(--dark); color: var(--white); }
.section-intro { margin-bottom: var(--space-lg); }
.section-desc { font-size: 1rem; color: var(--ink-muted); margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}