/* ============================================================
   TRANSWARRANTY — SITE FOOTER  (self-contained, scoped to .tw-footer)
   Design baseline: 1920px.  1 design-px = var(--k).
   Loaded by every page via <link rel="stylesheet" href="assets/footer.css">
   ============================================================ */
.tw-footer *{ margin:0; padding:0; box-sizing:border-box; }

.tw-footer{
  /* 1 design px scales with viewport up to 1920 (then locks at 1px),
     with a floor so text stays legible on small screens. */
  --k: clamp(0.66px, 0.05208333vw, 1px);
  --blue:#0071c1;
  --ink:#ffffff;
  --muted:rgba(255,255,255,.82);

  background:var(--blue);
  color:var(--ink);
  font-family:"Outfit","Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding: calc(80*var(--k)) calc(40*var(--k)) calc(44*var(--k));
  line-height:1.2;
}

/* ---- top: columns ---------------------------------------- */
.tw-footer__cols{
  display:grid;
  grid-template-columns: 1.5fr 1.05fr 1.3fr 1.12fr;
  column-gap: calc(28*var(--k));
  align-items:start;
}

/* ---- brand column ---------------------------------------- */
.tw-brand__logo{
  display:block;
  width: calc(340*var(--k));
  max-width:100%;
  height:auto;
  margin-bottom: calc(92*var(--k));
}
.tw-card{
  width: min(100%, calc(424*var(--k)));
  border:1px solid rgba(255,255,255,.5);
  border-radius: calc(20*var(--k));
  padding: calc(30*var(--k)) calc(28*var(--k)) calc(30*var(--k));
}
.tw-card__title{
  font-size: calc(27*var(--k));
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom: calc(16*var(--k));
}
.tw-card__desc{
  font-size: calc(18*var(--k));
  line-height:1.42;
  color:var(--muted);
  max-width: calc(300*var(--k));
  margin-bottom: calc(34*var(--k));
}
.tw-social{ display:flex; align-items:center; gap: calc(40*var(--k)); }
.tw-social a{ display:inline-flex; line-height:0; transition:opacity .18s ease, transform .18s ease; }
.tw-social a:hover{ opacity:.78; transform:translateY(-2px); }
.tw-social img{ height: calc(42*var(--k)); width:auto; display:block; }

/* ---- link columns ---------------------------------------- */
.tw-col__head{
  display:flex; align-items:center; gap: calc(12*var(--k));
  font-size: calc(30*var(--k));
  font-weight:700;
  margin-bottom: calc(82*var(--k));
  white-space:nowrap;
}
.tw-col__head svg{ height: calc(36*var(--k)); width:auto; fill:#fff; flex:0 0 auto; }

.tw-col__links{ display:flex; flex-direction:column; gap: calc(33*var(--k)); }
.tw-col__links a{
  color:#fff; text-decoration:none;
  font-size: calc(27*var(--k));
  font-weight:400;
  line-height:1.05;
  width:max-content;
  transition:opacity .16s ease;
}
.tw-col__links a:hover{ opacity:.72; text-decoration:underline; text-underline-offset:3px; }

/* ---- bottom bar ------------------------------------------ */
.tw-footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top: calc(240*var(--k));
  font-size: calc(21*var(--k));
  color:rgba(255,255,255,.9);
  flex-wrap:wrap;
}
.tw-footer__bottom .crafted{ opacity:.92; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px){
  .tw-footer{ padding: 60px 40px 40px; }
  /* brand spans the top; the three link groups sit in a roomy 2-col grid */
  .tw-footer__cols{ grid-template-columns: 1fr 1fr; row-gap:46px; column-gap:40px; }
  .tw-brand{ grid-column:1 / -1; }
  .tw-brand__logo{ width:300px; margin-bottom:28px; }
  .tw-card{ width:min(100%,440px); border-radius:18px; padding:26px; }
  .tw-card__title{ font-size:22px; margin-bottom:12px; }
  .tw-card__desc{ font-size:15px; max-width:360px; margin-bottom:24px; }
  .tw-social{ gap:24px; } .tw-social img{ height:32px; }
  .tw-col__head{ font-size:22px; gap:10px; margin-bottom:24px; white-space:normal; }
  .tw-col__head svg{ height:22px; }
  .tw-col__links{ gap:16px; }
  .tw-col__links a{ font-size:16px; white-space:normal; }
  .tw-footer__bottom{ margin-top:56px; font-size:14px; }
}
@media (max-width: 620px){
  .tw-footer{ padding:48px 22px 30px; }
  .tw-footer__cols{ grid-template-columns:1fr; row-gap:38px; column-gap:0; }
  .tw-card{ width:100%; max-width:100%; }
  .tw-card__desc{ max-width:100%; }
  .tw-footer__bottom{ flex-direction:column; align-items:flex-start; gap:10px; margin-top:40px; }
}