/* ═══════════════════════════════════════════════════════════════
   DIRIGO — the footer.
   Paper, like the rest of the page. The weight comes from the closing
   ask, a band of the work, links set large enough to be destinations,
   and a signature that the page edge cuts through.
   ═══════════════════════════════════════════════════════════════ */

.foot{
  position:relative;overflow:hidden;padding:0;
  background:var(--paper);color:var(--ink);
  border-block-start:1px solid var(--line);
}

/* ── the ask ─────────────────────────────────────────────────── */
.foot-cta{
  width:var(--shell);margin-inline:auto;
  padding-block:clamp(5rem,10vw,9rem);
  border-block-end:1px solid var(--line);
}
.foot-eyebrow{
  display:inline-flex;align-items:center;gap:.8rem;margin:0 0 1.6rem;
  font-size:.82rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-faint);
}
.foot-eyebrow::before{content:"";width:34px;height:1px;background:var(--cyan)}
.foot-big{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.5rem,4vw,3rem);flex-wrap:wrap;
}
.foot-big-text{
  font-weight:800;letter-spacing:-.04em;line-height:.98;
  font-size:clamp(2.3rem,7vw,5.6rem);
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .foot-big-text{color:var(--blue)}
}
.foot-arrow{
  position:relative;overflow:hidden;isolation:isolate;flex:none;
  display:grid;place-items:center;
  width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:999px;
  border:1px solid var(--line);color:var(--ink);
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .55s var(--ease);
}
.foot-arrow::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--cyan);transform:scale(0);
  transition:transform .55s var(--ease);
}
.foot-arrow svg{width:34%;height:34%;transition:transform .55s var(--ease)}
.foot-big:hover .foot-arrow{color:var(--ink);border-color:var(--cyan);transform:scale(1.05)}
.foot-big:hover .foot-arrow::before{transform:scale(1)}
.foot-big:hover .foot-arrow svg{transform:translateX(-5px)}

/* ── a band of the work, quiet until touched ─────────────────── */
.foot-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.foot-strip figure{margin:0;overflow:hidden;aspect-ratio:4/3;background:var(--paper-soft)}
.foot-strip img{
  width:100%;height:100%;object-fit:cover;
  /* Greyed rather than darkened, so the band stays light on a light page. */
  filter:grayscale(1) contrast(.85) opacity(.5);
  transition:filter .6s var(--ease),transform 1.1s var(--ease);
}
.foot-strip figure:hover img{filter:none;transform:scale(1.06)}

/* ── columns: links big enough to be a destination ───────────── */
.foot-grid{
  width:var(--shell);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;
  gap:clamp(2rem,4vw,3.5rem);
  padding-block:clamp(3.5rem,6vw,5.5rem);
}
.foot-brand img{width:150px;height:auto;margin-bottom:1.5rem}
.foot-brand p{margin:0 0 1.6rem;max-width:32ch;color:var(--ink-soft);line-height:1.85}
.foot-col h3{
  margin:0 0 1.7rem;font-size:.78rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
}
.foot-col a{
  display:flex;align-items:baseline;gap:.55rem;width:max-content;
  margin-bottom:1.05rem;color:var(--ink-soft);
  font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;letter-spacing:-.015em;
  transition:color .35s var(--ease);
}
.foot-col a span{position:relative}
/* A mark that arrives on hover: at this size the link is a destination,
   so it gets an arrow rather than an underline. */
.foot-col a::after{
  content:"";width:.42em;height:.42em;flex:none;align-self:center;
  border-inline-start:1.5px solid currentColor;border-block-start:1.5px solid currentColor;
  transform:rotate(-45deg) translate(4px,4px);opacity:0;
  transition:opacity .35s var(--ease),transform .45s var(--ease);
}
.foot-col a:hover{color:var(--ink)}
.foot-col a:hover::after{opacity:1;transform:rotate(-45deg)}

.foot-clock{
  margin:0 0 1.6rem!important;font-size:.86rem;letter-spacing:.06em;
  color:var(--ink-faint);display:flex;align-items:center;gap:.5rem;
}
.foot-clock b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;direction:ltr}
.foot-clock::before{
  content:"";width:6px;height:6px;border-radius:999px;background:var(--cyan);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ── base ────────────────────────────────────────────────────── */
.foot-base{
  width:var(--shell);margin:0 auto;padding-block:1.8rem 0;
  border-block-start:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;
  justify-content:space-between;font-size:.85rem;color:var(--ink-faint);
}
.foot-tag{letter-spacing:.16em}
.to-top{
  width:52px;height:52px;border-radius:999px;flex:none;
  display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid var(--line);background:transparent;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.to-top svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.to-top:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.to-top:hover svg{transform:translateY(-3px)}

/* ── the signature, cut by the page edge ─────────────────────── */
/* The box has to clear the span's own line box, or the wordmark loses its
   bottom edge — and being the last thing on the page, there is nothing left
   to scroll to go and see it. Height tracks the same expression as the type
   so it stays right at every width. */
.foot-mark{
  position:relative;margin-top:clamp(1.2rem,2.6vw,2.2rem);
  height:calc(clamp(6rem,20vw,17rem) * .92);
  overflow:hidden;pointer-events:none;
}
.foot-mark span{
  position:absolute;inset-inline:0;inset-block-start:0;
  display:block;text-align:center;white-space:nowrap;
  font-size:clamp(6rem,20vw,17rem);font-weight:800;line-height:.78;letter-spacing:-.05em;
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  will-change:transform;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .foot-mark span{color:var(--blue)}
}

@media(max-width:900px){
  .foot-strip{grid-template-columns:repeat(4,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .foot-mark span{transform:none!important}
  .foot-clock::before{animation:none}
}