/* Site footer. A white panel, like the board's rails, with the desk video
   playing grey and out of focus behind it: the contact CTA owns the top, then
   the link map, whose two short columns sit over a wide agents terminal,
   then the fine print. Loaded just before <footer class="sf"> on every page
   that carries it. The markup has one source, scripts/apply-footer.py, which
   stamps it into the pages. Everything is scoped to .sf; the :where() resets
   at the top keep the site's global footer / p / li / h2 rules out without
   raising specificity, so the component rules below win by order. */

@font-face{font-family:"Departure Mono";src:url("../fonts/departure-mono/DepartureMono-Regular.woff2") format("woff2"),url("../fonts/departure-mono/DepartureMono-Regular.woff") format("woff");font-weight:100 900;font-style:normal;font-display:swap}

.sf{
  --sf-font-body:Inter, "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
  --sf-font-display:"Bricolage Grotesque", "Bricolage Grotesque Fallback", Inter, Arial, sans-serif;
  --sf-font-meta:"Departure Mono", ui-monospace, monospace;
  display:block; box-sizing:border-box; width:auto; max-width:none; margin:0; padding:0;
  justify-content:normal; align-content:normal;
  /* full bleed: the canvas pages pad <body> sideways */
  margin-inline:calc(50% - 50vw);
}
.sf :where(*){box-sizing:border-box}
.sf :where(p, li, ul, h2, h3){margin:0; padding:0; text-align:left; hyphens:manual; font-size:inherit; line-height:inherit; letter-spacing:normal; text-shadow:none}
.sf :where(ul){list-style:none}
.sf :where(span){color:inherit; margin:0; font-family:inherit}
.sf :where(h2, h3){position:static; z-index:auto; font-weight:inherit; background:none; box-shadow:none}
.sf :where(h2, h3)::before{content:none}
.sf h3{margin-top:0 !important} /* the global h3 pulls itself up with !important */
.sf :where(img, svg){vertical-align:middle}
.sf :where(a):active{box-shadow:none !important}

.sf{
  /* fixed palette, the board's own panel colours (canvas-board.css): the accent
     picker retints --border / --action, and the footer keeps its contrast
     whatever the page accent is */
  --sf-bg:#fff;
  --sf-line:rgba(5,0,56,.13);
  --sf-ink:#050038;
  --sf-soft:#55546b;
  --sf-accent:var(--yellow-strong, #ffd02f);
  --sf-pink:#ff7574;

  position:relative; isolation:isolate; overflow:hidden;
  background:var(--sf-bg); color:var(--sf-ink);
  border-radius:28px 28px 0 0;
  box-shadow:0 0 0 1px var(--sf-line), 0 -6px 24px rgba(5,0,56,.05);
  font:400 14px/1.55 var(--sf-font-body);
  text-align:left; -webkit-font-smoothing:antialiased;
}
/* The desk video, in grey (site-footer.js loads and plays it). It is 640px
   wide and stretched 2 to 4 times over the panel; the stretch alone softens
   it, and 2px of blur takes out the compression grid without losing the desk
   (at 8px it turns to smudges). The scale hides the soft rim the blur leaves.
   A white veil (::before) sits between it and the content, thinnest behind the
   headline and terminal, close to solid behind the fine print. */
.sf__bg{
  position:absolute; top:0; left:0; z-index:-2; display:block; width:100%; height:100%;
  max-width:none; margin:0; border:0; border-radius:0; box-shadow:none;
  object-fit:cover; object-position:50% 30%; pointer-events:none;
  filter:grayscale(1) contrast(1.08) blur(2px); transform:scale(1.02);
}
.sf::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,.58), rgba(255,255,255,.8) 34%, rgba(255,255,255,.93) 62%, rgba(255,255,255,.96));
}
.sf a{color:inherit; text-decoration:none}
.sf a:focus-visible,.sf summary:focus-visible{outline:2px solid var(--sf-ink); outline-offset:3px; border-radius:4px}
.sf__inner{max-width:1120px; margin:0 auto; padding:48px 24px 0}

.sf__label{
  font:11px/1 var(--sf-font-meta); letter-spacing:.02em; text-transform:uppercase;
  color:var(--sf-soft); margin:0 0 16px;
}

/* ---- Top: the sign-off CTA owns the row ---- */
.sf__top{
  display:grid; grid-template-columns:1fr; align-items:center;
  padding-bottom:48px; border-bottom:1px solid var(--sf-line);
}
.sf__signoff{display:grid; gap:28px; justify-items:start; max-width:46rem}
.sf__signoff h2{
  font:600 clamp(28px,3.6vw,42px)/1.12 var(--sf-font-display); letter-spacing:-.025em;
  max-width:22ch;
}
.sf__nb{white-space:nowrap}
/* a highlighter stroke, as on the page headings */
.sf__signoff h2 em{font-style:normal; background:var(--sf-accent); border-radius:5px; padding:0 .22em; margin:0 -.1em}

/* Icon links: email, the profiles, back to top. Each carries its name in
   aria-label and title. */
.sf__icons{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px}
.sf__icon{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:1px solid var(--sf-line); border-radius:999px; background:var(--sf-bg);
  transition:background-color .15s, border-color .15s;
}
.sf a.sf__icon:focus-visible{border-radius:999px}
.sf__icon:hover{background:var(--sf-accent); border-color:var(--sf-ink)}
.sf__icon svg,
.sf__icon img{display:block; width:18px; height:18px; fill:currentColor; object-fit:contain}
.sf__icon--primary{background:var(--sf-accent); border-color:var(--sf-ink)}
.sf__icon--primary:hover{background:#ffdc5c}

/* ---- For agents: a wide terminal under Documents and Certifications ----
   It answers the Ricardo GPT window at the top of the homepage: people get the
   chat, machines get a prompt. Those two columns are short, so the card spans
   them and closes the link map into an even block (placement is with .sf__map
   below). Grayscale with a slight green cast, softer than the CTA above. The
   typed line in the title bar is decoration (aria-hidden); the heading,
   sentence and links carry the meaning. */
.sf__agent{
  --sf-term:#2e302e;      /* grey pane, faint green */
  --sf-term-bar:#383a38;  /* title bar */
  --sf-g1:#4a4c4a;  /* hairlines */
  --sf-g2:#5e635e;  /* link edges */
  --sf-g3:#7a8578;  /* the typed line */
  --sf-g4:#9aa894;  /* prompt, caret, icon, primary link */
  --sf-g5:#c8cdc6;  /* heading */
  --sf-term-soft:#9a9f98;
  background:var(--sf-term); color:var(--sf-g5);
  border-radius:10px;
  box-shadow:0 0 0 1px var(--sf-g1);
  overflow:hidden;
  font:11px/1.45 var(--sf-font-meta);
}
.sf__agentBar{
  display:flex; align-items:center; gap:5px; padding:6px 12px;
  background:var(--sf-term-bar); border-bottom:1px solid var(--sf-g1);
  color:var(--sf-term-soft); font-size:10px; line-height:1;
}
.sf__agentBar i{width:7px; height:7px; border-radius:50%; background:#555855}
.sf__agentBar i:nth-child(2){background:var(--sf-g2)}
.sf__agentBar i:nth-child(3){background:var(--sf-g3)}
.sf__agentBody{
  display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"h links" "out out";
  align-items:center; gap:6px 16px; padding:12px 14px 13px;
}
.sf__cmd{min-width:0; margin-left:7px; color:var(--sf-g3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sf__cmd::before{content:"$ "; color:var(--sf-g4)}
.sf__caret{
  display:inline-block; width:.55em; height:1em; margin-left:2px; vertical-align:-.15em;
  background:var(--sf-g4); animation:sf-blink 1.1s steps(1) infinite;
}
@keyframes sf-blink{50%{opacity:0}}
.sf__agent h3{
  grid-area:h; display:flex; align-items:center; gap:7px;
  font:600 14px/1.25 var(--sf-font-display); letter-spacing:-.01em; color:var(--sf-g5);
}
.sf__agent h3 svg{width:16px; height:16px; flex:none; fill:var(--sf-g4)}
.sf__out{grid-area:out; font:400 12px/1.5 var(--sf-font-body); color:var(--sf-term-soft); text-wrap:pretty}
.sf__agentLinks{grid-area:links; display:flex; flex-wrap:wrap; gap:6px}
.sf__agentLinks a{
  display:inline-flex; align-items:center; min-height:26px; padding:3px 8px;
  border:1px solid var(--sf-g2); border-radius:6px;
  color:var(--sf-g4);
  transition:background-color .15s, color .15s, border-color .15s;
}
.sf .sf__agentLinks a:hover{background:var(--sf-g4); border-color:var(--sf-g4); color:var(--sf-term)}
.sf .sf__agentLinks li:first-child a{background:var(--sf-g4); border-color:var(--sf-g4); color:var(--sf-term)}
.sf .sf__agentLinks li:first-child a:hover{background:var(--sf-g5); border-color:var(--sf-g5)}
.sf .sf__agent a:focus-visible{outline-color:var(--sf-g5)}

/* ---- Links: site, case studies, documents, certifications ---- */
/* Site and Case studies run the full height; Documents and Certifications
   share the right half with the agents terminal under them. */
.sf__map{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:auto 1fr;
  gap:24px; padding:40px 0; border-bottom:1px solid var(--sf-line);
}
.sf__map > div:nth-child(-n+2){grid-row:span 2}
.sf__agent{grid-column:3 / -1; align-self:end}
.sf__map > div ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.sf__map > div li{margin:0; font-size:14px; line-height:1.35}
.sf__map > div li a{
  display:inline-flex; align-items:baseline; gap:6px;
  font-weight:var(--link-weight-inline, 500);
  /* the underline grows in on hover; the yellow wash sits behind the text,
     its padding taken back by the margin so nothing moves */
  padding:1px 5px; margin:-1px -5px; border-radius:5px;
  background:linear-gradient(currentColor,currentColor) 5px calc(100% - 1px)/0 1.5px no-repeat;
  transition:background-size .2s, background-color .15s;
}
.sf__map > div li a:hover,
.sf__map > div li a:focus-visible{background-color:rgba(255,208,47,.3); background-size:calc(100% - 10px) 1.5px}
.sf__map > div li a:active{background-color:rgba(255,208,47,.5)}
.sf__map small{font:11px/1 var(--sf-font-meta); color:var(--sf-soft)}

/* The FAQ chip, in the coral of the nav's FAQ button. */
.sf__faq{
  align-self:center; border-radius:5px; background:var(--sf-pink); color:var(--sf-ink);
  font:11px/1 var(--sf-font-meta); padding:4px 6px;
}

/* Certifications: the two badges */
.sf__badges{display:flex; align-items:center; gap:14px}
.sf__badges a{border-radius:8px; transition:transform .15s}
.sf__badges a:hover{transform:translateY(-2px)}
.sf__badges img{display:block; height:52px; width:auto}

/* ---- Fine print: Acknowledgement of Country, disclaimers ---- */
.sf__fine{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 24px;
  padding:28px 0; border-bottom:1px solid var(--sf-line);
  font-size:12px; line-height:1.6; color:var(--sf-soft);
}
.sf__ack{display:flex; gap:14px; align-items:flex-start; padding-right:16px; text-wrap:pretty}
.sf__flags{display:inline-flex; gap:6px; flex:none; margin-top:2px}
.sf__flag{display:block; width:30px; height:20px; border-radius:2px}

/* The trademark notice always shows; the other disclaimers open in place under it */
.sf__legal{display:grid; gap:8px; align-content:start}
.sf__legal summary{
  display:inline-flex; gap:8px; cursor:pointer; list-style:none;
  font:11px/1.75 var(--sf-font-meta); letter-spacing:.02em; text-transform:uppercase;
}
.sf__legal summary::-webkit-details-marker{display:none}
.sf__legal summary::after{content:"+"}
.sf__legal [open] summary::after{content:"−"}
.sf__legal summary:hover{color:var(--sf-ink)}
.sf__legal ul{list-style:none; margin:6px 0 0; padding:0; display:grid; gap:6px}
.sf__legal li{margin:0}
.sf__legal b{font:11px/1.4 var(--sf-font-meta); text-transform:uppercase; color:var(--sf-ink); margin-right:6px}
.sf__legal a{text-decoration:underline; text-underline-offset:2px}
.sf__legal a:hover{color:var(--sf-ink)}

/* ---- Bottom bar ---- */
.sf__bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px 24px;
  padding:16px 0 24px;
  font:11px/1.5 var(--sf-font-meta); color:var(--sf-soft);
}


/* ---- Responsive ---- */
@media (width <= 900px){
  /* The stacked footer is far taller than the video is wide: it keeps to the
     top, where the sign-off is, and fades into the panel. */
  .sf__bg{
    height:max(620px, 66vw);
    -webkit-mask-image:linear-gradient(to bottom, #000 50%, transparent);
    mask-image:linear-gradient(to bottom, #000 50%, transparent);
  }
  .sf::before{background:linear-gradient(to bottom, rgba(255,255,255,.58), rgba(255,255,255,.8) 420px, rgba(255,255,255,.9) 620px)}
  .sf__signoff{max-width:none}
  .sf__map{grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:none; row-gap:32px}
  .sf__map > div:nth-child(-n+2){grid-row:auto}
  .sf__agent{grid-column:1 / -1}
  .sf__fine{grid-template-columns:1fr}
  .sf__ack{padding-right:0}
}
/* Phones get the short footer: sign-off, site + case-study links, trademarks
   and the copyright bar. The agent terminal, documents, certifications and
   acknowledgement stay on larger screens. */
@media (width <= 560px){
  .sf{border-radius:20px 20px 0 0}
  .sf__inner{padding:36px 16px 0}
  .sf__top{padding-bottom:28px}
  .sf__signoff{gap:20px}
  .sf__signoff h2{font-size:clamp(24px,7vw,32px)}
  .sf__icon{width:40px; height:40px}
  .sf__agent,
  .sf__map > div:nth-child(n+3),
  .sf__ack{display:none}
  .sf__fine{padding:16px 0}
  .sf__map{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px 16px; padding:28px 0}
  .sf__bar{text-wrap:balance}
}
@media (prefers-reduced-motion: reduce){
  .sf *{transition:none !important}
  .sf__caret{animation-name:none}
}

/* Error pages reuse the short layout (body#short), which forces Inter on every
   element with !important and restyles h2 and p. Win those back here. */
body#short footer.sf{padding:0}
body#short .sf h2{font-size:clamp(28px,3.6vw,42px); letter-spacing:-.025em; font-weight:600}
body#short .sf h3{font-size:14px; letter-spacing:-.01em; font-weight:600}
body#short .sf :is(h2, h3),
body#short .sf :is(h2, h3) *{font-family:var(--sf-font-display) !important}
body#short .sf :is(.sf__label, .sf__faq, .sf__map small, .sf__legal summary, .sf__legal b, .sf__bar, .sf__agentBar, .sf__cmd, .sf__agentLinks),
body#short .sf :is(.sf__label, .sf__faq, .sf__map small, .sf__legal summary, .sf__legal b, .sf__bar, .sf__agentBar, .sf__cmd, .sf__agentLinks) *{font-family:var(--sf-font-meta) !important}

body#short .sf p{padding-bottom:0; max-width:none}
body#short .sf p.sf__label{font-size:11px; line-height:1}
body#short .sf :is(.sf__ack, .sf__legal p){font-size:12px; line-height:1.6}
body#short .sf p.sf__out{font-size:12px; line-height:1.5}