/*!
 * Maisnes Steel Toolkit — front-end styles
 * One signature detail carries the identity: a short 3px "beam" mark
 * above every section heading, echoing a structural steel member.
 * Everything else stays quiet — flat surfaces, one accent color,
 * generous whitespace — so that mark, and the photography, can lead.
 */

:root{
  --ms-dark: #0B2A4A;
  --ms-light: #2E86C1;
  --ms-tint: #F2F7FB;
  --ms-ink: #1B2733;
  --ms-muted: #66727D;
  --ms-line: #E4E9EF;
  --ms-paper: #FFFFFF;
  --ms-radius: 6px;
  --ms-container: 1180px;
  --ms-font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --ms-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ms-header, .ms-hero, .ms-about, .ms-services, .ms-process, .ms-projects, .ms-cta, .ms-contact, .ms-footer{ box-sizing:border-box; }
.ms-header *, .ms-hero *, .ms-about *, .ms-services *, .ms-process *, .ms-projects *, .ms-cta *, .ms-contact *, .ms-footer *{ box-sizing:inherit; }
.ms-header, .ms-hero, .ms-about, .ms-services, .ms-process, .ms-projects, .ms-cta, .ms-contact, .ms-footer{
  font-family:var(--ms-font-body); color:var(--ms-ink); line-height:1.65; -webkit-font-smoothing:antialiased;
}
.ms-container{ max-width:var(--ms-container); margin:0 auto; padding:0 24px; }

/* Signature mark — one short beam above every heading, everywhere */
.ms-h2::before{
  content:""; display:block; width:38px; height:4px; border-radius:2px;
  background:var(--ms-light); margin-bottom:16px;
}
.ms-h2{
  font-family:var(--ms-font-head); font-weight:700; font-size:clamp(26px, 3.4vw, 38px);
  line-height:1.15; margin:0 0 12px; color:var(--ms-dark);
}
.ms-section-head{ max-width:560px; margin:0 0 46px; }
.ms-section-head p{ color:var(--ms-muted); font-size:16px; margin:0; }
.ms-section-head--light .ms-h2, .ms-section-head--light p{ color:#fff; }
svg{ display:block; width:100%; height:100%; }

/* Buttons */
.ms-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--ms-font-body); font-weight:600; font-size:14.5px;
  padding:13px 26px; border-radius:var(--ms-radius);
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ms-btn svg{ width:15px; height:15px; }
.ms-btn--primary{ background:var(--ms-light); color:#fff; box-shadow:0 1px 2px rgba(11,42,74,.1); }
.ms-btn--primary:hover{ background:#256f9e; box-shadow:0 6px 16px rgba(11,42,74,.28); transform:translateY(-1px); }
.ms-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.ms-btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--ms-dark); }
.ms-btn--lg{ padding:15px 30px; font-size:15.5px; }

/* =========================================================
   HEADER
   =========================================================*/
.ms-header{ position:sticky; top:0; z-index:999; background:var(--ms-paper); transition:box-shadow .2s ease; }

.ms-header__bar{
  background:var(--ms-dark); color:#a9c2d8; font-size:12.5px;
  display:flex; align-items:center; gap:24px; padding:8px 24px;
  max-width:var(--ms-container); margin:0 auto;
}
.ms-header__bar-item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.ms-header__bar-item svg{ width:13px; height:13px; color:var(--ms-light); flex:none; }
.ms-header__bar-item a{ color:#cfe0ef; text-decoration:none; }
.ms-header__bar-item a:hover{ color:#fff; }
.ms-header__bar-item--right{ margin-left:auto; opacity:.85; }
.ms-header__bar-social{ display:flex; width:15px; height:15px; color:#cfe0ef; flex:none; }
.ms-header__bar-social svg{ width:15px; height:15px; }
.ms-header__bar-social:hover{ color:#fff; }

.ms-header__main{
  display:flex; align-items:center; gap:32px;
  max-width:var(--ms-container); margin:0 auto; padding:18px 24px;
  border-bottom:1px solid var(--ms-line);
}
.ms-header__logo{ display:block; flex:none; }
.ms-header__logo img{ display:block; height:42px; width:auto; }
.ms-header__nav{ margin-left:4px; }
.ms-header__menu{ list-style:none; display:flex; gap:32px; margin:0; padding:0; }
.ms-header__menu a{
  position:relative; text-decoration:none; color:var(--ms-ink); font-weight:500; font-size:14.5px;
  padding:8px 0; display:inline-block;
}
.ms-header__menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--ms-light); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.ms-header__menu a:hover{ color:var(--ms-light); }
.ms-header__menu a:hover::after{ transform:scaleX(1); }
.ms-header__actions{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.ms-header__phone{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ms-dark); font-weight:600; font-size:14.5px; }
.ms-header__phone svg{ width:17px; height:17px; color:var(--ms-light); }
.ms-header__phone span{ display:block; }
.ms-header__phone small{ display:block; font-weight:500; font-size:11px; color:var(--ms-muted); }
.ms-header__toggle{ display:none; background:none; border:0; width:30px; height:22px; padding:0; cursor:pointer; flex-direction:column; justify-content:space-between; }
.ms-header__toggle span{ display:block; height:2px; background:var(--ms-dark); border-radius:2px; }

@media (max-width: 1000px){
  .ms-header__bar-item--right{ display:none; }
  .ms-header__phone small{ display:none; }
}
@media (max-width: 900px){
  .ms-header__bar{ display:none; }
  .ms-header__nav{
    position:fixed; inset:0 0 0 auto; width:80%; max-width:320px; height:100vh;
    background:var(--ms-dark); transform:translateX(100%); transition:transform .3s ease;
    padding:90px 28px 30px; margin:0; overflow-y:auto;
  }
  .ms-header__nav.is-open{ transform:translateX(0); }
  .ms-header__menu{ flex-direction:column; gap:2px; }
  .ms-header__menu a{ color:#fff; display:block; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.1); }
  .ms-header__menu a::after{ display:none; }
  .ms-header__actions .ms-btn{ display:none; }
  .ms-header__toggle{ display:flex; }
  .ms-header__actions{ margin-left:auto; gap:14px; }
}
@media (max-width: 480px){ .ms-header__phone span{ display:none; } }

/* =========================================================
   HERO
   =========================================================*/
.ms-hero{ position:relative; background-size:cover; background-position:center; padding:140px 0 120px; }
.ms-hero__overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,42,74,.94) 0%, rgba(11,42,74,.82) 42%, rgba(11,42,74,.5) 100%); }
.ms-hero__content{ position:relative; z-index:1; color:#fff; }
.ms-hero__mark{ display:block; width:46px; height:4px; border-radius:2px; background:var(--ms-light); margin-bottom:24px; }
.ms-hero__title{
  font-family:var(--ms-font-head); font-weight:700;
  font-size:clamp(34px, 5.2vw, 60px); line-height:1.06; max-width:16ch; margin:0 0 20px;
}
.ms-hero__subtitle{ max-width:54ch; font-size:17px; color:#dce7f1; margin:0 0 34px; }
.ms-hero__actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px; }
.ms-hero__stats{ display:flex; gap:0; flex-wrap:wrap; max-width:620px; }
.ms-hero__stat{ padding:20px 36px 0 0; border-top:1px solid rgba(255,255,255,.22); flex:1 1 150px; }
.ms-hero__stat-num{ display:block; font-family:var(--ms-font-head); font-size:32px; font-weight:700; line-height:1; color:#fff; }
.ms-hero__stat-label{ display:block; font-size:12.5px; color:#a9c2d8; margin-top:6px; }

@media (max-width: 640px){ .ms-hero{ padding:110px 0 90px; } }

/* =========================================================
   ABOUT
   =========================================================*/
.ms-about{ padding:96px 0; }
.ms-about__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center; }
.ms-about__media{ position:relative; }
.ms-about__media img{ width:100%; height:auto; display:block; border-radius:var(--ms-radius); position:relative; z-index:1; }
.ms-about__media::after{
  content:""; position:absolute; top:20px; left:20px; right:-20px; bottom:-20px; z-index:0;
  border-radius:var(--ms-radius); background:var(--ms-tint);
}
.ms-about__text{ color:var(--ms-muted); font-size:16px; margin:0 0 26px; }
.ms-about__points{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ms-about__points li{ display:flex; align-items:flex-start; gap:12px; font-weight:500; font-size:14.5px; }
.ms-about__points svg{ width:18px; height:18px; flex:none; color:var(--ms-light); margin-top:2px; }

@media (max-width: 860px){
  .ms-about__grid{ grid-template-columns:1fr; gap:36px; }
  .ms-about__media::after{ display:none; }
}

/* =========================================================
   SERVICES — individual cards, faint plus-pattern, brand gradient edge
   =========================================================*/
.ms-services{ padding:96px 0; background:var(--ms-tint); }
.ms-services__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.ms-service{
  position:relative; overflow:hidden; text-align:center;
  background:#fff; border:1px solid var(--ms-line); border-radius:14px;
  padding:46px 30px 38px;
  box-shadow:0 1px 3px rgba(11,42,74,.06);
  transition:box-shadow .25s ease, transform .25s ease;
}
.ms-service:hover{ box-shadow:0 16px 32px rgba(11,42,74,.14); transform:translateY(-4px); }
.ms-service::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--ms-dark), var(--ms-light));
}
.ms-service::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%230B2A4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ms-service__icon{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:66px; height:66px; margin:0 auto 22px; padding:0;
  background:var(--ms-tint); color:var(--ms-light); border-radius:50%;
  transition:background-color .25s ease, color .25s ease;
}
.ms-service__icon svg{ width:28px; height:28px; }
.ms-service:hover .ms-service__icon{ background:var(--ms-light); color:#fff; }
.ms-service h3{ position:relative; z-index:1; font-family:var(--ms-font-head); font-weight:600; font-size:20px; margin:0 0 8px; color:var(--ms-dark); }
.ms-service p{ position:relative; z-index:1; color:var(--ms-muted); font-size:14.5px; margin:0; }

@media (max-width: 900px){ .ms-services__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 600px){ .ms-services__grid{ grid-template-columns:1fr; } }

/* =========================================================
   PROCESS
   =========================================================*/
.ms-process{ padding:96px 0; background:var(--ms-dark); }
.ms-process__row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; position:relative; }
.ms-process__row::before{
  content:""; position:absolute; top:22px; left:4%; right:4%; height:1px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 7px, transparent 7px 15px);
}
.ms-process__step{ position:relative; }
.ms-process__num{ font-family:var(--ms-font-head); font-size:38px; font-weight:700; color:var(--ms-light); display:block; margin-bottom:12px; background:var(--ms-dark); position:relative; z-index:1; padding-right:8px; width:fit-content; }
.ms-process__step h3{ font-family:var(--ms-font-head); font-weight:600; font-size:19px; color:#fff; margin:0 0 6px; }
.ms-process__step p{ color:#aac2d7; font-size:14px; margin:0; }

@media (max-width: 820px){ .ms-process__row{ grid-template-columns:1fr 1fr; row-gap:40px; } .ms-process__row::before{ display:none; } }
@media (max-width: 520px){ .ms-process__row{ grid-template-columns:1fr; } }

/* =========================================================
   PROJECTS
   =========================================================*/
.ms-projects{ padding:96px 0; }
.ms-projects__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.ms-project{
  position:relative; overflow:hidden; border-radius:var(--ms-radius); aspect-ratio:4/5;
  box-shadow:0 1px 3px rgba(11,42,74,.08); transition:box-shadow .25s ease, transform .25s ease;
}
.ms-project:hover{ box-shadow:0 14px 28px rgba(11,42,74,.18); transform:translateY(-3px); }
.ms-project img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.ms-project:hover img{ transform:scale(1.05); }
.ms-project__caption{
  position:absolute; left:0; right:0; bottom:0; padding:18px;
  background:linear-gradient(to top, rgba(11,42,74,.88), rgba(11,42,74,0) 70%);
  color:#fff;
}
.ms-project__caption span{
  display:inline-block; font-size:11px; font-weight:600; letter-spacing:.3px; color:#0B2A4A;
  background:#fff; padding:3px 9px; border-radius:20px; margin-bottom:8px;
}
.ms-project__caption h3{ font-family:var(--ms-font-head); font-weight:600; font-size:18px; margin:0; }

@media (max-width: 900px){ .ms-projects__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 520px){ .ms-projects__grid{ grid-template-columns:1fr; } .ms-project{ aspect-ratio:16/10; } }

/* =========================================================
   CTA
   =========================================================*/
.ms-cta{ position:relative; background-size:cover; background-position:center; padding:68px 0; }
.ms-cta__overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(11,42,74,.94), rgba(11,42,74,.8)); }
.ms-cta__inner{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.ms-cta__inner h2{ font-family:var(--ms-font-head); font-weight:700; font-size:clamp(24px,3vw,32px); color:#fff; margin:0 0 6px; }
.ms-cta__inner p{ color:#dce7f1; margin:0; max-width:44ch; font-size:15px; }
.ms-cta .ms-btn--primary{ background:#fff; color:var(--ms-dark); }
.ms-cta .ms-btn--primary:hover{ background:var(--ms-light); color:#fff; }

/* =========================================================
   CONTACT
   =========================================================*/
.ms-contact{ padding:96px 0; background:var(--ms-tint); }
.ms-contact__grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; }
.ms-contact__info p{ color:var(--ms-muted); margin:0 0 30px; }
.ms-contact__list{ list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.ms-contact__list li{ display:flex; gap:13px; align-items:flex-start; }
.ms-contact__list svg{ width:18px; height:18px; color:var(--ms-light); flex:none; margin-top:3px; }
.ms-contact__list strong{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--ms-dark); margin-bottom:2px; }
.ms-contact__list span, .ms-contact__list a{ color:var(--ms-muted); text-decoration:none; font-size:14.5px; }
.ms-contact__list a:hover{ color:var(--ms-light); }

.ms-contact__form{ background:#fff; padding:38px; border-radius:var(--ms-radius); box-shadow:0 1px 3px rgba(11,42,74,.06); }
.ms-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ms-form-field{ margin-bottom:18px; }
.ms-form-field label{ display:block; font-size:12.5px; font-weight:600; color:var(--ms-dark); margin-bottom:7px; }
.ms-form-field input, .ms-form-field textarea{
  width:100%; border:1.5px solid var(--ms-line); border-radius:var(--ms-radius); background:#fff;
  padding:10px 13px; font-family:var(--ms-font-body); font-size:14.5px; color:var(--ms-ink);
  transition:border-color .18s ease, box-shadow .18s ease; resize:vertical;
}
.ms-form-field input:focus, .ms-form-field textarea:focus{
  outline:none; border-color:var(--ms-light); box-shadow:0 0 0 3px rgba(46,134,193,.15);
}
.ms-form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ms-form-submit{ width:100%; justify-content:center; position:relative; margin-top:4px; }
.ms-form-submit__spinner{ width:15px; height:15px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; display:none; animation:ms-spin .7s linear infinite; }
.ms-form-submit.is-loading .ms-form-submit__spinner{ display:inline-block; }
.ms-form-submit.is-loading .ms-form-submit__text{ opacity:.7; }
@keyframes ms-spin{ to{ transform:rotate(360deg); } }
.ms-form-status{ margin:14px 0 0; font-size:13.5px; font-weight:600; min-height:18px; }
.ms-form-status.is-success{ color:#1a7d3a; }
.ms-form-status.is-error{ color:#c0392b; }

@media (max-width: 860px){
  .ms-contact__grid{ grid-template-columns:1fr; gap:40px; }
  .ms-form-row{ grid-template-columns:1fr; }
  .ms-contact__form{ padding:26px; }
}

/* =========================================================
   FOOTER
   =========================================================*/
.ms-footer{ position:relative; background:var(--ms-dark); color:#b7cbdd; }
.ms-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ms-light); }
.ms-footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; padding:68px 24px 46px; }
.ms-footer__logo{ height:34px; width:auto; margin-bottom:18px; filter:brightness(0) invert(1); }
.ms-footer__col p{ font-size:14px; line-height:1.75; color:#93aabf; margin:0 0 20px; max-width:34ch; }
.ms-footer__socials{ display:flex; gap:10px; }
.ms-footer__social{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border-radius:50%; color:#fff; text-decoration:none; transition:background-color .18s ease; }
.ms-footer__social svg{ width:15px; height:15px; }
.ms-footer__social:hover{ background:var(--ms-light); }
.ms-footer__col h4{
  font-family:var(--ms-font-head); font-weight:600; font-size:16px; letter-spacing:.3px;
  color:#fff; margin:0 0 20px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.14);
}
.ms-footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ms-footer__col ul a{ color:#93aabf; text-decoration:none; font-size:14px; transition:color .18s ease; }
.ms-footer__col ul a:hover{ color:#fff; }
.ms-footer__col ul li{ font-size:14px; color:#93aabf; }
.ms-footer__contact li{ display:flex; gap:10px; align-items:flex-start; }
.ms-footer__contact svg{ width:15px; height:15px; color:var(--ms-light); flex:none; margin-top:3px; }
.ms-footer__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.ms-footer__bottom-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:18px 24px; font-size:12.5px; color:#75899c; }
.ms-footer__top{ display:inline-flex; align-items:center; gap:7px; color:#93aabf; text-decoration:none; font-weight:500; }
.ms-footer__top svg{ width:13px; height:13px; transform:rotate(-90deg); }
.ms-footer__top:hover{ color:#fff; }

@media (max-width: 900px){ .ms-footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .ms-footer__grid{ grid-template-columns:1fr; } }

/* =========================================================
   SCROLL REVEAL — one restrained, orchestrated effect
   =========================================================*/
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.ms-header.is-scrolled{ box-shadow:0 4px 18px rgba(11,42,74,.1); }