/* ====== AUTOTEK STEEL — SHARED STYLESHEET ====== */

:root {
  --autotek-primary: #0a2540;
  --autotek-secondary: #1e3a5f;
  --autotek-accent: #ff6b1a;
  --autotek-accent-hover: #e55808;
  --autotek-gold: #f4b223;
  --autotek-light: #f6f8fb;
  --autotek-gray: #64748b;
  --autotek-dark: #0b1220;
  --autotek-border: #e2e8f0;
  --autotek-white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.10);
  --shadow-lg: 0 20px 60px rgba(10, 37, 64, 0.18);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font-sans: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Merriweather', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--autotek-dark);
  background: var(--autotek-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ====== NAV (shared header) ====== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 78px;
  padding: 0 6%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header.active, .header.solid {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(10, 37, 64, 0.08);
}
.header .first-section { display: flex; align-items: center; }
.logo { display: flex; align-items: center; gap: 0.75rem; }
.logo img { height: 44px; width: auto; object-fit: contain; }
.logo h1 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.header.active .logo h1, .header.solid .logo h1 { color: var(--autotek-primary); }

.navbar ul { display: flex; align-items: center; gap: 0.25rem; }
.navbar li a {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.95rem;
  color: #ffffff;
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.25s ease;
}
.navbar li a::after {
  content: '';
  position: absolute;
  left: 0.95rem; right: 0.95rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--autotek-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.navbar li a:hover::after, .navbar li a.current::after { transform: scaleX(1); }
.header.active .navbar li a, .header.solid .navbar li a { color: var(--autotek-primary); }
.header.active .navbar li a.current, .header.solid .navbar li a.current { color: var(--autotek-accent); }
.navbar li a.current { color: var(--autotek-gold); }

/* Burger */
.burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px; height: 22px;
  cursor: pointer;
  z-index: 1100;
}
.burger .line {
  width: 100%; height: 3px;
  background-color: #ffffff;
  border-radius: 3px;
  transition: transform .3s ease, opacity .3s ease, background-color .35s ease;
}
.header.active .burger .line, .header.solid .burger .line { background-color: var(--autotek-primary); }
.burger.open .line:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
.burger.open .line:nth-child(2) { opacity: 0; }
.burger.open .line:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

/* ====== FOOTER (shared) ====== */
.site-footer {
  background: var(--autotek-dark);
  color: #cbd5e1;
  padding: 4rem 6% 1.5rem;
}
.site-footer .foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.site-footer h4 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  letter-spacing: 0.5px;
  position: relative;
  padding-bottom: 0.6rem;
}
.site-footer h4::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 36px; height: 3px;
  background: var(--autotek-accent);
}
.site-footer p, .site-footer li {
  color: #94a3b8;
  font-size: 0.9rem;
  line-height: 1.8;
  margin-bottom: 0.4rem;
}
.site-footer a { color: #cbd5e1; transition: color 0.2s ease; }
.site-footer a:hover { color: var(--autotek-accent); }
.site-footer .brand-blurb img { height: 46px; margin-bottom: 1rem; filter: brightness(1.2); }
.site-footer .brand-blurb strong { color: #fff; display: block; margin-bottom: 0.5rem; font-size: 1.1rem; }
.site-footer .socials { display: flex; gap: 0.5rem; margin-top: 1rem; }
.site-footer .socials a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  font-size: 0.9rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.site-footer .socials a:hover { background: var(--autotek-accent); color: #fff; transform: translateY(-3px); }
.site-footer .foot-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
}

@media (max-width: 992px) {
  .site-footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .site-footer .foot-grid { grid-template-columns: 1fr; }
}

/* ====== Mobile nav ====== */
@media (max-width: 992px) {
  .header { padding: 0 4%; }
  .navbar li a { padding: 0.5rem 0.6rem; font-size: 0.88rem; }
}
@media (max-width: 768px) {
  .header { height: 65px; padding: 0 5%; }
  .logo h1 { font-size: 1rem; }
  .logo img { height: 36px; }
  .burger { display: flex; }
  .second-section {
    position: fixed;
    top: 65px; left: 0; right: 0;
    background: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }
  .second-section.open { max-height: 80vh; }
  .navbar ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 0; }
  .navbar li { width: 100%; }
  .navbar li a { display: block; color: var(--autotek-primary); padding: 0.9rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .navbar li a::after { display: none; }
  .navbar li a:hover { background: rgba(0,0,0,0.04); }
}

/* ====== Utilities ====== */
.section { padding: 5rem 6%; }
.section-lg { padding: 7rem 6%; }
.container { max-width: 1280px; margin: 0 auto; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--autotek-accent);
  margin-bottom: 0.85rem;
}
.heading-xl {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--autotek-primary);
  margin-bottom: 1rem;
}
.heading-lg {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--autotek-primary);
  margin-bottom: 0.8rem;
}
.lead { font-size: 1.05rem; color: var(--autotek-gray); max-width: 620px; }

.btn-primary, .btn-ghost, .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: all 0.25s ease;
  text-transform: uppercase;
}
.btn-primary {
  background: var(--autotek-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,107,26,0.28);
}
.btn-primary:hover {
  background: var(--autotek-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255,107,26,0.38);
}
.btn-ghost {
  background: #fff;
  color: var(--autotek-primary);
  border-color: #fff;
}
.btn-ghost:hover { background: transparent; color: #fff; border-color: #fff; }
.btn-outline {
  background: transparent;
  color: var(--autotek-primary);
  border-color: var(--autotek-primary);
}
.btn-outline:hover { background: var(--autotek-primary); color: #fff; }

/* CTA banner used in multiple pages */
.cta-banner {
  background: linear-gradient(120deg, var(--autotek-primary) 0%, var(--autotek-secondary) 100%);
  color: #fff;
  padding: 4rem 6%;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255,107,26,0.25) 0%, transparent 50%),
              radial-gradient(circle at 10% 80%, rgba(244,178,35,0.15) 0%, transparent 50%);
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 900;
  margin-bottom: 1rem;
}
.cta-banner p { max-width: 640px; margin: 0 auto 2rem; color: #cbd5e1; }
.cta-banner .btn-group { display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* Page hero (reused, can be customized) */
.page-hero {
  padding: 9rem 6% 4rem;
  background: linear-gradient(135deg, var(--autotek-primary) 0%, var(--autotek-secondary) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(255,255,255,0.03) 24px 25px),
    radial-gradient(circle at 90% 20%, rgba(255,107,26,0.2) 0%, transparent 40%);
}
.page-hero .hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
.page-hero .crumbs { font-size: 0.85rem; color: #94a3b8; margin-bottom: 0.8rem; letter-spacing: 1px; }
.page-hero .crumbs a { color: var(--autotek-accent); }
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.page-hero p { color: #cbd5e1; font-size: 1.05rem; max-width: 700px; }


    /* ====== HOME PAGE ====== */
    .first-container {
      height: 100vh;
      min-height: 640px;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .slider { position: relative; width: 100%; height: 100%; }
    .item {
      width: 220px;
      height: 320px;
      list-style-type: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
      background-position: center;
      background-size: cover;
      border-radius: 18px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.35);
      transition: transform 0.1s, left 0.75s var(--ease), top 0.75s var(--ease),
                  width 0.75s var(--ease), height 0.75s var(--ease), border-radius 0.5s var(--ease);
    }
    .item:nth-child(1), .item:nth-child(2) {
      left: 0; top: 0;
      width: 100%; height: 100%;
      transform: none;
      border-radius: 0;
      box-shadow: none;
    }
    .item:nth-child(1)::after, .item:nth-child(2)::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(10,37,64,0.85) 0%, rgba(10,37,64,0.55) 45%, rgba(10,37,64,0.1) 100%);
    }
    .item:nth-child(3) { left: 68%; }
    .item:nth-child(4) { left: calc(68% + 240px); }
    .item:nth-child(5) { left: calc(68% + 480px); }
    .item:nth-child(6) { left: calc(68% + 720px); opacity: 0; }

    .content {
      width: min(44vw, 560px);
      position: absolute;
      top: 50%; left: 8%;
      transform: translateY(-50%);
      color: #fff;
      z-index: 2;
      opacity: 0;
      display: none;
    }
    .content .hero-tag {
      display: inline-block;
      padding: 0.35rem 0.9rem;
      border: 1px solid rgba(255,255,255,0.4);
      border-radius: 100px;
      font-size: 0.75rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 1.2rem;
      color: var(--autotek-gold);
    }
    .content .title {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5.5vw, 4.2rem);
      font-weight: 900;
      text-transform: uppercase;
      line-height: 1.05;
      margin-bottom: 1.2rem;
      letter-spacing: -0.5px;
    }
    .content .description {
      font-size: 1.02rem;
      line-height: 1.8;
      margin-bottom: 1.8rem;
      max-width: 520px;
      color: #e2e8f0;
    }
    .content .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
    .content .btn-primary, .content .btn-ghost { text-transform: uppercase; }

    .item:nth-of-type(2) .content {
      display: block;
      animation: heroShow 0.9s ease-in-out 0.3s forwards;
    }
    @keyframes heroShow {
      0%   { filter: blur(10px); transform: translateY(calc(-50% + 50px)); opacity: 0; }
      100% { opacity: 1; filter: blur(0); transform: translateY(-50%); }
    }

    .slider-controls {
      position: absolute;
      bottom: 2.5rem;
      right: 6%;
      z-index: 5;
      display: flex;
      gap: 0.75rem;
    }
    .slider-controls .btn {
      width: 52px; height: 52px;
      display: inline-flex;
      align-items: center; justify-content: center;
      background: rgba(255,255,255,0.1);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      backdrop-filter: blur(10px);
      transition: all 0.25s ease;
    }
    .slider-controls .btn:hover { background: var(--autotek-accent); border-color: var(--autotek-accent); transform: scale(1.05); }

    .hero-scroll {
      position: absolute;
      bottom: 2.5rem; left: 6%;
      z-index: 3;
      color: rgba(255,255,255,0.7);
      font-size: 0.78rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .hero-scroll .line {
      width: 60px; height: 1px;
      background: rgba(255,255,255,0.4);
      position: relative;
      overflow: hidden;
    }
    .hero-scroll .line::after {
      content: '';
      position: absolute; left: -60px;
      width: 60px; height: 100%;
      background: var(--autotek-accent);
      animation: scrollLine 2.4s infinite ease-in-out;
    }
    @keyframes scrollLine { 0% { left: -60px; } 100% { left: 60px; } }

    /* ====== Marquee of logos ====== */
    .trust-bar {
      background: #f1f5f9;
      padding: 2rem 6%;
      border-bottom: 1px solid var(--autotek-border);
    }
    .trust-bar p {
      text-align: center;
      font-size: 0.82rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--autotek-gray);
      margin-bottom: 1.2rem;
    }
    .trust-logos {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 2rem 3rem;
      max-width: 1100px;
      margin: 0 auto;
    }
    .trust-logos span {
      font-weight: 700;
      font-size: 1.05rem;
      color: #94a3b8;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }
    .trust-logos span:hover { color: var(--autotek-primary); }

    /* ====== About preview ====== */
    .about-preview { display: grid; grid-template-columns: 1.05fr 1fr; gap: 5rem; align-items: center; }
    .about-preview .visual { position: relative; }
    .about-preview .visual .img-main {
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      width: 100%;
      aspect-ratio: 4/5;
      background-image: url('assets/hero-secrion-img/imgi_8_page_image-1-1.jpg');
      background-size: cover;
      background-position: center;
    }
    .about-preview .visual .badge {
      position: absolute;
      bottom: -30px; left: -30px;
      background: var(--autotek-accent);
      color: #fff;
      padding: 1.5rem 2rem;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
    }
    .about-preview .visual .badge strong {
      display: block;
      font-family: var(--font-display);
      font-size: 2.8rem;
      line-height: 1;
      margin-bottom: 0.3rem;
    }
    .about-preview .visual .badge span { font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; opacity: 0.9; }
    .about-preview ul.check { margin: 1.5rem 0 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .about-preview ul.check li {
      padding-left: 1.8rem;
      position: relative;
      color: var(--autotek-secondary);
      font-weight: 600;
      font-size: 0.95rem;
    }
    .about-preview ul.check li::before {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute; left: 0; top: 2px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--autotek-accent);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem;
    }

    /* ====== Stats strip ====== */
    .stats-strip {
      background: linear-gradient(120deg, var(--autotek-primary), var(--autotek-secondary));
      padding: 3.5rem 6%;
      color: #fff;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      max-width: 1280px;
      margin: 0 auto;
      text-align: center;
    }
    .stats-grid .stat strong {
      font-family: var(--font-display);
      display: block;
      font-size: 3rem;
      font-weight: 900;
      color: var(--autotek-gold);
      line-height: 1;
      margin-bottom: 0.4rem;
    }
    .stats-grid .stat strong::after { content: '+'; color: var(--autotek-accent); }
    .stats-grid .stat span { font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; color: #cbd5e1; }

    /* ====== Services preview ====== */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .service-card {
      background: #fff;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-md);
      padding: 2rem;
      transition: all 0.35s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--autotek-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card .ico {
      width: 60px; height: 60px;
      border-radius: 12px;
      background: rgba(255,107,26,0.12);
      color: var(--autotek-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
      margin-bottom: 1.2rem;
    }
    .service-card h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      color: var(--autotek-primary);
      margin-bottom: 0.7rem;
    }
    .service-card p { font-size: 0.95rem; color: var(--autotek-gray); margin-bottom: 1rem; }
    .service-card a.learn {
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 1.5px;
      color: var(--autotek-accent);
      text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 0.5rem;
    }
    .service-card a.learn i { transition: transform 0.3s ease; }
    .service-card:hover a.learn i { transform: translateX(5px); }

    /* ====== Section heads ====== */
    .section-head { text-align: center; margin-bottom: 1rem; }
    .section-head.left { text-align: left; }
    .bg-light { background: var(--autotek-light); }

    /* ====== Industries ====== */
    .industries-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
    }
    .ind-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4/3;
      cursor: pointer;
    }
    .ind-card .bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.8s ease;
    }
    .ind-card:hover .bg { transform: scale(1.1); }
    .ind-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 30%, rgba(10,37,64,0.92) 100%);
    }
    .ind-card .label {
      position: absolute;
      bottom: 1.2rem; left: 1.5rem; right: 1.5rem;
      z-index: 2;
      color: #fff;
    }
    .ind-card .label h4 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 0.2rem; }
    .ind-card .label span { font-size: 0.82rem; letter-spacing: 1px; color: var(--autotek-gold); }

    /* ====== Testimonials ====== */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3rem;
    }
    .testi {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 2.2rem;
      position: relative;
      box-shadow: var(--shadow-sm);
      border-top: 4px solid var(--autotek-accent);
    }
    .testi .quote {
      font-size: 3rem;
      color: var(--autotek-accent);
      opacity: 0.2;
      font-family: serif;
      position: absolute;
      top: 0.5rem; right: 1.5rem;
      line-height: 1;
    }
    .testi p { color: var(--autotek-secondary); font-style: italic; margin-bottom: 1.5rem; font-size: 0.95rem; }
    .testi .who strong {
      display: block;
      color: var(--autotek-primary);
      font-size: 1rem;
      margin-bottom: 0.2rem;
    }
    .testi .who span { font-size: 0.85rem; color: var(--autotek-gray); }
    .testi .stars { color: var(--autotek-gold); margin-bottom: 1rem; letter-spacing: 3px; font-size: 0.85rem; }

    /* ====== Awards & Recognition ====== */
    .awards-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.75rem;
      margin-top: 3rem;
    }
    .award-card {
      background: #fff;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-md);
      overflow: hidden;
      transition: all 0.35s var(--ease);
      position: relative;
      box-shadow: var(--shadow-sm);
    }
    .award-card::before {
      content: '\f091';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      top: 1rem; right: 1rem;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--autotek-gold);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
      z-index: 2;
      box-shadow: var(--shadow-sm);
    }
    .award-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--autotek-gold);
    }
    .award-card .award-img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      background: #f1f5f9;
      display: block;
    }
    .award-card .award-body { padding: 1.4rem 1.5rem 1.6rem; }
    .award-card h4 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      color: var(--autotek-primary);
      margin-bottom: 0.4rem;
    }
    .award-card p {
      font-size: 0.86rem;
      color: var(--autotek-gray);
      line-height: 1.55;
    }

    /* ====== Partner / Logo grids ====== */
    .partner-block { margin-top: 3rem; }
    .partner-block + .partner-block { margin-top: 4.5rem; }
    .partner-head {
      display: flex;
      align-items: center;
      gap: 1.2rem;
      margin-bottom: 1.75rem;
    }
    .partner-head .ico-pill {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: rgba(255,107,26,0.12);
      color: var(--autotek-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      flex-shrink: 0;
    }
    .partner-head h3 {
      font-family: var(--font-display);
      font-size: 1.6rem;
      color: var(--autotek-primary);
      margin-bottom: 0.2rem;
    }
    .partner-head p {
      font-size: 0.92rem;
      color: var(--autotek-gray);
      margin: 0;
    }
    .logo-grid {
      display: grid;
      gap: 1.25rem;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }
    .logo-tile {
      background: #fff;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-md);
      aspect-ratio: 5/3;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      transition: all 0.3s var(--ease);
      filter: grayscale(0.4);
      opacity: 0.85;
    }
    .logo-tile:hover {
      filter: grayscale(0);
      opacity: 1;
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      border-color: var(--autotek-accent);
    }
    .logo-tile img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    /* Reveal */
    [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
    [data-reveal].revealed { opacity: 1; transform: none; }

    /* Responsive */
    @media (max-width: 992px) {
      .services-grid, .industries-grid, .testi-grid { grid-template-columns: 1fr 1fr; }
      .awards-grid { grid-template-columns: 1fr 1fr; }
      .stats-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
      .about-preview { grid-template-columns: 1fr; gap: 3rem; }
      .about-preview .visual { order: -1; max-width: 500px; margin: 0 auto; }
    }
    @media (max-width: 650px) {
      .services-grid, .industries-grid, .testi-grid { grid-template-columns: 1fr; }
      .awards-grid { grid-template-columns: 1fr; }
      .partner-head { flex-wrap: wrap; }
      .content .title { font-size: 2rem; }
      .content .description { font-size: 0.9rem; }
      .about-preview ul.check { grid-template-columns: 1fr; }
      .item { width: 140px; height: 220px; }
      .item:nth-child(3) { left: 55%; }
      .item:nth-child(4) { left: calc(55% + 150px); }
      .item:nth-child(5) { left: calc(55% + 300px); }
      .item:nth-child(6) { left: calc(55% + 450px); opacity: 0; }
      .hero-scroll { display: none; }
      .chatbot-panel { width: calc(100vw - 24px) !important; right: 12px !important; bottom: 90px !important; height: 70vh !important; }
    }

    /* ====== Chatbot ====== */
    .chatbot-launcher {
      position: fixed;
      bottom: 28px; right: 28px;
      width: 50px; height: 50px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--autotek-accent), #ff8a4d);
      color: #fff;
      border: none;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(255,107,26,0.45);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      z-index: 999;
      transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
    }
    .chatbot-launcher::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid var(--autotek-accent);
      opacity: 0.6;
      animation: chatPulse 2s infinite ease-out;
    }
    @keyframes chatPulse {
      0%   { transform: scale(0.9); opacity: 0.6; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    .chatbot-launcher:hover { transform: scale(1.06); }
    .chatbot-launcher .icon-close { display: none; }
    .chatbot-launcher.open .icon-open { display: none; }
    .chatbot-launcher.open .icon-close { display: inline-block; }
    .chatbot-launcher.open::before { display: none; }
    .chatbot-launcher .badge-dot {
      position: absolute;
      top: 6px; right: 6px;
      width: 14px; height: 14px;
      background: #22c55e;
      border: 2px solid #fff;
      border-radius: 50%;
    }
    .chatbot-launcher.open .badge-dot { display: none; }

    .chatbot-panel {
      position: fixed;
      bottom: 108px; right: 28px;
      width: 380px;
      max-width: calc(100vw - 56px);
      height: 560px;
      max-height: calc(100vh - 140px);
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 24px 60px rgba(10,37,64,0.25);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      z-index: 998;
      opacity: 0;
      transform: translateY(20px) scale(0.96);
      pointer-events: none;
      transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .chatbot-panel.open {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .chat-head {
      background: linear-gradient(120deg, var(--autotek-primary), var(--autotek-secondary));
      color: #fff;
      padding: 1.1rem 1.25rem;
      display: flex; align-items: center; gap: 0.85rem;
    }
    .chat-head .avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: var(--autotek-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      position: relative;
    }
    .chat-head .avatar::after {
      content: '';
      position: absolute;
      bottom: 0; right: 0;
      width: 11px; height: 11px;
      background: #22c55e;
      border: 2px solid #fff;
      border-radius: 50%;
    }
    .chat-head .head-text strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1rem;
      letter-spacing: 0.3px;
    }
    .chat-head .head-text span {
      font-size: 0.74rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--autotek-gold);
    }
    .chat-body {
      flex: 1;
      overflow-y: auto;
      padding: 1.1rem;
      background: #f8fafc;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }
    .chat-body::-webkit-scrollbar { width: 6px; }
    .chat-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    .msg {
      max-width: 84%;
      padding: 0.7rem 0.95rem;
      border-radius: 14px;
      font-size: 0.9rem;
      line-height: 1.5;
      white-space: pre-wrap;
      animation: msgIn 0.25s ease;
    }
    @keyframes msgIn {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }
    .msg.bot {
      background: #fff;
      color: var(--autotek-secondary);
      border: 1px solid var(--autotek-border);
      border-bottom-left-radius: 4px;
      align-self: flex-start;
    }
    .msg.user {
      background: var(--autotek-primary);
      color: #fff;
      border-bottom-right-radius: 4px;
      align-self: flex-end;
    }
    .msg a { color: var(--autotek-accent); font-weight: 600; }
    .msg.user a { color: var(--autotek-gold); }
    .typing { display: inline-flex; gap: 4px; padding: 0.5rem 0; }
    .typing span {
      width: 7px; height: 7px;
      background: var(--autotek-gray);
      border-radius: 50%;
      animation: dot 1.2s infinite ease-in-out;
    }
    .typing span:nth-child(2) { animation-delay: 0.15s; }
    .typing span:nth-child(3) { animation-delay: 0.3s; }
    @keyframes dot {
      0%, 60%, 100% { transform: scale(0.7); opacity: 0.4; }
      30% { transform: scale(1.1); opacity: 1; }
    }
    .quick-chips {
      display: flex; flex-wrap: wrap; gap: 0.45rem;
      padding: 0 1.1rem 0.6rem;
      background: #f8fafc;
    }
    .quick-chips button {
      background: #fff;
      border: 1px solid var(--autotek-border);
      color: var(--autotek-primary);
      padding: 0.45rem 0.85rem;
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 100px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .quick-chips button:hover {
      background: var(--autotek-accent);
      color: #fff;
      border-color: var(--autotek-accent);
    }
    .chat-input {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.8rem 1rem;
      border-top: 1px solid var(--autotek-border);
      background: #fff;
    }
    .chat-input input {
      flex: 1;
      border: 1px solid var(--autotek-border);
      border-radius: 100px;
      padding: 0.65rem 1rem;
      font-size: 0.9rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .chat-input input:focus { border-color: var(--autotek-accent); }
    .chat-input button {
      width: 42px; height: 42px;
      border-radius: 50%;
      border: none;
      background: var(--autotek-accent);
      color: #fff;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .chat-input button:hover { background: var(--autotek-primary); transform: scale(1.05); }
  

    
    /* ====== ABOUT PAGE — editorial / timeline ====== */

    /* Hero split */
    .about-hero {
      padding: 9rem 0 0;
      background: #fff;
      position: relative;
      overflow: hidden;
    }
    .about-hero .grid {
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      min-height: 75vh;
    }
    .about-hero .left {
      padding: 5rem 6% 5rem 8%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .about-hero .kicker {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--autotek-accent);
      font-weight: 700;
      margin-bottom: 1.5rem;
    }
    .about-hero .kicker::before {
      content: '';
      width: 48px; height: 2px;
      background: var(--autotek-accent);
    }
    .about-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 5.5vw, 4.6rem);
      font-weight: 900;
      line-height: 1.05;
      color: var(--autotek-primary);
      margin-bottom: 1.5rem;
      letter-spacing: -1px;
    }
    .about-hero h1 em { color: var(--autotek-accent); font-style: normal; }
    .about-hero p {
      font-size: 1.1rem;
      color: var(--autotek-gray);
      max-width: 520px;
      margin-bottom: 2rem;
    }
    .about-hero .meta-row {
      display: flex;
      gap: 2.5rem;
      flex-wrap: wrap;
      padding-top: 2rem;
      border-top: 1px solid var(--autotek-border);
    }
    .about-hero .meta strong {
      display: block;
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
    }
    .about-hero .meta span { font-size: 0.85rem; color: var(--autotek-gray); letter-spacing: 1px; }

    .about-hero .right {
      background-image: linear-gradient(180deg, rgba(10,37,64,0.2) 0%, rgba(10,37,64,0.4) 100%),
                        url('assets/hero-secrion-img/imgi_8_page_image-1-1.jpg');
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .about-hero .right .overlay-quote {
      position: absolute;
      bottom: 3rem; left: 3rem; right: 3rem;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.2);
      padding: 2rem;
      border-radius: var(--radius-md);
      color: #fff;
    }
    .about-hero .right .overlay-quote i { color: var(--autotek-gold); font-size: 1.5rem; margin-bottom: 0.75rem; }
    .about-hero .right .overlay-quote p { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.5; margin-bottom: 0.8rem; }
    .about-hero .right .overlay-quote cite { font-size: 0.82rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--autotek-gold); font-style: normal; }

    /* Founder section */
    .founder-section { padding: 6rem 6%; background: var(--autotek-light); }
    .founder-section .container { max-width: 1200px; margin: 0 auto; }
    .founder-section .grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 4rem;
      align-items: center;
    }
    .founder-section .portrait {
      aspect-ratio: 3/4;
      background: linear-gradient(135deg, var(--autotek-primary), var(--autotek-secondary));
      border-radius: var(--radius-lg);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 2.5rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .founder-section .portrait::before {
      content: 'CKA';
      font-family: var(--font-display);
      position: absolute;
      top: -20px; right: -20px;
      font-size: 15rem;
      color: rgba(244,178,35,0.15);
      font-weight: 900;
      line-height: 1;
    }
    .founder-section .portrait .name-card {
      position: relative;
      z-index: 1;
      text-align: center;
      width: 100%;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.2);
    }
    .founder-section .portrait .name-card strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.4rem;
      margin-bottom: 0.25rem;
    }
    .founder-section .portrait .name-card span { font-size: 0.85rem; color: var(--autotek-gold); letter-spacing: 1.5px; text-transform: uppercase; }

    /* Timeline */
    .timeline-section { padding: 6rem 6%; background: #fff; }
    .timeline-section .container { max-width: 1000px; margin: 0 auto; }
    .timeline-section .head { text-align: center; margin-bottom: 4rem; }
    .timeline {
      position: relative;
      padding-left: 0;
    }
    .timeline::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 0; bottom: 0;
      width: 2px;
      background: var(--autotek-border);
      transform: translateX(-50%);
    }
    .tl-item {
      display: grid;
      grid-template-columns: 1fr 60px 1fr;
      align-items: center;
      gap: 2rem;
      margin-bottom: 3rem;
    }
    .tl-item:last-child { margin-bottom: 0; }
    .tl-item .node {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--autotek-accent);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 1.1rem;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 0 8px #fff, 0 0 0 10px var(--autotek-border);
      justify-self: center;
    }
    .tl-item .card {
      background: #fff;
      padding: 1.8rem 2rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--autotek-border);
      box-shadow: var(--shadow-sm);
    }
    .tl-item .card .year {
      font-family: var(--font-display);
      color: var(--autotek-accent);
      font-size: 1.8rem;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 0.4rem;
    }
    .tl-item .card h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.2rem;
      margin-bottom: 0.6rem;
    }
    .tl-item .card p { font-size: 0.95rem; color: var(--autotek-gray); }
    .tl-item:nth-child(odd) { text-align: right; }
    .tl-item:nth-child(odd) > :first-child { order: 1; }
    .tl-item:nth-child(odd) > :nth-child(2) { order: 2; }
    .tl-item:nth-child(odd) > :nth-child(3) { order: 3; visibility: hidden; }
    .tl-item:nth-child(even) { text-align: left; }
    .tl-item:nth-child(even) > :first-child { visibility: hidden; }

    /* Mission & Vision */
    .mv-section { padding: 6rem 6%; background: var(--autotek-primary); color: #fff; position: relative; overflow: hidden; }
    .mv-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 30%, rgba(255,107,26,0.2) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(244,178,35,0.15) 0%, transparent 45%);
    }
    .mv-section .container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
    .mv-section .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
    }
    .mv-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius-lg);
      padding: 3rem;
      backdrop-filter: blur(10px);
      transition: all 0.35s ease;
    }
    .mv-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-6px); }
    .mv-card .icon {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--autotek-accent);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.5rem;
    }
    .mv-card h3 {
      font-family: var(--font-display);
      font-size: 1.8rem;
      margin-bottom: 1rem;
    }
    .mv-card p { color: #cbd5e1; font-size: 1rem; line-height: 1.8; }

    /* Values */
    .values-section { padding: 6rem 6%; background: #fff; }
    .values-section .container { max-width: 1280px; margin: 0 auto; }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1.25rem;
      margin-top: 3rem;
    }
    .val-card {
      padding: 2rem 1.5rem;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-md);
      text-align: center;
      transition: all 0.3s ease;
      background: #fff;
    }
    .val-card:hover {
      border-color: var(--autotek-accent);
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }
    .val-card .ico {
      width: 54px; height: 54px;
      border-radius: 14px;
      background: rgba(10,37,64,0.05);
      color: var(--autotek-primary);
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1rem;
    }
    .val-card:hover .ico { background: var(--autotek-accent); color: #fff; }
    .val-card h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1rem;
      margin-bottom: 0.4rem;
    }
    .val-card p { font-size: 0.85rem; color: var(--autotek-gray); }

    /* Facilities */
    .facilities-section { padding: 6rem 6%; background: var(--autotek-light); }
    .facilities-section .container { max-width: 1280px; margin: 0 auto; }
    .fac-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
      margin-top: 3rem;
    }
    .fac-card {
      background: #fff;
      border-radius: var(--radius-md);
      padding: 2rem;
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      border-left: 4px solid var(--autotek-accent);
      transition: transform 0.3s ease;
    }
    .fac-card:hover { transform: translateX(8px); }
    .fac-card .no {
      font-family: var(--font-display);
      color: var(--autotek-accent);
      font-size: 2.4rem;
      font-weight: 900;
      line-height: 1;
      min-width: 60px;
    }
    .fac-card h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.2rem;
      margin-bottom: 0.3rem;
    }
    .fac-card .loc { font-size: 0.88rem; color: var(--autotek-accent); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 0.6rem; }
    .fac-card p { font-size: 0.92rem; color: var(--autotek-gray); }

    /* Reveal */
    [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
    [data-reveal].revealed { opacity: 1; transform: none; }

    @media (max-width: 992px) {
      .about-hero .grid { grid-template-columns: 1fr; }
      .about-hero .left { padding: 4rem 6%; }
      .about-hero .right { min-height: 420px; }
      .founder-section .grid { grid-template-columns: 1fr; }
      .founder-section .portrait { max-width: 380px; margin: 0 auto; }
      .mv-section .grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: repeat(2, 1fr); }
      .fac-grid { grid-template-columns: 1fr; }
      .timeline::before { left: 30px; }
      .tl-item { grid-template-columns: 60px 1fr; text-align: left !important; }
      .tl-item > :first-child { visibility: hidden; display: none; }
      .tl-item > :nth-child(2) { order: 1; }
      .tl-item > :nth-child(3) { order: 2; visibility: visible !important; }
      .tl-item:nth-child(odd) > :nth-child(3) { visibility: visible; }
    }
    @media (max-width: 600px) {
      .values-grid { grid-template-columns: 1fr; }
    }
  

  
    body { background: #fff; }

    /* Article hero */
    .article-hero {
      padding: 9rem 6% 3.5rem;
      color: #fff;
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      transition: background-image 0.5s ease;
    }
    .article-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(10,37,64,0.92) 0%, rgba(10,37,64,0.78) 100%),
        radial-gradient(circle at 15% 30%, rgba(255,107,26,0.2) 0%, transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(244,178,35,0.15) 0%, transparent 45%);
    }
    .article-hero .container { max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
    .article-hero .crumbs {
      font-size: 0.8rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--autotek-gold);
      margin-bottom: 1.5rem;
    }
    .article-hero .crumbs a { color: #cbd5e1; }
    .article-hero .crumbs a:hover { color: var(--autotek-gold); }
    .article-hero .cat-pill {
      display: inline-block;
      padding: 0.4rem 1rem;
      background: var(--autotek-accent);
      border-radius: 100px;
      font-size: 0.75rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      margin-bottom: 1.2rem;
    }
    .article-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 4.5vw, 3.6rem);
      font-weight: 900;
      line-height: 1.12;
      margin-bottom: 1rem;
      letter-spacing: -0.5px;
    }
    .article-hero .lead {
      color: #cbd5e1;
      font-size: 1.12rem;
      line-height: 1.7;
      max-width: 780px;
      margin-bottom: 2rem;
    }
    .article-hero .meta-bar {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255,255,255,0.15);
      font-size: 0.88rem;
      color: #cbd5e1;
    }
    .article-hero .meta-bar span { display: inline-flex; align-items: center; gap: 0.5rem; }
    .article-hero .meta-bar i { color: var(--autotek-gold); }

    /* Topic switcher chips (below hero) */
    .topic-switch {
      padding: 1.5rem 6%;
      background: #fff;
      border-bottom: 1px solid var(--autotek-border);
      position: sticky;
      top: 78px;
      z-index: 50;
      box-shadow: 0 2px 10px rgba(10,37,64,0.04);
    }
    .topic-switch .container {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .topic-switch strong {
      font-size: 0.75rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--autotek-gray);
      margin-right: 0.5rem;
    }
    .topic-switch a.fchip {
      padding: 0.55rem 1rem;
      background: transparent;
      border: 1.5px solid var(--autotek-border);
      border-radius: 100px;
      font-size: 0.82rem;
      color: var(--autotek-secondary);
      font-weight: 600;
      transition: all 0.25s ease;
    }
    .topic-switch a.fchip:hover { border-color: var(--autotek-accent); color: var(--autotek-accent); }
    .topic-switch a.fchip.active { background: var(--autotek-accent); border-color: var(--autotek-accent); color: #fff; }

    /* Article body */
    .article-tray { padding: 4rem 6%; }
    .article-tray .container {
      max-width: 960px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 3.5rem;
      align-items: start;
    }
    .toc {
      position: sticky;
      top: 160px;
      border-left: 2px solid var(--autotek-border);
      padding-left: 1.3rem;
    }
    .toc strong {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--autotek-accent);
      margin-bottom: 1rem;
      font-weight: 800;
    }
    .toc ul { list-style: none; padding: 0; margin: 0; }
    .toc li { margin-bottom: 0.7rem; }
    .toc a {
      font-size: 0.88rem;
      color: var(--autotek-secondary);
      font-weight: 500;
      display: block;
      transition: color 0.2s ease;
      line-height: 1.4;
    }
    .toc a:hover { color: var(--autotek-accent); }

    .article-content {
      font-size: 1.02rem;
      line-height: 1.85;
      color: var(--autotek-secondary);
    }
    .article-content > p:first-of-type {
      font-size: 1.18rem;
      line-height: 1.65;
      color: var(--autotek-primary);
      font-weight: 500;
      margin-bottom: 2rem;
    }
    .article-content h2 {
      font-family: var(--font-display);
      font-size: 1.7rem;
      color: var(--autotek-primary);
      font-weight: 900;
      line-height: 1.25;
      margin: 3rem 0 1.2rem;
      scroll-margin-top: 160px;
    }
    .article-content h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      color: var(--autotek-primary);
      font-weight: 800;
      margin: 1.8rem 0 0.7rem;
    }
    .article-content p { margin-bottom: 1.1rem; }
    .article-content ul, .article-content ol { margin: 0 0 1.4rem 1.5rem; padding: 0; }
    .article-content li { margin-bottom: 0.4rem; line-height: 1.7; }
    .article-content strong { color: var(--autotek-primary); font-weight: 700; }
    .article-content a { color: var(--autotek-accent); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
    .article-content a:hover { color: var(--autotek-accent-hover); }
    .article-content .callout {
      background: var(--autotek-light);
      border-left: 4px solid var(--autotek-accent);
      padding: 1.3rem 1.6rem;
      border-radius: 0 8px 8px 0;
      margin: 2rem 0;
      font-size: 0.95rem;
    }
    .article-content .callout strong.tag { display: block; color: var(--autotek-accent); text-transform: uppercase; letter-spacing: 1px; font-size: 0.76rem; margin-bottom: 0.4rem; }
    .article-content .fact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0; }
    .article-content .fact { background: #fff; border: 1px solid var(--autotek-border); border-radius: 10px; padding: 1.3rem; text-align: center; }
    .article-content .fact strong { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--autotek-accent); line-height: 1; margin-bottom: 0.3rem; }
    .article-content .fact span { font-size: 0.8rem; color: var(--autotek-gray); letter-spacing: 0.5px; }

    /* FAQ */
    .faq-section { background: var(--autotek-light); padding: 5rem 6%; }
    .faq-section .container { max-width: 960px; margin: 0 auto; }
    .faq-section .eyebrow { text-align: center; display: block; }
    .faq-section h2 { text-align: center; font-family: var(--font-display); font-size: 2rem; color: var(--autotek-primary); margin-bottom: 2.5rem; font-weight: 900; }
    .faq-item { background: #fff; border: 1px solid var(--autotek-border); border-radius: var(--radius-md); margin-bottom: 0.8rem; overflow: hidden; }
    .faq-item summary { padding: 1.3rem 1.8rem; cursor: pointer; font-weight: 700; color: var(--autotek-primary); font-family: var(--font-display); font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: '+'; color: var(--autotek-accent); font-size: 1.5rem; font-weight: 300; transition: transform 0.3s ease; }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item .answer { padding: 0 1.8rem 1.5rem; color: var(--autotek-secondary); line-height: 1.7; font-size: 0.96rem; }

    /* Related topics */
    .related-topics { padding: 5rem 6%; background: #fff; }
    .related-topics .container { max-width: 1100px; margin: 0 auto; }
    .related-topics .eyebrow { text-align: center; display: block; }
    .related-topics h2 { text-align: center; font-family: var(--font-display); font-size: 2rem; color: var(--autotek-primary); margin-bottom: 2.5rem; font-weight: 900; }
    .related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .related-tile { padding: 1.5rem 1.3rem; border: 1.5px solid var(--autotek-border); border-radius: var(--radius-md); transition: all 0.3s ease; display: block; }
    .related-tile:hover { border-color: var(--autotek-accent); transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .related-tile .ico { width: 42px; height: 42px; background: rgba(255,107,26,0.12); color: var(--autotek-accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; font-size: 1rem; }
    .related-tile h4 { font-family: var(--font-display); color: var(--autotek-primary); font-size: 1rem; margin-bottom: 0.3rem; font-weight: 800; }
    .related-tile p { font-size: 0.82rem; color: var(--autotek-gray); line-height: 1.5; }

    @media (max-width: 992px) {
      .article-tray .container { grid-template-columns: 1fr; gap: 2rem; }
      .toc { position: static; border-left: none; border-top: 2px solid var(--autotek-border); padding-left: 0; padding-top: 1.5rem; }
      .related-grid { grid-template-columns: 1fr 1fr; }
      .article-content .fact-grid { grid-template-columns: 1fr 1fr; }
      .topic-switch { top: 65px; }
    }
    @media (max-width: 600px) {
      .related-grid { grid-template-columns: 1fr; }
      .article-content .fact-grid { grid-template-columns: 1fr; }
      .article-hero .meta-bar { gap: 1rem; font-size: 0.82rem; }
    }
  

  
    /* ====== BLOG PAGE — magazine layout ====== */
    body { background: #fafbfd; }

    /* Magazine masthead */
    .mag-head {
      padding: 9rem 6% 3rem;
      background: #fff;
      border-bottom: 1px solid var(--autotek-border);
    }
    .mag-head .container { max-width: 1280px; margin: 0 auto; }
    .mag-head .meta-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 1.5rem;
      margin-bottom: 2.5rem;
      border-bottom: 1px solid var(--autotek-border);
      font-size: 0.82rem;
      color: var(--autotek-gray);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .mag-head .title-row {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 3rem;
      align-items: end;
    }
    .mag-head h1 {
      font-family: var(--font-display);
      font-size: clamp(3rem, 7vw, 6rem);
      font-weight: 900;
      line-height: 0.95;
      color: var(--autotek-primary);
      letter-spacing: -2px;
    }
    .mag-head h1 em { color: var(--autotek-accent); font-style: normal; font-style: italic; }
    .mag-head p {
      color: var(--autotek-gray);
      font-size: 1.05rem;
      max-width: 420px;
    }

    /* Filter chips */
    .filters {
      padding: 2rem 6%;
      background: #fff;
      border-bottom: 1px solid var(--autotek-border);
    }
    .filters .container { max-width: 1280px; margin: 0 auto; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
    .filters strong {
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--autotek-gray);
      margin-right: 0.5rem;
    }
    .filters .fchip {
      padding: 0.6rem 1.1rem;
      background: transparent;
      border: 1.5px solid var(--autotek-border);
      border-radius: 100px;
      font-size: 0.85rem;
      color: var(--autotek-secondary);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .filters .fchip.active, .filters .fchip:hover {
      background: var(--autotek-primary);
      color: #fff;
      border-color: var(--autotek-primary);
    }
    .filters .fchip.active { background: var(--autotek-accent); border-color: var(--autotek-accent); }

    /* Featured post */
    .featured { padding: 4rem 6% 2rem; }
    .featured .container { max-width: 1280px; margin: 0 auto; }
    .featured-card {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      background: #fff;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .featured-card .image {
      background-image: linear-gradient(135deg, rgba(10,37,64,0.15) 0%, rgba(10,37,64,0.4) 100%),
                        url('assets/hero-secrion-img/power-coating.jpg');
      background-size: cover;
      background-position: center;
      min-height: 460px;
      position: relative;
    }
    .featured-card .image .tag {
      position: absolute;
      top: 1.5rem; left: 1.5rem;
      background: var(--autotek-accent);
      color: #fff;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      font-size: 0.75rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .featured-card .content {
      padding: 3.5rem 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .featured-card .label {
      font-size: 0.75rem;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--autotek-accent);
      font-weight: 800;
      margin-bottom: 1rem;
    }
    .featured-card h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      color: var(--autotek-primary);
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 1rem;
    }
    .featured-card p {
      color: var(--autotek-gray);
      font-size: 1rem;
      line-height: 1.8;
      margin-bottom: 2rem;
    }
    .featured-card .meta {
      display: flex;
      gap: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--autotek-border);
      align-items: center;
    }
    .featured-card .meta .date {
      font-size: 0.85rem;
      color: var(--autotek-gray);
    }
    .featured-card .meta .read-time {
      font-size: 0.85rem;
      color: var(--autotek-gray);
      padding-left: 1rem;
      border-left: 1px solid var(--autotek-border);
    }
    .featured-card .meta .read {
      margin-left: auto;
      color: var(--autotek-accent);
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* Article grid */
    .articles { padding: 3rem 6% 6rem; }
    .articles .container { max-width: 1280px; margin: 0 auto; }
    .articles-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }
    .article {
      background: #fff;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: all 0.35s var(--ease);
      display: flex;
      flex-direction: column;
    }
    .article:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }
    .article .thumb {
      aspect-ratio: 16/10;
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
    }
    .article .thumb::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 50%, rgba(10,37,64,0.3) 100%);
    }
    .article .thumb .cat {
      position: absolute;
      bottom: 1rem; left: 1rem;
      background: #fff;
      color: var(--autotek-primary);
      padding: 0.4rem 0.85rem;
      border-radius: 4px;
      font-size: 0.7rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 800;
      z-index: 1;
    }
    .article .body {
      padding: 1.8rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .article .date-line {
      font-size: 0.78rem;
      color: var(--autotek-gray);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .article .date-line::before {
      content: '';
      width: 20px; height: 2px; background: var(--autotek-accent);
    }
    .article h3 {
      font-family: var(--font-display);
      font-size: 1.3rem;
      color: var(--autotek-primary);
      line-height: 1.25;
      margin-bottom: 0.8rem;
      font-weight: 800;
    }
    .article p {
      color: var(--autotek-gray);
      font-size: 0.95rem;
      line-height: 1.7;
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .article .read-more {
      color: var(--autotek-accent);
      font-weight: 700;
      font-size: 0.82rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
    }
    .article .read-more i { transition: transform 0.3s ease; }
    .article:hover .read-more i { transform: translateX(5px); }

    /* Topic nav (related services / topical authority block) */
    .topic-nav {
      margin-top: 4rem;
      padding: 2.5rem 2.5rem;
      background: #fff;
      border-radius: var(--radius-md);
      border: 1px solid var(--autotek-border);
    }
    .topic-nav h2.heading-sm {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.4rem;
      font-weight: 900;
      margin-bottom: 0.5rem;
    }
    .topic-nav p { color: var(--autotek-gray); font-size: 0.95rem; margin-bottom: 1.5rem; }
    .topic-nav .topic-links {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.75rem;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .topic-nav .topic-links li a {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.9rem 1.1rem;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-sm);
      color: var(--autotek-secondary);
      font-weight: 600;
      font-size: 0.92rem;
      transition: all 0.25s ease;
    }
    .topic-nav .topic-links li a i { color: var(--autotek-accent); }
    .topic-nav .topic-links li a:hover {
      border-color: var(--autotek-accent);
      color: var(--autotek-accent);
      background: #fffaf5;
      transform: translateX(4px);
    }
    @media (max-width: 992px) {
      .topic-nav .topic-links { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 650px) {
      .topic-nav .topic-links { grid-template-columns: 1fr; }
      .topic-nav { padding: 1.8rem; }
    }

    /* Newsletter */
    .newsletter {
      padding: 5rem 6%;
      background: var(--autotek-primary);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .newsletter::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 15% 80%, rgba(255,107,26,0.25) 0%, transparent 45%),
        radial-gradient(circle at 85% 20%, rgba(244,178,35,0.15) 0%, transparent 45%);
    }
    .newsletter .container {
      max-width: 900px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .newsletter h2 {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 900;
      margin-bottom: 1rem;
    }
    .newsletter p { color: #cbd5e1; margin-bottom: 2rem; }
    .newsletter form {
      display: flex;
      gap: 0.75rem;
      max-width: 500px;
      margin: 0 auto;
    }
    .newsletter input {
      flex: 1;
      padding: 1rem 1.5rem;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 0.95rem;
      font-family: inherit;
      background: rgba(255,255,255,0.95);
    }
    .newsletter button {
      padding: 1rem 1.8rem;
      border: none;
      background: var(--autotek-accent);
      color: #fff;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      transition: all 0.25s ease;
    }
    .newsletter button:hover { background: var(--autotek-accent-hover); transform: translateY(-2px); }

    /* Reveal */
    [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
    [data-reveal].revealed { opacity: 1; transform: none; }

    @media (max-width: 992px) {
      .mag-head .title-row { grid-template-columns: 1fr; }
      .featured-card { grid-template-columns: 1fr; }
      .featured-card .image { min-height: 280px; }
      .featured-card .content { padding: 2.5rem 2rem; }
      .articles-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 650px) {
      .articles-grid { grid-template-columns: 1fr; }
      .newsletter form { flex-direction: column; }
    }
  

    /* ====== CAREER PAGE — diagonal split + form ====== */
    body { background: #fff; }

    /* Diagonal hero */
    .career-hero {
      padding: 10rem 6% 6rem;
      background: linear-gradient(115deg, var(--autotek-primary) 0%, var(--autotek-primary) 55%, var(--autotek-accent) 55%, var(--autotek-accent-hover) 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .career-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,255,255,0.03) 20px 21px);
    }
    .career-hero .inner {
      position: relative;
      z-index: 1;
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 4rem;
      align-items: center;
    }
    .career-hero .crumbs { font-size: 0.8rem; letter-spacing: 2px; color: var(--autotek-gold); text-transform: uppercase; margin-bottom: 1rem; }
    .career-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 5.5vw, 4.4rem);
      font-weight: 900;
      line-height: 1.05;
      margin-bottom: 1.5rem;
      letter-spacing: -1px;
    }
    .career-hero h1 span {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      padding: 0 0.6rem;
      border-radius: 6px;
      color: var(--autotek-gold);
    }
    .career-hero p { color: #e2e8f0; font-size: 1.1rem; max-width: 500px; margin-bottom: 2rem; line-height: 1.7; }
    .career-hero .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      max-width: 500px;
    }
    .career-hero .hero-stat {
      padding: 1.2rem;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      backdrop-filter: blur(8px);
    }
    .career-hero .hero-stat strong {
      display: block;
      font-family: var(--font-display);
      font-size: 1.6rem;
      color: var(--autotek-gold);
      line-height: 1;
      margin-bottom: 0.3rem;
    }
    .career-hero .hero-stat span { font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: #cbd5e1; }

    .career-hero .visual-card {
      background: #fff;
      color: var(--autotek-primary);
      padding: 2.5rem;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      transform: rotate(1.5deg);
      transition: transform 0.4s ease;
    }
    .career-hero .visual-card:hover { transform: rotate(0deg); }
    .career-hero .visual-card .sig {
      font-family: var(--font-display);
      color: var(--autotek-accent);
      font-size: 0.9rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 800;
      margin-bottom: 0.6rem;
    }
    .career-hero .visual-card h3 {
      font-family: var(--font-display);
      font-size: 1.6rem;
      line-height: 1.3;
      margin-bottom: 1.2rem;
    }
    .career-hero .visual-card .why-list { display: grid; gap: 0.8rem; }
    .career-hero .visual-card .why-list li {
      padding-left: 2rem;
      position: relative;
      font-size: 0.95rem;
      color: var(--autotek-secondary);
    }
    .career-hero .visual-card .why-list li::before {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute; left: 0; top: 3px;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: var(--autotek-accent);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem;
    }

    /* Culture section */
    .culture {
      padding: 6rem 6%;
      background: var(--autotek-light);
    }
    .culture .container { max-width: 1280px; margin: 0 auto; }
    .culture .head { text-align: center; margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto; }
    .culture-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    .culture-item {
      background: #fff;
      padding: 2.2rem;
      border-radius: var(--radius-md);
      position: relative;
      overflow: hidden;
      border-top: 4px solid transparent;
      transition: all 0.35s ease;
    }
    .culture-item:hover {
      border-top-color: var(--autotek-accent);
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }
    .culture-item .num {
      font-family: var(--font-display);
      font-size: 3rem;
      font-weight: 900;
      color: var(--autotek-border);
      line-height: 1;
      position: absolute;
      top: 1rem; right: 1.5rem;
      transition: color 0.3s ease;
    }
    .culture-item:hover .num { color: var(--autotek-accent); }
    .culture-item .ico {
      width: 50px; height: 50px;
      background: var(--autotek-primary);
      color: var(--autotek-gold);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem;
      margin-bottom: 1.2rem;
    }
    .culture-item h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.1rem;
      margin-bottom: 0.6rem;
    }
    .culture-item p { font-size: 0.92rem; color: var(--autotek-gray); line-height: 1.6; }

    /* Openings accordion */
    .openings {
      padding: 6rem 6%;
      background: #fff;
    }
    .openings .container { max-width: 900px; margin: 0 auto; }
    .openings .head { text-align: center; margin-bottom: 3rem; }
    .acc-item {
      background: var(--autotek-light);
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-md);
      margin-bottom: 1rem;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    .acc-item.open { border-color: var(--autotek-accent); box-shadow: var(--shadow-md); }
    .acc-item .acc-head {
      padding: 1.5rem 1.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .acc-item .acc-head .tag {
      font-size: 0.7rem;
      padding: 0.3rem 0.6rem;
      background: rgba(255,107,26,0.12);
      color: var(--autotek-accent);
      border-radius: 4px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
    }
    .acc-item .acc-head h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.15rem;
      flex: 1;
    }
    .acc-item .acc-head .loc {
      font-size: 0.85rem;
      color: var(--autotek-gray);
      margin-right: 1rem;
    }
    .acc-item .acc-head .plus {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: #fff;
      color: var(--autotek-primary);
      display: flex; align-items: center; justify-content: center;
      border: 1px solid var(--autotek-border);
      transition: all 0.3s ease;
      flex-shrink: 0;
    }
    .acc-item.open .plus { background: var(--autotek-accent); color: #fff; border-color: var(--autotek-accent); transform: rotate(45deg); }
    .acc-item .acc-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .acc-item.open .acc-body { max-height: 500px; }
    .acc-item .acc-body-inner {
      padding: 0 1.8rem 1.8rem;
      color: var(--autotek-secondary);
    }
    .acc-item .acc-body-inner p { margin-bottom: 1rem; font-size: 0.95rem; line-height: 1.7; }
    .acc-item .acc-body-inner .skills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
    .acc-item .acc-body-inner .skills span { padding: 0.35rem 0.8rem; background: #fff; border: 1px solid var(--autotek-border); border-radius: 100px; font-size: 0.8rem; color: var(--autotek-secondary); }

    /* Application form */
    .apply {
      padding: 6rem 6%;
      background: linear-gradient(180deg, var(--autotek-light) 0%, #fff 100%);
    }
    .apply .container {
      max-width: 960px;
      margin: 0 auto;
      background: #fff;
      border-radius: var(--radius-lg);
      padding: 4rem 3.5rem;
      box-shadow: var(--shadow-md);
      border-top: 5px solid var(--autotek-accent);
    }
    .apply .form-head { text-align: center; margin-bottom: 2.5rem; }
    .apply form .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.25rem;
      margin-bottom: 1.25rem;
    }
    .apply form .row.one { grid-template-columns: 1fr; }
    .apply form label {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--autotek-secondary);
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .apply form input, .apply form select, .apply form textarea {
      width: 100%;
      padding: 0.9rem 1.1rem;
      border: 1.5px solid var(--autotek-border);
      border-radius: var(--radius-sm);
      font-size: 0.95rem;
      font-family: inherit;
      color: var(--autotek-primary);
      background: #fff;
      transition: all 0.25s ease;
    }
    .apply form input:focus, .apply form select:focus, .apply form textarea:focus {
      outline: none;
      border-color: var(--autotek-accent);
      box-shadow: 0 0 0 4px rgba(255,107,26,0.12);
    }
    .apply form textarea { resize: vertical; min-height: 120px; }
    .apply form .file-drop {
      border: 2px dashed var(--autotek-border);
      border-radius: var(--radius-md);
      padding: 1.8rem;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s ease;
      background: var(--autotek-light);
    }
    .apply form .file-drop:hover { border-color: var(--autotek-accent); background: #fff7f0; }
    .apply form .file-drop i { color: var(--autotek-accent); font-size: 1.6rem; margin-bottom: 0.6rem; }
    .apply form .file-drop p { font-size: 0.9rem; color: var(--autotek-secondary); margin: 0; }
    .apply form .file-drop input[type="file"] { display: none; }
    .apply form button[type="submit"] {
      padding: 1.1rem 2.5rem;
      background: var(--autotek-accent);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.25s ease;
      margin-top: 1rem;
    }
    .apply form button[type="submit"]:hover { background: var(--autotek-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .apply form .form-msg { margin-top: 1rem; font-size: 0.9rem; color: var(--autotek-gray); }
    .apply form .form-msg.success { color: #16a34a; font-weight: 600; }
    .apply .process-note {
      text-align: center;
      margin-top: 1.5rem;
      font-size: 0.9rem;
      color: var(--autotek-gray);
    }
    .apply .process-note strong { color: var(--autotek-primary); }

    /* Reveal */
    [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
    [data-reveal].revealed { opacity: 1; transform: none; }

    @media (max-width: 992px) {
      .career-hero {
        background: linear-gradient(180deg, var(--autotek-primary) 0%, var(--autotek-secondary) 100%);
      }
      .career-hero .inner { grid-template-columns: 1fr; gap: 3rem; }
      .culture-grid { grid-template-columns: 1fr 1fr; }
      .apply form .row { grid-template-columns: 1fr; }
      .apply .container { padding: 3rem 2rem; }
    }
    @media (max-width: 600px) {
      .culture-grid { grid-template-columns: 1fr; }
      .career-hero .hero-stats { grid-template-columns: 1fr; }
      .acc-item .acc-head { flex-wrap: wrap; }
    }
  

   
    /* ====== CONTACT PAGE — asymmetric grid with quick-action cards ====== */
    body { background: var(--autotek-light); }

    /* Curved hero */
    .contact-hero {
      padding: 10rem 6% 10rem;
      background: linear-gradient(135deg, var(--autotek-primary) 0%, var(--autotek-secondary) 100%);
      color: #fff;
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .contact-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 15% 30%, rgba(255,107,26,0.2) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(244,178,35,0.15) 0%, transparent 40%);
    }
    .contact-hero::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 80px;
      background: var(--autotek-light);
      clip-path: ellipse(80% 100% at 50% 100%);
    }
    .contact-hero .inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
    .contact-hero .crumbs { font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; color: var(--autotek-gold); }
    .contact-hero h1 {
      font-family: var(--font-display);
      font-size: clamp(2.6rem, 6vw, 4.8rem);
      font-weight: 900;
      line-height: 1.05;
      margin-bottom: 1.2rem;
      letter-spacing: -1px;
    }
    .contact-hero h1 span { color: var(--autotek-accent); }
    .contact-hero p { color: #cbd5e1; font-size: 1.1rem; max-width: 600px; margin: 0 auto; line-height: 1.7; }

    /* Floating quick contact cards */
    .quick-contact {
      margin: -6rem auto 0;
      max-width: 1180px;
      padding: 0 6%;
      position: relative;
      z-index: 10;
    }
    .quick-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }
    .qc-card {
      background: #fff;
      padding: 2.5rem 2rem;
      border-radius: var(--radius-lg);
      text-align: center;
      box-shadow: var(--shadow-md);
      transition: all 0.35s var(--ease);
      position: relative;
      overflow: hidden;
    }
    .qc-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: var(--autotek-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }
    .qc-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-lg);
    }
    .qc-card:hover::before { transform: scaleX(1); }
    .qc-card .ico {
      width: 64px; height: 64px;
      margin: 0 auto 1.2rem;
      background: linear-gradient(135deg, var(--autotek-accent), var(--autotek-accent-hover));
      color: #fff;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      transform: rotate(-5deg);
      transition: transform 0.4s ease;
    }
    .qc-card:hover .ico { transform: rotate(5deg) scale(1.08); }
    .qc-card h3 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.1rem;
      margin-bottom: 0.4rem;
    }
    .qc-card p {
      font-size: 0.85rem;
      color: var(--autotek-gray);
      margin-bottom: 1.2rem;
    }
    .qc-card a {
      color: var(--autotek-primary);
      font-weight: 700;
      font-size: 0.95rem;
      display: block;
      margin-bottom: 0.3rem;
      transition: color 0.2s ease;
    }
    .qc-card a:hover { color: var(--autotek-accent); }

    /* Main contact grid */
    .contact-main { padding: 6rem 6%; }
    .contact-main .container { max-width: 1280px; margin: 0 auto; }
    .contact-main .grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 4rem;
      align-items: start;
    }

    /* Form card */
    .contact-form {
      background: #fff;
      padding: 3rem;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }
    .contact-form h2 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.8rem;
      font-weight: 900;
      margin-bottom: 0.5rem;
    }
    .contact-form .sub { color: var(--autotek-gray); margin-bottom: 2rem; font-size: 0.95rem; }
    .contact-form .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .contact-form .row.one { grid-template-columns: 1fr; }
    .contact-form label {
      display: block;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--autotek-secondary);
      margin-bottom: 0.4rem;
    }
    .contact-form input, .contact-form select, .contact-form textarea {
      width: 100%;
      padding: 0.9rem 1.1rem;
      border: 1.5px solid var(--autotek-border);
      border-radius: var(--radius-sm);
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--autotek-primary);
      background: #fff;
      transition: all 0.25s ease;
    }
    .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
      outline: none;
      border-color: var(--autotek-accent);
      box-shadow: 0 0 0 4px rgba(255,107,26,0.12);
    }
    .contact-form textarea { resize: vertical; min-height: 130px; }
    .contact-form button[type="submit"] {
      width: 100%;
      padding: 1.1rem 2rem;
      background: var(--autotek-primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-sm);
      font-weight: 700;
      font-size: 0.95rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      margin-top: 1rem;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
    }
    .contact-form button[type="submit"]:hover { background: var(--autotek-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .contact-form .form-msg { margin-top: 1rem; font-size: 0.9rem; color: var(--autotek-gray); text-align: center; }
    .contact-form .form-msg.success { color: #16a34a; font-weight: 600; }

    /* Info side */
    .info-card {
      background: var(--autotek-primary);
      color: #fff;
      padding: 3rem;
      border-radius: var(--radius-lg);
      position: relative;
      overflow: hidden;
      margin-bottom: 2rem;
    }
    .info-card::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 200px; height: 200px;
      background: radial-gradient(circle, rgba(255,107,26,0.35) 0%, transparent 60%);
    }
    .info-card > * { position: relative; z-index: 1; }
    .info-card h3 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      margin-bottom: 0.4rem;
    }
    .info-card .sub { color: #cbd5e1; font-size: 0.95rem; margin-bottom: 2rem; }
    .info-card .info-row {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.5rem;
      align-items: flex-start;
    }
    .info-card .info-row .ico {
      width: 42px; height: 42px;
      border-radius: 10px;
      background: rgba(255,255,255,0.1);
      color: var(--autotek-gold);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .info-card .info-row strong {
      display: block;
      font-size: 0.78rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--autotek-gold);
      margin-bottom: 0.3rem;
    }
    .info-card .info-row p, .info-card .info-row a {
      color: #fff;
      font-size: 0.98rem;
      line-height: 1.5;
      font-weight: 500;
    }
    .info-card .info-row a { display: block; }
    .info-card .info-row a:hover { color: var(--autotek-gold); }

    /* Hours card */
    .hours-card {
      background: #fff;
      padding: 2rem;
      border-radius: var(--radius-lg);
      border: 1px solid var(--autotek-border);
    }
    .hours-card h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.1rem;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .hours-card h4 i { color: var(--autotek-accent); }
    .hours-card .hrs-row {
      display: flex;
      justify-content: space-between;
      padding: 0.7rem 0;
      border-bottom: 1px solid var(--autotek-border);
      font-size: 0.92rem;
      color: var(--autotek-secondary);
    }
    .hours-card .hrs-row:last-child { border: none; }
    .hours-card .hrs-row strong { font-weight: 600; color: var(--autotek-primary); }
    .hours-card .hrs-row span.closed { color: var(--autotek-accent); font-weight: 700; }

    /* Locations with map placeholder */
    .locations {
      padding: 6rem 6%;
      background: #fff;
    }
    .locations .container { max-width: 1280px; margin: 0 auto; }
    .locations .head { text-align: center; margin-bottom: 3rem; }
    .loc-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
    .loc-tile {
      padding: 2rem 1.8rem;
      border: 1.5px solid var(--autotek-border);
      border-radius: var(--radius-md);
      background: var(--autotek-light);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .loc-tile::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--autotek-accent), var(--autotek-accent-hover));
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }
    .loc-tile:hover { transform: translateY(-6px); border-color: transparent; }
    .loc-tile:hover::before { opacity: 1; }
    .loc-tile > * { position: relative; z-index: 1; transition: color 0.3s ease; }
    .loc-tile .pin {
      width: 40px; height: 40px;
      background: #fff;
      color: var(--autotek-accent);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1rem;
    }
    .loc-tile:hover .pin { background: rgba(255,255,255,0.15); color: #fff; }
    .loc-tile h4 {
      font-family: var(--font-display);
      color: var(--autotek-primary);
      font-size: 1.05rem;
      margin-bottom: 0.3rem;
    }
    .loc-tile:hover h4, .loc-tile:hover p, .loc-tile:hover .region { color: #fff; }
    .loc-tile .region {
      font-size: 0.82rem;
      color: var(--autotek-accent);
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
      margin-bottom: 0.8rem;
      display: block;
    }
    .loc-tile p { font-size: 0.88rem; color: var(--autotek-gray); line-height: 1.6; }

    /* Map region */
    .map-block {
      padding: 0 6% 6rem;
    }
    .map-block .container {
      max-width: 1280px;
      margin: 0 auto;
      background: #fff;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      display: grid;
      grid-template-columns: 1fr 1.2fr;
    }
    .map-block .info-side { padding: 3rem; }
    .map-block .info-side h2 {
      font-family: var(--font-display);
      font-size: 2rem;
      color: var(--autotek-primary);
      font-weight: 900;
      margin-bottom: 1rem;
    }
    .map-block .info-side p { color: var(--autotek-gray); margin-bottom: 2rem; }
    .map-block .info-side .btn-primary { margin-bottom: 1rem; }
    /* 2x2 grid of live Google Maps iframes — one per unit */
    .map-block .map-frame {
      background: var(--autotek-light);
      min-height: auto;
      padding: 0.75rem;
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 1fr;
      gap: 0.75rem;
    }
    .map-block .map-frame::before { content: none; display: none; }
    .map-block .map-frame .map-card {
      position: relative;
      background: #fff;
      border: 1px solid var(--autotek-border);
      border-radius: var(--radius-sm);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 220px;
    }
    .map-block .map-frame .map-card .map-label {
      padding: 0.6rem 0.9rem;
      background: var(--autotek-primary);
      color: #fff;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.8rem;
      line-height: 1.3;
    }
    .map-block .map-frame .map-card .map-label i { color: var(--autotek-gold); flex-shrink: 0; }
    .map-block .map-frame .map-card .map-label strong {
      display: block;
      font-family: var(--font-display);
      font-size: 0.88rem;
      font-weight: 800;
      color: #fff;
    }
    .map-block .map-frame .map-card .map-label span {
      display: block;
      font-size: 0.7rem;
      color: #cbd5e1;
      margin-top: 0.15rem;
    }
    .map-block .map-frame .map-card iframe {
      border: 0;
      display: block;
      flex: 1;
      width: 100%;
      min-height: 180px;
    }
    @media (max-width: 700px) {
      .map-block .map-frame { grid-template-columns: 1fr; }
    }

    /* FAQ mini */
    .faq-mini {
      padding: 6rem 6%;
      background: var(--autotek-light);
    }
    .faq-mini .container { max-width: 900px; margin: 0 auto; }
    .faq-mini .head { text-align: center; margin-bottom: 3rem; }

    /* Reveal */
    [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
    [data-reveal].revealed { opacity: 1; transform: none; }

    @media (max-width: 992px) {
      .contact-hero { padding: 9rem 6% 8rem; }
      .quick-grid { grid-template-columns: 1fr; }
      .quick-contact { margin-top: -5rem; }
      .contact-main .grid { grid-template-columns: 1fr; }
      .loc-grid { grid-template-columns: 1fr 1fr; }
      .map-block .container { grid-template-columns: 1fr; }
      .map-block .info-side { padding: 2.5rem 2rem; }
    }
    @media (max-width: 600px) {
      .loc-grid { grid-template-columns: 1fr; }
      .contact-form, .info-card { padding: 2rem 1.5rem; }
      .contact-form .row { grid-template-columns: 1fr; }
    }