/* ==========================================================================
   Footer: newsletter band, link grid, bottom bar
   (black area: tokens are re-pointed so every rule follows automatically)
   ========================================================================== */

.site-footer {
    --ink: #ffffff; --accent: #ffffff; --muted: #ffffff; --line: var(--line-dark);
    position: relative; overflow: hidden;
    background: #000000; color: var(--ink);
}
.footer-wrap { display: flex; flex-direction: column; gap: var(--gap-xl); padding-block: var(--gap-xl) var(--gap-md); }

/* 1. Newsletter band ------------------------------------------------------ */
.f-news { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--gap-xl); padding-bottom: var(--gap-xl); border-bottom: 1px solid var(--line); }
.f-news-text { display: flex; flex-direction: column; gap: var(--gap-sm); }
.f-news-text h2 { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 400; line-height: 1.2; }
.f-news-text h2 em { font-style: italic; }
.f-news-text p:not(.eyebrow) { max-width: 460px; color: var(--muted); }

.newsletter { display: flex; flex-direction: column; gap: var(--gap-sm); }
.news-field { display: flex; align-items: center; gap: var(--gap-sm); border-bottom: 1px solid var(--line); }
.news-field input { flex: 1; min-width: 0; height: 60px; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: var(--fs-base); }
.news-field input::placeholder { color: var(--muted); }
.news-go { display: inline-flex; align-items: center; gap: var(--gap-sm); height: 60px; white-space: nowrap; }
.news-go em { font-style: normal; }
.news-go span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: #000; transition: transform .5s var(--ease); }
.news-go:hover span { transform: rotate(-45deg); }
.news-note { color: var(--muted); }
.news-note.is-error, .news-note.is-success { color: var(--ink); }

/* 2. Link grid ------------------------------------------------------------ */
.f-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); }
.f-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
.f-brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); }
.f-brand p { max-width: 330px; color: var(--muted); }
.f-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-sm); }
.f-mail { display: inline-flex; align-items: center; gap: var(--gap-xs); }
.f-mail:hover { color: var(--ink); }
.socials { display: flex; gap: var(--gap-xs); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); transition: background-color .3s, color .3s, border-color .3s, transform .45s var(--ease); }
.socials a:hover { background: var(--ink); color: #000; border-color: var(--ink); transform: translateY(-3px); }

.f-col { display: flex; flex-direction: column; gap: var(--gap-md); }
.f-title { display: flex; align-items: center; gap: var(--gap-sm); color: var(--muted); }
.f-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.f-col ul { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.f-col a { display: inline-flex; align-items: center; gap: 0; transition: gap .4s var(--ease), color .3s; }
.f-col a::before { content: ""; width: 0; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.f-col a:hover { gap: 10px; }
.f-col a:hover::before { width: 14px; }

/* 3. Bottom bar ----------------------------------------------------------- */
.f-bottom { border-top: 1px solid var(--line); }
.f-bottom .container { display: flex; justify-content: center; padding-block: 22px; text-align: center; color: var(--muted); }

/* 4. Smaller screens ------------------------------------------------------ */
@media (max-width: 1099.98px) {
    .f-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .f-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 899.98px) {
    .f-news { grid-template-columns: minmax(0, 1fr); gap: var(--gap-lg); }
}
@media (max-width: 640px) {
    .footer-wrap { gap: var(--gap-lg); }
    .f-news { padding-bottom: var(--gap-lg); }
    .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-lg) var(--gap-md); }
    .f-brand { display: flex; }
    .news-field input { height: 54px; }
    .news-go { height: 54px; }
    .news-go em { display: none; }
}

/* Phones: bigger tap rows, company links run inline under the two lists */
@media (max-width: 640px) {
    .f-col { gap: var(--gap-sm); }
    .f-col ul { gap: 0; }
    .f-col a { padding-block: 7px; }
    .f-grid > .f-col:last-child { grid-column: 1 / -1; }
    .f-grid > .f-col:last-child ul { flex-direction: row; flex-wrap: wrap; gap: 0 var(--gap-md); }
    .f-mail { padding-block: 8px; }
    .f-bottom .container { padding-block: 18px; }
}