/* =========================
   home.css
   Styles ONLY for the home page
   ========================= */

/* ------ HEADER ------- */

/* HIDE THE HEADER LOGO ON THE INDEX PAGE */

.header-logo{visibility: hidden;}



/* ---------- HERO ---------- */

.hero-inner {
  display:flex;
  flex-direction: column;
  justify-content:space-between;  
  align-items:left;  
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero-logo img{
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.hero-lead{color:white;}

.home-hero .kicker {
  text-transform: uppercase;
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  font-size: 1.2rem;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.home-hero h1 {
  margin-bottom: 0.75rem;
}



/* ---------- VALUE STRIP ---------- */
.trust {
  padding: clamp(2rem, 4vw, 3rem) 0;

}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
  text-align: center;
  /*-- match this value list to h3 headers */
  font-family: var(--font-headers);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  font-weight:600;

}

.trust-list li {
  opacity: 0.85;
}

/* ---------- SERVICES PREVIEW ---------- */

.services{
    padding:10px 0;
}

.services-title{
    margin: 0 0 20px;
    text-align:left;
}

.services-grid{
    display:flex;
    flex-wrap: wrap;
    gap:clamp(16px, 2vw, 26px);
    justify-content: center;
    padding:24px 0;
}

.service-card{
   flex: 1 1 300px;
   max-width: 380px;

   background: #fff;
   padding:2rem;
   border-radius: 12px;
   box-shadow:0 10px 25px rgba(0,0,0,.08)

}

/* left 50% of service card */
.service-card__art{
    position: relative;
    padding:0;
    margin:0;
    min-height:199px;
    overflow: hidden;
    border-style:outset;
    border:5px solid #3B4B54;
    border-radius:var(--radius-sm);

}

.service-card__art::after{
    content: "";
    position: absolute;
    inset: -50%;            /* oversize so rotation never leaves gaps */
    background: white; /* bar color */
    width: 4%;             /* thickness */
    left: 50%;              /* horizontal placement */
    transform: rotate(45deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 1;
}

.service-card__bg{
  border-radius: 5px;
}

.service-card__icon {
    position: absolute;
    width: 45%;
    height: auto;
    
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);


    z-index: 2;
     /* optional: if you want it to pop */
    /* box-shadow: var(--shadow); */
}

.service-card__title {
    margin:0 0 6px; 
    font-size:18px;
    line-height: 1.05;
    text-transform: uppercase;
    padding-top:10px;
   
}

.service-card__text { 
    margin:0;
    padding-top:5px; 
    color:var(--muted); 
    font-size:14px; 
    line-height: 1.35;
    color:grey;
}

.services-cta {
  margin:20px 0 40px 0;
}

/* ---------- ABOUT US ---------- */
.about-inner{
  
    padding:40px;

    border-radius:var(--radius-md);

    max-width:90%;
    margin-left:auto;
    margin-right:auto;
    
    background-image: url("https://nltx-assets-cdn.b-cdn.net/web/assets/hero-banner-colorful.png");
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
 }

 .about-title { 
    color:white;

}

.about-content{
    color:white;
    line-height:1.65;
    margin-bottom:2.25rem;
}

 .about-cols{
    display:flex;
    justify-content: center;

 }

 .about-cols ul {
    flex: 1 1 50%;
    
    color:white;
    line-height: 1.6;
    column-gap:2.5rem;
    row-gap: 0.75rem;
    padding-top:20px;

 }

 .about-cols li{
    margin-bottom:0.85rem;
 }

.about-cta {
  padding-bottom:20px;
}


/* -----FEATURE CALLOUT--------- */
.feature{margin-top:5rem;}

.feature-inner{
  display:flex;
  flex-wrap:nowrap;
  gap:1.25rem 2rem;

  margin-bottom:2.25rem;
}

.feature-media img{
  border:2px solid var(--text);
  border-radius: var(--radius-md);

}
.feature-copy{flex:70%;}

/* ---------- FINAL CTA ---------- */

.home-cta {
  margin-top:5rem;
  /*---
  background-image: url("https://nltx-assets-cdn.b-cdn.net/web/assets/big-gradient-rectangle.png");
  --- */
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center;
  background-color:#3b4b54;
}

.home-cta-inner {
  /*--
  background: var(--soft);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  --*/
  
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  color:white;
}

.home-cta h2 {
  margin-bottom: 0.5rem;
}

.home-cta p {
  margin-bottom: 1rem;
  opacity: 0.9;
}

.home-cta .about-cta, .cta-row {
  justify-content: center;
}

.cta-row{
  padding-top:20px;
  color:var(--muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .hero-inner,
  .about-inner,
  .feature-inner {
    flex-direction: column;
  }

  .services-grid {
    gap: 0.85rem;
  }

  .home-service-card {
    grid-column: span 12;
  }

  .home-trust-list {
    gap: 0.75rem 1.25rem;
  }
}