:root {
    --bg: #eef3f8;
    --panel: #ffffff;
    --panel-alt: #eef6fb; /* slightly darker for contrast */
    --line: #bfcfe0;     /* stronger border color */
    --text: #1b2430;
    --muted: #495864;
    --primary: #0e4a8a;
    --shadow: rgba(18, 35, 54, 0.12); /* stronger shadow for depth */
}

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

html, body {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #eef3f8;
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px 28px;
    flex: 1;
}

.company-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 10px 30px var(--shadow);
    padding: 18px 22px;
}

.header-logo {
    width: 140px;
    height: auto;
    flex-shrink: 0;
}

.company-info h1 {
    margin: 0 0 10px;
    font-size: clamp(1.6rem, 2vw, 2.4rem);
    line-height: 1.2;
    color: var(--text);
}

.company-info address {
    margin: 0;
    font-style: normal;
    color: var(--muted);
    line-height: 1.6;
    font-size: 1rem;
}

.company-info a {
    color: var(--primary);
    text-decoration: none;
}

.company-info a:hover {
    text-decoration: underline;
}

/* Header nav */
.header-nav{margin-left:auto;display:flex;gap:16px;align-items:center}
.header-nav a{color:#000;text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;background:rgba(14,74,138,0.16)}
.header-nav a:hover{background:rgba(14,74,138,0.26);color:#000}

@media (max-width:700px){.header-nav{margin-top:10px;flex-wrap:wrap;justify-content:center}}

/* Independent top navigation (outside header) */
.top-nav{display:flex;justify-content:flex-end;gap:18px;margin:18px 0 10px}
.top-nav a{color:#000;text-decoration:none;padding:8px 14px;border-radius:8px;font-weight:600;background:rgba(14,74,138,0.16)}
.top-nav a:hover{background:rgba(14,74,138,0.26);color:#000}

@media (max-width:700px){.top-nav{justify-content:center;flex-wrap:wrap;gap:12px}}

.services-container {
    margin-top: 18px;
}

.section-title {
    margin: 0 0 18px;
    font-size: clamp(1.8rem, 2.4vw, 2.7rem);
    text-align: center;
    color: var(--text);
}

 .services-grid {
     display: grid;
     /* standardize column sizing so cards appear the same across pages */
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     grid-auto-rows: 1fr;
     gap: 24px;
     max-width: 1080px; /* keeps grid width consistent inside .page-wrapper */
     margin: 0 auto;
     align-items: stretch;
 }

/* Contact page: make company details column narrower and message column wider */
.contact-page .services-grid{
    grid-template-columns: 360px minmax(420px, 1fr);
    align-items:start;
}

@media (max-width:900px){
    .contact-page .services-grid{grid-template-columns:1fr}
}

/* Make contact page cards equal height and make form fields fill the message card */
.contact-page .services-grid{align-items:stretch}
.contact-page .service-card{height:100%;display:flex;flex-direction:column}
.contact-page .service-card .card-body{display:flex;flex-direction:column}
.contact-page .card-body .contact-form{display:flex;flex-direction:column;flex:1;gap:12px}
.contact-form .form-group{display:flex;flex-direction:column}
.contact-form .form-group input,
.contact-form .form-group textarea{
    width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--text)
}
/* Let the large message textarea expand to fill remaining vertical space */
#message{flex:1;min-height:160px;resize:vertical}

/* Ensure buttons stay at the bottom */
.contact-form .button-group{margin-top:auto;display:flex;gap:12px}

.service-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 35px rgba(16, 37, 58, 0.09);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(180deg, #e8f3fb 0%, #dfeaf6 100%);
    border-bottom: 1px solid rgba(27,36,48,0.08);
}

.window-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.dot.red { background: #eb6b5d; }
.dot.yellow { background: #f0c453; }
.dot.green { background: #64ba72; }

.window-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text);
    text-align: center;
    flex: 1;
    font-weight: 600;
}

.projects-page .service-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px 20px;
}

.projects-page .project-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.projects-page .project-copy h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1.4;
}

.projects-page .project-copy p {
    margin: 0;
    line-height: 1.7;
}

.projects-page .project-copy p + p {
    margin-top: 12px;
}

.projects-hero-image {
    display: block;
    width: 100%;
    max-width: none;
    height: 320px;
    object-fit: cover;
    object-position: center;
    background: #dfeaf6;
    border: 1px solid rgba(27,36,48,0.08);
    border-radius: 12px;
    margin: 0;
    box-shadow: 0 8px 22px rgba(16, 37, 58, 0.08);
}

@media (max-width: 900px) {
    .projects-page .projects-hero-image {
        height: 220px;
    }
}

.card-body {
    padding: 18px 20px 20px;
    color: var(--muted);
    text-align: left;
    display: flex;
    flex: 1;
}

.projects-page .card-body.project-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 18px 20px 20px;
}

.card-body p {
    text-align: left;
    line-height: 1.7;
    margin: 0;
    word-spacing: normal;
}

.service-card:first-child .card-body p {
    text-align: left;
    word-spacing: normal;
    hyphens: auto;
}

.card-body p + p {
    margin-top: 12px;
}

.card-body ul {
    margin: 0;
    padding-left: 1.3rem;
    line-height: 1.8;
    width: 100%;
}

.card-body li + li {
    margin-top: 4px;
}

.card-media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    min-height: 240px;
    padding: 18px 20px 18px;
    background: var(--panel-alt);
    border-top: 1px solid rgba(27,36,48,0.04);
}

.card-media-placeholder img {
    display: block;
    margin: 0 auto;
    max-height: 220px;
    object-fit: contain;
    border-radius: 12px;
}
/* Watermark: centered image (SXIC_LogIn_transparent.png) */
.page-wrapper{position:relative;z-index:1}
body::before{
    content:"";
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) rotate(0deg);
    width:100vmin;
    height:100vmin;
    background-image:url("SXIC_LogIn_transparent.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:0.14;
    pointer-events:none;
    user-select:none;
    z-index:0;
}

@media (max-width:900px){
    body::before{width:64vmin;height:64vmin;opacity:0.10;transform:translate(-50%,-50%) rotate(0deg)}
}

@media (max-width:480px){
    body::before{width:48vmin;height:48vmin;opacity:0.08;transform:translate(-50%,-50%) rotate(0deg)}
}

@media print{body::before{display:none}}

/* Footer */
footer{
    margin-top:0;
    padding:14px 0;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--muted);
    font-size:0.95rem;
    background:#dfeaf6;
    border-top:1px solid rgba(27,36,48,0.08);
}
footer a{color:var(--primary);text-decoration:none}
footer a:hover{text-decoration:underline}

/* Cookie consent banner */
#cookie-consent-banner{
    position:fixed;left:0;right:0;top:18px;display:none;justify-content:center;z-index:9999;padding:12px 16px}
#cookie-consent-banner .cc-inner{max-width:1100px;background:rgba(255,255,255,0.98);border:1px solid rgba(27,36,48,0.06);box-shadow:0 8px 24px rgba(16,37,58,0.08);padding:14px;border-radius:12px;display:flex;gap:12px;align-items:center}
#cookie-consent-banner .cc-text{color:var(--text);font-size:0.95rem;flex:1}
#cookie-consent-banner .cc-actions{display:flex;gap:10px}
.cc-btn{padding:8px 12px;border-radius:8px;border:1px solid rgba(27,36,48,0.08);background:#fff;cursor:pointer;font-weight:600}
.cc-accept{background:var(--primary);color:#fff;border:none}
.cc-reject{background:transparent;color:var(--text)}

@media (max-width:680px){#cookie-consent-banner .cc-inner{flex-direction:column;align-items:stretch}}

/* Cookie settings floating button */
.cookie-settings-btn{position:fixed;left:18px;bottom:18px;z-index:9999;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid rgba(27,36,48,0.06);box-shadow:0 8px 20px rgba(16,37,58,0.06);cursor:pointer;font-weight:600}
.cookie-settings-btn:hover{box-shadow:0 10px 28px rgba(16,37,58,0.08)}

@media (max-width:480px){.cookie-settings-btn{left:10px;bottom:10px;padding:7px 8px;font-size:0.9rem}}

@media (max-width: 700px) {
    .company-header {
        flex-direction: column;
        text-align: center;
    }

    .header-logo {
        width: 110px;
    }

    .page-wrapper {
        padding-left: 14px;
        padding-right: 14px;
    }
}

a:focus {
    outline: 3px solid rgba(14, 74, 138, 0.15);
    outline-offset: 2px;
}

@media print {
    body {
        background: rgb(101, 125, 161);
        color: black;
    }

    .company-header,
    .service-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}