/* ============================================================
   index-copy.html — full-bleed project image slider (no text)
   Modelled on the Revolution Slider used as the hero of
   fc-company/index.html: images only, no captions,
   fade transition, 590px tall and edge to edge on desktop.
   ============================================================ */

.home-slider{position:relative;width:100%;height:590px;overflow:hidden;background:#0b1a30}
.home-slider .home-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity 1.2s ease-in-out}
.home-slider .home-slide.is-active{opacity:1}

/* Transparent welcome bar sitting over the slider */
.home-slider .home-slider-welcome{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;background:linear-gradient(180deg,rgba(11,26,48,0) 0%,rgba(11,26,48,.70) 42%,rgba(11,26,48,.95) 100%)}
.home-slider .home-slider-welcome-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:60px 0 28px}
.home-slider .home-slider-welcome-inner p{margin:0;font-size:clamp(1.15rem,2.3vw,1.8rem);line-height:1.35;font-weight:500;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.home-slider .home-slider-welcome-inner p strong{font-weight:900}
.home-slider .home-slider-welcome-inner .reg-no{font-size:clamp(.88rem,1.15vw,1.08rem);color:#eaf2ff;text-shadow:0 2px 12px rgba(0,0,0,.55)}

@media (max-width:1050px){.home-slider{height:480px}}
@media (max-width:780px){
  .home-slider{height:360px}
  .home-slider .home-slider-welcome-inner{flex-direction:column;align-items:flex-start;gap:8px;padding:44px 0 22px}
  .home-slider .home-slider-welcome-inner .reg-no{white-space:normal}
}
@media (max-width:520px){
  .home-slider{height:280px}
  .home-slider .home-slider-welcome-inner{padding:38px 0 18px}
}

/* Visitors who prefer reduced motion get a single static image */
@media (prefers-reduced-motion:reduce){.home-slider .home-slide{transition:none}}

/* Visually hidden main heading — the slider itself carries no visible text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   Featured projects — real project cards, same treatment as
   portfolio.html (the itts-portfolio-* rules are scoped copies
   of the ones in css/pages/portfolio.css so this page stays
   self-contained).
   ============================================================ */

.itts-portfolio-grid .project-image:before,
.itts-portfolio-grid .project-image:after{display:none}
.itts-portfolio-shot{display:block;width:100%;height:100%}
.itts-portfolio-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .35s ease}
.project:hover .itts-portfolio-shot img{transform:scale(1.04)}
.itts-portfolio-status{display:inline-block;margin:0 0 10px;padding:3px 9px;border-radius:999px;background:#fff1d6;color:#7a4b00;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.itts-portfolio-tech{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.itts-portfolio-tech span{padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:var(--light);color:#4e5c72;font-size:.72rem;font-weight:650}
.itts-portfolio-links{margin-top:14px}
.itts-portfolio-visit{display:inline-flex;gap:6px;color:var(--blue);font-size:.88rem;font-weight:800}
.itts-portfolio-visit:hover{text-decoration:underline}
.itts-portfolio-pending{color:var(--muted);font-size:.85rem;font-weight:600}
.itts-portfolio-count{margin:0 0 26px;text-align:center;color:var(--muted);font-size:.88rem}

/* Contact section */
#contact .contact-grid {
  display: block;
  width: 100%;
}

#contact .contact-info {
  width: 100%;
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid #dce5f5;
  border-radius: 14px;
  background: #fff;
}

#contact .contact-info h3 {
  margin: 0 0 12px;
}

#contact .contact-info > p {
  margin-bottom: 24px;
  line-height: 1.7;
}

/* Display all four contact items horizontally */
#contact .contact-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

#contact .info-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

#contact .info-icon {
  display: flex;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #edf3ff;
  color: #2878ff;
  font-size: 18px;
}

#contact .info-row > div:last-child {
  min-width: 0;
}

#contact .info-row strong {
  display: block;
  margin-bottom: 6px;
  color: #101828;
}

#contact .info-row span {
  display: block;
  color: #526784;
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

#contact .info-row a {
  color: inherit;
  text-decoration: none;
}

#contact .info-row a:hover {
  color: #2878ff;
}

/* Tablet */
@media (max-width: 900px) {
  #contact .contact-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 560px) {
  #contact .contact-info {
    padding: 20px;
  }

  #contact .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}