/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.2
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

:root{
  --charcoal:#1c1f22;
  --steel:#2e3a45;
  --steel-light:#4a5c6b;
  --safety-orange:#e8590c;
  --off-white:#f4f2ee;
  --tread-line:#33383c;
  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Inter', Arial, sans-serif;
}

/* CSS Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--off-white);
  color:var(--charcoal);
  line-height:1.6;
}
.wpcf7-form > .hidden-fields-container {
    display: none !important;
}

a{color:inherit;text-decoration:none;}

.tread-strip{
  height:10px;
  width:100%;
  background-image:repeating-linear-gradient(
    -45deg,
    var(--safety-orange),
    var(--safety-orange) 12px,
    var(--charcoal) 12px,
    var(--charcoal) 24px
  );
}

/* Header */
header.site-header{
  background:var(--charcoal);
  color:var(--off-white);
  position:sticky;
  top:0;
  z-index:100;
}
.nav-wrap{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
}
.logo{
  font-family:var(--font-display);
  font-size:1.5rem;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.logo span{color:var(--safety-orange);}
nav ul{
  list-style:none;
  display:flex;
  gap:28px;
  margin:0;
  padding:0;
}
nav a{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:0.92rem;
  letter-spacing:0.6px;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s;
}
nav a:hover, nav a.active{border-color:var(--safety-orange);}
.nav-toggle{display:none;background:none;border:0;color:var(--off-white);font-size:1.6rem;cursor:pointer;}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg, rgba(28,31,34,.78), rgba(28,31,34,.55)),
    url('https://inoutautoincorporated.com/wp-content/uploads/2026/08/banner-img-inoutauto.webp') center/cover no-repeat;
  color:var(--off-white);
  padding:120px 24px 100px;
  text-align:left;
}
.hero-inner{max-width:1180px;margin:0 auto;}
.hero-eyebrow{
  font-family:var(--font-display);
  color:var(--safety-orange);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.95rem;
  margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display);
  font-size:3.2rem;
  line-height:1.05;
  text-transform:uppercase;
  margin:0 0 20px;
  max-width:640px;
}
.hero p{
  max-width:520px;
  font-size:1.1rem;
  color:#d9d9d6;
  margin-bottom:32px;
}
.btn{
  display:inline-block;
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:14px 32px;
  background:var(--safety-orange);
  color:var(--off-white);
  border-radius:2px;
  border:none;
  cursor:pointer;
  font-size:1rem;
  transition:background .2s, transform .2s;
}
.btn:hover{background:#c74a09;transform:translateY(-1px);}
.btn.outline{
  background:transparent;
  border:2px solid var(--off-white);
  margin-left:14px;
}
.btn.outline:hover{background:var(--off-white);color:var(--charcoal);}

/* Sections */
section{padding:80px 24px;}
.section-inner{max-width:1180px;margin:0 auto;}
.section-tag{
  font-family:var(--font-display);
  color:var(--safety-orange);
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:.9rem;
  margin-bottom:10px;
}
.section-title{
  font-family:var(--font-display);
  font-size:2.3rem;
  text-transform:uppercase;
  margin:0 0 24px;
  color:var(--charcoal);
}

/* Quick info strip */
.info-strip{
  background:var(--steel);
  color:var(--off-white);
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  max-width:1180px;
  margin:0 auto;
  padding:40px 24px;
}
.info-item h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.05rem;
  color:var(--safety-orange);
  margin:0 0 8px;
}
.info-item p{margin:0;color:#dfe3e6;}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.service-card {
  background: #fff;
  border: 1px solid #e2ddd4;
  border-top: 4px solid var(--safety-orange);
  padding: 30px 26px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
  border-color: var(--safety-orange);
}
.service-card h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:1.15rem;
  margin:0 0 10px;
}
.service-card p{margin:0;color:#4a4a48;font-size:.97rem;}

/* About / why us */
.about-flex{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.about-flex img{width:100%;height:100%;object-fit:cover;border:6px solid var(--charcoal);}
.why-list{list-style:none;margin:24px 0 0;padding:0;}
.why-list li{
  padding:14px 0 14px 34px;
  border-bottom:1px solid #e2ddd4;
  position:relative;
  color:#333;
}
.why-list li::before{
  content:'\2713';
  position:absolute;
  left:0;
  color:var(--safety-orange);
  font-weight:bold;
}

/* CTA band */
.cta-band{
  background:var(--charcoal);
  color:var(--off-white);
  text-align:center;
}
.cta-band h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:2rem;
  margin:0 0 18px;
}

/* Contact page */
.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
}
.contact-details h3{
  font-family:var(--font-display);
  text-transform:uppercase;
  color:var(--safety-orange);
  margin:26px 0 6px;
  font-size:1rem;
}
.contact-details p{margin:0;color:#333;}
div.contact-form{
  background:#fff;
  padding:34px;
  border:1px solid #e2ddd4;
}
div.contact-form label{
  display:block;
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.5px;
  margin:16px 0 6px;
}
div.contact-form input,
div.contact-form select,
div.contact-form textarea{
  width:100%;
  padding:12px;
  border:1px solid #ccc4b7;
  font-family:var(--font-body);
  font-size:1rem;
  background:var(--off-white);
}
div.contact-form textarea{min-height:120px;resize:vertical;}
div.contact-form .wpcf7-submit{margin-top:22px;width:100%; padding: 14px 32px; background: var(--safety-orange);} 
div.contact-form .wpcf7-submit:hover{background: #c74a09;} 

/* Footer */
footer{
  background:var(--charcoal);
  color:#b7bcbf;
  padding:44px 24px 26px;
}
.footer-inner{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px;
}
.footer-col h4{
  color:var(--off-white);
  font-family:var(--font-display);
  text-transform:uppercase;
  font-size:.95rem;
  margin:0 0 10px;
}
.footer-bottom{
  text-align:center;
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid #33393e;
  font-size:.85rem;
}

/* Responsive */
@media (max-width:900px){
  .info-grid,.services-grid{grid-template-columns:1fr;}
  .about-flex,.contact-wrap{grid-template-columns:1fr;}
  .hero h1{font-size:2rem;}
  .section-title {font-size:1.7rem;line-height: 1.1em;}
}
@media (max-width:760px){
  .nav-toggle{display:block;}
  nav ul{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--charcoal);
    flex-direction:column;
    gap:0;
    display:none;
    padding:10px 0;
  }
  nav ul.open{display:flex;}
  nav li{padding:12px 24px;border-top:1px solid #33393e;}
  .hero{padding:90px 20px 70px;}
  .btn.outline{margin-left:0;margin-top:12px;}
}