body{
    margin:0;
    
}
[hidden]{
    display:none!important;
    
}
img{
    max-width:100%;
    
}

:root{
  --bg:#f6f8fa; 
  --surface:#ffffff; 
  --fg:#17212b; 
  --muted:#56616d; 
  --line:#d9e0e6;
  --brand:#0b4f8a; 
  --brand-2:#0f8fb3;
  --tint:#e7f1f8; 
  --warn:#8a5a00; 
  --warn-bg:#fff4dc;
  --display:"Barlow","Arial Narrow",Arial,sans-serif; 
  --body:"Source Sans 3","Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f151b; --surface:#161f27; --fg:#e4eaf0; --muted:#9aa7b3; --line:#2a3642;
  --brand:#6fb3ec; --brand-2:#4fc3e0; --tint:#18293a; --warn:#f0c46b; --warn-bg:#2d2412; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f151b; --surface:#161f27; --fg:#e4eaf0; --muted:#9aa7b3; --line:#2a3642;
  --brand:#6fb3ec; --brand-2:#4fc3e0; --tint:#18293a; --warn:#f0c46b; --warn-bg:#2d2412; color-scheme:dark}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:var(--brand)}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{max-width:1080px;margin:0 auto;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.logo{margin-right:auto;display:block;line-height:0}
.logo img{height:46px;width:auto;max-width:70vw}
/* header stays white in both themes so the logo keeps its contrast */
header{background:#fff;border-bottom-color:#d9e0e6}
header nav a{color:#17212b}
header nav a.on{color:#0b4f8a}
header .cta{background:#0b4f8a;color:#fff!important}


/* Mobile navigation */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid #d8e0e7;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #0b3d6b;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.menu-toggle.active span:first-child {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:last-child {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
    header .bar {
        position: relative;
        flex-wrap: wrap;
    }

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    header .bar nav {
        display: none;
        position: absolute;
        top: calc(100% + 0px);
        left: 0;
        right: 0;
        z-index: 1000;
        gap: 0;
        padding: 12px;
        background: #fff;
        height: calc(100vh - 110px);
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }

    header .bar nav.open {
        display: flex;
    }

    header .bar nav a {
        display: block;
        width: 100%;
        padding: 13px 14px;
        border-radius: 6px;
        text-decoration: none;
    }

    header .bar nav a:hover,
    header .bar nav a.on {
        background: #f0f5f8;
    }

    header .bar nav a.cta {
        margin-top: 8px;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle span {
        transition: none;
    }
}


main {
    min-height: calc(100vh - 263px);
}

/* HERO: background photo → 50% white wash → animated network canvas → text */
.hero{position:relative;overflow:hidden;background:#dfe8ef url("../images/hero-bg.jpg") center/cover no-repeat;color:#17212b}
.hero-wash{position:absolute;inset:0;background:rgba(255,255,255,.5)}
#networkCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-in{position:relative;max-width:1080px;margin:0 auto;padding:0 16px;padding-block:clamp(56px,10vw,120px);display:grid;gap:18px}
.hero h1{color:#0b3d6b;max-width:20ch}
.hero .lead{color:#26394a;max-width:58ch}
.hero .eyebrow{color:#0a7896}
.hero .btn{border-color:#0b4f8a;color:#0b4f8a;background:rgba(255,255,255,.75)}
.hero .btn.p{background:#0b4f8a;color:#fff}
nav{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center}
nav a{text-decoration:none;color:var(--fg);font-weight:600;font-size:15px}
nav a.on{color:var(--brand);text-decoration:underline;text-underline-offset:5px}
.cta{background:var(--brand);color:var(--surface)!important;padding:7px 14px;border-radius:4px}
main{max-width:1080px;margin:0 auto;padding:0 16px;padding-block:28px 60px}
section.page>*+*{margin-top:18px}
h1,h2,h3{font-family:var(--display);line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,5vw,44px);color:var(--brand)}
h2{font-size:26px;color:var(--brand);padding-top:22px;border-top:1px solid var(--line);margin-top:34px!important}
h3{font-size:19px;color:var(--fg)}
p{margin:0;max-width:68ch}
.main-block h1 {
    margin-top:18px;
}
.lead{font-size:20px;color:var(--muted);max-width:62ch; margin-top:18px;}
.eyebrow{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2)}
ul{margin:0;padding-left:20px}
li+li{margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:18px;min-width:0}
.box>*+*{margin-top:8px}
.box a.more{font-weight:600;text-decoration:none}
.box i {
    font-size: 26px;
    margin-bottom: 12px;
    color: #0b4f8a;
}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.steps li{counter-increment:s;background:var(--tint);border-radius:6px;padding:14px;margin:0}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-weight:700;font-size:22px;color:var(--brand)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chips li{margin:0;background:var(--tint);color:var(--fg);padding:5px 12px;border-radius:20px;font-size:15px}
.note{background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:12px 14px;font-size:15px;max-width:none}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:10px 18px;border-radius:4px;font-weight:600;text-decoration:none;border:1px solid var(--brand);color:var(--brand)}
.btn.p{background:var(--brand);color:var(--surface)}
.meta{display:grid;grid-template-columns:max-content 1fr;gap:2px 12px;font-size:15px}
.meta dt{color:var(--muted)} .meta dd{margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{font:inherit;font-size:15px;padding:6px 14px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
.filters button.on{background:var(--brand);color:var(--surface);border-color:var(--brand)}
.ph{
    background:var(--tint);
    color:var(--muted);
    /*border:2px dashed var(--line);*/
    border-radius:4px;
    aspect-ratio:16/9;
    max-width:100%;
    display:grid;
    place-items:center;
    text-align:center;
    padding:0;
    box-sizing:border-box;
    font-size:14px;
    font-weight:600
}
.ph.wide{aspect-ratio:21/8}
.ph img {
    max-width: 100%;
    object-fit: cover;
    height: 100%;
}
/*.ph::before{content:"IMAGE PLACEHOLDER";display:block;font-family:var(--display);font-size:11px;letter-spacing:.14em;color:var(--brand-2);margin-bottom:4px}*/
form{display:grid;gap:14px;max-width:680px}
label{display:grid;gap:4px;font-weight:600;font-size:15px}
input,select,textarea{font:inherit;font-weight:400;padding:9px 11px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg);width:100%;box-sizing:border-box}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px}
footer{border-top:1px solid var(--line);background:var(--surface)}
footer .in{max-width:1080px;margin:0 auto;padding:24px 16px;font-size:14px;color:var(--muted);display:grid;gap:10px}


.project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

/* Other tabs: 2 cards per row */
.project-grid.two-columns {
    grid-template-columns: repeat(2, minmax(0, 2fr));
    gap: 24px;
}
@media(max-width: 992px){
    .project-grid ,
    .project-grid.two-columns {
        grid-template-columns: repeat(2, minmax(0, 12fr));
    }
}
@media(max-width: 576px){
    .project-grid ,
    .project-grid.two-columns {
        grid-template-columns: repeat(1, minmax(0, 12fr));
    }
    .hero-in {
        text-align: center;
    }
    .btns {
        justify-content: center;
    }
}