@font-face{font-family:SpaceX;src:url(SpaceX.woff) format("woff");font-weight:100 900;font-style:normal}body{margin:0;font-family:"Futura Light",sans-serif;font-weight:300;color:#1a1a1a}a{color:inherit}
.nav{background:#111;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 64px}
.logo{color:#fff;font-weight:700;font-size:24px;letter-spacing:3px}
.nav nav{display:flex;gap:32px}.nav nav a{color:#fff;text-decoration:none;font-size:15px}
.btn{background:#C9A227;color:#111;font-weight:600;padding:14px 24px;text-decoration:none;display:inline-block;border:0;font-size:15px;font-family:inherit}
.btn.o{background:transparent;color:#fff;border:2px solid #fff;padding:12px 22px}
.ph{background:#5A5A5A;color:#e8e8e8;display:flex;align-items:center;justify-content:center;font-size:13px;letter-spacing:1px;text-align:center}
.card{background:#fff;display:block;text-decoration:none}.tag{background:#e2e2e2;font-size:12px;font-weight:600;padding:4px 8px;color:#111}
.gold{color:#8A6A1A;font-weight:600}.hero{background:#111;color:#fff;padding:56px 64px 64px}.hero p{color:#ccc;margin:8px 0 0;font-size:18px}
.sec{background:#f1f1f1;padding:56px 64px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
h1{margin:0;font-size:56px;line-height:1.05}h2{margin:0 0 24px;font-size:36px}
.pill{background:#fff;border:0;padding:12px 20px;font-weight:600;font-family:inherit;font-size:14px}.pill.on{background:#111;color:#fff}
label{display:block;font-weight:600;margin:16px 0 6px}input,select,textarea{width:100%;box-sizing:border-box;padding:12px;border:1px solid #999;font-family:inherit;font-size:15px;background:#fff}
footer{background:#111;color:#fff;padding:48px 64px;display:flex;justify-content:space-between;gap:32px;font-size:14px;line-height:1.8}footer p{margin:8px 0 0;font-size:16px}
@media(max-width:800px){.g3,.g4{grid-template-columns:1fr}.nav nav{display:none}.nav,.hero,.sec,footer{padding-left:20px;padding-right:20px}h1{font-size:38px}footer{flex-direction:column}}
h1,h2,h3,.logo,.hd{font-family:SpaceX,sans-serif;font-weight:400}
.hero.img{background:linear-gradient(180deg,rgba(17,17,17,.65) 0%,rgba(17,17,17,0) 28%),linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.6) 45%,rgba(17,17,17,.12) 100%),url("https://static.wixstatic.com/media/7f2c44_20741c4d2ab248d8a71cb0bc2cf0878f~mv2.png/v1/fill/w_1920,h_768/file.jpg") center/cover no-repeat;min-height:520px;display:flex;align-items:center;padding-top:120px}
.band{position:relative;isolation:isolate;overflow:hidden;background:#111}
.band::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(rgba(17,17,17,.68),rgba(17,17,17,.68)),url("https://static.wixstatic.com/media/7f2c44_744808afc1dd414597dc3f1ca3f601bc~mv2.jpg/v1/fill/w_1920,h_640,al_c,q_80/file.jpg") center/cover no-repeat;filter:grayscale(1)}
body[data-p="Home"] .nav{position:absolute;top:0;left:0;right:0;z-index:2;background:transparent}
@media(max-width:800px){.hero.img{background:linear-gradient(rgba(17,17,17,.72),rgba(17,17,17,.72)),url("https://static.wixstatic.com/media/7f2c44_20741c4d2ab248d8a71cb0bc2cf0878f~mv2.png/v1/fill/w_1920,h_768/file.jpg") center/cover no-repeat;min-height:0;padding-top:104px}}
h1,h2,.hd{font-family:SpaceX,sans-serif;font-weight:400;text-transform:uppercase}
h3{font-family:"Futura Light",sans-serif;font-weight:500;text-transform:none}
body,input,select,textarea,button{font-family:"Futura Light",sans-serif;font-weight:300}
h3,.nav nav a,.tag,.pill,label,.gold{font-weight:300!important}
.btn{font-weight:400}
@font-face{font-family:"Futura Light";src:url(FuturaLight.woff) format("woff");font-weight:100 900;font-style:normal}
body,input,select,textarea,button,h3{font-family:"Futura Light","Futura Light",sans-serif}

/* ===== Mobile version ===== */
.menu-btn{display:none}
@media(max-width:800px){
body{overflow-x:hidden;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.nav{position:relative;height:64px;padding:0 20px;z-index:10;box-sizing:border-box}
.nav>a.btn{display:none}
.menu-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2px;background:#fff;transition:transform .2s,opacity .2s}
.nav.open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav.open{background:#111!important}
.nav.open nav{display:flex;flex-direction:column;gap:0;position:absolute;top:64px;left:0;right:0;background:#111;padding:4px 20px 20px;border-top:1px solid #2a2a2a;box-shadow:0 12px 24px rgba(0,0,0,.35)}
.nav.open nav a{font-size:18px;padding:16px 0!important;border-bottom:1px solid #2a2a2a!important}
.nav.open nav a[style]{color:#C9A227}
h1{font-size:32px!important;overflow-wrap:break-word}
h2{font-size:26px!important}
.hero{padding:40px 20px 44px}
.hero p{font-size:16px}
.hero.img{padding-top:104px;padding-bottom:56px}
.sec{padding:40px 20px}
.sec p[style]{font-size:16px!important;line-height:1.65!important}
[style*="repeat(3,1fr)"]{grid-template-columns:1fr!important;padding:32px 20px!important;gap:20px!important}
.hd[style]{font-size:30px!important}
[style*="2fr 1fr"],[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;gap:32px!important}
.card[style*="padding:32px"]{padding:20px!important}
ul[style]{font-size:16px!important;line-height:1.8!important}
.band{padding:56px 20px!important}
footer{padding-top:36px;padding-bottom:36px}
input,select,textarea{font-size:16px}
.btn{padding:14px 22px}
}
@media(min-width:520px) and (max-width:800px){.g4{grid-template-columns:1fr 1fr}}
@media(max-width:400px){h1{font-size:28px!important}}


/* ===== Service page hero photos (black and white) ===== */
.hero.bg{position:relative;isolation:isolate;overflow:hidden;padding-top:88px;padding-bottom:88px}
.hero.bg::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(rgba(17,17,17,.62),rgba(17,17,17,.62)),var(--bg) center/cover no-repeat;filter:grayscale(1)}
@media(max-width:800px){.hero.bg{padding-top:56px;padding-bottom:56px}}


/* ===== Fonts: SpaceX (caps) for headings, Futura Light for everything else ===== */
body,input,select,textarea,button,label,a,p,li,span,div,footer,nav{font-family:"Futura Light",sans-serif;font-weight:300}
h1,h2,h3,h4,h5,h6,.hd,.logo{font-family:SpaceX,sans-serif;font-weight:400;text-transform:uppercase}


/* ===== Projects page: project names in Futura Light (as written, in capitals); only the page title stays SpaceX ===== */
body[data-p="Projects"] h3{font-family:"Futura Light",sans-serif;font-weight:300;text-transform:none}


/* ===== Services page cards and Home "What we do" cards: names in Futura Light ===== */
body[data-p="Services"] h3,body[data-p="Home"] a.card h3{font-family:"Futura Light",sans-serif;font-weight:300;text-transform:none}


/* ===== Home "Recent projects" cards: project names in Futura Light (as written) ===== */
body[data-p="Home"] .g3 h3{font-family:"Futura Light",sans-serif;font-weight:300;text-transform:none}


/* ===== About page team photo (greyscale) ===== */
.team-photo{display:block;width:100%;height:auto;filter:grayscale(1)}


/* ===== Home hero photo in greyscale ===== */
.hero.img{position:relative;isolation:isolate;overflow:hidden;background:#111}
.hero.img::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(180deg,rgba(17,17,17,.65) 0%,rgba(17,17,17,0) 28%),linear-gradient(90deg,rgba(17,17,17,.88) 0%,rgba(17,17,17,.6) 45%,rgba(17,17,17,.12) 100%),url("https://static.wixstatic.com/media/7f2c44_20741c4d2ab248d8a71cb0bc2cf0878f~mv2.png/v1/fill/w_1920,h_768/file.jpg") center/cover no-repeat;filter:grayscale(1)}
@media(max-width:800px){.hero.img::before{background:linear-gradient(rgba(17,17,17,.72),rgba(17,17,17,.72)),url("https://static.wixstatic.com/media/7f2c44_20741c4d2ab248d8a71cb0bc2cf0878f~mv2.png/v1/fill/w_1920,h_768/file.jpg") center/cover no-repeat}}


/* ===== Banners: taller and less cropped (zoomed out) ===== */
.hero.bg{min-height:380px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box}
@media(max-width:800px){.hero.bg{min-height:230px}}


/* ===== Service names on Home "What we do" cards and Services cards: Futura Light in capitals, slightly spaced ===== */
body[data-p="Services"] h3,body[data-p="Home"] a.card h3{font-family:"Futura Light",sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:1.5px;line-height:1.3}


/* ===== Capitals only on the page banners; all other SpaceX headings in normal case ===== */
h2,h3,h4,h5,h6,.hd{text-transform:none}
.hero h1{text-transform:uppercase}
body[data-p="Services"] h3,body[data-p="Home"] a.card h3{font-family:SpaceX,sans-serif;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.25}


/* ===== Home hero heading without the flicks, more space below it; slightly bolder service names ===== */
.hero.img h1{text-transform:none;line-height:1.15}
.hero.img h1+p{margin-top:32px}
.hero.img h1+p+div{margin-top:40px!important}
body[data-p="Home"] a.card h3{font-size:20px!important;letter-spacing:.5px}
body[data-p="Services"] h3{font-size:22px!important;letter-spacing:.5px}


/* ===== Home "What we do" service names back to Futura Light ===== */
body[data-p="Home"] a.card h3{font-family:"Futura Light",sans-serif;font-weight:300;text-transform:none;letter-spacing:0;font-size:18px!important;line-height:1.3}


/* ===== Banners: show the whole photo (no cropping) on a blurred greyscale backdrop ===== */
.hero.bg{min-height:420px}
.hero.bg::before{top:0;right:0;bottom:0;left:0;background:var(--bg) center/cover no-repeat;filter:grayscale(1) blur(18px) brightness(.5);transform:scale(1.15)}
.hero.bg::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background:linear-gradient(rgba(17,17,17,.4),rgba(17,17,17,.4)),var(--bg) center/contain no-repeat;filter:grayscale(1)}
@media(max-width:800px){.hero.bg{min-height:240px}}


/* ===== Banners: filled edge to edge (cropped), tuned focus, darker on the text side, greyscale ===== */
.hero.bg{min-height:340px}
.hero.bg::before{top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(17,17,17,.8) 0%,rgba(17,17,17,.52) 55%,rgba(17,17,17,.25) 100%),var(--bg) var(--pos,center 40%)/cover no-repeat;filter:grayscale(1);transform:none}
.hero.bg::after{content:none;display:none}
.hero.bg h1{text-shadow:0 2px 16px rgba(0,0,0,.45)}
@media(max-width:800px){.hero.bg{min-height:220px}.hero.bg::before{background:linear-gradient(rgba(17,17,17,.6),rgba(17,17,17,.6)),var(--bg) var(--pos,center 40%)/cover no-repeat}}


/* ===== Home "What we do" service names: Futura Light, made bolder ===== */
body[data-p="Home"] a.card h3{-webkit-text-stroke:.7px currentColor;paint-order:stroke fill}


/* ===== Home "Recent projects" names: Futura Light, made bolder ===== */
body[data-p="Home"] .g3 h3{-webkit-text-stroke:.7px currentColor;paint-order:stroke fill}


/* ===== Projects page names: Futura Light, made bolder ===== */
body[data-p="Projects"] h3{-webkit-text-stroke:.7px currentColor;paint-order:stroke fill}


/* ===== Footer legal links ===== */
footer>div a{color:inherit;text-decoration:none}
footer>div a:hover{text-decoration:underline}