:root{
    /* Light theme palette */
    --bg: #EDF2FB; /* page background */
    --surface: #ffffff; /* cards, surfaces */
    --muted: #6b7280; /* secondary text */
    --text: #0f172a; /* primary text */
    --brand: #6CBDE9;
    --brand-2: #87CEEB;
    --brand-3: #BAE0F3;
    --danger: #ef4444;
    --success: #10b981;
    --shadow: 0 10px 30px rgba(108,189,233,0.1);
    --radius: 12px;
    --container: 1120px;
}
*{box-sizing: border-box}
html{
    scroll-behavior: smooth; /* fallback, JS refines */
}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color: var(--text);
    /* soft radial highlight over a light base */
    background: radial-gradient(1200px 800px at 10% -10%, rgba(108,189,233,0.15) 0%, rgba(186,224,243,0.05) 55%) no-repeat, var(--bg);
    line-height: 1.6;
}

/* Containers */
.container{
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
}

/* Skip link */
.skip-link{
    position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
    position: absolute; left: 1rem; top: 1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:#000; border-radius:8px;
}

/* Header */
.site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(2,6,23,0.06);
    transform: translateY(0);
    transition: transform .35s ease;
}
.site-header.hide{
    transform: translateY(-100%);
}
.header-inner{
    display:flex; align-items:center; justify-content: space-between;
    padding: .75rem 0;
}
.brand{display:flex; gap:.6rem; align-items:center; text-decoration: none; color: var(--text);}
.logo{width:28px; height:28px}
.brand-name{font-weight:700; letter-spacing:.4px}

/* Nav */
.nav ul{display:flex; gap: 1rem; align-items:center; list-style:none; margin:0; padding:0}
.nav a{
    color: var(--text);
    text-decoration: none;
    padding: .5rem .75rem;
    border-radius: 8px;
}
.nav a:hover{background: rgba(2,6,23,0.04)}
.nav a.active{background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: var(--text)}
.nav a:hover{background: var(--brand-3)}

/* Mobile nav */
.nav-toggle{
    display:none;
    width:44px; height:44px; border: 1px solid rgba(255,255,255,.12);
    background: transparent; color: var(--text); border-radius:10px;
}
.nav-toggle .bar{display:block; height:2px; background: var(--text); margin:6px 8px}

/* Hero */
.hero{
    position:relative;
    padding: clamp(4rem, 8vw, 8rem) 0 clamp(3rem, 6vw, 6rem);
    overflow:hidden;
}
.hero-inner{
    display:flex;
    align-items:center;
    gap: 2rem;
}
.hero-content{flex: 1}
.hero h1{font-size: clamp(2rem, 4vw, 3rem); line-height:1.1; margin:.2rem 0 .6rem}
.hero p{color: var(--muted); margin: 0 0 1.5rem}
.hero-cta{display:flex; gap:.75rem}
.hero-media{position:static; flex: 1; text-align: right; opacity: 1; transform: none}
.hero-media img{max-width: 100%; width: auto; height: auto; filter:saturate(1.1) contrast(1.05); border-radius: 8px}

/* Buttons */
.btn{
    display:inline-block;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    color: var(--text);
    padding:.7rem 1rem; border-radius: 10px; text-decoration:none; font-weight: 600;
    border: none; cursor:pointer;
    box-shadow: var(--shadow);
}
.btn:hover{filter: brightness(1.08)}
.btn:active{transform: translateY(1px)}
.btn-outline{
    background: transparent; color: var(--text);
    border:1px solid rgba(255,255,255,.2); box-shadow:none;
}
.btn-small{padding:.45rem .7rem; box-shadow:none}

/* Sections */
.section{padding: clamp(3rem, 7vw, 6rem) 0}
.section-alt{background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))}

/* Grid utilities */
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem}
.work-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.25rem}
.card{
    background: var(--surface); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius);
    padding: 1.1rem; box-shadow: var(--shadow);
}
.work-item{
    background: linear-gradient(160deg, rgba(108,189,233,0.15), rgba(135,206,235,0.08));
    border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: 1.1rem;
    min-height: 140px; display:flex; align-items:start;
}
.work-item figcaption h3{ text-align: center; margin-top: 0; }
.work-item figcaption ul{ margin: 0.5rem 0 0; padding-left: 1rem; text-align: left; }
.work-item figcaption li{ margin: 0.35rem 0; }

/* Contact section */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: start;
}

.contact-info {
    position: sticky;
    top: 100px;
}

.contact-meta {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(2,6,23,0.06);
}

.contact-meta p {
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contact-meta i {
    color: var(--brand);
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

/* Forms */
.contact-form {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form-grid{
    display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem;
}
.form-field{display:flex; flex-direction:column; gap:.4rem}
.form-field-full{grid-column: 1 / -1}
label{font-weight:600}
input, textarea{
    /* use surface variable so inputs follow the theme */
    background: var(--surface); color: var(--text); border:1px solid rgba(2,6,23,0.06);
    border-radius: 10px; padding:.7rem .8rem; outline:none;
}
input:focus, textarea:focus{
    border-color: var(--brand);
    box-shadow: 0 6px 18px rgba(37,99,235,0.06);
}
.error{color: var(--danger); min-height: 1em}
.form-actions{display:flex; align-items:center; gap:1rem; margin-top:.5rem}
.form-status{color: var(--muted)}

/* Video Container */
.video-container {
    margin: 2rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--surface);
}

.video-container video {
    display: block;
    border-radius: var(--radius);
}

/* Footer */
.site-footer{
    border-top:1px solid rgba(255,255,255,.08);
    padding: 1.25rem 0; color: var(--muted);
}
.footer-inner{display:flex; justify-content: space-between; align-items: center}
.back-to-top{
    color: var(--text); text-decoration:none; border:1px solid rgba(255,255,255,.2);
    padding:.35rem .5rem; border-radius:8px;
}

/* Responsive */
@media (max-width: 900px){
    .grid-3, .work-grid{grid-template-columns: 1fr 1fr}
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .contact-info {
        position: static;
    }
}
@media (max-width: 680px){
    .nav-toggle{display:block}
    .nav{position:absolute; right:1rem; top:64px; background: rgba(15,17,23,.95); border:1px solid rgba(255,255,255,.08); border-radius: 12px; display:none}
    .nav.open{display:block}
    .nav ul{flex-direction:column; align-items:stretch; padding:.5rem}
    .nav a{padding:.6rem .8rem}
    .hero-inner{flex-direction: column; gap: 1.25rem}
    .hero-media{display:block; margin-top: 1rem; text-align:center}
    .hero-media img{max-width:100%; height:auto}
    .grid-3, .work-grid{grid-template-columns: 1fr}
    .form-grid{grid-template-columns: 1fr}
}