/* ENXM SidebarNav / GlideMenu and Kibo ThemeSwitcher adaptations.
   Source: ENXM Design System. See design-system.config.json and THIRD-PARTY-NOTICES.txt. */
:root{color-scheme:light;--page:oklch(98.5% .001 286.376);--canvas:oklch(96.1% .002 247.84);--surface:oklch(100% 0 0);--hover:oklch(97% .002 247.839);--hover-2:oklch(93.3% .003 247.86);--ink:oklch(24.7% .006 258.361);--ink-2:oklch(50.6% .01 264.477);--ink-3:oklch(69.5% .009 264.505);--line:oklch(94.6% .003 264.542);--line-strong:oklch(91.2% .005 258.326);--muted:var(--ink-2)}
:root.dark{color-scheme:dark;--page:oklch(20.9% .004 264.477);--canvas:oklch(23.1% .004 264.487);--surface:oklch(26% .006 271.191);--hover:oklch(28.9% .006 271.22);--hover-2:oklch(31.8% .007 274.747);--ink:oklch(96.4% .002 247.839);--ink-2:oklch(73.1% .008 260.731);--ink-3:oklch(54.1% .01 264.484);--line:oklch(30.8% .006 258.354);--line-strong:oklch(35.6% .007 264.474)}
.portfolio{background:var(--page);color:var(--ink)}
.portfolio .intro{width:450px;padding:32px;min-height:850px;gap:44px}
.portfolio .intro-top{gap:36px}
.portfolio .intro-copy h1{font-size:44px;line-height:1.08;letter-spacing:-.045em;white-space:pre-line}
.portfolio .description{font-family:MontrealRegular,Montreal,sans-serif;font-size:19px;line-height:1.4;margin-top:20px;color:var(--ink-2);max-width:370px}
.portfolio-nav{position:relative;display:flex;flex-direction:column;gap:4px;margin-top:28px;max-width:350px}
.sidebar-row{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 12px;border-radius:8px;color:var(--ink-2);font-size:19px;line-height:26px;transition:color 150ms,transform 150ms}
.sidebar-row svg{width:21px;height:21px;flex:none}
.sidebar-row[aria-current=page]{color:var(--ink);background:var(--hover-2)}
.portfolio-nav.is-gliding .sidebar-row[aria-current=page]{background:transparent}
.sidebar-row:active{transform:scale(.98)}
.sidebar-row:hover,.sidebar-row:focus-visible{color:var(--ink)}
.nav-glide{position:absolute;left:0;right:0;top:0;height:46px;border-radius:8px;background:var(--hover-2);opacity:0;pointer-events:none;transition:transform 220ms cubic-bezier(.23,1,.32,1),height 220ms cubic-bezier(.23,1,.32,1),opacity 150ms}
.theme-switcher{position:relative;isolation:isolate;display:flex;width:max-content;height:36px;margin:20px 0 0 12px;padding:4px;border-radius:99px;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.theme-switcher button{position:relative;width:28px;height:28px;padding:6px;background:transparent;color:var(--ink-2);border-radius:99px;z-index:1}
.theme-switcher button[aria-pressed=true]{color:var(--ink)}
.theme-switcher svg{display:block;width:16px;height:16px}
.theme-glide{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:99px;background:var(--hover);transition:transform 300ms cubic-bezier(.23,1,.32,1);pointer-events:none}
.portfolio .intro-bottom{gap:18px}
.portfolio .eyebrow{color:var(--ink-2);font-size:11px;letter-spacing:.02em}
.portfolio .client-logos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,34px);grid-auto-flow:row;gap:16px 28px;max-width:350px}
.client-logo{display:block;width:100%;height:34px;max-width:145px;background:var(--ink-3);mask-image:var(--client-logo);mask-size:contain;mask-position:left center;mask-repeat:no-repeat;-webkit-mask-image:var(--client-logo);-webkit-mask-size:contain;-webkit-mask-position:left center;-webkit-mask-repeat:no-repeat}
.portfolio .location{color:var(--ink-2);font-size:13px;line-height:1.4}
.portfolio .project{background:var(--canvas)}
.portfolio .project figcaption{background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--ink)}
.portfolio .wordmark text{fill:var(--ink)}
.portfolio .primary{background:var(--ink);color:var(--page)}
.portfolio .secondary{background:var(--hover-2);color:var(--ink)}
.portfolio .secondary:hover{background:var(--line-strong)}
.portfolio .services li,.portfolio .testimonials cite{color:var(--ink-2)}
.portfolio .testimonials blockquote,.portfolio .testimonial-logos{border-color:var(--line)}
.portfolio .glass-dialog{background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);border-color:var(--line)}
.portfolio .dialog-symbol{color:var(--ink-2);border-color:var(--line-strong)}
.portfolio .close-button{background:var(--hover);color:var(--ink)}
.category-empty{min-height:calc(100svh - 64px);background:var(--canvas);border:1px solid var(--line);border-radius:8px;padding:56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:20px}
.category-empty h2{font-size:clamp(28px,3.5vw,52px);max-width:520px;line-height:1.06;letter-spacing:-.035em;font-weight:500}
.category-empty>p:not(.eyebrow){font-size:18px;line-height:1.5;color:var(--ink-2);max-width:360px}
@media(min-width:1200px) and (max-height:880px){.portfolio .intro{position:relative;height:auto;min-height:calc(100svh - 32px)}}
@media(max-width:1199.98px){.portfolio .intro{width:100%;padding:28px 24px;min-height:0;height:auto;gap:32px}.portfolio .intro-copy{max-width:650px}.portfolio .intro-copy h1{font-size:44px}.portfolio .description{max-width:520px}.portfolio .intro-bottom{display:flex}.portfolio .client-logos{max-width:650px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,30px);gap:18px 24px}.client-logo{height:30px;max-width:130px}.portfolio-nav{max-width:400px;margin-top:24px}.category-empty{min-height:50svh;padding:36px}}
@media(max-width:480px){.portfolio .intro{padding:24px 20px}.portfolio .intro-copy h1{font-size:clamp(30px,8.5vw,38px)}.portfolio .description{font-size:18px}.portfolio .client-logos{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,28px);gap:18px 28px}.client-logo{height:28px;max-width:140px}.sidebar-row{font-size:19px}.category-empty{padding:28px}}
@media(prefers-reduced-motion:reduce){.nav-glide,.theme-glide,.sidebar-row{transition:none}}

.portfolio .client-logos{grid-template-rows:repeat(4,42px)}.client-logo{height:42px}
@media(max-width:1199.98px) and (min-width:481px){.portfolio .client-logos{grid-template-rows:repeat(2,42px)}}

/* Client marks keep their own proportions and wrap with a consistent gap. */
.portfolio .client-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;width:100%;max-width:386px}
.portfolio .client-logo{display:flex;align-items:center;gap:9px;flex:0 0 auto;width:120px;height:52px;max-width:none;background:none;mask:none;-webkit-mask:none;color:var(--ink-3)}
.client-logo-mark{display:block;width:100%;height:100%;background:currentColor;mask:var(--client-logo) left center/contain no-repeat;-webkit-mask:var(--client-logo) left center/contain no-repeat}
.client-logo-name{font-size:24px;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.portfolio .client-logo[aria-label="Ubiquiti"]{width:140px}
.client-logo[aria-label="Ubiquiti"] .client-logo-mark{width:29px;height:30px;flex:none}
.portfolio .client-logo[aria-label="HSBC"]{width:120px;height:34px}
.portfolio .client-logo[aria-label="ThinkHuge"]{width:132px;height:30px}
.portfolio .client-logo[aria-label="btcbit.net"]{width:110px;height:30px}
.portfolio .client-logo[aria-label="Private Wealth Systems"]{width:94px;height:52px}
.portfolio .client-logo[aria-label="Babb"]{width:90px;height:34px}
.portfolio .client-logo[aria-label="UXDA"]{width:116px;height:34px}
.portfolio .client-logo[aria-label="Pragmatic Play"]{width:112px;height:52px}
@media(max-width:1199.98px) and (min-width:481px){.portfolio .client-logos{max-width:650px}}
@media(max-width:480px){.portfolio .client-logos{column-gap:22px;row-gap:12px}}

.outgoing-links{border-top:1px solid var(--line-strong);margin-top:12px;padding-top:12px;display:flex;flex-direction:column;gap:4px}
.outgoing-link .external-arrow{margin-left:auto;color:var(--ink-3)}
@media(max-width:1199.98px){
 /* Must follow the responsive padding shorthands: reserve the fixed header. */
 .portfolio .intro{padding-top:calc(104px + env(safe-area-inset-top,0px))}
 .portfolio .intro-brand-row{top:env(safe-area-inset-top,0px)}
 .portfolio.header-scrolled .intro-brand-row{top:calc(12px + env(safe-area-inset-top,0px))}
 .portfolio>.portfolio-nav{top:calc(88px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 104px - env(safe-area-inset-top,0px));overflow-y:auto}
 .portfolio.header-scrolled>.portfolio-nav{top:calc(80px + env(safe-area-inset-top,0px))}
 .outgoing-links{margin-top:4px;padding-top:4px;gap:0}
}

.portfolio .outgoing-links{border-top:0;margin-top:32px;padding-top:0}
.outgoing-links-label{margin:0 12px 8px}
@media(max-width:1199.98px){
 .portfolio .outgoing-links{border-top:1px solid var(--line-strong);margin-top:8px;padding-top:8px}
 .outgoing-links-label{display:none}
}