:root{
  --blue:#1588d8; --blue2:#3fa6ec; --gray:#8f9498;
  --bg:#090c0e; --bg2:#0f1316; --panel:#12171b; --line:#2b3338;
  --text:#f5f7f8; --muted:#aab2b7; --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
a{color:inherit}
.container{width:min(calc(100% - 42px),var(--max));margin:auto}
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;padding:24px 0}
.nav-wrap{display:flex;justify-content:flex-end}
.nav{display:flex;gap:34px;align-items:center;text-transform:uppercase;letter-spacing:.17em;font-size:.76rem}
.nav a{text-decoration:none;color:#e9edef}
.nav a:hover,.nav a.active{color:var(--blue2)}
.nav .contact-link{border:1px solid var(--blue);padding:11px 18px}
.menu-toggle{display:none;background:none;border:1px solid #58636b;color:#fff;padding:8px 11px}
.hero{
  min-height:760px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(9,12,14,1) 0%,rgba(9,12,14,.97) 52%,rgba(9,12,14,.55) 74%,rgba(9,12,14,.28) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0 0 0 52%;z-index:-2;
  background:url("hero-architecture.jpg") center/cover no-repeat;
  filter:saturate(.75) contrast(1.05) brightness(.82);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(9,12,14,.9),transparent 29%),
             radial-gradient(circle at 22% 18%,rgba(21,136,216,.08),transparent 22%);
}
.hero-inner{min-height:760px;display:grid;grid-template-columns:72px minmax(0,690px) 1fr;gap:26px;align-items:center;padding-top:70px}
.side-copy{align-self:start;margin-top:145px;text-transform:uppercase;letter-spacing:.33em;font-size:.68rem;color:#bac1c5;line-height:2.55}
.side-copy:after,.right-copy:after{content:"";display:block;width:39px;height:2px;background:var(--blue);margin-top:15px}
.brand-main{text-align:center;max-width:670px}
.brand-main img{display:block;width:190px;margin:0 auto 18px}
.brand-main h1{margin:0;font-size:clamp(3.3rem,7vw,6.4rem);line-height:.9;letter-spacing:.115em;font-weight:700}
.blue-rule{width:64px;height:2px;background:var(--blue);margin:27px auto 18px}
.tagline{text-transform:uppercase;letter-spacing:.38em;font-size:.96rem;line-height:2;margin:0 0 23px}
.hero-copy{max-width:570px;margin:0 auto;color:#d5dadd;font-size:1.08rem}
.hero-actions{margin-top:30px}
.btn{display:inline-block;text-decoration:none;background:var(--blue);border:1px solid var(--blue);padding:14px 28px;color:white;text-transform:uppercase;letter-spacing:.18em;font-weight:700;font-size:.77rem}
.btn:hover{background:#2298e8}
.btn.secondary{background:transparent;border-color:#596269}
.right-copy{justify-self:end;text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;line-height:2.3;color:#bac0c4}
.service-strip{background:#091015;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid var(--line)}
.service-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.service-mini{min-height:190px;padding:28px 18px;text-align:center;position:relative}
.service-mini:not(:last-child):after{content:"";position:absolute;right:0;top:30px;bottom:30px;width:1px;background:#394249}
.icon{color:var(--blue2);font-size:1.55rem;margin-bottom:12px}
.service-mini h3{font-size:.82rem;line-height:1.35;letter-spacing:.07em;text-transform:uppercase;margin:0 0 9px}
.service-mini p{font-size:.82rem;color:var(--muted);margin:0}
.section{padding:84px 0}
.section.alt{background:var(--bg2)}
.kicker{display:inline-block;color:var(--blue2);text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700}
h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.08;margin:10px 0 18px;letter-spacing:-.025em}
.lead{color:var(--muted);max-width:760px;font-size:1.08rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.card{background:var(--panel);border:1px solid var(--line);padding:28px;min-height:215px}
.card h3{margin:0 0 10px;font-size:1.16rem}
.card p{color:var(--muted);margin:0}
.card a{display:inline-block;margin-top:18px;color:var(--blue2);text-decoration:none;font-weight:700}
.page-hero{
  padding:150px 0 72px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(9,12,14,.98),rgba(9,12,14,.75)),url("hero-architecture.jpg") center/cover no-repeat;
}
.page-hero h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.98;letter-spacing:.045em;margin:10px 0 14px}
.page-hero p{max-width:740px;color:#d0d6da}
.service-detail{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;border-top:1px solid var(--line);padding:42px 0}
.service-detail h2{font-size:1.7rem;margin:0}
.service-detail p,.service-detail li{color:var(--muted)}
.service-detail ul{columns:2;padding-left:18px}
.callout{background:#0d171e;border:1px solid #245c7e;padding:34px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px}
form{background:var(--panel);border:1px solid var(--line);padding:30px}
label{display:block;margin:13px 0 6px;font-weight:700;font-size:.9rem}
input,select,textarea{width:100%;padding:13px 14px;background:#090c0e;color:#fff;border:1px solid #3a4349;font:inherit}
textarea{min-height:155px;resize:vertical}
.hp{position:absolute;left:-9999px}
.small{font-size:.84rem;color:var(--muted)}
footer{padding:34px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;letter-spacing:.21em;font-weight:700}
.footer-brand img{width:30px}
.footer-links{display:flex;gap:20px}
.footer-links a{text-decoration:none}
@media(max-width:960px){
  .hero::after{inset:0 0 0 45%}
  .hero-inner{grid-template-columns:1fr;padding-top:125px}
  .side-copy,.right-copy{display:none}
  .brand-main{margin:auto}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .service-mini:nth-child(3):after{display:none}
  .cards{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .menu-toggle{display:block;margin-left:auto}
  .nav{display:none;position:absolute;top:70px;left:20px;right:20px;background:#0a0e11;border:1px solid var(--line);padding:20px;flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .hero{min-height:700px;background:linear-gradient(rgba(9,12,14,.76),rgba(9,12,14,.94))}
  .hero::after{inset:0;opacity:.42}
  .hero-inner{min-height:700px;padding-top:110px}
  .brand-main img{width:145px}
  .brand-main h1{font-size:clamp(2.7rem,14vw,4.5rem);letter-spacing:.075em}
  .tagline{font-size:.77rem;letter-spacing:.27em}
  .service-grid{grid-template-columns:1fr 1fr}
  .service-mini:nth-child(2n):after{display:none}
  .two-col,.contact-grid,.service-detail{grid-template-columns:1fr}
  .service-detail ul{columns:1}
  .cards{grid-template-columns:1fr}
}

/* Hero cleanup: decorative side text removed */
.hero-inner{
  display:flex;
  justify-content:center;
  align-items:center;
}
.brand-main{
  width:min(100%, 760px);
  margin:0 auto;
}

/* Hero composition: brand sits left of center on the dark wall */
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0, 700px) 1fr;
  align-items:center;
  justify-content:initial;
  padding-top:70px;
}
.brand-main{
  width:min(100%, 670px);
  margin:0;
  text-align:center;
  transform:translateX(40px);
}
@media(max-width:960px){
  .hero-inner{
    display:flex;
    justify-content:center;
    padding-top:125px;
  }
  .brand-main{
    margin:0 auto;
    transform:none;
  }
}

/* Final desktop hero placement: move the complete Ironocity brand block left */
@media(min-width:961px){
  .hero-inner{
    grid-template-columns:minmax(0, 650px) 1fr;
  }
  .brand-main{
    margin-left:-35px;
    transform:none;
  }
}

.form-status{display:none;margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);font-size:.9rem}
.form-status.error{display:block;border-color:#8a3b3b;background:#211313;color:#ffd8d8}
.form-status.success{display:block;border-color:#2e6a4a;background:#102018;color:#d8ffe6}