/* =========================================================
   A1 Hand Car Wash & Detailing — Blog listing + single post
   Scoped under .a1-blog so nothing else is affected.
   ========================================================= */

:root{
  --a1-red:#D81324;
  --a1-red-2:#ff3b2d;
  --a1-navy:#0B2154;
  --a1-navy-2:#14306e;
  --a1-ink:#070b18;
  --a1-body:#5a6376;
  --a1-soft:#f5f7fb;
  --a1-shadow:0 26px 60px -28px rgba(8,16,40,.45);
  --a1-shadow-lg:0 40px 80px -32px rgba(8,16,40,.55);
  --a1-glow:0 0 0 1px rgba(216,19,36,.22), 0 18px 40px -16px rgba(216,19,36,.55);
  --a1-ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
.a1-blog{background:#fff;color:var(--a1-body);overflow-x:hidden}
.a1-blog h1,.a1-blog h2,.a1-blog h3,.a1-blog h4,.a1-blog h5,.a1-blog h6{
  font-family:'Outfit','Barlow',sans-serif;color:var(--a1-navy);letter-spacing:-.02em}
.a1-blog p{line-height:1.8}

/* ---------- Reveal ---------- */
.a1-blog .a1-reveal{opacity:0;transform:translateY(28px);
  transition:opacity .85s var(--a1-ease),transform .85s var(--a1-ease)}
.a1-blog .a1-reveal.is-in{opacity:1;transform:none}
.a1-blog .a1-d1{transition-delay:.08s}.a1-blog .a1-d2{transition-delay:.16s}
.a1-blog .a1-d3{transition-delay:.24s}.a1-blog .a1-d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .a1-blog .a1-reveal{opacity:1;transform:none;transition:none}
}

/* =========================================================
   PAGE HERO
   ========================================================= */
.a1-page-hero{position:relative;overflow:hidden;padding:clamp(64px,8vw,110px) 0;
  background:linear-gradient(120deg,#060a16 0%,#0d1a3c 55%,#1b0b13 100%)}
.a1-page-hero::before{content:"";position:absolute;width:620px;height:620px;right:-150px;top:-220px;
  border-radius:50%;background:radial-gradient(circle,rgba(216,19,36,.32),transparent 62%)}
.a1-page-hero::after{content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:74px 74px;
  -webkit-mask-image:radial-gradient(circle at 25% 50%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 25% 50%,#000,transparent 78%)}
.a1-page-hero .container{position:relative;z-index:2}
.a1-page-hero .kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:#ff6b74;margin-bottom:16px}
.a1-page-hero .kicker::before{content:"";width:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(216,19,36,0),var(--a1-red))}
.a1-page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,58px);font-weight:900;line-height:1.08;
  margin:0 0 16px;max-width:860px}
.a1-page-hero p{color:rgba(255,255,255,.7);max-width:620px;font-size:16.5px;margin:0}
.a1-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;
  font-size:13px;color:rgba(255,255,255,.5)}
.a1-crumb a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .3s}
.a1-crumb a:hover{color:var(--a1-red-2)}
.a1-crumb i{font-size:9px;opacity:.5}
.a1-crumb .current{color:#fff}
.a1-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:18px}
.a1-chip-cat{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(120deg,var(--a1-red),#ff5a3c);box-shadow:var(--a1-glow)}
.a1-meta-item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(255,255,255,.62)}
.a1-meta-item i{color:var(--a1-red-2);font-size:12px}

/* =========================================================
   LISTING
   ========================================================= */
.a1-blog-sec{padding:clamp(56px,7vw,96px) 0;background:linear-gradient(180deg,#fff,var(--a1-soft))}
.a1-post-card{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:22px;
  overflow:hidden;border:1px solid rgba(11,33,84,.07);box-shadow:var(--a1-shadow);
  transition:transform .5s var(--a1-ease),box-shadow .5s var(--a1-ease)}
.a1-post-card:hover{transform:translateY(-10px);box-shadow:var(--a1-shadow-lg)}
.a1-post-media{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--a1-soft)}
.a1-post-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--a1-ease)}
.a1-post-card:hover .a1-post-media img{transform:scale(1.08)}
.a1-post-media .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,24,.4),transparent 55%)}
.a1-post-media .a1-chip-cat{position:absolute;left:16px;top:16px;z-index:2}
.a1-post-body{display:flex;flex-direction:column;flex:1;padding:26px 24px 24px}
.a1-post-date{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--a1-body);
  margin-bottom:12px}
.a1-post-date i{color:var(--a1-red);font-size:12px}
.a1-post-body h3{font-size:19px;font-weight:700;line-height:1.35;margin:0 0 12px}
.a1-post-body h3 a{color:var(--a1-navy);text-decoration:none;transition:color .35s}
.a1-post-card:hover h3 a{color:var(--a1-red)}
.a1-post-body p{font-size:14.5px;margin:0 0 20px}
.a1-post-more{margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--a1-red);text-decoration:none;transition:gap .35s var(--a1-ease)}
.a1-post-more i{transition:transform .35s var(--a1-ease)}
.a1-post-card:hover .a1-post-more i{transform:translateX(5px)}

/* Featured (first) post */
.a1-feature{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border-radius:26px;
  overflow:hidden;border:1px solid rgba(11,33,84,.07);box-shadow:var(--a1-shadow);
  margin-bottom:38px;transition:transform .5s var(--a1-ease),box-shadow .5s var(--a1-ease)}
.a1-feature:hover{transform:translateY(-8px);box-shadow:var(--a1-shadow-lg)}
.a1-feature-media{position:relative;overflow:hidden;min-height:340px}
.a1-feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--a1-ease)}
.a1-feature:hover .a1-feature-media img{transform:scale(1.06)}
.a1-feature-media .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,24,.42),transparent 55%)}
.a1-feature-media .a1-chip-cat{position:absolute;left:20px;top:20px;z-index:2}
.a1-feature-body{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.a1-feature-body .tag{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--a1-red);margin-bottom:14px}
.a1-feature-body h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;line-height:1.2;margin:0 0 14px}
.a1-feature-body h2 a{color:var(--a1-navy);text-decoration:none;transition:color .35s}
.a1-feature:hover h2 a{color:var(--a1-red)}
.a1-feature-body p{margin:0 0 24px}
.a1-btn-red{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:15px 28px;
  border-radius:999px;font-family:'Outfit',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff;position:relative;
  overflow:hidden;align-self:flex-start;
  background:linear-gradient(120deg,var(--a1-red),#ff4a2e);box-shadow:var(--a1-glow);
  transition:transform .4s var(--a1-ease),box-shadow .4s var(--a1-ease)}
.a1-btn-red:hover{color:#fff;transform:translateY(-3px);box-shadow:0 24px 44px -18px rgba(216,19,36,.75)}
.a1-btn-red i{transition:transform .35s var(--a1-ease)}
.a1-btn-red:hover i{transform:translateX(4px)}
@media (max-width:991.98px){
  .a1-feature{grid-template-columns:1fr}
  .a1-feature-media{min-height:260px}
}

.a1-empty-state{text-align:center;padding:70px 24px;background:#fff;border-radius:24px;
  border:1px dashed rgba(11,33,84,.18)}
.a1-empty-state i{font-size:34px;color:var(--a1-red);margin-bottom:16px;display:block}
.a1-empty-state h4{font-size:22px;font-weight:700;margin-bottom:8px}

/* =========================================================
   SINGLE POST
   ========================================================= */
.a1-article{padding:clamp(48px,6vw,84px) 0;background:linear-gradient(180deg,#fff,var(--a1-soft))}
.a1-article-card{background:#fff;border-radius:26px;overflow:hidden;border:1px solid rgba(11,33,84,.07);
  box-shadow:var(--a1-shadow)}
.a1-article-hero{position:relative;aspect-ratio:16/8;background:var(--a1-soft)}
.a1-article-hero img{width:100%;height:100%;object-fit:cover;display:block}
.a1-article-body{padding:clamp(26px,3.4vw,48px)}
.a1-article-body p{font-size:16px;margin-bottom:18px}
.a1-article-body h2{font-size:28px;font-weight:800;margin:32px 0 14px}
.a1-article-body h3{font-size:23px;font-weight:700;margin:28px 0 12px}
.a1-article-body h4{font-size:19px;font-weight:700;margin:24px 0 10px}
.a1-article-body img{max-width:100%;height:auto;border-radius:16px;margin:20px 0}
.a1-article-body ul,.a1-article-body ol{padding-left:20px;margin-bottom:20px}
.a1-article-body li{margin-bottom:9px;line-height:1.75}
.a1-article-body a{color:var(--a1-red);text-decoration:underline;text-underline-offset:3px}
.a1-article-body blockquote{margin:26px 0;padding:22px 26px;border-left:4px solid var(--a1-red);
  border-radius:0 16px 16px 0;background:linear-gradient(120deg,rgba(216,19,36,.06),rgba(11,33,84,.04));
  font-size:17px;color:var(--a1-navy)}
.a1-article-body table{width:100%;border-collapse:collapse;margin-bottom:20px}
.a1-article-body td,.a1-article-body th{border:1px solid rgba(11,33,84,.12);padding:10px 12px}

.a1-share{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px;padding-top:26px;
  border-top:1px dashed rgba(11,33,84,.14)}
.a1-share .lbl{font-family:'Outfit',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--a1-navy);margin-right:4px}
.a1-share a,.a1-share button{width:42px;height:42px;border:1px solid rgba(11,33,84,.1);border-radius:13px;
  display:grid;place-items:center;color:var(--a1-navy);background:#fff;font-size:14px;cursor:pointer;
  text-decoration:none;transition:transform .35s var(--a1-ease),background .35s,color .35s,border-color .35s}
.a1-share a:hover,.a1-share button:hover{color:#fff;transform:translateY(-3px);border-color:transparent;
  background:linear-gradient(135deg,var(--a1-red),#ff5a3c);box-shadow:0 14px 26px -12px rgba(216,19,36,.8)}

/* Sidebar */
.a1-side-card{background:#fff;border-radius:22px;padding:26px 24px;border:1px solid rgba(11,33,84,.07);
  box-shadow:var(--a1-shadow);margin-bottom:24px}
.a1-side-card h5{font-size:18px;font-weight:700;margin:0 0 20px;padding-bottom:13px;position:relative}
.a1-side-card h5::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--a1-red),#ff7a3d)}
.a1-side-post{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(11,33,84,.1);
  text-decoration:none;transition:transform .35s var(--a1-ease)}
.a1-side-post:last-child{border-bottom:0}
.a1-side-post:hover{transform:translateX(5px)}
.a1-side-post img{width:72px;height:60px;border-radius:12px;object-fit:cover;flex-shrink:0}
.a1-side-post h6{font-size:14.5px;font-weight:700;line-height:1.4;margin:0 0 5px;color:var(--a1-navy);
  transition:color .3s}
.a1-side-post:hover h6{color:var(--a1-red)}
.a1-side-post small{font-size:12px;color:var(--a1-body)}
.a1-side-cta{position:relative;overflow:hidden;border-radius:22px;padding:32px 26px;color:#fff;
  background:linear-gradient(135deg,#0b1530,#1b0b13 70%);box-shadow:var(--a1-shadow)}
.a1-side-cta::before{content:"";position:absolute;width:300px;height:300px;right:-110px;top:-120px;
  border-radius:50%;background:radial-gradient(circle,rgba(216,19,36,.4),transparent 62%)}
.a1-side-cta .inner{position:relative;z-index:2}
.a1-side-cta h4{color:#fff;font-size:23px;font-weight:800;margin-bottom:10px;line-height:1.25}
.a1-side-cta p{color:rgba(255,255,255,.7);font-size:14.5px;margin-bottom:22px}
.a1-side-cta .phone{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:19px;margin-top:14px}
.a1-side-cta .phone i{color:var(--a1-red-2)}

.a1-related{padding:0 0 clamp(56px,7vw,96px);background:var(--a1-soft)}
.a1-sec-head{text-align:center;margin-bottom:38px}
.a1-sec-head .kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--a1-red);margin-bottom:12px}
.a1-sec-head .kicker::before{content:"";width:30px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(216,19,36,0),var(--a1-red))}
.a1-sec-head h2{font-size:clamp(26px,3.4vw,42px);font-weight:800;margin:0}
.a1-sec-head h2 .grad{background:linear-gradient(100deg,var(--a1-red),#ff7a3d 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}