/* ==========================================================================
   site-footer — iteration block
   --------------------------------------------------------------------------
   Full-bleed dark footer with a looping video background, a centred Teako
   monogram in the upper field, and organised link columns below. Modelled
   on the editorial "video-field + quiet link grid" footer pattern.

   Layout:
     .tf__bg     → video (or gradient fallback), object-fit cover, inset 0
     .tf__veil   → top→bottom gradient so the lower link grid stays legible
     .tf__brand  → centred white monogram, generous air above
     .tf__groups → 3-col grid, 2 rows (6 link groups)
     .tf__social → icon row, top-right, aligned with the first group row
     .tf__meta   → sitemap, then copyright (left) + listing/tickers (right)

   PLAYGROUND MODE: raw values throughout (no token snap).
   ========================================================================== */

.tf {
  --tf-bg:     #0A0E14;
  --tf-ink:    #ECEEF2;
  --tf-dim:    rgba(236, 238, 242, 0.56);
  --tf-faint:  rgba(236, 238, 242, 0.34);
  --tf-rule:   rgba(236, 238, 242, 0.12);
  --tf-chip:   rgba(236, 238, 242, 0.08);
  --tf-accent: #C42800;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--tf-bg);
  color: var(--tf-ink);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

/* ---------- Background video / fallback ---------- */

.tf__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fallback while no video is mounted — a quiet deep-ocean gradient so
     the field is never flat. The loader replaces nothing; the <video>
     simply sits on top once a clip is found. */
  background:
    radial-gradient(120% 80% at 50% 0%, #1A2433 0%, #0E141D 46%, #070A0F 100%);
}
.tf__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Slightly muted so white type and the monogram stay dominant. */
  opacity: 0.9;
}

/* Top→bottom veil: clear at the monogram, deepening to near-solid behind
   the link grid so every label reads. */
.tf__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 11, 16, 0.30) 0%,
    rgba(8, 11, 16, 0.32) 38%,
    rgba(8, 11, 16, 0.78) 64%,
    rgba(7, 9, 14, 0.96) 100%
  );
}

/* ---------- Content shell ---------- */

.tf__inner {
  position: relative;
  z-index: 2;
  max-width: var(--teako-page-max);
  margin: 0 auto;
  /* Footer sizes to its content — no forced viewport height. */
  padding: 0 var(--teako-page-gutter) 40px;
  display: flex;
  flex-direction: column;
}

/* ---------- Centred monogram ---------- */

.tf__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 144px 0 128px;
}
.tf__brand img {
  display: block;
  width: auto;
  height: 64px;
  /* Logo viewBox is 73.9469 × 58.4168 — lock the ratio so the
     preserveAspectRatio="none" inside the SVG can't stretch it. */
  aspect-ratio: 73.9469 / 58.4168;
}

/* ---------- Link grid + social ---------- */

.tf__cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

.tf__groups {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 200px));
  column-gap: 48px;
  row-gap: 60px;
}

.tf__group-label {
  margin: 0 0 18px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--tf-dim);
}

.tf__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.tf__group a {
  display: inline-block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tf-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}
.tf__group a:hover { color: var(--tf-accent); }

/* ---------- Social ---------- */

.tf__social {
  flex: 1 1 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--tf-rule);
}
.tf__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: var(--tf-chip);
  color: var(--tf-dim);
  transition: background 200ms ease, color 200ms ease;
}
.tf__social a:hover {
  background: var(--tf-accent);
  color: #fff;
}
.tf__social svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}

/* ---------- Investor-updates signup band ---------- */
/* One hairline row between the link columns and the sitemap: label + line of
   copy on the left, email + subscribe on the right. Same visual-stub submit
   convention as the popup until the ESP endpoint is wired. */

.tf__signup {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--tf-rule);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.tf__signup-copy { max-width: 480px; }
.tf__signup .tf__group-label { margin-bottom: 10px; }
.tf__signup-sub {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244, 245, 247, 0.6);
}
.tf__signup-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  flex: 0 1 520px;
  min-width: 300px;
}
.tf__signup-form input { flex: 1 1 240px; }
.tf__signup-form .tf__signup-consent { flex: 1 1 100%; margin-top: 4px; }
.tf__signup-form input {
  min-width: 0;
  padding: 12px 2px 14px;
  border: 0;
  border-radius: 0;
  /* the 45° survey hatch underline, light on ink; red on focus */
  background: repeating-linear-gradient(
    45deg,
    rgba(244, 245, 247, 0.4) 0, rgba(244, 245, 247, 0.4) 1.5px,
    transparent 1.5px, transparent 5px
  ) left bottom / 100% 5px no-repeat;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--tf-ink);
}
.tf__signup-form input::placeholder { color: rgba(244, 245, 247, 0.35); }
.tf__signup-form input:focus {
  outline: none;
  background-image: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.tf__signup-form button {
  appearance: none;
  cursor: pointer;
  padding: 12px 22px 12px 26px;
  border: 1px solid rgba(244, 245, 247, 0.4);
  border-radius: 0;
  /* red hatch spine on the left, matching the menu signup */
  background: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  ) left top / 6px 100% no-repeat;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tf-ink);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  white-space: nowrap;
}
.tf__signup-form button:hover,
.tf__signup-form button:focus-visible {
  border-color: var(--tf-ink);
  background: rgba(244, 245, 247, 0.08);
  outline: none;
}
/* Submitted state — the form quietens down to a confirmation line. */
.tf__signup.is-done .tf__signup-form { opacity: 0.65; }
.tf__signup.is-done button { pointer-events: none; border-color: rgba(244, 245, 247, 0.18); color: rgba(244, 245, 247, 0.5); }

/* ---- Studio credit (client, 10 Sep 2026) ----------------------------------
   Centred, two lines, below the baseline: "Created by" + the WAO mark, then the
   studio URL in the footer's mono register. Compact on purpose (the email's
   credit band was tall). */
.tf__credit {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--tf-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.tf__credit-by {
  display: inline-flex;
  flex-direction: column;   /* "Created by" above the mark (client, 10 Sep 2026) */
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tf-faint);
}
.tf__credit-by img { height: 22px; width: auto; display: block; opacity: 0.92; transition: opacity 200ms ease; }
.tf__credit-by:hover img { opacity: 1; }
.tf__credit-url {
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tf-dim);
  text-decoration: none;
  border-bottom: 1px solid var(--tf-rule);
  padding-bottom: 3px;
  transition: color 200ms ease, border-color 200ms ease;
}
.tf__credit-url:hover, .tf__credit-url:focus-visible { color: var(--tf-ink); border-color: var(--tf-ink); outline: none; }

@media (max-width: 760px) {
  .tf__signup { margin-top: 48px; padding-top: 32px; gap: 24px; }
  .tf__signup-form { flex: 1 1 100%; }
}

/* ---------- Sitemap + baseline ---------- */

.tf__sitemap {
  margin-top: 72px;
  display: inline-block;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--tf-ink);
  text-decoration: none;
  transition: color 200ms ease;
}
.tf__sitemap:hover { color: var(--tf-accent); }

.tf__baseline {
  position: relative;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--tf-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tf__copy {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tf-dim);
}

/* Small-caps listing strip — the TSX / Frankfurt tickers an issuer
   carries in the footer. Quiet, mono, tabular. */
.tf__listing {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--tf-faint);
}
.tf__ticker { color: var(--tf-dim); }
.tf__ticker b {
  color: var(--tf-ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tf__listing-sep { color: var(--tf-faint); }

/* Scroll-to-top pill, centred on the baseline. */
.tf__totop {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 1px solid var(--tf-rule);
  background: var(--tf-chip);
  width: 46px;
  height: 16px;
  /* D2: one rectangular button system — radius 0 everywhere. */
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease;
}
.tf__totop::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--tf-dim);
  border-right: 1.5px solid var(--tf-dim);
  transform: translateY(1px) rotate(-45deg);
  transition: border-color 200ms ease;
}
.tf__totop:hover { background: rgba(236, 238, 242, 0.14); border-color: var(--tf-faint); }
.tf__totop:hover::before { border-color: var(--tf-ink); }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .tf__inner { padding: 0 28px 32px; }
  .tf__cols { flex-direction: column; gap: 48px; }
  .tf__social { order: -1; }
  .tf__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .tf__brand { padding: 72px 0 56px; }
  .tf__brand img { height: 52px; }
  .tf__groups { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 44px; }
  .tf__baseline { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tf__totop { position: static; transform: none; align-self: center; }
}

/* ---------- Floating back-to-top ----------
   Global, bottom-RIGHT (moved 2026-08-02: bottom-left collided with slide
   CTAs and the map HUD; no chat widget exists to reserve the right for).
   Hidden until the user scrolls past the first viewport (.is-visible toggled
   by an IntersectionObserver sentinel in site-footer.js). */
.teako-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 48px;
  height: 48px;
  /* D2: one rectangular button system — radius 0 everywhere. */
  border-radius: 0;
  display: grid;
  place-items: center;
  /* See-through (2026-08-02): the solid block hid text on content pages.
     Milano-red arrow + soft shadow keeps it legible on light and dark. */
  background: transparent;
  color: #C42800;
  border: none;
  filter: drop-shadow(0 1px 5px rgba(11, 15, 22, 0.35));
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              background 180ms ease, border-color 180ms ease;
}
.teako-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.teako-totop:hover { background: #C42800; color: #F4F5F7; filter: none; }
.teako-totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .teako-totop { left: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* Site-wide cautionary line (2026-07) — quiet, above the baseline row. */
.tf__caution {
	margin: 26px 0 0;
	font-size: 11px;
	line-height: 1.6;
	color: rgba(244, 245, 247, 0.42);
	max-width: 84ch;
}
.tf__caution a { color: rgba(244, 245, 247, 0.6); text-decoration: underline; }
.tf__caution a:hover { color: #fff; }

@media (max-width: 760px) {
  /* The floating back-to-top overlapped card CTAs, KPI rows and the map
     HUD on phones — thumb-scroll doesn't need it. */
  .teako-totop { display: none; }
}

/* Signup consent line (privacy) */
.tf__signup-consent {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(245, 246, 248, 0.45);
}
.tf__signup-consent a {
  color: rgba(245, 246, 248, 0.65);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tf__signup-consent a:hover { color: #fff; }

/* ==========================================================================
   Privacy notice — quiet ink plate, 45° hatch edge, bottom-left.
   ========================================================================== */
.teako-privacy {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 14px 18px 14px 22px;
  background: #141A26;
  color: rgba(245, 246, 248, 0.78);
  border: 1px solid rgba(245, 246, 248, 0.14);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.teako-privacy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    45deg,
    #C42800 0, #C42800 1.5px,
    transparent 1.5px, transparent 5px
  );
}
.teako-privacy.is-in { opacity: 1; transform: none; }
.teako-privacy p { margin: 0; font-size: 12px; line-height: 1.55; }
.teako-privacy a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.teako-privacy button {
  appearance: none;
  flex-shrink: 0;
  border: 1px solid rgba(245, 246, 248, 0.35);
  background: transparent;
  color: #fff;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.teako-privacy button:hover { background: #C42800; border-color: #C42800; }
@media (max-width: 560px) {
  .teako-privacy { flex-direction: column; align-items: flex-start; gap: 10px; left: 12px; right: 12px; bottom: 12px; }
}

/* Global guard: decorative layers (menu wipe, contour ornaments) may extend
   past the viewport — never let them create sideways page scroll. `clip`
   preserves position:sticky (unlike `hidden` on html); hidden is the
   fallback for engines without clip support. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Registered office (2026-08-02) — quiet line under the copyright. */
.tf__regoffice {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(244, 245, 247, 0.45);
}

/* Privacy-plate containment (2026-08-02) — `.teako-privacy` sets
   `display: flex`, which OVERRIDES the `hidden` attribute's UA
   `display: none`. Result: once dismissed (or on every return visit
   with the localStorage ack), the invisible fixed plate kept sitting
   over the bottom-left corner and swallowed clicks on anything under
   it — notably the investor-sections CTA. Same failure mode as the
   loader plate fixed earlier today. `[hidden]` must actually hide,
   and the plate must never intercept while it isn't shown (the 1.4 s
   pre-show delay and the 450 ms fade-out both render at opacity 0
   but previously still caught the pointer). */
.teako-privacy[hidden] { display: none; }
.teako-privacy:not(.is-in) { pointer-events: none; }

/* Sign-off audit (2026-08-18): the privacy notice must never outrank the
   menu overlay (z 100) or intercept content clicks before dismissal. */
.teako-privacy { z-index: 60 !important; max-width: min(480px, calc(100vw - 32px)); }

/* Phones (client, 10 Sep 2026): the red hatched edge of the privacy notice read
   as a stray diagonal line while scrolling; the notice keeps its border only. */
@media (max-width: 760px) {
  .teako-privacy::before { display: none; }
}