/* =============== */
/* BASIC RESET     */
/* =============== */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffffff;      /* default text color */
  background: #050816; /* dark site background */
}

/* If you have a wrapper around everything, let it stretch */
.site-wrapper,
.page-main {
  min-height: 100vh;
}

/* Layout helpers */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ================= */
/* HEADER & NAV      */
/* ================= */

.site-header {
  background: #020617;
  color: #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.logo-main {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1rem;
}

.logo-sub {
  font-size: 0.75rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.main-nav a {
  text-decoration: none;
}

.nav-link {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
  background: #111827;
}

.nav-link.active {
  background: #e5e7eb;
  color: #020617;
}

.nav-btn {
  border: 1px solid #6b7280;
}

@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ===================== */
/* HERO (UNIFIED SPACING)*/
/* ===================== */

/* Base hero style used on all pages */
.hero {
  background: radial-gradient(circle at top left, #020617, #111827 55%, #030712);
  color: #f9fafb;
  padding: 0.75rem 0 1.5rem;  /* same padding for every page */
}

/* Hook for subpages (Tint Laws, Contact, etc.) – no extra padding */
.hero-subpage {
  /* inherits padding from .hero */
}

/* If you ever want a taller home hero, use hero-home on that page */
.hero-home {
  padding-bottom: 2.5rem;
}

/* Tint pages: same padding, just different background */

/* Layout inside hero */

.hero-inner {
  display: flex;
  gap: 2.5rem;
  align-items: stretch;
}

.hero-inner-column {
  flex-direction: column;
}

.hero-text {
  flex: 2;
}

.hero-text h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 0.75rem; /* no top margin = consistent gap */
}

.hero-text p {
  margin: 0 0 1.25rem;
  color: #e5e7eb;
}

/* Optional hero card on home page */
.hero-card {
  flex: 1.3;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #1f2937;
}

.hero-card h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.hero-card ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.hero-phone {
  font-size: 0.95rem;
  color: #e5e7eb;
}

.hero-phone a {
  color: #a5b4fc;
  text-decoration: none;
}

.hero-phone a:hover {
  text-decoration: underline;
}

/* Optional hero photo (used on tint page) */
.hero-photo {
  flex: 1 1 260px;
  display: flex;
  justify-content: center;
}

.hero-photo img {
  max-width: 360px;
  width: 100%;
  border-radius: 0.75rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  object-fit: cover;
}

@media (max-width: 860px) {
  .hero-inner {
    flex-direction: column;
  }
}

/* ============= */
/* BUTTONS       */
/* ============= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease,
    color 0.1s ease;
}

.btn.primary {
  background: #4f46e5;
  color: #f9fafb;
  box-shadow: 0 10px 18px rgba(79, 70, 229, 0.25);
}

.btn.primary:hover {
  background: #4338ca;
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

.btn.ghost:hover {
  background: #111827;
}

/* Older naming used on tint page */
.btn-primary,
.btn-ghost {
  display: inline-block;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.btn-primary {
  background: #2563eb;
  color: #f9fafb;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-ghost {
  border: 1px solid rgba(148, 163, 184, 0.9);
  color: #e5e7eb;
}

.btn-ghost:hover {
  background: rgba(15, 23, 42, 0.9);
}

/* ============= */
/* SECTIONS      */
/* ============= */

.section {
  padding: 2.5rem 0;
}

/* Smaller sction for Tint Laws page (less gap under header) */
.section-compact {
  padding-top: .25rem;
  padding-bottom: 1rem;
  margin-top: -0.5rem;  /* pulls the white card closer to the hero */
} 

.section-alt{
  background: linear-gradient(180deg, #050816, #0b1220);
}

.section-title {
  text-align: center;
  margin: 0 0 1.75rem;
  font-size: 1.4rem;
}

/* Make section text white on dark background */
.section,
.section p,
.section h2,
.section h3 {
  color: #ffffff;
}

/* ================ */
/* CARD GRID        */
/* ================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (max-width: 960px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: linear-gradient(180deg, #0b1220, #050816);
  color: #ffffff;
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}


.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.card p{ color: rgba(255,255,255,.9); }
.card li{ color: rgba(255,255,255,.9); }
.card-link{ color: #93c5fd; }

.card-link {
  font-size: 0.9rem;
  text-decoration: none;
  color: #4f46e5;
}

.card-link:hover {
  text-decoration: underline;
}

.shop-info a{
  color: #93c5fd;
  text-decoration: none;
}

.shop-info a:hover{
  text-decoration: underline;
}


/* ================= */
/* INFO / CONTACT    */
/* ================= */

.info-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2rem;
}

@media (max-width: 800px) {
  .info-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.highlight {
  font-weight: 600;
}

/* Make contact text readable on dark bg */
.contact-grid,
.contact-grid h2,
.contact-grid h3,
.contact-grid p,
.contact-grid li,
.contact-grid span {
  color: #ffffff;
}

.contact-grid a {
  color: #93c5fd;
  text-decoration: underline;
}

/* Simple lists */

.list-plain {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0 0;
}

.list-plain li {
  font-size: 0.95rem;
}

/* ================== */
/* TINT LAWS TOOL     */
/* ================== */

.tint-laws-tool {
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e7eb;
  max-width: 640px;
  margin: 0 auto;
}

/* Keep Tint Laws hero heading from adding extra gap */
.hero-tintlaws h1 {
  margin-top: 0;
}

/* Form controls used site-wide */

.field-label {
  font-size: 0.9rem;
  font-weight: 500;
  display: block;
  margin-bottom: 0.25rem;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid #d1d5db;
  font-size: 0.95rem;
  font-family: inherit;
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}

.textarea {
  resize: vertical;
}

.tint-laws-info {
  margin-top: 1rem;
}

.tint-laws-info p {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* ================== */
/* CONTACT FORM       */
/* ================== */

/* Contact page – navy card to match site */
.contact-form {
  background: linear-gradient(180deg, #0b1220, #050816);
  padding: 1.25rem 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  color: #ffffff;
}

.contact-form label {
  color: rgba(255,255,255,.85);
}

.contact-form .input,
.contact-form .select,
.contact-form .textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
}

.contact-form .input::placeholder,
.contact-form .textarea::placeholder {
  color: rgba(255,255,255,.55);
}

.contact-form .input:focus,
.contact-form .select:focus,
.contact-form .textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px rgba(96,165,250,.35);
}



.form-row {
  margin-bottom: 0.9rem;
}

.small-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.7rem;
}

/* Vehicle dropdowns on contact form */

.vehicle-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.vehicle-field {
  flex: 1 1 22%;
  min-width: 140px;
}

.vehicle-field label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: #111827;
}

/* ================== */
/* AUTOMOTIVE TINT    */
/* ================== */

.hero-tint .hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.hero-tint .hero-text {
  flex: 1 1 260px;
}

.hero-tint h1 {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
}

.hero-tint p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

.hero-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.hero-highlights li {
  margin-bottom: 0.25rem;
}

/* Tint overview icons */

.tint-overview {
  padding: 3rem 0 2rem;
}

.tint-overview h2 {
  text-align: center;
  margin-bottom: 2rem;
}

.tint-overview-grid {
  display: grid;
  gap: 1.5rem;
}

.tint-overview-item {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.tint-icon {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

/* Packages and cards */

.tint-packages {
  padding: 2.5rem 0 3rem;
}

.tint-packages h2 {
  text-align: center;
  margin-bottom: 0.25rem;
}

.tint-packages-note {
  text-align: center;
  margin-bottom: 2rem;
}

.tint-card-grid {
  display: grid;
  gap: 1.75rem;
}

.tint-card {
  background: rgba(15, 23, 42, 0.95);
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.tint-card-featured {
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: 0 18px 45px rgba(37, 99, 235, 0.45);
}

.tint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.tint-card-header h3 {
  margin: 0;
}

.tint-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.8);
}

.tint-tag-mid {
  border-color: rgba(52, 211, 153, 0.9);
}

.tint-tag-top {
  border-color: rgba(59, 130, 246, 0.95);
}

.tint-card-desc {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* Pricing table */

.tint-pricing {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.tint-pricing th,
.tint-pricing td {
  padding: 0.45rem 0.25rem;
  text-align: left;
}

.tint-pricing thead th {
  border-bottom: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tint-pricing tbody tr:nth-child(odd) {
  background: rgba(15, 23, 42, 0.7);
}

.tint-pricing .price {
  text-align: right;
  white-space: nowrap;
}

/* Feature bullets */

.tint-features {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.tint-features li {
  margin-bottom: 0.25rem;
}

/* Add-ons */

.tint-addons {
  margin-top: 2.5rem;
  background: rgba(15, 23, 42, 0.95);
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.tint-addons ul {
  list-style: disc;
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.addons-note {
  font-size: 0.95rem;
}

/* CTA at bottom */

.tint-cta {
  padding: 2.5rem 0 3rem;
  text-align: center;
}

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

.tint-cta p {
  margin-bottom: 1.5rem;
}

.tint-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* Responsive layout for tint grid */

@media (min-width: 768px) {
  .tint-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tint-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ============= */
/* FOOTER        */
/* ============= */

.site-footer {
  background: #020617;
  color: #9ca3af;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
  font-size: 0.85rem;
}

.footer-contact a {
  color: #e5e7eb;
  text-decoration: none;
}

.footer-contact a:hover {
  text-decoration: underline;
}
.main-nav .nav-link,
.main-nav .nav-link:link,
.main-nav .nav-link:visited {
  color: #e5e7eb;           /* normal links light gray */
  text-decoration: none;
}

.main-nav .nav-link:hover {
  color: #38bdf8;           /* hover color */
}

/* Active tab: white pill with dark text */
.main-nav .nav-link.active {
  background: #e5e7eb;
  color: #020617;
  border-bottom: none;      /* remove blue underline */
}




/* ================== */
/* GALLERY + REVIEWS  */
/* ================== */
.gallery-grid .card{overflow:hidden;}
.gallery-photo{width:100%; aspect-ratio: 4 / 3; object-fit: cover; display:block; border-radius:0.75rem; margin-bottom:0.75rem;}
.photo-caption{font-size:0.9rem; color: rgba(255,255,255,.85); margin:0;}
.reviews-strip{max-width:920px; margin:0 auto;}
.review-quote{font-size:0.95rem; color:rgba(255,255,255,.92); margin:0 0 0.35rem;}
.review-meta{font-size:0.85rem; color: rgba(255,255,255,.75); margin:0;}
/* ================== */

/* ================== */
/* PROPOSAL PAGE      */
/* ================== */

.film-desc {
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.4;
}

.film-icon {
  font-size: 1.4rem;
  margin-right: 6px;
}

.warranty {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.25);
  font-size: 0.95rem;
  line-height: 1.45;
}

.warranty strong {
  color: #93c5fd;
}

.comparison {
  margin-top: 20px;
  overflow-x: auto;
}

.comparison table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.comparison th,
.comparison td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  text-align: center;
}

.comparison th:first-child,
.comparison td:first-child {
  text-align: left;
  font-weight: 600;
}

.comparison thead th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.badge-popular{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.25rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.opt-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.tip-btn{
  width:18px;height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:inherit;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.78rem;
  cursor:help;
}
.tip-pop{
  position:absolute;
  left:0;
  top:28px;
  width:min(420px, 78vw);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:#050816;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  z-index:10;
  font-size:.9rem;
  line-height:1.45;
}
.tip:hover .tip-pop,
.tip:focus-within .tip-pop{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.tip-pop b{color:#93c5fd;}

.tint-lead {
  text-align: center;
  font-size: 1.05rem;
  opacity: 0.85;
  margin: 0.75rem 0 1.5rem;
}

.vlt-view-toggle{
  max-width: 980px;
  margin: 0 auto .6rem;
  display: flex;
  gap: .5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.vlt-view{
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: .45rem .75rem;
  border-radius: 999px;
  cursor: pointer;
}
.vlt-view.active{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

/* --- Sticky Mobile CTA Bar --- */
.mobile-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(2, 6, 23, 0.92);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

/* Buttons */
.mobile-cta__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  background: rgba(255,255,255,.06);
}

.mobile-cta__btn:active{
  transform: translateY(1px);
}

.mobile-cta__btn--primary{
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(59,130,246,.95));
  border-color: rgba(255,255,255,.22);
}

/* Mobile only */
@media (min-width: 901px){
  .mobile-cta{ display: none; }
}

/* Prevent content from hiding behind the bar on mobile */
@media (max-width: 900px){
  body{ padding-bottom: 82px; }
}

/* Fix unreadable dropdown menus on dark theme */
select,
select option {
  background-color: #0b1220;
  color: #ffffff;
}

/* When option is hovered or selected */
select option:checked,
select option:hover {
  background-color: #1e293b;
  color: #ffffff;
}

/* Ensure focus ring looks correct */
select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px rgba(99,102,241,.4);
}