/* BuildingLI production-safe front page styles */

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

section[id]{
  scroll-margin-top:110px;
}

body{
  background:#eef0f3;
}

.wrap{
  max-width:1360px;
  margin:0 auto;
  padding:0 14px;
}

.bli-page{
  padding-bottom:32px;
}

.bli-header-tools{
  padding-top:12px;
}

.bli-mobile-nav{
  display:block;
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .28s ease, opacity .18s ease, margin-top .18s ease;
  margin-top:0;
}

body.bli-mobile-nav-open .bli-mobile-nav{
  max-height:360px;
  opacity:1;
  margin-top:12px;
}

.bli-mobile-nav-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.bli-mobile-nav-col{
  display:grid;
  gap:8px;
}

.bli-mobile-link{
  min-height:40px;
  padding:0 12px;
  border:1px solid #d9dee5;
  border-radius:12px;
  background:#fff;
  color:#183a63;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:800;
  box-shadow:0 3px 8px rgba(15,23,32,.03);
}

.bli-mobile-link.social{
  font-size:12px;
  color:#3e4c5f;
}

/* ===== MERCI ROW ===== */

.merci-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3px;
  margin-top:12px;
  margin-bottom:5px;
}

.merci-btn{
  min-width:0;
  min-height:28px;
  height:28px;
  padding:3px 2px;
  border:1px solid #c8d3df;
  border-radius:14px;
  background:
    radial-gradient(130% 100% at 50% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 22%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#f8fbfe 0%,#eef3f8 55%,#e5edf5 100%);
  color:#304559;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none !important;
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.92),
    inset 0 -8px 12px rgba(146,165,186,.18),
    0 1px 3px rgba(15,23,32,.03);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .45s ease;
  overflow:hidden;
  box-sizing:border-box;
}

.merci-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.92),
    inset 0 -8px 12px rgba(146,165,186,.18),
    0 6px 14px rgba(15,23,32,.06);
  border-color:#b7c4d2;
}

.merci-btn .word{
  display:block;
  width:100%;
  font-size:clamp(9px,2vw,12px);
  font-weight:800;
  white-space:nowrap;
  text-align:center;
  line-height:1;
  letter-spacing:-0.01em;
  color:#40556c;
  text-decoration:none !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.95),
    0 -1px 0 rgba(83,101,121,.18);
}

.merci-btn.intake{
  background:
    radial-gradient(120% 95% at 50% 12%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg,#c55a4d 0%,#b5483a 100%);
  border-color:#9e3f34;
  color:#fff;
}

.merci-btn.intake .word{
  font-size:clamp(8.5px,1.9vw,11px);
  color:#fff6f2;
  letter-spacing:-0.015em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.18),
    0 -1px 0 rgba(96,35,27,.34);
}

.merci-btn.intake .word .line2{
  display:block;
}

.merci-row.merci-awake .merci-btn{
  animation:merciWake .5s ease forwards;
}

.merci-row.merci-awake .merci-btn:nth-child(1){
  animation-delay:.00s;
}

.merci-row.merci-awake .merci-btn:nth-child(2){
  animation-delay:.08s;
}

.merci-row.merci-awake .merci-btn:nth-child(3){
  animation-delay:.16s;
}

.merci-row.merci-awake .merci-btn:nth-child(4){
  animation-delay:.24s;
}

.merci-row.merci-awake .merci-btn:nth-child(5){
  animation-delay:.32s;
}

@keyframes merciWake{
  0%{
    transform:translateY(0);
    box-shadow:
      inset 0 2px 5px rgba(255,255,255,.92),
      inset 0 -8px 12px rgba(146,165,186,.18),
      0 1px 3px rgba(15,23,32,.03);
  }
  45%{
    transform:translateY(-4px);
    box-shadow:
      inset 0 2px 5px rgba(255,255,255,.92),
      inset 0 -8px 12px rgba(146,165,186,.18),
      0 10px 18px rgba(15,23,32,.10);
  }
  100%{
    transform:translateY(0);
    box-shadow:
      inset 0 2px 5px rgba(255,255,255,.92),
      inset 0 -8px 12px rgba(146,165,186,.18),
      0 1px 3px rgba(15,23,32,.03);
  }
}

/* ===== HERO ===== */

.bli-hero-shell{
  padding:0 0 4px;
}

.bli-hero{
  background:linear-gradient(135deg,#183a63,#244a77);
  padding:26px 20px 28px;
  border-radius:22px;
  color:#fff;
  box-shadow:0 10px 24px rgba(15,23,32,.08);
  transform-origin:top center;
  transform:scaleY(.78);
  opacity:0;
  transition:transform .8s cubic-bezier(.22,.61,.36,1), opacity .6s ease;
}

.bli-hero.hero-expanded{
  transform:scaleY(1);
  opacity:1;
}

.bli-hero h1{
  margin:0 0 10px;
  text-align:left;
  font-size:28px;
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.04em;
  color:#fff;
}

.hero-label,
.hero-line,
.bli-hero p,
.bli-actions{
  opacity:0;
  transform:translateY(16px);
}

.hero-visible .hero-label{
  animation:fadeUp .45s ease forwards;
}

.hero-visible .line-1{
  animation:fadeUp .55s ease forwards;
  animation-delay:.12s;
}

.hero-visible .line-2{
  animation:fadeUp .55s ease forwards;
  animation-delay:.28s;
}

.hero-visible .line-3{
  animation:fadeUp .55s ease forwards;
  animation-delay:.44s;
}

.hero-visible .bli-hero p,
.hero-visible p{
  animation:fadeUp .55s ease forwards;
  animation-delay:.62s;
}

.hero-visible .bli-actions{
  animation:fadeUp .55s ease forwards;
  animation-delay:.82s;
}

.hero-sweep .hero-line{
  position:relative;
}

.hero-sweep .hero-line::after{
  content:"";
  position:absolute;
  top:-6%;
  bottom:-6%;
  left:-35%;
  width:28%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.58),rgba(255,255,255,0));
  transform:skewX(-18deg);
  filter:blur(1px);
  pointer-events:none;
}

.hero-sweep .line-1::after{
  animation:shineSweep 1.2s ease forwards;
  animation-delay:1.12s;
}

.hero-sweep .line-2::after{
  animation:shineSweep 1.2s ease forwards;
  animation-delay:1.30s;
}

.hero-sweep .line-3::after{
  animation:shineSweep 1.2s ease forwards;
  animation-delay:1.48s;
}

@keyframes shineSweep{
  0%{
    left:-35%;
    opacity:0;
  }
  20%{
    opacity:1;
  }
  100%{
    left:120%;
    opacity:0;
  }
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-label{
  font-size:14px;
  letter-spacing:.22em;
  font-weight:900;
  color:#d6dde6;
  display:block;
  margin-bottom:6px;
}

.metal-gold{
  background:linear-gradient(180deg,#f6e7a8 0%,#d8b35a 46%,#8b6a22 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.12),0 2px 8px rgba(0,0,0,.18);
}

.metal-silver{
  background:linear-gradient(180deg,#f3f4f6 0%,#c8ccd2 46%,#707887 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.16);
}

.metal-bronze{
  background:linear-gradient(180deg,#f0d1b1 0%,#b97a45 46%,#6f4728 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.16);
}

.bli-hero p{
  margin:0 0 16px;
  max-width:980px;
  text-align:left;
  color:#dbe5f2;
  font-size:15px;
  line-height:1.52;
}

.bli-actions{
  display:flex;
  gap:12px;
  justify-content:flex-start;
  flex-wrap:wrap;
}

.bli-btn{
  min-height:42px;
  padding:0 15px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.bli-btn-gold{
  color:#1b2430;
  background:#d8b353;
}

.bli-btn-red{
  color:#fff;
  background:#c75445;
}

/* ===== CONTENT ===== */

.content-pad{
  padding:16px 0 28px;
}

.bli-section{
  padding:18px 0 0;
}

.bli-section-head{
  margin:0 0 14px;
  border:1px solid #dfe4ea;
  border-radius:16px;
  padding:16px 16px 14px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:0 2px 8px rgba(15,23,32,.05);
}

.bli-section-head h2{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.14;
  color:#202833;
  letter-spacing:-.03em;
}

.bli-section-head p,
.bli-section-head,
.bli-notice{
  color:#6f7a86;
  line-height:1.55;
  font-size:16px;
}

#maintenance .bli-section-head{
  border-top:4px solid #4e7d62;
  background:linear-gradient(180deg,#f3f8f5,#eaf3ed);
}

#emergency .bli-section-head{
  border-top:4px solid #c75445;
  background:linear-gradient(180deg,#fff5f3,#fdecea);
}

#response .bli-section-head{
  border-top:4px solid #4f78b3;
  background:linear-gradient(180deg,#f2f6fd,#e8f0fb);
}

#construction .bli-section-head{
  border-top:4px solid #8b6a22;
  background:linear-gradient(180deg,#fff9f2,#f7eddc);
}

#contact .bli-section-head{
  border-top:4px solid #9e3f34;
  background:linear-gradient(180deg,#fff5f4,#fbe7e5);
}

.bli-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-items:stretch;
}

.bli-card{
  min-height:148px;
  border:1px solid #dfe4ea;
  border-radius:14px;
  padding:16px 14px 14px;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,32,.05);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.bli-card.maintenance{
  border-top:4px solid #4e7d62;
}

.bli-card.emergency{
  border-top:4px solid #c75445;
}

.bli-card.response{
  border-top:4px solid #4f78b3;
}

.bli-card.construction{
  border-top:4px solid #8b6a22;
}

.bli-card h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.2;
  color:#24303d;
  letter-spacing:-.015em;
}

.bli-card p{
  margin:0;
  color:#7b8592;
  line-height:1.62;
  font-size:15px;
}

.bli-notice{
  margin-top:14px;
  border:1px solid #dfe4ea;
  background:#f8fafc;
  border-radius:14px;
  padding:14px 16px;
}

.bli-two-col{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:14px;
}

.bli-panel{
  border:1px solid #dfe4ea;
  border-radius:14px;
  padding:16px;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,32,.05);
}

.bli-panel h3{
  margin:0 0 10px;
  font-size:18px;
  color:#24303d;
}

.bli-panel ul{
  margin:0;
  padding-left:18px;
  color:#7b8592;
  line-height:1.75;
}

.footer-note{
  padding:18px 0 0;
  color:#7b8592;
  font-size:14px;
}

/* ===== BREAKPOINTS ===== */

@media (min-width:760px){
  .bli-cards{
    grid-template-columns:1fr 1fr;
  }

  .bli-two-col{
    grid-template-columns:1fr 1fr;
  }

  .bli-hero{
    padding:30px 24px 30px;
  }

  .bli-hero h1{
    font-size:31px;
    line-height:1.08;
  }
}

@media (min-width:1180px){
  .bli-mobile-nav{
    display:none !important;
  }

  .merci-row{
    gap:4px;
  }

  .merci-btn{
    min-height:28px;
    height:28px;
  }

  .merci-btn .word{
    font-size:12px;
    letter-spacing:0;
  }

  .merci-btn.intake .word{
    font-size:11px;
  }

  .bli-hero{
    padding:36px 30px 38px;
  }

  .bli-hero h1{
    font-size:40px;
    line-height:1.03;
  }

  .bli-hero p{
    font-size:17px;
  }

  .bli-cards{
    grid-template-columns:1fr 1fr 1fr;
    gap:16px;
  }
}