
:root{--accent:#EAB308}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#0b1220;color:#fff;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.section{max-width:72rem;margin:0 auto;padding:0 1rem}
/* Header */
header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);background:rgba(0,0,0,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:72rem;margin:0 auto;padding:1rem}
.brand{font-weight:900;letter-spacing:-.02em;text-decoration:none;;color:var(--accent);font-size:1.35rem}
.nav{display:none;gap:1.25rem}
.nav a{color:rgba(255,255,255,.8);text-decoration:none}
.nav a:hover{color:#fff}
@media(min-width:768px){.nav{display:flex}}
.btn{border-radius:1rem;padding:.6rem 1.2rem;font-weight:700;display:inline-block;text-decoration:none}
.btn-primary{background:var(--accent);color:#111}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:#fff;background:transparent}
/* Full-bleed Hero */
.hero-full{position:relative;min-height:72vh;background:url('assets/hero.jpg') center/cover no-repeat fixed}
.hero-full::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.3))}
.hero-inner{position:relative;padding:5rem 0}
.hero-copy{max-width:46rem}
.kicker{letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72);margin:0 0 .5rem}
.h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;letter-spacing:-.02em;margin:.3rem 0 0}
.lead{color:rgba(255,255,255,.78);line-height:1.6}
.quick-cta{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.pill{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);margin-top:.75rem}
/* Feature Row */
.feature-row{display:grid;gap:1rem;margin:2rem auto}
@media(min-width:900px){.feature-row{grid-template-columns:repeat(3,1fr)}}
.feature{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:1rem}
.feature .icon{font-size:1.6rem;line-height:1}
.feature h3{margin:.5rem 0;font-weight:800}
/* Project Grid */
.h2{font-size:1.8rem;font-weight:900;margin:0 0 .5rem}
.project-grid{display:grid;gap:1rem;margin-top:.75rem}
@media(min-width:900px){.project-grid{grid-template-columns:repeat(3,1fr)}}
.project{position:relative;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff}
.project img{width:100%;height:14rem;object-fit:cover;display:block;transition:transform .3s ease}
.project span{position:absolute;left:.75rem;bottom:.6rem;background:rgba(0,0,0,.55);padding:.35rem .6rem;border-radius:.5rem;font-weight:700}
.project:hover img{transform:scale(1.03)}
/* Forms */
.form{display:grid;gap:.75rem;max-width:42rem;margin:0 auto}
.input, .select, .textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:.8rem;padding:.7rem .9rem}
.textarea{min-height:140px;resize:vertical}
.row{display:grid;gap:.75rem}
@media(min-width:800px){.row{grid-template-columns:1fr 1fr}}
/* Galleries */
.gallery{display:grid;gap:.75rem}
@media(min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery img{width:100%;height:12rem;object-fit:cover;border-radius:.75rem;border:1px solid rgba(255,255,255,.12)}
/* CTA Band & Dividers */
.cta-band{background:var(--accent);color:#111;margin:2.5rem 0}
.cta-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 0;text-align:center}
.cta-inner h3{font-weight:900;font-size:1.15rem;margin:0}
@media(min-width:900px){.cta-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 0;text-align:center}}
.hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:2rem 0}
/* Frames on subpages */
.frame{border:1px solid rgba(255,255,255,.12);border-radius:1.25rem;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.35)}
.cover{width:100%;height:100%;object-fit:cover}
/* Footer */
footer{border-top:1px solid rgba(255,255,255,.1);padding:2rem 0;margin-top:3rem;text-align:center;color:rgba(255,255,255,.65)}


/* Hero side image card (desktop) */
.hero-layout{display:grid;gap:1.5rem;align-items:center}
@media(min-width:1024px){
  .hero-layout{grid-template-columns:1.2fr 1fr}
}
.hero-media{display:none}
@media(min-width:1024px){
  .hero-media{display:block}
}
.hero-card{position:relative;border-radius:1.25rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.hero-card img{display:block;width:100%;height:24rem;object-fit:cover}



/* Inline image next to headline */
.headline-row{display:grid;gap:1rem;align-items:center;margin:.25rem 0 0}
.mini-hero-card{display:none}
@media(min-width:768px){
  .headline-row{grid-template-columns:1fr 18rem}
  .mini-hero-card{display:block;border:1px solid rgba(255,255,255,.15);border-radius:1rem;overflow:hidden;
    box-shadow:0 14px 40px rgba(0,0,0,.45);height:11rem}
  .mini-hero-card img{width:100%;height:100%;object-fit:cover;display:block}
}


/* Large hero media on the right (desktop) */
.hero-layout{display:grid;gap:1.5rem;align-items:center}
@media(min-width:1024px){
  .hero-layout{grid-template-columns:1.15fr 1fr}
}
.hero-media{display:none}
@media(min-width:1024px){
  .hero-media{display:block;justify-self:end;width:100%}
}
.hero-card{position:relative;border-radius:1.25rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);box-shadow:0 24px 60px rgba(0,0,0,.48)}
.hero-card img{display:block;width:100%;height:28rem;object-fit:cover}
@media(min-width:1280px){ .hero-card img{height:34rem} }

@media(min-width:768px){.brand{font-size:1.6rem}}
@media(min-width:1024px){.brand{font-size:1.8rem}}

.cta-inner .btn{padding:.55rem 1rem}

/* Contact Two-Column Layout */
.contact-layout{display:grid;gap:1.25rem;overflow:visible}
@media(min-width:980px){
  .contact-layout{grid-template-columns:1.1fr 1fr;align-items:start;overflow:visible}
  .contact-copy{padding-right:1rem}
}

/* Sidebar cards */
.sidebar .card{margin:0 0 .9rem}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.badge{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  padding:.35rem .55rem;border-radius:.55rem;font-weight:700}

/* Mini gallery in sidebar */
.gallery.mini{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr);margin-top:.5rem}
.gallery.mini img{width:100%;height:4rem;object-fit:cover;border-radius:.5rem;border:1px solid rgba(255,255,255,.12)}

/* Push contact sidebar to the viewport right edge */
@media(min-width:1024px){
  .sidebar-edge{ margin-right: calc(50% - 50vw); }
}

/* Push contact sidebar to viewport right using transform */
@media(min-width:1024px){
  .contact-layout{overflow:visible;overflow:visible}
  .sidebar-edge{transform:translateX(calc(50vw - 50% + 1rem));}
}

@media(min-width:1024px){
  .form-edge{ transform: translateX(calc(50vw - 50% + 1rem)); }
  .sidebar-edge{ transform:none; margin-right:0; } /* ensure sidebar stays within container on left */
}


/* v7 additions */
/* Lightbox */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999}
.lb-overlay.open{display:flex}
.lb-overlay img{max-width:92vw;max-height:92vh;border-radius:.5rem;border:1px solid rgba(255,255,255,.2)}
.lb-close{position:absolute;top:1rem;right:1rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);
  color:#fff;border-radius:.5rem;padding:.35rem .55rem;cursor:pointer}

/* Sticky mobile call bar */
.callbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:.5rem;justify-content:center;align-items:center;
  padding:.6rem;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);z-index:9998}
.callbar a{border-radius:.7rem;padding:.6rem 1rem;font-weight:800;text-decoration:none}
.callbar .btn-call{background:#EAB308;color:#111}
.callbar .btn-email{border:1px solid rgba(255,255,255,.25);color:#fff}
@media(min-width:768px){.callbar{display:none}}

/* Footer license line */
.footer-meta{color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.35rem}


/* v7a: ensure dropdown options render black text for readability */
.select option { color:#111 !important; background:#fff !important; }
.select optgroup { color:#111 !important; background:#fff !important; }
/* (Optional) When the select itself is focused, ensure contrast if the UA uses select styles */
.select:focus { color:#111; background:rgba(255,255,255,.95); }


/* v7b: make header Contact link gold */
.nav a.nav-contact{ color:var(--accent) !important; font-weight:800 }
.nav a.nav-contact:hover{ color:var(--accent) !important; opacity:.9 }
