/* Simple responsive styles for Class Metal landing page */
:root{
  --accent:#CE2124;
  --dark:#2B2A29;
  --bg:#f7f7f8;
  --maxw:1000px;
  --band-height:48px; /* default band height reserve */
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:#222; background:var(--bg); line-height:1.5}
.container{max-width:var(--maxw); margin:0 auto; padding:2rem}
.site-header{background:var(--dark); color:#fff; padding:0}
.site-header h1{margin:0; font-size:1.25rem; letter-spacing:0.5px}
.tagline{margin:0.25rem 0 0; color:#d1d5db; font-size:0.9rem}
.cta{display:inline-block; background:var(--accent); color:#fff; padding:0.45rem 0.9rem; border-radius:6px; text-decoration:none}
.header-inner{display:flex; align-items:center; justify-content:space-between}
.hero-section{position:relative; margin-top:1rem}
/* Desktop: overlay text on image */
@media (min-width:768px) {
  .hero-content-wrapper{position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; color:#fff; z-index:20}
  .hero-image img{filter:brightness(0.45)}
  .hero-section:hover .hero-image img{transform:scale(1.02)}
}
/* Mobile: dark band above image */
@media (max-width:767px) {
  .hero-content-wrapper{background:var(--dark); padding:1.5rem 0; color:#fff}
  .hero-image{margin-top:0}
  .hero-content{padding:0}
}
.hero-image img{width:100%; height:420px; object-fit:cover; display:block; transition:transform .6s ease}
.hero-content{max-width:680px}
.hero-content h1{font-size:2rem; margin:0 0 0.5rem; line-height:1.1}
.hero-content .sub{color:#f3f4f6; margin-bottom:1rem}
.hero-ctas{display:flex; gap:0.75rem}
.cta.primary{background:var(--accent); color:#fff}
.cta.secondary{background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.12)}

/* Large centered logo header */
.header-biglogo{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.5rem; padding:2.25rem 0 1rem}
.logo-wrap{width:60%; max-width:760px}
.logo.large{width:100%; height:auto; display:block}

.brand-band{background:var(--accent); color:#fff}
.band-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0}
.band-tagline{margin:0; color:#fff; font-weight:600}
.band-cta{background:#fff; color:var(--accent); padding:0.5rem 1rem; border-radius:6px; text-decoration:none; font-weight:600}

/* Band layout: content + actions */
.band-inner .band-content{flex:1}
.band-inner .band-actions{flex:0 0 auto}
.band-inner .band-actions .band-cta{display:inline-block}

@media (max-width:640px){
  .band-inner{flex-direction:column; align-items:center; text-align:center}
  .band-inner .band-actions{margin-top:0.5rem}
}
.intro h2, .services h2, .why h2, .contact h2{margin-top:0}

/* Enhanced About section styling */
.intro { 
  padding: 4rem 0;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

.intro-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
}

.intro-header h2 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
  color: var(--dark);
  position: relative;
  display: inline-block;
}

.intro-header h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin: 1rem auto 0;
  border-radius: 2px;
}

.intro-lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #444;
  margin: 0;
}

.intro-highlight {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  padding: 1.5rem;
  background: rgba(206,33,36,0.03);
  border-radius: 12px;
}

.intro-highlight p {
  margin: 0;
  color: var(--dark);
  font-size: 1.1rem;
}

.intro-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Special layout for services section with 4 items */
.services-alt .intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

/* Make the 4th item span all three columns and center it */
.services-alt .intro-col:nth-child(4) {
  grid-column: 1 / -1;
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .services-alt .intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-alt .intro-col:nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 650px) {
  .services-alt .intro-grid {
    grid-template-columns: 1fr;
  }
  
  .services-alt .intro-col:nth-child(4) {
    grid-column: 1;
    max-width: none;
  }
}

.intro-card {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(43,42,41,0.08);
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intro-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(43,42,41,0.12);
}

.intro-icon {
  width: 64px;
  height: 64px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: #fff;
}

.intro-col h3 { 
  color: var(--dark);
  margin: 0 0 1rem;
  font-size: 1.4rem;
  text-align: center;
}

.intro-col p {
  color: #444;
  line-height: 1.6;
  margin: 0;
}

.intro-col ul { 
  list-style: none;
  padding: 0;
  margin: 0;
}

.intro-col ul li { 
  position: relative;
  margin-bottom: 1rem;
  padding-left: 2rem;
  color: #444;
}

.intro-col ul li::before { 
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
}

@media (max-width: 768px) {
  .intro { padding: 3rem 0; }
  .intro-header h2 { font-size: 1.8rem; }
  .intro-lead { font-size: 1.1rem; }
  .intro-highlight { margin-bottom: 2rem; }
  .intro-grid { gap: 1.5rem; }
}

@media (max-width: 480px) {
  .intro { padding: 2rem 0; }
  .intro-header h2 { font-size: 1.5rem; }
  .intro-lead { font-size: 1rem; }
  .intro-card { padding: 1.5rem; }
  .intro-col h3 { font-size: 1.2rem; }
  .intro-icon { width: 48px; height: 48px; }
  .intro-icon svg { width: 24px; height: 24px; }
}

.service-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; list-style:none; padding:0}
.service-list li{background:#fff; padding:1rem; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.why ul{list-style:disc; padding-left:1.2rem}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1rem}
.contact-form{background:#fff; padding:1rem; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06)}
.contact-form label{display:block; margin-bottom:0.6rem}
.contact-form input, .contact-form textarea{width:100%; padding:0.6rem; border:1px solid #e5e7eb; border-radius:6px}
.contact-form button{background:var(--accent); color:#fff; border:none; padding:0.6rem 1rem; border-radius:6px; cursor:pointer}
.site-footer{padding:1rem 0; text-align:center; color:#6b7280}

/* Enhanced contact section layout */
.contact-layout{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2rem; align-items:start; margin-top:1.5rem}
.contact-info-cards{display:grid; gap:1.25rem}
.c-card{background:#fff; border-radius:14px; padding:1.1rem 1.15rem 1.2rem; box-shadow:0 6px 20px rgba(11,12,14,0.06); position:relative; overflow:hidden;}
.c-card-head{display:flex; align-items:center; gap:0.55rem; font-size:0.95rem; letter-spacing:.5px; text-transform:uppercase; color:var(--dark)}
.c-card-icon{font-size:1.2rem; line-height:1}
.c-card-body{margin:0.4rem 0 0.6rem; font-size:0.95rem; color:#333; line-height:1.45}
.c-card-list{list-style:none; margin:0.5rem 0 0; padding:0; font-size:0.95rem}
.c-card-list li{margin:0 0 0.4rem}
.c-card-list a{text-decoration:none; color:var(--dark); position:relative}
.c-card-list a:hover{color:var(--accent)}
.c-card-actions{margin:0.25rem 0 0}
.mini-btn{background:var(--accent); color:#fff; padding:0.45rem 0.75rem; border-radius:6px; font-size:0.75rem; text-decoration:none; letter-spacing:.5px; font-weight:600; display:inline-block}
.mini-btn:hover{background:#b71a1d}
.quick-actions{display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.35rem}
.quick-btn{background:var(--accent); color:#fff; text-decoration:none; padding:0.5rem 0.8rem; border-radius:6px; font-size:0.75rem; font-weight:600; letter-spacing:.4px; box-shadow:0 4px 14px rgba(0,0,0,0.12); transition:background .18s ease, transform .18s ease}
.quick-btn:hover{background:#b71a1d; transform:translateY(-2px)}
.quick-btn.alt{background:#374151}
.quick-btn.alt:hover{background:#1f2937}
.c-card-note{margin:0.35rem 0 0; font-size:0.75rem; color:#6b7280}
.privacy-note{font-size:0.7rem; color:#6b7280; margin-top:0.75rem; line-height:1.3}
.contact-form-wrap{background:linear-gradient(135deg,#ffffff 0%, #fafafa 100%); border-radius:16px; padding:1.4rem 1.25rem 1.7rem; box-shadow:0 10px 34px -6px rgba(0,0,0,0.08)}
.contact-form .field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.85rem; margin-bottom:0.75rem}
.contact-form input, .contact-form textarea{background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.04); transition:border-color .18s ease, box-shadow .18s ease}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(206,33,36,0.25)}
.form-actions{display:flex; align-items:center; gap:0.75rem; margin-top:0.5rem}
.submit-btn{background:var(--accent); color:#fff; padding:0.7rem 1.1rem; border:none; border-radius:8px; font-weight:600; cursor:pointer; font-size:0.95rem; box-shadow:0 6px 20px rgba(206,33,36,0.35); transition:background .18s ease, transform .18s ease}
.submit-btn:hover{background:#b71a1d; transform:translateY(-2px)}
.sending{font-size:0.75rem; color:#6b7280}
.field-error{border-color:#dc2626 !important; background:#fff7f7}
.field-error:focus{box-shadow:0 0 0 3px rgba(220,38,38,0.3)}
.hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
@media (max-width:680px){
  .contact-layout{grid-template-columns:1fr;}
  .contact-form-wrap{order:2}
}

.gallery-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.75rem}
.gallery-grid img{width:100%; height:140px; object-fit:cover; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.06)}

/* Gallery item styles and animation */
.gallery-item{position:relative; overflow:hidden; border-radius:8px; transform:translateY(12px); opacity:0; transition:transform .5s ease, opacity .5s ease}
.gallery-item img{display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.gallery-item .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.22) 100%); opacity:0; transition:opacity .28s ease}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item:hover .overlay{opacity:1}
.gallery-grid .gallery-item:nth-child(1){transition-delay:0s}
.gallery-grid .gallery-item:nth-child(2){transition-delay:0.06s}
.gallery-grid .gallery-item:nth-child(3){transition-delay:0.12s}
.gallery-grid .gallery-item:nth-child(4){transition-delay:0.18s}
.gallery-grid.reveal .gallery-item{transform:none; opacity:1}

.clients-row{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.clients-row img{height:48px; width:auto; background:#fff; padding:6px; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.clients-row.small img{height:40px}

/* Reserve aspect ratio and reduce CLS */
.hero img{aspect-ratio:16/9}
.logo-wrap{aspect-ratio:4/1}
.gallery-grid img{aspect-ratio:4/3}
.clients-row img{aspect-ratio:4/1}

/* Features grid */
.features-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem}
.feature-card{background:#fff; padding:1.25rem; border-radius:10px; box-shadow:0 6px 18px rgba(11,12,14,0.06); transition:transform .18s ease, box-shadow .18s ease}
.feature-card:hover{transform:translateY(-6px); box-shadow:0 10px 26px rgba(11,12,14,0.08)}

/* Services section using intro-style layout */
.services-alt {
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
}

@media (max-width: 860px) {
  .features-grid { grid-template-columns: 1fr; }
}
.feature-card h3{margin:0 0 .5rem}

/* FAQ accordion */
.faq-list{max-width:900px}
.faq-item{border-bottom:1px solid #e7e7ea}
.faq-q{width:100%; text-align:left; padding:1rem; background:none; border:0; font-weight:700; font-size:1rem; cursor:pointer}
.faq-a{padding:0 1rem 1rem; color:#444; display:none}
.faq-item.open .faq-a{display:block}

/* Final CTA */
.final-cta-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; padding:1.6rem; border-radius:10px; box-shadow:0 8px 28px rgba(11,12,14,0.06)}
.final-cta .large{padding:0.9rem 1.25rem; font-size:1.05rem}

/* Utilities */
.muted{color:#6b7280; margin-bottom:0.5rem}

/* Partners / Trust styling */
.partners{display:flex; gap:1.25rem; align-items:center; justify-content:center; padding:1rem 0}
.partner{flex:0 0 auto; padding:0.5rem; border-radius:8px; background:transparent; transition:transform .28s ease}
.partner img{display:block; filter:grayscale(100%) contrast(.9) brightness(.95); transition:filter .28s ease, transform .28s ease}
.partner:hover img{filter:none; transform:translateY(-6px) scale(1.02)}
.partners.reveal{opacity:1; transform:none}
.partners{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}

/* small decorative divider under partners */
.trust .muted{display:flex; align-items:center; gap:1rem}
.trust .muted::after{content:""; display:block; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); flex:1}

@media (max-width:600px){
  .site-header{padding:2rem 0}
  .container{padding:1rem}
  .hero img{height:180px}
  .hero-content h1{font-size:1.25rem}
  .hero-content{padding:1.5rem 0.5rem}
  .final-cta-inner{flex-direction:column; align-items:flex-start}
}

/* Mobile specific improvements */
@media (max-width:480px) {
  :root{--maxw:100%;}
  .container{padding:0.75rem}
  .hero-image img{height:160px}
  .hero-content h1{font-size:1.05rem; margin-bottom:0.4rem}
  .hero-content .sub{font-size:0.95rem; margin-bottom:0.75rem}
  .hero-ctas{flex-direction:column; gap:0.5rem}
  .hero-content-wrapper{padding:1.25rem 0}
  .logo-wrap{width:90%; aspect-ratio:3.8/1}
  .band-inner{padding:0.6rem}
  .services { padding: 2rem 0; }
  .services-grid { gap: 0.9rem; }
  .service-card { padding: 1rem; }
  .service-card .icon { width:48px; height:48px }
  .gallery-grid img{height:120px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}

  /* Floating CTA */
  .floating-cta{position:fixed; right:14px; bottom:18px; background:var(--accent); color:#fff; padding:12px 14px; border-radius:999px; box-shadow:0 8px 20px rgba(0,0,0,0.2); z-index:9999; text-decoration:none; font-weight:700; font-size:15px}

  /* Make touch targets slightly larger */
  .cta, .band-cta, .service-card .more, .contact-form button{padding:12px 14px}

  /* FAQ adjustments */
  .faq-q{padding:0.85rem}
  .faq-a{padding:0.5rem 0.85rem 1rem}
}

/* Ensure brand band sits above hero on small screens and avoid overlap */
.brand-band{position:relative; z-index:30}
.hero{position:relative; z-index:10}

@media (max-width:380px) {
  /* push hero content downward so it doesn't overlap the band */
  .hero-overlay{align-items:flex-end}
  .hero-content{padding:0.75rem 0.6rem 1.4rem; margin-top:calc(var(--band-height) + 6px)}
  .hero-content h1{font-size:16px; line-height:1.15}
  .hero-content .sub{font-size:13px}
  /* reduce hero overlay full coverage to allow band to remain visible */
  .hero-overlay{top:var(--band-height)}
}

/* Wider narrow viewports: ensure enough reserve for band between 300 and 420px */
@media (max-width:420px) and (min-width:300px) {
  :root{ --band-height:52px; }
  .hero-overlay{top:var(--band-height)}
  .hero-content{margin-top:calc(var(--band-height) + 8px)}
}

/* Extra tiny devices */
@media (max-width:320px) {
  .hero-content-wrapper{padding:1rem 0}
  .hero-content h1{font-size:0.95rem}
  .hero-content .sub{font-size:0.85rem}
  .hero-image img{height:140px}
  .cta{padding:0.5rem 0.75rem; font-size:0.9rem}
}

/* Ensure floating CTA hidden on large screens */
.floating-cta{display:none}
@media (max-width:480px){ .floating-cta{display:inline-flex; align-items:center; justify-content:center} }

/* Very small and low-res device tweaks */
@media (max-width:360px) {
  /* fluid typography for headings */
  .hero-content h1{font-size: clamp(18px, 4.6vw, 20px)}
  .hero-content .sub{font-size: clamp(13px, 3.2vw, 14px)}
  .services h2{font-size:18px}
  .service-card h3{font-size:15px}
  .contact-form label{font-size:14px}

  /* reduce hero image to save bandwidth on low-res devices */
  .hero img{height:120px; object-position:center 20%}

  /* single column gallery to reduce layout complexity */
  .gallery-grid{grid-template-columns:1fr}

  /* simplify paddings and smaller icons */
  .container{padding:0.6rem}
  .service-card .icon{width:44px; height:44px}
}