/* ==========================================================================
   Site footer — one definition, shared by every page.

   Same arrangement as assets/header.css: the markup is rendered by footer.js
   into <div data-site-footer></div> so the company details and the link list
   exist in exactly one place and cannot drift page to page.
   ========================================================================== */

.site-footer {
  background: var(--dark, #0E1A26); color: #E7ECF2;
  margin-top: clamp(3rem, 7vw, 6rem);
  border-radius: var(--r-lg, 24px) var(--r-lg, 24px) 0 0;
}
.site-footer .fpanel { padding: clamp(2.2rem, 4vw, 3.4rem) var(--gut, clamp(1.1rem, 5.42vw, 5rem)); }

/* The homepage footer is not a band of its own — it continues the glass contact
   panel down over the same photograph, so it brings no background, no rounding
   and no top margin of its own. Same markup, same links, different ground. */
.site-footer[data-variant="glass"] {
  background: transparent; margin-top: 0; border-radius: 0;
  position: relative; z-index: 2;
}
.site-footer .fgrid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(1.6rem, 3vw, 2.6rem);
  max-width: var(--maxw, 1560px); margin-inline: auto;
}
@media (max-width: 1000px) { .site-footer .fgrid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px)  { .site-footer .fgrid { grid-template-columns: 1fr; } }

/* space-between, not start: the tagline holds the top of the column and the
   wordmark drops to the bottom edge of the upper footer, level with the ends of
   the link lists. The column stretches to the row height by default, so there
   is something to distribute. */
.site-footer .fbrand { display: grid; gap: 1rem; align-content: space-between; }
/* The sign-off, not a sentence of body copy: the footer's one piece of display
   type, set light and tight against the small print around it. The face is
   declared HERE rather than borrowed from the page, because only two of the
   seven pages that render this footer happen to load it — a shared component
   cannot rely on its host for its own type. url() resolves against this
   stylesheet, so the path survives the folder moving. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url(../fonts/jakarta-latin.woff2) format("woff2");
  font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "STIX Two Text";
  src: url(../fonts/stix-italic.woff2) format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
.site-footer .tag {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.02rem, 1.55vw, 1.34rem);
  font-weight: 300; letter-spacing: -0.022em; line-height: 1.22;
  max-width: 22ch; color: #fff;
}
/* One word, not the second line — the serif italic marks the word the claim
   turns on and the sentence runs on around it, so it has to sit INLINE. Slightly
   larger because the serif draws smaller on the same body size, and back to
   normal tracking: the negative letter-spacing above is for the sans and only
   smears an italic. */
.site-footer .tag .ti {
  font-family: "STIX Two Text", Georgia, serif;
  font-style: italic; font-weight: 500; font-size: 1.08em;
  letter-spacing: 0; color: #fff;
}
/* Over the homepage's photograph the same line needs a shadow to hold its
   edges; on the flat dark band it would only muddy them. */
.site-footer[data-variant="glass"] .tag { text-shadow: 0 1px 16px rgba(8,13,20,.55); }

.site-footer h4 {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(231,236,242,.5); margin: 0 0 0.9rem; font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer a {
  color: rgba(231,236,242,.72); text-decoration: none; font-size: 0.88rem;
  transition: color .15s;
}
.site-footer a:hover, .site-footer a:focus-visible { color: #fff; }

.site-footer .info { font-size: 0.88rem; color: rgba(231,236,242,.72); display: grid; gap: 0.7rem; }
.site-footer .info > div { display: grid; gap: 0.15rem; }
.site-footer .info dt {
  font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(231,236,242,.45); font-weight: 600;
}
.site-footer .info dd { margin: 0; }

.site-footer .fbottom {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  max-width: var(--maxw, 1560px); margin-inline: auto; margin-top: clamp(2rem, 5vw, 3.4rem);
  padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
}
.site-footer .flegal { display: grid; gap: 0.3rem; }
.site-footer .flegal small { color: rgba(231,236,242,.55); font-size: 0.75rem; line-height: 1.5; }
.site-footer .fpolicies a { color: rgba(231,236,242,.75); text-decoration: none; }
.site-footer .fpolicies a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* Black wordmark rendered white for the dark ground. */
.site-footer .fbottom .fmark {
  height: clamp(24px, 5.4vw, 40px); width: auto; display: block;
  filter: brightness(0) invert(1);
}
/* The studio wordmark, sitting at the foot of the brand column. margin-top is a
   floor, not the spacing: on a narrow screen the column collapses to its content
   and space-between has nothing to give, so this keeps the mark off the tagline. */
.site-footer .fbrand-mark {
  height: clamp(24px, 3.4vw, 34px); width: auto; display: block;
  filter: brightness(0) invert(1); margin-top: clamp(0.4rem, 1vw, 0.9rem);
}

/* PHONE & TABLET PASS (2026-10-15): bigger tap areas for the footer links on
   touch screens. Not the homepage's glass footer (its own pass is done). */
@media (max-width: 1024px) and (pointer: coarse) {
  .site-footer:not([data-variant="glass"]) ul { gap: 0; }
  .site-footer:not([data-variant="glass"]) ul a { display: inline-block; padding: 0.42rem 0; }
}