/* Supplemental styles layered on top of the original design (site.css).
   Keeps the design intact while adding the dynamic logo image + form states. */

.brand .logo-img{ height:46px; width:auto; display:block; }
.site-footer .brand .logo-img{ height:48px; }
@media (max-width:600px){ .brand .logo-img{ height:40px; } }

/* Server-side validation error states */
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:#e0413a !important; box-shadow:0 0 0 3px rgba(224,65,58,.12) !important; }
.field .err-msg{ display:none; color:#e0413a; font-size:12.5px; margin-top:6px; }
.field.has-error .err-msg{ display:block; }

/* Submit button busy state */
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn.is-loading{ position:relative; color:transparent !important; }
.btn.is-loading::after{ content:""; position:absolute; width:18px; height:18px; top:50%; left:50%;
  margin:-9px 0 0 -9px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%;
  animation:btnspin .7s linear infinite; }
@keyframes btnspin{ to{ transform:rotate(360deg); } }

/* Form-level alert (non-JS fallback / error summary) */
.form-alert{ padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:18px; }
.form-alert.ok{ background:#e7f7ee; color:#1c7a45; border:1px solid #bce6cd; }
.form-alert.bad{ background:#fdeceb; color:#b3322c; border:1px solid #f5cdca; }

/* ── Icon sizing fix ──────────────────────────────────
   .ic spans that are NOT flex items (feature/why cards) are inline by default,
   so their fixed width/height was ignored and the injected SVG rendered at its
   default (huge) size. Force a sized grid box so the SVG fills exactly. */
.feature-card .ic,
.why-cell .ic,
.mv-card .ic{ display:grid; place-items:center; }
.feature-card .ic svg,
.why-cell .ic svg{ width:100%; height:100%; }
/* Safety net: no injected icon may overflow its container anywhere. */
[data-icon] svg{ max-width:100%; max-height:100%; display:block; }

/* ── Scroll-reveal animations (progressive — added via JS only) ───────────── */
.reveal{ opacity:0; transform:translateY(26px); will-change:opacity, transform;
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal-zoom{ opacity:0; transform:scale(.94); transition:opacity .6s ease, transform .6s ease; }
.reveal-zoom.in{ opacity:1; transform:none; }
/* Stagger children of a revealed grid */
.reveal-stagger > *{ opacity:0; transform:translateY(22px);
  transition:opacity .55s ease, transform .55s ease; }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.04s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.20s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.28s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.36s; }
.reveal-stagger.in > *:nth-child(6){ transition-delay:.44s; }

/* Hero entrance on load */
.hero .hero-inner > *{ animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both; }
.hero .hero-inner > *:nth-child(2){ animation-delay:.08s; }
.hero .hero-inner > *:nth-child(3){ animation-delay:.16s; }
.hero .hero-inner > *:nth-child(4){ animation-delay:.24s; }
@keyframes heroIn{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }

/* Gentle hover lift on interactive cards (in addition to existing) */
.service-card,.lane-card,.region-card,.quote-card,.side-box{ transition:transform .22s ease, box-shadow .22s ease; }
.service-card:hover,.region-card:hover{ transform:translateY(-5px); }

/* Nav links subtle underline animation */
.nav-links a{ position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background:currentColor; opacity:.0; transition:right .25s ease, opacity .25s ease; }
.nav-links a:hover::after,.nav-links a.active::after{ right:0; opacity:.85; }

/* Respect reduced-motion users */
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-zoom,.reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero .hero-inner > *{ animation:none !important; }
}