/*
Theme Name: BackLot
Theme URI: https://toyotaofboerne.com
Author: Vaughan Automotive
Description: BackLot — nationwide back-ordered Toyota parts sourcing for collision centers. Single-page landing with a working part-request form (emails via wp_mail).
Version: 1.2.0
Requires PHP: 7.4
License: Proprietary
Text Domain: backlot
*/
:root{
    --bg:#0A0A0B;
    --bg-2:#111114;
    --surface:#16161A;
    --surface-2:#1D1D22;
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --ink:#F5F5F2;
    --ink-2:#C7C7C2;
    --ink-3:#8A8A85;
    --ink-4:#5A5A55;
    --red:#EB0A1E;        /* Toyota red */
    --red-deep:#B8071A;
    --red-glow:rgba(235,10,30,.18);
    --ok:#3FB984;
    --warn:#F2B441;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);}
  body{
    font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  .display{font-family:"Antonio", "Oswald", Impact, sans-serif; font-weight:700; letter-spacing:-.01em; line-height:.92;}
  .mono{font-family:"JetBrains Mono", ui-monospace, monospace; font-feature-settings:"ss01";}
  .eyebrow{
    font-family:"JetBrains Mono", ui-monospace, monospace;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:.18em;
    font-weight:500;
    color:var(--ink-3);
  }
  .eyebrow .dot{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:8px;vertical-align:1px;box-shadow:0 0 12px var(--red-glow);}
  button, input, textarea, select{font-family:inherit; font-size:inherit; color:inherit;}
  ::selection{background:var(--red); color:#fff;}
  a{color:inherit;}

  /* Grain overlay for tactile feel */
  .grain::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity:.5; mix-blend-mode:overlay;
  }

  /* Common containers */
  .wrap{max-width:1320px; margin:0 auto; padding:0 32px;}
  @media (max-width:720px){ .wrap{padding:0 20px;} }

  /* Section divider lines */
  .hr-tick{
    height:1px; background:var(--line); position:relative;
  }
  .hr-tick::before, .hr-tick::after{
    content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-2);
  }
  .hr-tick::before{left:0;} .hr-tick::after{right:0;}

  /* CTAs */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:0;
    background:var(--red); color:#fff; border:none; cursor:pointer;
    font-weight:700; letter-spacing:.02em; font-size:14px;
    text-transform:uppercase;
    transition:background .15s, transform .05s;
    position:relative;
  }
  .btn:hover{background:var(--red-deep);}
  .btn:active{transform:translateY(1px);}
  .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-2);}
  .btn.ghost:hover{background:var(--surface); border-color:var(--ink-3);}
  .btn .arr{display:inline-block; transition:transform .2s;}
  .btn:hover .arr{transform:translateX(4px);}

  /* Form */
  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600; font-family:"JetBrains Mono", monospace;}
  .input, .textarea, .select{
    background:#0c0c0e; border:1px solid var(--line-2); color:var(--ink);
    padding:13px 14px; font-size:15px; border-radius:0;
    transition:border-color .15s, background .15s;
    width:100%; font-family:"JetBrains Mono", monospace;
  }
  .input:focus, .textarea:focus, .select:focus{outline:none; border-color:var(--red); background:#0e0e10;}
  .textarea{font-family:"Manrope", sans-serif; resize:vertical; min-height:88px;}
  .select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%238A8A85' stroke-width='1.5' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;}
  .input::placeholder, .textarea::placeholder{color:var(--ink-4);}

  /* Chips for parts */
  .chip{
    display:inline-flex; align-items:center; gap:8px;
    background:#0c0c0e; border:1px solid var(--line-2);
    padding:8px 10px 8px 12px;
    font-family:"JetBrains Mono", monospace; font-size:13px;
    color:var(--ink);
  }
  .chip .x{cursor:pointer; color:var(--ink-3); width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;}
  .chip .x:hover{background:var(--red); color:#fff;}

  /* Stat numbers */
  .stat-num{font-family:"Antonio", sans-serif; font-weight:600; font-size:84px; line-height:.9; letter-spacing:-.02em;}

  /* FAQ */
  details.faq{border-bottom:1px solid var(--line); padding:24px 0;}
  details.faq summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    font-family:"Antonio", sans-serif; font-size:26px; font-weight:500; letter-spacing:-.01em;
  }
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary .plus{
    width:32px; height:32px; border:1px solid var(--line-2); display:inline-flex; align-items:center; justify-content:center;
    flex:none; transition:background .2s, border-color .2s, transform .3s;
  }
  details[open].faq summary .plus{background:var(--red); border-color:var(--red); transform:rotate(45deg);}
  details.faq[open] summary{color:var(--ink);}
  details.faq .ans{padding-top:14px; color:var(--ink-2); max-width:760px;}

  /* Toast */
  .toast{
    position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(100px);
    background:#0e0e10; border:1px solid var(--line-2);
    padding:14px 18px 14px 14px; display:flex; align-items:center; gap:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
    transition:transform .35s cubic-bezier(.2,.7,.2,1.1); z-index:9999;
  }
  .toast.show{transform:translateX(-50%) translateY(0);}
  .toast .tic{width:22px;height:22px;border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px;}

  /* Nav */
  .nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,10,11,.78);
    backdrop-filter:blur(16px) saturate(160%);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    border-bottom:1px solid var(--line);
  }

  /* Hero */
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
  .live-dot{animation:blink 1.6s steps(1) infinite;}

  /* Map dots */
  @keyframes pulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
  .map-pulse{transform-origin:center; animation:pulse 2.8s ease-out infinite;}

  /* Reveal */
  .ticker{
    display:flex; gap:60px; overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ticker-track{display:flex; gap:60px; animation:scroll 40s linear infinite; flex:none;}
  @keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  /* ── Responsive layout ── */
  .sec{padding:112px 0}
  .g-hero{padding:80px 0 100px;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end}
  .hero-art{position:relative}
  .nav-links{display:flex;align-items:center;gap:36px;font-size:13px;color:var(--ink-2);font-weight:500}
  .g-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
  .stat-cell{padding:32px 24px;border-right:1px solid var(--line)}
  .stat-cell:first-child{padding-left:0}
  .stat-cell:nth-child(4n){border-right:none}
  .g-how-head{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;margin-bottom:80px;align-items:end}
  .g-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
  .g-network{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;margin-bottom:60px}
  .g-request{display:grid;grid-template-columns:1fr 1.6fr;gap:80px}
  .g-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .g-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
  .rail{position:sticky;top:120px;align-self:start}
  .form-card{background:#0c0c0e;border:1px solid var(--line);padding:48px 48px 40px}
  .v-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:12px}
  .duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .urgency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  @media (max-width:1080px){
    .g-hero{grid-template-columns:1fr;gap:48px;padding:56px 0 72px;align-items:start}
    .hero-art{max-width:560px}
    .g-network,.g-request,.g-faq{grid-template-columns:1fr;gap:44px}
    .rail{position:static;top:auto}
  }
  @media (max-width:960px){
    .nav-links{gap:16px}
    .nav-links a{display:none}
    .g-how-head{grid-template-columns:1fr;gap:28px;margin-bottom:48px}
    .g-how-head>p{justify-self:start!important;max-width:100%!important}
    .g-steps{grid-template-columns:1fr}
    .g-quotes{grid-template-columns:1fr;gap:20px}
    .g-stats{grid-template-columns:1fr 1fr}
    .stat-cell{border-right:none;border-bottom:1px solid var(--line);padding:26px 20px}
    .stat-cell:nth-child(odd){border-right:1px solid var(--line);padding-left:0}
    .stat-cell:nth-child(n+3){border-bottom:none}
    .stat-num{font-size:clamp(44px,11vw,72px)}
  }
  @media (max-width:700px){
    .sec{padding:64px 0}
    .g-hero{padding:44px 0 60px}
    .form-card{padding:24px 16px 28px}
    .v-grid,.duo-grid,.urgency-grid{grid-template-columns:1fr}
    details.faq summary{font-size:20px}
  }