/* The Work-page ending, isolated from each case study's product typography. */
.shared-contact#contact {
  --font-sans:'Funnel Sans',system-ui,sans-serif;--font-display:'Funnel Display','Funnel Sans',sans-serif;
  --ink:#141414;--paper:#fff;--paper-2:#f2f2f2;--rule:#e4e4e4;
  --contact-gap:24px;--dur-fast:180ms;--ease:cubic-bezier(.22,1,.36,1);
  --nx-obj-light:#fff;--nx-obj-line:rgba(20,20,20,.10);
  --nx-shadow:0 1px 1px rgba(0,0,0,.05),0 6px 14px -4px rgba(0,0,0,.12),0 18px 34px -14px rgba(0,0,0,.22);
  position:relative!important;isolation:isolate;box-sizing:border-box!important;
  width:100%!important;max-width:none!important;min-height:480px!important;height:auto!important;
  margin:0!important;padding:48px var(--site-pad) calc(var(--site-bar-height) + 32px)!important;
  background:transparent!important;color:var(--ink)!important;
  font:400 16px/1.5 var(--font-sans)!important;text-align:left!important;
  scroll-margin-top:calc(var(--site-bar-height) + 16px);
}
:root.theme-dark .shared-contact#contact,:root[data-theme="dark"] .shared-contact#contact {
  --ink:#f5f5f7;--paper:#08090b;--paper-2:#121419;--rule:#262b33;
  --nx-obj-light:#191c22;--nx-obj-line:rgba(245,245,247,.10);
  --nx-shadow:0 1px 1px rgba(0,0,0,.4),0 8px 18px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.7);
}
.shared-contact#contact>.rule {display:block;height:1px!important;width:100%;padding:0!important;margin:0 0 32px!important;background:var(--rule);border:0}
.shared-contact#contact>.contact-hero-grid {display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--contact-gap);align-items:end;margin:0;padding:0}
.shared-contact#contact .contact-one-line {
  grid-column:1/7!important;grid-row:1;margin:0!important;padding:0!important;max-width:none!important;
  color:var(--ink)!important;font:600 clamp(2.75rem,5.4vw,6rem)/1 var(--font-display)!important;
  letter-spacing:-.02em!important;text-transform:none!important;white-space:nowrap;
}
.shared-contact#contact .contact-one-line span{font:inherit!important;color:inherit!important;opacity:1!important;visibility:visible!important}
.shared-contact#contact .contact-linkedin{color:inherit;text-decoration:none}
.shared-contact#contact .contact-linkedin:hover,.shared-contact#contact .contact-linkedin:focus-visible{color:var(--accent-text,#D2470E)}
.shared-contact#contact .contact-linkedin:focus-visible{outline:2px solid currentColor;outline-offset:6px}
.shared-contact#contact .contact-one-line::after{display:none!important}
.shared-contact#contact .contact-hero-aside{
  grid-column:7/-1!important;grid-row:1!important;display:flex!important;flex-direction:row!important;
  align-items:center;align-self:end;justify-content:flex-end;gap:var(--space-4);flex-wrap:nowrap;
  margin:0 0 .2em!important;padding:0!important;
}
/* The email, right under "Let's talk." (user, 2026-11-08): a plain address you can read,
   copy or click. On narrower screens it stays under the heading and the socials and
   buttons drop below it. */
.shared-contact#contact .contact-email{grid-column:1/span 7;grid-row:2;margin:var(--space-4) 0 0;font:500 var(--type-lead)/1.3 var(--face-sans,sans-serif)}
.shared-contact#contact .contact-email a{color:var(--ink-70);text-decoration:none;border-bottom:1px solid var(--rule);transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.shared-contact#contact .contact-email a:hover,.shared-contact#contact .contact-email a:focus-visible{color:var(--accent-text);border-color:currentColor}
.shared-contact#contact .contact-email a:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* Every page ends the same way (user, 2026-11-04): the socials, then the two buttons. */
.contact-socials,.contact-actions{flex:none;display:flex;align-items:center;gap:var(--space-3)}
.contact-socials a{display:inline-flex;line-height:0;border-radius:var(--radius-sm)}
.contact-socials img{display:block;border-radius:var(--radius-sm)}
.contact-socials a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.shared-contact#contact .koi-pond{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
@media(min-width:1600px){.shared-contact#contact{--contact-gap:32px}}
@media(max-width:900px){.shared-contact#contact{--contact-gap:16px}}
@media(max-width:1100px){
 .shared-contact#contact .contact-one-line{grid-column:1/-1!important}
 .shared-contact#contact .contact-hero-aside{grid-column:1/-1!important;grid-row:3!important;justify-content:flex-start;margin:var(--space-5) 0 0!important}
 .shared-contact#contact .contact-email{grid-column:1/-1}
}
@media(max-width:760px){
 .shared-contact#contact .contact-hero-aside{flex-direction:column!important;align-items:flex-start;gap:var(--space-5);margin-top:calc(var(--space-5) + var(--space-4))!important}
 .contact-socials{gap:var(--space-2)}
 .contact-actions{flex-direction:column;align-items:flex-start}
}
@media(max-width:600px){.shared-contact#contact{min-height:440px!important}}
body:has(.case-nav)>.shared-contact{padding-bottom:calc(var(--site-bar-height) + 32px)!important}
body:has(.case-nav) .site-footer{display:none}
/* Spatial's index scrolls independently; its ending still shares this component. */
.sp-index .shared-contact#contact{padding-inline:0!important;scroll-margin-top:24px}

/* Shared action buttons, from the Work page. */
.tbtn {
  --chip-bg: var(--paper-2); --chip-ink: var(--ink); --chip-line: var(--nx-obj-line, var(--rule));
  display: inline-flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 46px; padding: 0 9px 0 20px; border-radius: 999px; border: 0;
  background: var(--nx-obj-light, var(--paper)); color: var(--ink);
  box-shadow: var(--nx-shadow, 0 6px 14px -4px rgba(0,0,0,.12)), inset 0 0 0 1px var(--nx-obj-line, var(--rule));
  font: 500 15px/1 var(--font-sans); letter-spacing: 0; text-transform: none; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tbtn.chip-first { padding: 0 20px 0 9px; }
.tbtn.is-solid { background: var(--ink); color: var(--paper); box-shadow: var(--nx-shadow, 0 6px 14px -4px rgba(0,0,0,.2)); --chip-bg: #FB6632; --chip-ink: #141414; --chip-line: transparent; }
.tbtn-chip {
  position: relative; flex: none; display: block;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--chip-line);
  transition: transform var(--dur-fast) var(--ease);
}
.tbtn-chip::before {
  content: ""; position: absolute; inset: 7px; background: var(--chip-ink);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.tbtn-chip[data-ico="down"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2v10M3 8l4 4 4-4'/%3E%3C/svg%3E"); }
.tbtn-chip[data-ico="download"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1.5v7.5M3.8 6l3.2 3.2L10.2 6M2.5 12.5h9'/%3E%3C/svg%3E"); }
.tbtn-chip[data-ico="out"]      { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l6-6M5 4h5v5'/%3E%3C/svg%3E"); }
.tbtn-chip[data-ico="next"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4'/%3E%3C/svg%3E"); }
.tbtn-chip[data-ico="back"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7H2M6 3L2 7l4 4'/%3E%3C/svg%3E"); }
.tbtn-chip[data-ico="mail"]     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1.5' y='3' width='11' height='8' rx='1.5'/%3E%3Cpath d='M2 4l5 3.6L12 4'/%3E%3C/svg%3E"); }
/* Hover (user video, 2026-10-26): nothing moves. The colours change -- the
   chip flips -- and the Frame toy's orange selection box, with its four
   square handles, is drawn round the button. Same on every toy button. */
.tbtn { position: relative; }
.tbtn::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px; pointer-events: none;
  border: 1.5px solid #FB6632; opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.tbtn::before {
  content: ""; position: absolute; inset: -8px; pointer-events: none; opacity: 0;
  --h: linear-gradient(#FB6632, #FB6632);
  background: var(--h) 0 0 / 7px 7px no-repeat, var(--h) 100% 0 / 7px 7px no-repeat,
              var(--h) 0 100% / 7px 7px no-repeat, var(--h) 100% 100% / 7px 7px no-repeat;
  transition: opacity var(--dur-fast) var(--ease);
}
.tbtn:focus-visible::after, .tbtn:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .tbtn:hover::after, .tbtn:hover::before { opacity: 1; }
  .tbtn:not(.is-solid):hover { background: var(--paper-2); --chip-bg: var(--ink); --chip-ink: var(--paper); --chip-line: transparent; }
  .tbtn.is-solid:hover { --chip-bg: var(--paper); --chip-ink: var(--ink); }
}
.tbtn:focus-visible { outline: none; }
/* Break out of Spatial's gallery gutter so this ending matches the Work page. */
.sp-index .shared-contact#contact{
 --contact-outset:4.86111vw;
 width:calc(100% + 2 * var(--contact-outset))!important;
 margin-inline:calc(-1 * var(--contact-outset))!important;
 padding-inline:var(--site-pad)!important;
}
@media(max-width:760px){.sp-index .shared-contact#contact{--contact-outset:22px}}