/* Site footer. A white panel, like the board's rails, with the desk video
   playing grey and out of focus behind it: a contact line with the icon links
   beside a small terminal for AI agents, one row of text links, 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 with its icon links, the agent terminal beside it ---- */
.sf__top{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); align-items:center; gap:32px 56px;
  padding-bottom:44px; border-bottom:1px solid var(--sf-line);
}
.sf__signoff{display:grid; gap:24px; justify-items:start}
.sf__signoff h2{
  font:600 clamp(22px,2.9vw,32px)/1.18 var(--sf-font-display); letter-spacing:-.02em;
  max-width:30ch;
}
.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:10px}
.sf__icon{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; 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 terminal window, the one dark thing on the panel ----
   It answers the Ricardo GPT window at the top of the homepage: people get the
   chat, machines get a prompt. Greenscale, dimmed like an editor's dark
   theme rather than a phosphor screen: muted greens on a grey-green, a title
   bar one step lighter than the pane, no glow. The typed line is decoration
   (aria-hidden); the heading, sentence and links carry the meaning. */
.sf__agent{
  --sf-term:#1c211d;      /* editor pane */
  --sf-term-bar:#252b26;  /* title bar */
  --sf-g1:#333c35;  /* hairlines */
  --sf-g2:#4f6354;  /* link edges */
  --sf-g3:#6a9955;  /* the typed line: comment green */
  --sf-g4:#8bbd82;  /* prompt, caret, icon, primary link */
  --sf-g5:#d5ddd4;  /* heading */
  --sf-term-soft:#a3b3a5;
  background:var(--sf-term); color:var(--sf-g5);
  border-radius:14px;
  box-shadow:0 0 0 1px var(--sf-g1), 0 22px 40px -24px rgba(5,0,56,.55), 0 8px 16px -10px rgba(5,0,56,.3);
  overflow:hidden;
  font:12px/1.5 var(--sf-font-meta);
}
.sf__agentBar{
  display:flex; align-items:center; gap:6px; padding:10px 12px;
  background:var(--sf-term-bar); border-bottom:1px solid var(--sf-g1);
  color:var(--sf-term-soft); font-size:11px; line-height:1;
}
.sf__agentBar i{width:9px; height:9px; border-radius:50%; background:#3d4a40}
.sf__agentBar i:nth-child(2){background:var(--sf-g2)}
.sf__agentBar i:nth-child(3){background:var(--sf-g3)}
.sf__agentBar span{margin-left:auto}
.sf__agentBody{padding:16px 18px 18px}
.sf__cmd{margin-bottom:14px; color:var(--sf-g3); white-space:nowrap; overflow:hidden}
.sf__cmd::before{content:"$ "; color:var(--sf-g4)}
.sf__caret{
  display:inline-block; width:.6em; height:1.1em; margin-left:3px; vertical-align:-.2em;
  background:var(--sf-g4); animation:sf-blink 1.1s steps(1) infinite;
}
@keyframes sf-blink{50%{opacity:0}}
.sf__agent h3{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
  font:600 19px/1.2 var(--sf-font-display); letter-spacing:-.01em; color:var(--sf-g5);
}
.sf__agent h3 svg{width:22px; height:22px; flex:none; fill:var(--sf-g4)}
.sf__out{font:400 13px/1.5 var(--sf-font-body); color:var(--sf-term-soft); text-wrap:pretty}
.sf__agentLinks{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.sf__agentLinks a{
  display:inline-flex; align-items:center; min-height:30px; padding:5px 10px;
  border:1px solid var(--sf-g2); border-radius:7px;
  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 ---- */
.sf__map{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px 24px; padding:40px 0; border-bottom:1px solid var(--sf-line)}
.sf__map ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.sf__map li{margin:0; font-size:14px; line-height:1.35}
.sf__map 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 li a:hover,
.sf__map li a:focus-visible{background-color:rgba(255,208,47,.3); background-size:calc(100% - 10px) 1.5px}
.sf__map 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, nothing else */
.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 and terminal are, 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__top{grid-template-columns:minmax(0,560px)}
  .sf__map{grid-template-columns:repeat(2, minmax(0,1fr))}
  .sf__fine{grid-template-columns:1fr}
  .sf__ack{padding-right:0}
}
/* Phones get the short footer: the acknowledgement stays on larger screens,
   the trademark notice shows everywhere. */
@media (width <= 560px){
  .sf{border-radius:20px 20px 0 0}
  .sf__inner{padding:36px 16px 0}
  .sf__top{gap:28px; padding-bottom:28px}
  .sf__agentBody{padding:14px 14px 16px}
  .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(22px,2.9vw,32px); letter-spacing:-.02em; font-weight:600}
body#short .sf h3{font-size:19px; letter-spacing:-.01em; font-weight:600; margin-bottom:6px}
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__cmd{font-size:12px; line-height:1.5; padding-bottom:0}
body#short .sf p.sf__out{font-size:13px; line-height:1.5}