/* Footer (every page, incl. the homepage): a short line + Start a project, the link columns and contact, then the bottom bar.
   Markup: tools/build_pages.py footer() (synced into index.html). Picked 29 Sep 2026 from three trials ("B · Wordmark", logo removed). */
.ft { position: relative; color: var(--text); padding: clamp(56px, 7vw, 96px) var(--gutter) 24px; background: var(--bg); border-top: 1px solid var(--line); }
.ft h4 { margin-bottom: 16px; font: 600 var(--fs-label, 12px) var(--font-label, Inter); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.ft nav a { display: block; width: fit-content; padding: 5px 0; font-weight: 500; font-size: 15px; color: color-mix(in srgb, var(--text) 78%, transparent); transition: color .25s; }
.ft nav a:hover { color: var(--accent); }
/* the homepage doesn't load pages/sections.css, so the footer carries its own button row + link styles */
.ft .dp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ft .dp-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ft .dp-link::after { content: "→"; color: var(--accent); transition: transform .4s var(--ease); }
.ft .dp-link:hover::after { transform: translateX(4px); }

.ft__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.ft__line { max-width: 18ch; font: 400 clamp(34px, 4vw, 60px)/1.05 var(--font-display); letter-spacing: -.035em; }
.ft__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-top: clamp(40px, 5vw, 64px); }

.ft-contact { list-style: none; display: grid; gap: 12px; margin: 0; padding: 0; }
.ft-contact li { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.ft-contact a:hover { color: var(--accent); }
.ft-ico { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--surface-2); fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ft-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(32px, 4vw, 56px); font-size: 13px; color: var(--muted); }
.ft-bar__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ft-bar a:hover { color: var(--text); }
.ft-top { margin-left: auto; padding: 0; border: 0; background: none; font: 600 13px var(--font-body, Inter); color: var(--text); cursor: pointer; }
.ft-top:hover { color: var(--accent); }

@media (max-width: 1000px) { .ft__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft-top { margin-left: 0; } }