/* =====================================================================
   Oriented Networks · the footer ("Showroom")
   One footer for every public page: the inner pages (partials/footer.html,
   filled by main.js) and the three homepage designs (filled by the Worker,
   src/routes/home.js). Dark in both themes, like the screens in the buses:
   its colours are its own, not the page's tokens, so the light theme
   leaves it alone. Classes start sr- so no page's own rules reach it.
   ===================================================================== */
.sr-foot{
  position:relative;overflow:hidden;
  background:#0A0908;color:#F7F5F1;
  padding:72px 0 0;
  border-top:1px solid rgba(242,218,139,.14);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.55;font-weight:430;
  color-scheme:dark;
}
.sr-foot::before{
  content:"";position:absolute;left:-12%;top:-45%;width:72%;height:125%;
  background:radial-gradient(closest-side,rgba(201,162,39,.18),rgba(201,162,39,0));
  pointer-events:none;
}
.sr-foot *,.sr-foot *::before,.sr-foot *::after{box-sizing:border-box}
.sr-foot a{color:inherit;text-decoration:none}
.sr-foot p{margin:0}
.sr-foot [hidden]{display:none!important}
.sr-wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.sr-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr-mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600}

/* ---- the statement and the three ways in ---- */
.sr-top{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end}
.sr-logo{display:inline-flex;align-items:center;gap:16px}
.sr-logo img{display:block;width:104px;height:auto}
/* the footer is dark in both themes: keep the silver-N copy the light theme swaps out elsewhere */
html[data-theme="light"] .sr-foot img[src="/assets/img/on-mark.svg"]{content:normal}
.sr-name{display:grid;font-weight:640;font-size:13px;line-height:1.3;letter-spacing:.24em;text-transform:uppercase;font-variation-settings:"wdth" 118}
.sr-name span:last-child{color:#E2B84A}
.sr-claim{margin-top:30px!important;font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.03em;font-weight:800;font-variation-settings:"wdth" 108}
.sr-claim em{font-style:normal;background:linear-gradient(100deg,#7E6014 0%,#C9A227 22%,#F2DA8B 46%,#C9A227 62%,#7E6014 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-keys{display:grid;gap:12px}
.sr-key{display:flex;align-items:center;gap:16px;min-height:68px;padding:12px 18px;border-radius:14px;
  background:linear-gradient(180deg,#1f1b17,#141210);
  box-shadow:inset 0 1px 0 rgba(255,238,196,.10),0 0 0 1px #000,0 0 0 2px rgba(242,218,139,.10);
  transition:box-shadow .2s ease-out}
.sr-key:hover,.sr-key:focus-visible{box-shadow:inset 0 1px 0 rgba(255,238,196,.16),0 0 0 1px #000,0 0 0 2px rgba(242,218,139,.45);outline:none}
.sr-key .sr-ico{color:#F2DA8B}
.sr-key span{min-width:0}
.sr-key small{display:block;font:600 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#8A8176}
.sr-key b{display:block;font-weight:600;font-size:17px;letter-spacing:-.005em;overflow-wrap:anywhere}

/* ---- where to go ---- */
.sr-cols{display:grid;grid-template-columns:.9fr 1.25fr 1fr 1.3fr;gap:36px;margin-top:64px;padding:40px 0 48px;border-top:1px solid rgba(242,218,139,.14)}
.sr-h{margin-bottom:12px!important;font:600 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.18em;text-transform:uppercase;color:#8A8176}
.sr-cols nav a{display:flex;align-items:center;min-height:40px;font-size:15.5px;color:#A69E92;transition:color .2s}
.sr-cols nav a:hover,.sr-cols nav a:focus-visible{color:#F7F5F1}
.sr-visit p:not(.sr-h){padding:6px 0;font-size:15.5px;color:#A69E92}
.sr-open{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#A69E92}
.sr-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#8A8176}
.sr-open.is-open{color:#63D8A4}
.sr-open.is-open::before{background:#63D8A4;box-shadow:0 0 0 4px rgba(99,216,164,.15)}
.sr-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sr-social a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 12px;border-radius:10px;color:#A69E92;font-size:14.5px;
  background:linear-gradient(180deg,#1f1b17,#141210);box-shadow:inset 0 1px 0 rgba(255,238,196,.1),0 0 0 1px #000}
.sr-social a:hover,.sr-social a:focus-visible{color:#F2DA8B}
.sr-social .sr-ico{width:18px;height:18px}
.sr-social .sr-fill{fill:currentColor;stroke:none}

/* ---- the last line ---- */
.sr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:22px 0 30px;border-top:1px solid rgba(247,245,241,.08);font-size:14px;color:#8A8176}
.sr-gold{color:#C9A227;font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;font-size:12px}

@media (max-width:1000px){
  .sr-foot{padding-top:56px}
  .sr-top{grid-template-columns:1fr;gap:32px}
  /* side by side, each as wide as its words: an email address is not cut in two */
  .sr-keys{display:flex;flex-wrap:wrap}
  .sr-key{flex:1 1 auto}
  .sr-cols{grid-template-columns:repeat(3,1fr)}
  .sr-visit{grid-column:1/-1}
}
@media (min-width:641px) and (max-width:1000px){
  /* the visit line runs across the full width rather than leaving it empty */
  .sr-visit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 40px}
  .sr-visit .sr-h{flex-basis:100%}
  .sr-visit .sr-open,.sr-visit .sr-social{margin-top:0}
}
@media (max-width:640px){
  .sr-foot{padding-top:44px}
  .sr-logo img{width:84px}
  .sr-claim{margin-top:22px!important}
  .sr-keys{display:grid;grid-template-columns:1fr}
  .sr-cols{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:40px;padding-top:32px}
  .sr-cols nav:nth-of-type(2){grid-row:span 2}
  .sr-base{flex-direction:column}
}
@media (max-width:380px){
  /* the email address on one line on the smallest phones */
  .sr-key{gap:12px;padding:12px 14px}
  .sr-key b{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sr-key,.sr-cols nav a{transition:none}}
@media print{.sr-foot{display:none}}