/* =========================================================================
   Express Hauling Santa Barbara, Custom Styles
   Works on top of Tailwind (CDN).

   BRAND SYSTEM (single source of truth = the :root vars below)
     Primary Red   #bf1f1f  → CTAs, highlights, badges, icons, active states
     Dark Gray     #444444  → headings, dark sections, navbar text, footer, borders
     Backgrounds   #FFFFFF / #F8F9FA   Text #212529
   NOTE: Tailwind tokens keep the names `green` (= dark gray) and `accent` (= red)
         so existing utility classes recolor automatically via the config remap.
   ========================================================================= */

:root{
  --green:#444444;        /* dark neutral gray (brand neutral / dark UI) */
  --green-deep:#2d2d2d;   /* footer / deepest sections */
  --green-light:#5c5c5c;  /* lighter gray for gradients */
  --accent:#bf1f1f;       /* primary brand red */
  --accent-dark:#9e1818;  /* red pressed/hover */
  --accent-light:#d94a4a; /* lighter red for text on dark */
  --ink:#212529;
  --ink-soft:#4B5563;
  --mist:#F8F9FA;
  --line:rgba(17,17,17,.08);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img,svg,iframe{ max-width:100%; }
::selection{ background:var(--accent); color:#fff; }

/* keep content clear of the fixed mobile CTA bar */
@media (max-width:1023px){
  body{ padding-bottom:4.75rem; }
}

/* nicer focus ring for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:3px solid rgba(191,31,31,.5);
  outline-offset:2px;
  border-radius:8px;
}

/* hide scrollbar utility (review carousel) */
.hide-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.hide-scrollbar::-webkit-scrollbar{ display:none; }

/* ---------- Reusable typography ---------- */
.eyebrow{
  display:inline-block;
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
}
.section-title{
  font-family:'Poppins','Inter',sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--green);
  font-size:clamp(1.7rem, 4vw, 2.6rem);
  line-height:1.14;
}
.section-title.title-light{ color:#fff; }   /* for dark sections */

/* ---------- Buttons ---------- */
.btn-accent{
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 14px 32px -10px rgba(191,31,31,.6); }
.btn-accent:active{ transform:translateY(0); }

.btn-green{
  background:linear-gradient(180deg,var(--green-light),var(--green));
  color:#fff;
  transition:transform .2s ease, filter .2s ease;
}
.btn-green:hover{ transform:translateY(-2px); filter:brightness(1.08); }

.btn-outline{
  border:2px solid var(--accent);
  color:var(--accent);
  background:#fff;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.btn-outline:hover{ background:var(--accent); color:#fff; transform:translateY(-2px); }

/* ---------- Hero ---------- */
/* Santa Barbara coastline photo, sitting behind a dark-gray brand overlay so
   white hero text stays readable. Used on the home + all inner page heroes. */
.hero-photo{
  background:url('/assets/img/Santa-Barbara-Beach-Hero-BG.jpg') center 30%/cover no-repeat;
}
.hero-overlay{
      background: linear-gradient(150deg, rgb(0 0 0 / 33%) 0%, rgb(184 184 184 / 31%) 52%, rgb(255 255 255 / 0%) 100%);
}
.hero-gradient{
  background:radial-gradient(120% 120% at 80% 0%, #5c5c5c 0%, var(--green) 45%, var(--green-deep) 100%);
}
.hero-pattern{
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.4) 1.5px, transparent 1.6px);
  background-size:34px 34px, 46px 46px;
}

/* ---------- Glassmorphism card (forms) ---------- */
.glass-card{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 50px -20px rgba(17,17,17,.28);
}

/* ---------- Trust bar ---------- */
.trust-ico{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:9px;
  background:rgba(191,31,31,.1);
  font-size:.95rem; flex:none;
}

/* ---------- Mobile nav links ---------- */
.mobile-link{
  display:block; padding:.75rem .75rem; border-radius:.75rem;
  font-weight:600; color:var(--ink);
  transition:background .15s ease, color .15s ease;
}
.mobile-link:hover, .mobile-link[aria-current="page"]{ background:var(--mist); color:var(--accent); }

/* ---------- Service cards ---------- */
.service-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1.25rem;
  padding:1.6rem;
  box-shadow:0 6px 24px -16px rgba(17,17,17,.3);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.service-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--green),var(--accent));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 50px -22px rgba(17,17,17,.4);
  border-color:rgba(191,31,31,.3);
}
.service-card:hover::before{ transform:scaleX(1); }
.svc-media{
  display:block;
  margin:-1.6rem -1.6rem 0;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--mist);
}
.svc-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .4s ease;
}
.service-card:hover .svc-media img{ transform:scale(1.05); }
.svc-media + .svc-icon{ margin-top:1.25rem; }
.svc-icon{
  margin-top: -54px!important;
  margin-top: -67px!important;
  position: inherit!important;
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:14px;
  background:linear-gradient(180deg, rgb(255 255 255), rgb(255 255 255));
  color:var(--accent);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.svc-icon svg{ width:28px; height:28px; }
.service-card:hover .svc-icon{
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:#fff; transform:rotate(-6deg) scale(1.05);
}
.svc-title{ margin-top:2rem; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:var(--ink); }
.svc-desc{ margin-top:.5rem; font-size:.93rem; line-height:1.6; color:var(--ink-soft); }
.svc-cta{
  display:inline-block; margin-top:1rem; font-weight:600; font-size:.9rem; color:var(--accent);
  transition:color .2s ease, transform .2s ease;
}
.service-card:hover .svc-cta{ color:var(--accent-dark); transform:translateX(3px); }

/* ---------- Area cards ---------- */
.area-card{
  display:block; background:#fff;
  border:1px solid var(--line);
  border-radius:1.1rem; padding:1.5rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.area-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 44px -22px rgba(17,17,17,.4);
  border-color:rgba(191,31,31,.25);
}
.area-name{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem; color:var(--green);
  display:flex; align-items:center; gap:.5rem;
}
.area-name::before{ content:"📍"; font-size:1rem; }
.area-copy{ margin-top:.5rem; font-size:.9rem; line-height:1.6; color:var(--ink-soft); }
.area-link{ display:inline-block; margin-top:.9rem; font-weight:600; font-size:.85rem; color:var(--accent); }

/* ---------- Promo badge ---------- */
.promo-badge{ animation:badgePulse 2.6s ease-in-out infinite; }
@keyframes badgePulse{
  0%,100%{ transform:scale(1) rotate(-6deg); box-shadow:0 12px 36px -6px rgba(191,31,31,.5); }
  50%{ transform:scale(1.06) rotate(-6deg); box-shadow:0 18px 48px -6px rgba(191,31,31,.7); }
}
.pulse-dot{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 0 rgba(191,31,31,.7); animation:dot 1.6s infinite;
}
@keyframes dot{
  0%{ box-shadow:0 0 0 0 rgba(191,31,31,.6);} 70%{ box-shadow:0 0 0 10px rgba(191,31,31,0);} 100%{ box-shadow:0 0 0 0 rgba(191,31,31,0);}
}

/* ---------- How it works ---------- */
.step-card{
  position:relative; text-align:center;
  background:#fff; border:1px solid var(--line);
  border-radius:1.25rem; padding:2.5rem 1.5rem 1.8rem;
  box-shadow:0 8px 30px -20px rgba(17,17,17,.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.step-card:hover{ transform:translateY(-5px); box-shadow:0 22px 50px -24px rgba(17,17,17,.45); }
.step-num{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  display:grid; place-items:center; width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; font-family:'Poppins'; font-weight:700; font-size:1.05rem;
  box-shadow:0 8px 20px -6px rgba(191,31,31,.6); z-index:2;
}
.step-icon{
  display:grid; place-items:center; width:64px; height:64px; margin:.5rem auto 0;
  border-radius:18px; background:rgba(191,31,31,.1); color:var(--accent);
}
.step-icon svg{ width:32px; height:32px; }
.step-title{ margin-top:1.1rem; font-family:'Poppins'; font-weight:700; font-size:1.18rem; color:var(--ink); }
.step-desc{ margin-top:.6rem; font-size:.93rem; line-height:1.6; color:var(--ink-soft); }

/* ---------- Reviews ---------- */
.review-card{
  flex:0 0 88%; max-width:420px;
  background:#fff; color:var(--ink);
  border-radius:1.25rem; padding:1.8rem;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.5);
}
@media(min-width:640px){ .review-card{ flex-basis:46%; } }
@media(min-width:1024px){ .review-card{ flex-basis:31.5%; } }
.rev-stars{ color:#F5A623; letter-spacing:2px; font-size:1.05rem; }
.rev-text{ margin-top:.9rem; font-size:.97rem; line-height:1.65; color:var(--ink-soft); }
.rev-author{ margin-top:1.3rem; display:flex; align-items:center; gap:.8rem; }
.rev-avatar{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  /* longhand so an inline background-image (avatar photo) overrides the
     gradient fallback while size/position properties stick */
  background-image:linear-gradient(135deg,var(--accent),var(--accent-dark));
  background-color:var(--accent);
  background-size:cover;
  background-position:center;
  color:#fff; font-weight:700; font-size:.9rem; flex:none;
  overflow:hidden;
}
.rev-name{ display:block; font-weight:700; color:var(--ink); font-size:.95rem; }
.rev-loc{ display:block; font-size:.82rem; color:var(--ink-soft); }
.rev-ctrl{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);
  transition:background .2s ease, transform .2s ease, color .2s ease;
}
.rev-ctrl:hover{ background:#fff; color:var(--accent); transform:scale(1.05); }

/* ---------- Before / After slider (real project photos) ----------
   Layout: the "after" image is the base layer (fills the box). The "before"
   image sits in a clipping layer whose width the JS drives from the range
   input. The before image itself is sized to the FULL slider width by JS so
   the two photos stay perfectly aligned as you drag. */
.ba-slider{
  position:relative; width:100%; aspect-ratio:1/1; border-radius:1.25rem; overflow:hidden;
  box-shadow:0 18px 50px -24px rgba(17,17,17,.5); user-select:none; cursor:ew-resize;
  background:#ddd;
}
.ba-slider .ba-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
}
.ba-before-layer{
  position:absolute; inset:0; width:50%; overflow:hidden; border-right:3px solid #fff;
}
.ba-before-layer .ba-img{
  /* width + height are set in px by app.js to match the slider box */
  position:absolute; top:0; left:0; inset:auto; max-width:none;
}
.ba-range{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:5;
}
.ba-handle{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:#fff; color:var(--accent);
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:4; pointer-events:none;
}
.ba-handle svg{ width:22px; height:22px; }

/* ---------- Form fields ---------- */
.label{ display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:.35rem; }
.field{
  width:100%; padding:.8rem 1rem; font-size:.95rem; color:var(--ink);
  background:#fff; border:1.5px solid #e2e6ea; border-radius:.8rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field::placeholder{ color:#9aa3ad; }
.field:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(191,31,31,.12); }
.field.is-invalid{ border-color:#e23d3d; box-shadow:0 0 0 4px rgba(226,61,61,.12); }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem; }
.err{ min-height:0; font-size:.78rem; color:#e23d3d; margin-top:.3rem; }
.err:empty{ display:none; }
.check-ico{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:rgba(191,31,31,.12); color:var(--accent); font-weight:800; font-size:.85rem; flex:none; margin-top:.1rem;
}

/* success state */
.success-anim{
  width:72px; height:72px; margin:0 auto; border-radius:50%;
  background:rgba(191,31,31,.1); display:grid; place-items:center;
  animation:popIn .4s cubic-bezier(.2,.8,.3,1.2) both;
}
.success-anim svg{ width:38px; height:38px; color:var(--accent); }
.success-anim svg path{ stroke-dasharray:30; stroke-dashoffset:30; animation:draw .5s .15s ease forwards; }
@keyframes popIn{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ---------- FAQ ---------- */
.faq-item{ padding:.25rem 0; }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; list-style:none; padding:1.15rem .25rem;
  font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem; color:var(--ink);
  transition:color .18s ease;
}
.faq-q:hover{ color:var(--accent); }
.faq-q::-webkit-details-marker{ display:none; }
.faq-icon{
  flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:rgba(191,31,31,.1); color:var(--accent); font-weight:700; font-size:1.2rem; line-height:1;
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.faq-item[open] .faq-icon{ transform:rotate(45deg); background:var(--accent); color:#fff; }
.faq-a{ padding:0 .25rem 1.2rem; font-size:.95rem; line-height:1.7; color:var(--ink-soft); max-width:62ch; }

/* ---------- Blog / resources ---------- */
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius:1.25rem; overflow:hidden;
  box-shadow:0 8px 30px -22px rgba(17,17,17,.4);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex; flex-direction:column;
}
.blog-card:hover{ transform:translateY(-5px); box-shadow:0 24px 54px -26px rgba(17,17,17,.5); }
.blog-card.is-hidden{ display:none; }
.blog-thumb{ position:relative; aspect-ratio:16/9; display:block; }
.blog-thumb-1{ background:linear-gradient(135deg,#bf1f1f,#9e1818); }
.blog-thumb-2{ background:linear-gradient(135deg,#444444,#2d2d2d); }
.blog-thumb-3{ background:linear-gradient(135deg,#bf1f1f,#d94a4a); }
.blog-thumb-4{ background:linear-gradient(135deg,#444444,#bf1f1f); }
.blog-thumb-5{ background:linear-gradient(135deg,#2d2d2d,#444444); }
.blog-thumb-6{ background:linear-gradient(135deg,#d94a4a,#bf1f1f); }
/* photo thumb (uses a real image instead of a gradient) */
.blog-thumb-photo{ background:#2d2d2d center/cover no-repeat; }
.blog-cat{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.95); color:var(--accent);
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:999px;
}
.blog-body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.blog-title{ font-family:'Poppins',sans-serif; font-weight:700; font-size:21px; color:var(--ink); line-height:1.4; }
.blog-excerpt{ margin-top:.55rem; font-size:.9rem; line-height:1.6; color:var(--ink-soft); flex:1; }
.blog-link{ margin-top:1rem; font-weight:600; font-size:.9rem; color:var(--accent); transition:transform .2s ease; }
.blog-card:hover .blog-link{ transform:translateX(3px); }

.filter-chip{
  padding:.5rem 1.1rem; border-radius:999px; font-size:.88rem; font-weight:600;
  background:#fff; color:var(--ink-soft); border:1.5px solid var(--line);
  transition:all .18s ease; cursor:pointer;
}
.filter-chip:hover{ border-color:var(--accent); color:var(--accent); }
.filter-chip.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Footer ---------- */
.footer-h{ font-family:'Poppins',sans-serif; font-weight:700; color:#fff; font-size:20px; margin-bottom:1.1rem; }
.footer-link{ color:rgba(255,255,255,.75); transition:color .18s ease, padding-left .18s ease; }
.footer-link:hover{ color:#fff; padding-left:3px; }
/* legal links in the slim bottom bar */
.legal-link{ color:rgba(255,255,255,.65); transition:color .18s ease; }
.legal-link:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Quick Links + Popular Services: white ">" before each link that slides right
   on hover, with an underline that animates in from left to right. */
.footer-list .footer-link{
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;        /* hidden until hover */
  padding-bottom:2px;
  transition:background-size .25s ease, color .18s ease;
}
.footer-list .footer-link::before{
  content:">";
  display:inline-block;
  margin-right:.5rem;
  color:#fff;
  font-weight:700;
  transition:transform .18s ease;
}
.footer-list .footer-link:hover{
  padding-left:0;                  /* override the base nudge; only the arrow moves */
  color:#fff;
  background-size:100% 1.5px;      /* underline grows left -> right */
}
.footer-list .footer-link:hover::before{ transform:translateX(4px); }
.social-ico{
  display:grid; place-items:center; width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.1); color:#fff; transition:background .2s ease, transform .2s ease;
}
.social-ico svg{ width:20px; height:20px; }
.social-ico:hover{ background:var(--accent); transform:translateY(-2px); }

/* ---------- Navbar scrolled state ---------- */
#navbar.is-scrolled{ box-shadow:0 8px 30px -18px rgba(17,17,17,.35); }

/* ---------- Blog sidebar (global widgets) ---------- */
.blog-sidebar .bs-widget{
  background:#fff; border:1px solid var(--line); border-radius:1.1rem;
  padding:1.4rem; box-shadow:0 8px 28px -22px rgba(17,17,17,.35);
}
.blog-sidebar .bs-h{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:22px;
  color:var(--green); margin:0 0 .9rem; padding-bottom:.7rem;
  border-bottom:2px solid var(--accent);
  display:inline-block;
}
/* (1) Call Us Today CTA card */
.blog-sidebar .bs-cta{
  background:linear-gradient(160deg,var(--accent) 0%, var(--accent-dark) 100%);
  border:0; padding:0; overflow:hidden;
  box-shadow:0 14px 36px -14px rgba(191,31,31,.55);
  position:relative;
}
.blog-sidebar .bs-cta::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 1.5px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.25) 1.5px, transparent 1.6px);
  background-size:24px 24px, 32px 32px; opacity:.4; pointer-events:none;
}
/* (2) Services list links */
.blog-sidebar .bs-links{ list-style:none; padding:0; margin:0; }
.blog-sidebar .bs-links li + li{ margin-top:.3rem; }
.blog-sidebar .bs-links a{
  display:block; padding:.6rem .25rem;
  color:var(--ink); font-weight:500; font-size:.95rem;
  border-bottom:1px solid rgba(17,17,17,.06);
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 calc(100% - .6rem);
  background-size:0% 1.5px;
  transition:background-size .25s ease, color .18s ease;
}
.blog-sidebar .bs-links a::before{
  content:">"; display:inline-block; margin-right:.6rem;
  color:var(--accent); font-weight:700;
  transition:transform .18s ease;
}
.blog-sidebar .bs-links li:last-child a{ border-bottom:0; }
.blog-sidebar .bs-links a:hover{
  color:var(--accent);
  background-size:100% 1.5px;
}
.blog-sidebar .bs-links a:hover::before{ transform:translateX(4px); }

/* (3) Testimonial slider */
.blog-sidebar .bs-testimonials .bs-tslides{
  position:relative; min-height:230px;
}
.blog-sidebar .bs-tslide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .5s ease;
}
.blog-sidebar .bs-tslide.is-active{ opacity:1; pointer-events:auto; }
.blog-sidebar .bs-tquote{
  margin-top:.7rem; font-size:.95rem; line-height:1.65; color:var(--ink-soft);
}
.blog-sidebar .bs-tauthor{ margin-top:1rem; display:flex; align-items:center; gap:.7rem; }
.blog-sidebar .bs-tdots{
  display:flex; gap:.45rem; justify-content:center; margin-top:1rem;
}
.blog-sidebar .bs-tdot{
  width:9px; height:9px; border-radius:50%; border:0;
  background:rgba(17,17,17,.15); padding:0; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.blog-sidebar .bs-tdot:hover{ background:rgba(17,17,17,.3); }
.blog-sidebar .bs-tdot.is-active{ background:var(--accent); transform:scale(1.25); }

/* (4) Sticky form widget iframe safety */
.blog-sidebar .ghl-embed iframe{ display:block; }

/* ---------- Blog layout (article on left + sidebar on right) ---------- */
.blog-layout{
  display:grid; gap:2.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media only screen and (min-width: 1024px) {
  .blog-layout{ grid-template-columns: minmax(0, 1fr) 360px; gap:3rem; align-items:start; }

  footer .grid.lg\:grid-cols-4 {
    -ms-grid-columns: 1.1fr 0.85fr 0.95fr 0.9fr;
    grid-template-columns: 1.1fr 0.85fr 0.95fr 0.9fr;
  }
  footer .grid.lg\:grid-cols-4 > div:nth-child(2) {
    margin-left: 50px;
  }

  footer .grid.lg\:grid-cols-4 > div:nth-child(3) {
    margin-left: 10px;
  }
}

.blog-meta{ font-size:.85rem; color:rgba(255,255,255,.75); margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.35rem .65rem; align-items:center; }
.blog-meta .dot{ color:rgba(255,255,255,.5); }
.blog-tag{
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2);
}

/* ---------- Article / blog typography ---------- */
.prose-custom .lead{ font-size:1.18rem; line-height:1.7; color:var(--ink); font-weight:500; }
.prose-custom h2{
  font-family:'Poppins',sans-serif; font-weight:700; color:var(--green);
  font-size:1.5rem; line-height:1.25; margin:2.2rem 0 .8rem; scroll-margin-top:90px;
}
.prose-custom p{ font-size:1.02rem; line-height:1.8; color:var(--ink-soft); margin-bottom:1.1rem; }
.prose-custom a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-color:rgba(191,31,31,.35); transition:text-decoration-color .2s ease; }
.prose-custom a:hover{ text-decoration-color:var(--accent); color:var(--accent-dark); }
.prose-custom .cta-box a {
  color: #fff;
  -webkit-transition: unset !important;
  -o-transition: unset !important;
  -moz-transition: unset !important;
  transition: unset !important;
}

.prose-custom .cta-box a:hover {
  color: #fff;
  text-decoration: none;
}
.prose-custom strong{ color:var(--ink); }
.cta-box{
  margin-top:2.5rem; padding:1.8rem; border-radius:1.25rem;
  background:var(--mist); border:1px solid var(--line);
}

.sitemap .prose-custom ul li {
    list-style: disc;
    padding-left: 5px;
    margin-left: 20px;
    padding-bottom: 5px;
}

/* ---------- Error pages (404 / 500) ---------- */
.error-code{
  display:block;
  font-size:clamp(5rem, 18vw, 11rem);
  line-height:.9;
  letter-spacing:-.04em;
  text-shadow:0 14px 44px rgba(0,0,0,.35);
}

/* ---------- Return-to-top button (dump truck hauls the page up) ---------- */
#toTop .tt-icon{ overflow:visible; }
/* the "load" arrow rides up on hover */
#toTop .tt-arrow{ transition:transform .25s ease; }
#toTop:hover .tt-arrow{ transform:translateY(-3px); }
/* the dump bed tips up a touch on hover */
#toTop .tt-bed{ transform-box:fill-box; transform-origin:right center; transition:transform .25s ease; }
#toTop:hover .tt-bed{ transform:rotate(-7deg); }

/* ---------- Scroll reveal (no-JS safe: only hides when html.js is set) ----------
   NOTE: the "visible" rule MUST outrank the "hidden" guard. `html.js .reveal`
   has specificity (0,2,1), so the reveal rule is scoped the same way to win. */
.reveal{ transition:opacity .55s ease, transform .55s ease; will-change:opacity, transform; }
html.js .reveal{ opacity:0; transform:translateY(24px); }
html.js .reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal,
  html.js .reveal,
  html.js .reveal.is-visible{ opacity:1 !important; transform:none !important; }
}