@font-face {
  font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/hub-assets/barlow-condensed-800-v100.woff2") format("woff2");
}
@font-face {
  font-family: "Mansalva"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/hub-assets/mansalva-latin-v16.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --display: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ink: #102b40;
  --row-height: 116px;
  --card-radius: 26px;
}
* { box-sizing: border-box; }
html { background: #f3f7fb; }
body {
  min-width: 240px; min-height: 100vh; min-height: 100svh; margin: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
  padding: 36px max(32px, env(safe-area-inset-right)) 52px max(32px, env(safe-area-inset-left));
  color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% 0, #fff 16%, #ffffff00 70%),
    linear-gradient(145deg, #f7fafc, #edf4fa 65%, #fafcfe);
}
.hub { width: 100%; max-width: 760px; min-width: 0; justify-self: center; }
.signature { width: min(64%, 330px); margin: 0 auto 34px; font-size: 0; }
.signature img {
  display: block; width: 100%; height: auto;
  /* Optical ink centre of the original 556px-wide signature. */
  transform: translateX(11.35%);
}
.hub-links {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr;
  gap: 14px; padding: 0; margin: 0; list-style: none;
}
.hub-links > li { min-width: 0; border-radius: var(--card-radius); box-shadow: 0 7px 18px #10203014; }
.hub-link {
  --tint: 36, 125, 191; --accent: #075596; --badge-fill: #075596;
  --tilt-x: 0deg; --tilt-y: 0deg; --light-x: 28%; --light-y: 50%;
  --art-speed: 9s; --art-phase: -2s;
  display: grid; grid-template-columns: 68px minmax(0, 1fr) 40px; align-items: center; gap: 24px;
  position: relative; isolation: isolate; height: 100%; min-height: var(--row-height); padding: 23px 26px;
  overflow: clip;
  -webkit-clip-path: inset(0 round var(--card-radius));
  clip-path: inset(0 round var(--card-radius));
  border: 1px solid rgba(var(--tint), .55); border-radius: var(--card-radius);
  background: #11151d;
  box-shadow: inset 0 1px 0 #ffffff22, inset 0 -1px 0 #00000066;
  color: #fff; text-decoration: none; -webkit-tap-highlight-color: #ffffff14;
  touch-action: manipulation;
  transform: none;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .25s ease;
}
.hub-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  -webkit-clip-path: inset(0 round var(--card-radius));
  clip-path: inset(0 round var(--card-radius));
  background: radial-gradient(ellipse at var(--light-x) var(--light-y), rgba(var(--tint), .38), transparent 75%);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.card-art {
  position: absolute; inset: 0; z-index: -2; border-radius: inherit; overflow: clip; pointer-events: none;
  -webkit-clip-path: inset(0 round var(--card-radius));
  clip-path: inset(0 round var(--card-radius));
  background: linear-gradient(115deg, rgba(var(--tint), .18), #11151d 48%, rgba(var(--tint), .35));
}
.card-art::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #10121b99 5%, #10121bd9 30%, #10121b9c 65%, #10121b22);
}
.card-aura, .card-pattern, .card-sparks { position: absolute; display: block; pointer-events: none; }
.card-aura {
  inset: -70% -15%;
  background: radial-gradient(ellipse at 80% 30%, rgba(var(--tint), .95), transparent 42%),
    radial-gradient(ellipse at 25% 90%, rgba(var(--tint), .6), transparent 38%);
  animation: namecard-aura var(--art-speed) ease-in-out var(--art-phase) infinite alternate paused;
}
.card-pattern {
  inset: -30% -14% -30% 45%; opacity: .8;
  background: repeating-linear-gradient(125deg, transparent 0 44px, rgba(var(--tint), .7) 45px 47px, #ffffff30 48px 49px, transparent 50px 76px);
  transform: translateX(-4%);
  animation: namecard-pattern 7s ease-in-out var(--art-phase) infinite alternate paused;
}
.card-sparks {
  inset: 0 0 0 20%; opacity: .4;
  background: radial-gradient(circle at 60% 25%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 87% 62%, #fff 0 1.5px, transparent 3px),
    radial-gradient(circle at 36% 80%, rgba(var(--tint), 1) 0 2px, transparent 4px),
    radial-gradient(circle at 75% 88%, #fff 0 1px, transparent 2px);
  animation: namecard-sparks 4s ease-in-out var(--art-phase) infinite alternate paused;
}
.menu-shine {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: clip; pointer-events: none;
  -webkit-clip-path: inset(0 round var(--card-radius));
  clip-path: inset(0 round var(--card-radius));
}
.menu-shine::after {
  content: ""; position: absolute; inset: -100% -60%; opacity: 0;
  background: linear-gradient(110deg, transparent 39%, #ffffff08 43%, #ffffff30 50%, #ffffff08 57%, transparent 61%);
  transform: translateX(-70%);
  animation: menu-sheen 5.8s ease-in-out var(--art-phase) infinite paused;
}
.hub-link--spanish { --tint: 193, 84, 66; --accent: #9a4740; --art-phase: -3.5s; --art-speed: 7s; }
.hub-link--workaway { --tint: 40, 142, 124; --accent: #28766a; --art-phase: -5s; --art-speed: 12s; }
.hub-link--beats { --tint: 119, 91, 176; --accent: #705399; --art-phase: -1.3s; --art-speed: 6s; }
.hub-link--academy { --tint: 52, 66, 56; --accent: #344238; --art-phase: -4s; --art-speed: 10s; }
.hub-link--mostwanted { --tint: 57, 62, 70; --accent: #292e36; --badge-fill: #16191e; --art-phase: -2.8s; }
.hub-link--academy .card-pattern {
  background: repeating-linear-gradient(135deg, transparent 0 40px, #d6ead730 41px 42px, transparent 43px 83px),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(var(--tint), .75) 41px 43px, transparent 44px 83px);
}
.hub-link--beats .card-pattern {
  inset: 10% -5% 10% 48%; transform-origin: 50% 65%;
  background: repeating-linear-gradient(90deg, rgba(var(--tint), .85) 0 4px, transparent 5px 17px);
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 70%);
  animation-name: namecard-wave; animation-duration: 2.6s;
}
.hub-link--spanish .card-pattern {
  inset: -130% -8% -130% 44%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 22deg, rgba(var(--tint), .8) 23deg 25deg, #fff2 26deg, transparent 27deg 45deg);
  animation-name: namecard-sun; animation-duration: 24s; animation-timing-function: linear; animation-direction: normal;
}
.hub-link--workaway .card-pattern {
  inset: -130% -18% -130% 42%; border-radius: 50%;
  background: repeating-radial-gradient(ellipse at 70% 50%, transparent 0 20px, rgba(var(--tint), .75) 21px 22px, #ffffff24 23px, transparent 24px 37px);
  animation-duration: 11s;
}
.hub-link--mostwanted .card-pattern {
  background: repeating-linear-gradient(125deg, transparent 0 55px, #ffffff2b 56px 58px, transparent 59px 82px, #ffffff0a 83px 105px);
  animation-duration: 10s;
}
.menu-badge {
  position: relative; isolation: isolate;
  display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px;
  border: 1px solid #ffffff70; background: #fff;
  box-shadow: 0 6px 16px #0005, 0 0 0 3px #10151dcc, 0 0 0 4px rgba(var(--tint), .65);
  transition: transform .6s cubic-bezier(.2, 1.6, .35, 1), box-shadow .35s ease;
}
.menu-badge::before {
  content: ""; position: absolute; inset: -7px; border-radius: 24px; z-index: -1;
  border: 1px solid rgba(var(--tint), .95); opacity: .35;
  box-shadow: 0 0 14px rgba(var(--tint), .5), inset 0 0 10px rgba(var(--tint), .15);
  animation: namecard-avatar 3s ease-in-out var(--art-phase) infinite alternate paused;
}
.menu-badge > * { grid-area: 1 / 1; }
.menu-fallback { display: block; font: 38px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.menu-favicon { display: none; width: 54px; height: 54px; object-fit: contain; border-radius: 11px; }
.has-site-icon .menu-favicon { display: block; }
.has-site-icon .menu-fallback { display: none; }
.has-site-icon .menu-badge { background: var(--badge-fill); }
.hub-link--mostwanted .menu-badge { background: #000; }
.hub-link--mostwanted .menu-fallback { color: #fff; font: 800 30px/1 var(--display); }
.menu-copy { display: grid; gap: 7px; min-width: 0; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.hub-link-label { font: 800 34px/1.08 var(--display); letter-spacing: -.35px; text-wrap: pretty; }
.menu-domain { color: #d4dce6; font: 500 12px/1.4 var(--sans); overflow-wrap: anywhere; }
.menu-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid #ffffff2e; background: #ffffff0d; color: #fff;
  transition: transform .5s cubic-bezier(.2, 1.6, .35, 1), background .25s ease, color .25s ease, box-shadow .25s ease;
}
.menu-arrow svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.business-section { margin-top: 44px; }
.business-heading { margin: 0 0 24px; text-align: center; }
.business-heading h2 { margin: 0; font: 400 clamp(32px, 5.2vw, 40px)/1.25 "Mansalva", "Segoe Print", cursive; letter-spacing: -.7px; }
.business-heading p { margin: 8px 0 0; color: #536475; font: 800 20px/1.3 var(--display); }
.motion-toggle {
  display: block; min-height: 44px; margin: 18px auto 0; padding: 10px 16px;
  border: 0; border-radius: 10px; background: transparent; color: #536475;
  font: 600 13px/1.4 var(--sans); cursor: pointer;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: var(--ink); background: #e6edf5; }
.motion-toggle:focus-visible { outline: 3px solid #176b9e; outline-offset: 2px; }
.motion-toggle:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .hub-link:hover {
    transform: perspective(1100px) translateY(-2px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.006);
  }
  .hub-link.is-pointing { transition-duration: .14s, .35s, .25s; }
}
.hub-link.is-animated { border-color: rgba(var(--tint), .95); box-shadow: inset 0 1px 0 #ffffff33, inset 0 -1px 0 #00000066; }
.hub-link.is-animated::before { opacity: .65; }
.hub-link.is-animated .card-art > *, .hub-link.is-animated .menu-shine::after,
.hub-link.is-animated .menu-badge::before { animation-play-state: running; }
.hub-link.is-animated .menu-badge { transform: translateY(-1px) scale(1.035); }
.hub-link.is-animated .menu-arrow { transform: translateX(2px); background: rgba(var(--tint), .5); border-color: #ffffff55; box-shadow: 0 0 14px rgba(var(--tint), .3); }
.menu-arrow svg { animation: menu-arrow-launch 3.2s ease-in-out var(--art-phase) infinite paused; }
.hub-link.is-animated .menu-arrow svg { animation-play-state: running; }
.hub-link:focus-visible { outline: 3px solid #7ac7ff; outline-offset: -5px; }
.hub-link:focus-visible::before, .hub-link.is-pressed::before { opacity: 1; }
.hub-link:active, .hub-link.is-pressed { transform: perspective(1100px) translateY(1px) scale(.985); transition-duration: .12s; }
.hub-link.is-pressed .menu-badge { transform: rotate(4deg) scale(.96); }
@keyframes menu-sheen {
  0%, 18% { opacity: 0; transform: translateX(-70%); }
  30% { opacity: .65; }
  65%, 100% { opacity: 0; transform: translateX(70%); }
}
@keyframes menu-arrow-launch {
  0%, 20%, 60%, 100% { transform: translateX(0); }
  38% { transform: translateX(3px); }
  48% { transform: translateX(-1px); }
}
@keyframes namecard-aura {
  from { transform: translate3d(-7%, -6%, 0) rotate(-6deg) scale(.95); opacity: .6; }
  to { transform: translate3d(8%, 8%, 0) rotate(8deg) scale(1.12); opacity: 1; }
}
@keyframes namecard-pattern {
  from { transform: translate3d(-5%, -5%, 0) scale(1.02); }
  to { transform: translate3d(6%, 7%, 0) scale(1.13); }
}
@keyframes namecard-sparks {
  from { transform: translate3d(-8px, 8px, 0); opacity: .2; }
  to { transform: translate3d(12px, -7px, 0); opacity: .8; }
}
@keyframes namecard-avatar {
  from { transform: scale(.97); opacity: .3; }
  to { transform: scale(1.04); opacity: .9; }
}
@keyframes namecard-wave {
  from { transform: translateX(-2%) scaleY(.55); opacity: .45; }
  to { transform: translateX(4%) scaleY(1.25); opacity: 1; }
}
@keyframes namecard-sun {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 760px) {
  body { padding: 30px max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left)); }
  .signature { width: min(65%, 290px); margin-bottom: 30px; }
  .hub-link { grid-template-columns: 60px minmax(0, 1fr) 34px; gap: 18px; padding: 20px; }
  .menu-badge { width: 60px; height: 60px; border-radius: 16px; }
  .menu-favicon { width: 48px; height: 48px; }
  .hub-link-label { font-size: 30px; }
  .menu-arrow { width: 34px; height: 34px; }
  .business-section { margin-top: 38px; }
}
@media (max-width: 480px) {
  :root { --row-height: 124px; --card-radius: 24px; }
  body { padding: max(26px, env(safe-area-inset-top)) max(17px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(17px, env(safe-area-inset-left)); }
  .signature { width: min(70%, 260px); margin-bottom: 28px; }
  .hub-links { gap: 12px; }
  .hub-link { grid-template-columns: 54px minmax(0, 1fr) 28px; gap: 14px; padding: 18px 16px; }
  .menu-badge { width: 54px; height: 54px; border-radius: 15px; }
  .menu-favicon { width: 44px; height: 44px; border-radius: 10px; }
  .menu-fallback { font-size: 32px; }
  .hub-link-label { font-size: 28px; letter-spacing: -.25px; }
  .menu-domain { font-size: 11px; }
  .menu-arrow { width: 28px; height: 28px; }
  .menu-arrow svg { width: 17px; height: 17px; }
  .business-heading { margin-bottom: 22px; }
  .business-heading p { font-size: 19px; }
}
@media (max-width: 350px) {
  .hub-link { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; padding: 16px 13px; }
  .menu-badge { width: 44px; height: 44px; border-radius: 12px; }
  .menu-favicon { width: 36px; height: 36px; border-radius: 8px; }
  .menu-arrow { width: 24px; height: 24px; }
  .hub-link-label { font-size: 26px; }
  .menu-domain { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-link, .hub-link::before, .menu-badge, .menu-copy, .menu-arrow { transition: none !important; }
  .hub-link, .hub-link .menu-badge, .hub-link .menu-copy, .hub-link .menu-arrow { transform: none !important; }
  .menu-shine { display: none; }
  .hub-link .menu-arrow svg { animation: none !important; }
  .card-art > *, .menu-badge::before { animation: none !important; }
}
@media (forced-colors: active) {
  .hub-link, .menu-badge, .menu-arrow { border: 2px solid LinkText; }
  .hub-link::before, .menu-shine, .card-art, .menu-badge::before { display: none; }
  .hub-link:focus-visible { outline-color: Highlight; }
  .hub-link, .menu-domain, .menu-arrow { color: LinkText; }
}